yijianbao_user_uniapp/pages_im/pages/common/userCardMore/index.vue

<template>
  <view class="user_more_container">
    <custom-nav-bar title="好友设置" />

    <view class="info_row">
      <user-info-row-item v-if="isFriend" @click="toMark" lable="设置备注" arrow />
      <user-info-row-item @click="toMore" lable="个人资料" arrow />
      <user-info-row-item @click="toShare" lable="推荐给朋友" arrow />
    </view>

    <view class="info_row">
      <user-info-row-item lable="加入黑名单" arrow>
        <u-switch
          asyncChange
          :loading="blackLoading"
          size="20"
          :value="isBlacked"
          @change="change"
        ></u-switch>
      </user-info-row-item>
    </view>

    <view v-if="isFriend" class="info_row">
      <u-button
        @click="() => (showConfirm = true)"
        type="error"
        plain
        text="解除好友关系"
      ></u-button>
    </view>
    <u-toast ref="uToast"></u-toast>
    <u-modal
      :content="`确定要解除与${sourceInfo.nickname}的好友关系吗？`"
      asyncClose
      :show="showConfirm"
      showCancelButton
      @confirm="confirmRemove"
      @cancel="() => (showConfirm = false)"
    ></u-modal>
  </view>
</template>

<script>
import IMSDK from "openim-uniapp-polyfill";
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import UserInfoRowItem from "../userCard/components/UserInfoRowItem.vue";
import { ContactChooseTypes } from "../../../constant";
export default {
  components: {
    CustomNavBar,
    UserInfoRowItem,
  },
  data() {
    return {
      blackLoading: false,
      sourceInfo: {},
      showConfirm: false,
    };
  },
  computed: {
    isFriend() {
      return (
        this.$store.getters.storeFriendList.findIndex(
          (friend) => friend.userID === this.sourceInfo.userID,
        ) !== -1
      );
    },
    isBlacked() {
      return (
        this.$store.getters.storeBlackList.findIndex(
          (black) => black.userID === this.sourceInfo.userID,
        ) !== -1
      );
    },
  },
  onLoad(options) {
    const { sourceInfo } = options;
    this.sourceInfo = JSON.parse(sourceInfo);
  },
  methods: {
    change(isBlack) {
      this.blackLoading = true;
      if (isBlack) {
        IMSDK.asyncApi(IMSDK.IMMethods.AddBlack, IMSDK.uuid(), {
          toUserID: this.sourceInfo.userID,
          ex: "",
        })
          .catch(() => this.showToast("操作失败"))
          .finally(() => (this.blackLoading = false));
        return;
      }
      IMSDK.asyncApi(
        IMSDK.IMMethods.RemoveBlack,
        IMSDK.uuid(),
        this.sourceInfo.userID
      )
        .catch(() => this.showToast("操作失败"))
        .finally(() => (this.blackLoading = false));
    },
    confirmRemove() {
      IMSDK.asyncApi(
        IMSDK.IMMethods.DeleteFriend,
        IMSDK.uuid(),
        this.sourceInfo.userID,
      )
        .then(() => this.showToast("操作成功"))
        .catch(() => this.showToast("操作失败"))
        .finally(() => (this.showConfirm = false));
    },
    toMore() {
      uni.navigateTo({
        url: `/pages_im/pages/common/detailsFileds/index?sourceInfo=${JSON.stringify(
          this.sourceInfo,
        )}`,
      });
    },
    toMark() {
      const friendInfo = this.$store.getters.storeFriendList.find(
          (friend) => friend.userID === this.sourceInfo.userID,
        )
      uni.navigateTo({
        url: `/pages_im/pages/common/markOrIDPage/index?isRemark=true&sourceInfo=${JSON.stringify(
          friendInfo,
        )}`,
      });
    },
    toShare() {
      uni.navigateTo({
        url: `/pages_im/pages/common/contactChoose/index?type=${
          ContactChooseTypes.ShareCard
        }&cardInfo=${JSON.stringify(this.sourceInfo)}`,
      });
    },
    showToast(message) {
      this.$refs.uToast.show({
        message,
      });
    },
  },
};
</script>

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

  .info_row {
    background-color: #fff;
    margin: 24rpx;
    border-radius: 6px;
    overflow: hidden;

    .u-button {
      border: none;
    }
  }
}
</style>