yizhizan-h5/package/blackList/blackList.vue

<template>
  <view class="page-box">
    <navBar title="黑名单" color="#000" />
    <view class="page-content">
      <view v-if="list.length > 0" class="list flex justify-center">
        <view class="list-box">
          <block v-for="(item, index) in list" :key="index">
            <view class="list-box-item flex align-center justify-between">
              <view class="list-box-item-l flex align-center">
                <image
                  :src="item.user ? item.user.avatar : '../../static/logo.png'"
                  mode=""
                ></image>
                <text>{{ item.user.userName }}</text>
              </view>
              <view
                class="list-box-item-r flex justify-center align-center"
                @click="delShield(item.shieldCompanyId)"
              >
                移除
              </view>
            </view>
            <view class="list-box-line"></view>
          </block>
        </view>
      </view>
      <empty v-if="list.length == 0" />
    </view>
  </view>
</template>

<script>
import empty from "../../components/empty.vue";
import navBar from "@/components/nav-bar/index.vue";

export default {
  components: {
    empty,
    navBar,
  },
  data() {
    return {
      page: 1,
      limit: 10,
      totalPage: "",
      list: [],
    };
  },
  onLoad() {
    this.getList();
  },
  onReachBottom() {
    if (this.page < this.totalPage) {
      this.page += 1;
      this.getList();
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    this.getList();
  },
  methods: {
    //移除黑名单
    delShield(shieldCompanyId) {
      let that = this;
      let data = {
        shieldCompanyId: shieldCompanyId,
      };
      that.$Request.postT("/app/shieldCompany/deleteShieldCompany", data).then((res) => {
        if (res.code == 0) {
          uni.showToast({
            title: "移除黑名单成功",
            duration: 1500,
          });
          setTimeout(() => {
            that.getList();
          }, 1500);
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    //获取企业拉黑的用户名单
    getList() {
      let data = {
        page: this.page,
        limit: this.limit,
        // userId:uni.getStorageSync('userId'),
        companyId: uni.getStorageSync("companyId"),
      };
      this.$Request.getT("/app/shieldCompany/selectShieldList", data).then((res) => {
        uni.stopPullDownRefresh();
        if (res.code == 0) {
          this.totalPage = res.data.totalPage;
          if (this.page == 1) {
            this.list = res.data.list;
          } else {
            this.list = [...this.list, ...res.data.list];
          }
        } else {
          // this.list = []
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
  .page-box {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .page-content {
      flex: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
.list {
  width: 100%;
  .list-box {
    width: 686rpx;
    .list-box-line {
      width: 100%;
      border: 1rpx solid #f2f2f2;
      margin-top: 20rpx;
    }
    .list-box-item {
      width: 100%;
      margin-top: 50rpx;
    }
    .list-box-item-l {
      image {
        width: 70rpx;
        height: 70rpx;
      }
      text {
        margin-left: 20rpx;
        color: #1e1e1e;
        font-size: 32rpx;
        font-weight: bold;
      }
    }
    .list-box-item-r {
      width: 102rpx;
      height: 50rpx;
      background: #016bf6;
      border-radius: 8rpx;
      font-size: 24rpx;
      color: #ffffff;
      font-weight: 500;
    }
  }
}
</style>