FarmingWx_V2_message/pages/group/person.vue

<template>
  <view>
    <template v-if="!isShowContactInfo">
      <view
        class="item"
        v-for="(item, index) in contactListMap.friendApplicationList.list"
        :key="index"
      >
        <view>
          <image :src="item.avatar" class="img" />
        </view>
        <view
          class="right"
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
          "
        >
          <text class="name">{{ item.nick }}</text>
          <view
            @click="ty(item)"
            style="
              width: 114rpx;
              height: 54rpx;
              background: linear-gradient(275deg, #01cf6c 0%, #07e278 100%);
              border-radius: 28rpx;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              color: white;
            "
            >同意</view
          >
        </view>
      </view>
    </template>
    <div
      v-else
      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>
</template>

<script setup lang="ts">
import TUIChatEngine, {
  TUITranslateService,
  TUIFriendService,
} from "@tencentcloud/chat-uikit-engine";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { Toast, TOAST_TYPE } from "../../TUIKit/components/common/Toast/index";
import { ref, computed, onMounted, onUnmounted, provide } from "../../TUIKit/adapter-vue";
const contactListMap = ref();
const isShowContactInfo = ref(false);
onLoad((options) => {
  contactListMap.value = JSON.parse(options.list);
  console.log(contactListMap.value);
});
const ty = (record) => {
  TUIFriendService.acceptFriendApplication({
    userID: record.To_Account,
    remark: record.Remark,
    type: TUIChatEngine.TYPES.SNS_APPLICATION_AGREE_AND_ADD,
  })
    .then(() => {
      Toast({
        message: TUITranslateService.t("已同意申请"),
        type: TOAST_TYPE.SUCCESS,
      });
    })
    .catch((error) => {
      Toast({
        message: TUITranslateService.t(error),
        type: TOAST_TYPE.ERROR,
      });
    });
};
</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>