yogaApp/pages/chatbox/im-user-info.vue

<template>
  <view class="page">
    <view class="body">
      <!-- 头像 + 名称 -->
      <view class="user-card">
        <image class="avatar" :src="userInfo.headImage || defaultAvatar" mode="aspectFill"></image>
        <view class="nickname">{{ displayName }}</view>
        <view class="uid">ID：{{ userInfo.id || userInfo.userId || '-' }}</view>
      </view>

      <!-- 黑名单开关行 仿微信 -->
<!--      <view class="black-row">-->
<!--        <text class="black-label">加入黑名单</text>-->
<!--        <switch-->
<!--            :checked="isBlacked"-->
<!--            active-color="#00a89b"-->
<!--            @change="onBlackSwitchChange"-->
<!--        />-->
<!--      </view>-->

      <view class="black-row">
        <text class="black-label">加入黑名单</text>
        <view class="custom-switch" :class="{ on: isBlacked }" @tap="handleSwitchTap">
          <view class="switch-dot"></view>
        </view>
      </view>

      <!-- 发消息按钮 -->
      <view class="actions">
        <button class="btn-chat" @tap="onSendMessage">发消息</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
      userId: '',
      userInfo: {},
      isBlacked: false,
      defaultAvatar: '/static/image/kff.png'
    }
  },
  computed: {
    ...mapGetters('chatStore', ['findChatIdx']),
    displayName() {
      if (!this.userInfo) return ''
      return this.userInfo.remarkNickName || this.userInfo.nickName || this.userInfo.showNickName || '未命名'
    }
  },
  onLoad(options) {
    this.userId = options.id || ''
    if (this.userId) {
      this.loadFriend()
      this.checkBlack()
    }
  },
  methods: {
    ...mapActions('chatStore', ['openChat']),
    async loadFriend() {
      try {
        const { data: res } = await uni.$http.get('/api/friend/find/' + this.userId)
        if (res.data) {
          this.userInfo = res.data
        }
      } catch (e) {
        console.error('加载好友信息失败', e)
      }
    },
    async checkBlack() {
      try {
        const { data: res } = await uni.$http.post(`/api/blacklist/check?targetUid=${this.userId}`)
        if (res && res.data) {
          console.log('查询黑名单状态', res.data)
          this.isBlacked = !!res.data.meBlackTarget
        }
      } catch (e) {
        console.error('查询黑名单状态失败', e)
      }
    },
    /**
     * switch点击，不直接改状态，弹出确认弹窗
     */
    onBlackSwitchChange(e) {
      // e.detail.value 是用户想要切换到的目标状态
      const targetStatus = e.detail.value
      const title = targetStatus ? '加入黑名单' : '取消黑名单'
      const content = targetStatus
          ? '加入黑名单后，对方将无法给你发送消息，确定？'
          : '确定将该用户移出黑名单？'

      uni.showModal({
        title,
        content,
        success: async (res) => {
          if (!res.confirm) {
            // 用户点取消，不做任何操作，switch会自动回弹回旧状态，无需手动赋值
            return
          }
          try {
            const url = targetStatus ? '/api/blacklist/add?targetUid=' : '/api/blacklist/cancel?targetUid='
            await uni.$http.post(`${url}${this.userId}`)
            // 接口成功才更新本地状态
            this.isBlacked = targetStatus
            uni.showToast({
              title: this.isBlacked ? '已加入黑名单' : '已取消黑名单',
              icon: 'none'
            })
          } catch (err) {
            uni.showToast({ title: '操作失败', icon: 'none' })
          }
        }
      })
    },
    onSendMessage() {
      // if (this.isBlacked) {
      //   uni.showToast({ title: '你已将对方加入黑名单', icon: 'none' })
      //   return
      // }
      let chat = {
        type: 'PRIVATE',
        targetId: this.userId,
        showName: this.displayName,
        headImage: this.userInfo.headImage || ''
      }
      this.openChat(chat)
      let chatIdx = this.findChatIdx(chat)
      uni.navigateTo({ url: `/pages/chatbox/chat-box?chatIdx=${chatIdx}` })
    },
    handleSwitchTap() {
      // 用户想要切换到的目标状态
      const targetStatus = !this.isBlacked
      const title = targetStatus ? '加入黑名单' : '取消黑名单'
      const content = targetStatus
          ? '加入黑名单后，对方将无法给你发送消息，确定？'
          : '确定将该用户移出黑名单？'

      uni.showModal({
        title,
        content,
        success: async (res) => {
          if (!res.confirm) {
            // 用户点取消，不做任何变更
            return
          }
          try {
            const url = targetStatus ? '/api/blacklist/add?targetUid=' : '/api/blacklist/cancel?targetUid='
            await uni.$http.post(`${url}${this.userId}`)
            this.isBlacked = targetStatus
            uni.showToast({
              title: this.isBlacked ? '已加入黑名单' : '已取消黑名单',
              icon: 'none'
            })
          } catch (err) {
            uni.showToast({ title: '操作失败', icon: 'none' })
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>

.page {
  min-height: 100vh;
  background-color: #f4f4f4;
}
.body {
  padding: 24rpx 0;
}
.user-card {
  background: #fff;
  padding: 60rpx 0 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background: #eee;
  }
  .nickname {
    margin-top: 24rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #222;
  }
  .uid {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #999;
  }
}

/* 黑名单开关行 */
.black-row {
  margin-top: 24rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  .black-label {
    font-size: 32rpx;
    color: #333;
  }
}
.custom-switch {
  width: 88rpx;
  height: 52rpx;
  border-radius: 26rpx;
  background-color: #e5e5e5;
  position: relative;
  transition: background-color 0.24s ease;
  .switch-dot {
    position: absolute;
    top: 3rpx;
    left: 3rpx;
    width: 46rpx;
    height: 46rpx;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.18);
    transition: left 0.24s ease;
  }
  &.on {
    background-color: #00a89b;
    .switch-dot {
      left: 39rpx;
    }
  }
}

.actions {
  margin-top: 40rpx;
  padding: 0 40rpx;
  .btn-chat {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #00a89b;
    color: #fff;
    font-size: 32rpx;
    border-radius: 12rpx;
    &::after { border: none; }
    &:active { opacity: 0.85; }
  }
}

</style>