yijianbao_user_uniapp/pages_im/pages/profile/blockList/index.vue

<template>
  <view class="page_container">
    <custom-nav-bar title="通讯录黑名单" />

    <u-list v-if="blockList.length > 0" class="block_list" height="1">
      <u-list-item v-for="item in blockList" :key="item.userID">
        <user-item :item="item">
          <view @click="tryRemove(item)" class="user_action" slot="action">
            移除
          </view>
        </user-item>
      </u-list-item>
    </u-list>

    <view v-else class="empty">
      <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/block_empty.png"></image>
      <text class="empty_text">暂无黑名单</text>
    </view>
    <!-- <u-empty icon="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/block_empty.png" v-else text="暂无黑名单" iconSize="20" /> -->

    <u-modal
      width="500rpx"
      showCancelButton
      :show="showComfirm"
      @confirm="confirm"
      @cancel="closeModal"
      content="确定将用户移除黑名单吗？"
      :asyncClose="true"
    ></u-modal>
  </view>
</template>

<script>
import IMSDK from "openim-uniapp-polyfill";
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import MyAvatar from "../../../components/MyAvatar/index.vue";
import UserItem from "../../../components/UserItem/index.vue";
export default {
  components: {
    CustomNavBar,
    MyAvatar,
    UserItem,
  },
  data() {
    return {
      showComfirm: false,
      selectedUser: {},
    };
  },
  computed: {
    blockList() {
      return this.$store.getters.storeBlackList;
    },
  },
  methods: {
    tryRemove(item) {
      this.selectedUser = {
        ...item,
      };
      this.showComfirm = true;
    },
    confirm() {
      IMSDK.asyncApi(
        IMSDK.IMMethods.RemoveBlack,
        IMSDK.uuid(),
        this.selectedUser.userID,
      )
        .then(() => uni.$u.toast("移除成功"))
        .catch(() => uni.$u.toast("移除失败"))
        .finally(() => (this.showComfirm = false));
    },
    closeModal() {
      this.showComfirm = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.page_container {
  @include colBox(false);
  height: 100vh;
  background-color: #f8f8f8;

  .block_list {
    flex: 1;
    margin-top: 24rpx;

    .user_item {
      background-color: #fff;
    }

    .user_action {
      position: absolute;
      right: 44rpx;
      font-size: 28rpx;
      color: $uni-color-primary;
    }
  }

  .empty {
    @include centerBox();
    flex-direction: column;
    margin-top: 25vh !important;

    &_text {
      margin-top: 26rpx;
      color: #8e9ab0;
    }

    image {
      width: 237rpx;
      height: 244rpx;
    }
  }
}
</style>