FarmingWx_V2_message/pages/group/black-list.vue

<template>
  <view>
    <template v-if="!isShowContactInfo">
      <view
        class="item"
        v-for="(item, index) in contactListMap.blackList.list"
        :key="index"
        @click="selectItem(item)"
      >
        <view>
          <image :src="item.avatar" class="img" />
        </view>
        <view class="right">
          <text class="name">{{ item.nick }}</text>
        </view>
      </view>
    </template>
    <div
      v-if="contactListMap.blackList.list.length < 1"
      style="
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 90vh;
        justify-content: center;
      "
    >
      <img src="@/static/empaty.jpg" style="width: 200px; height: 150px" />
      <span style="margin-top: 20px"> 暂无黑名单~</span>
    </div>
    <view v-if="isShowContactInfo">
      <view class="item">
        <view>
          <image :src="detailObj.avatar" class="img" />
        </view>
        <view class="right">
          <view class="name">{{ detailObj.nick }}</view>
          <view class="id">ID:{{ detailObj.userID }}</view>
        </view>
      </view>
      <view
        style="
          margin-top: 20px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          padding: 0px 20px;
        "
      >
        加入黑名单<u-switch v-model="switchValue" @change="change" size="60"></u-switch>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  TUITranslateService,
  TUIStore,
  StoreName,
  IGroupModel,
  TUIFriendService,
  Friend,
  FriendApplication,
  TUIUserService,
  TUIConversationService,
} from "@tencentcloud/chat-uikit-engine";
import ContactInfo from "../../TUIKit/components/TUIContact/contact-info/index.vue";
import { isPC, isUniFrameWork } from "../../TUIKit/utils/env";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  IContactList,
  IContactSearchResult,
  IBlackListUserItem,
  IUserStatus,
  IUserStatusMap,
  IContactInfoType,
} from "../../TUIKit/interface";
import { TUIGlobal } from "@tencentcloud/universal-api";
import { Toast, TOAST_TYPE } from "../../TUIKit/components/common/Toast/index";
import { ref, computed, onMounted, onUnmounted, provide } from "../../TUIKit/adapter-vue";
const currentContactInfo = ref();
const contactListMap = ref();
const isShowContactInfo = ref(false);
const switchValue = ref(true);
onLoad((options) => {
  contactListMap.value = JSON.parse(options.list);
  console.log(contactListMap.value);
});

const change = () => {
  TUIUserService.removeFromBlacklist({
    userIDList: [detailObj.value.userID],
  })
    .then(() => {
      TUIGlobal?.navigateTo({
        url: "/TUIKit/components/TUIContact/index",
      });
      isShowContactInfo.value = !isShowContactInfo.value;
    })
    .catch((error: any) => {
      Toast({
        message: TUITranslateService.t("TUIContact.移除黑名单失败"),
        type: TOAST_TYPE.ERROR,
      });
    });
};
const detailObj = ref();
const selectItem = (record) => {
  isShowContactInfo.value = !isShowContactInfo.value;
  detailObj.value = record;
};
</script>

<style lang="scss" scope>
.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #f1f1f1;
  .right {
    margin-left: 10px;
    .name {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
    }
  }

  .img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
</style>