uniapp-im-shop/pages/adduser/index.vue

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import TUIChatEngine, {
    TUIFriendService,
    TUIUserService
  } from '@tencentcloud/chat-uikit-engine-lite'
  import { useUI } from '../../utils/use-ui'
  import { navigateBack } from '@/utils/router'

  const { showLoading, hideLoading, showToast } = useUI()

  const loading = ref(true)
  /** 验证信息输入 */
  const verificationInfo = ref('')
  /** 备注名 */
  const remark = ref('')
  /** 用户 id */
  const userId = ref('')
  /** 好友信息 */
  const friendInfo = ref({})
  /** 点击查看头像 */
  const onViewAvatar = url => {
    uni.previewImage({
      urls: [url] // 图片路径数组（本地或网络）
    })
  }

  /** 获取好友信息 */
  const getFriendInfo = async () => {
    loading.value = true
    showLoading()
    TUIUserService.getUserProfile({
      userIDList: [userId.value]
    })
      .then(res => {
        friendInfo.value = res.data[0]
        console.log('获取好友信息成功', friendInfo.value)
      })
      .finally(() => {
        loading.value = false
        hideLoading()
      })
  }

  const submit = async () => {
    // 在这里可以添加提交验证信息的逻辑
    let source = 'AddSource_Type_Web' // 来源渠道
    // #ifdef H5
    source = 'AddSource_Type_H5'
    // #endif

    // 判断是否为 App（5+ App）
    // #ifdef APP-PLUS
    source = 'AddSource_Type_App'
    // #endif
    showLoading()
    await TUIFriendService.addFriend({
      to: userId.value,
      source,
      remark: remark.value || '',
      wording: verificationInfo.value,
      type: TUIChatEngine.TYPES.SNS_ADD_TYPE_BOTH
    })
    hideLoading()
    await showToast('好友请求已发送', 'success')
    navigateBack()
  }

  onLoad(e => {
    userId.value = e?.id || '7616mobile'
    getFriendInfo()
  })
</script>

<template>
  <view v-if="!loading">
    <!-- 顶部用户信息 -->
    <view class="top-info">
      <image
        v-if="friendInfo?.avatar"
        :src="friendInfo?.avatar"
        mode="aspectFill"
        class="avatar"
        @tap="onViewAvatar(friendInfo?.avatar)"
      ></image>
      <uni-icons v-else type="contact-filled" size="80"></uni-icons>
      <view class="right-box">
        <text>{{ friendInfo.nick }}</text>
        <text>ID: {{ friendInfo.userID }}</text>
        <text>
          个性签名: {{ friendInfo.selfSignature || '暂无个性签名' }}
        </text>
      </view>
    </view>

    <!-- 验证信息输入 -->
    <view class="input-wrapper">
      <text class="title">请填写验证信息</text>
      <textarea
        v-model="verificationInfo"
        :maxlength="200"
        placeholder="请输入验证信息"
        class="input-text"
      />
    </view>

    <!-- 备注 -->
    <view class="remark">
      <text>备注名</text>
      <input
        v-model="remark"
        :maxlength="80"
        placeholder="请输入备注名"
        placeholder-class="input-placeholder"
      />
    </view>

    <!-- 发送申请按钮 -->
    <view class="send-btn" @tap="submit">
      <text>发送申请</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
  // 背景色
  page {
    background: #f9f9f9;
  }

  .send-btn {
    margin-top: 20rpx;
    background: #ffffff;
    padding: 20rpx 32rpx;
    text-align: center;
    text {
      font-size: 28rpx;
      color: #2542c0;
    }
  }

  .remark {
    margin-top: 20rpx;
    background: #ffffff;
    padding: 20rpx 32rpx;
    display: flex;
    justify-content: space-between;
    text {
      font-size: 28rpx;
      color: #333333;
    }
    input {
      width: 80%;
      text-align: right;
    }
  }

  .input-wrapper {
    margin-top: 20rpx;
    background: #ffffff;
    padding: 20rpx 32rpx;
    display: flex;
    flex-direction: column;
    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      font-style: normal;
      text-transform: none;
      margin-bottom: 20rpx;
    }
    .input-text {
      width: calc(100% - 40rpx);
      border: 2rpx solid #eeeeee;
      border-radius: 8rpx;
      padding: 20rpx;
    }
  }

  .top-info {
    background: #ffffff;
    padding: 20rpx 32rpx;
    display: flex;
    align-items: center;
    .avatar {
      flex-shrink: 0;
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
    }
    .right-box {
      height: 100%;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text {
        // 第一个
        &:first-child {
          font-size: 32rpx;
          color: #333333;
        }
        font-size: 26rpx;
        color: #999999;
        &:last-child {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          box-orient: vertical;
          line-clamp: 1;
          overflow: hidden;
        }
      }
    }
  }
</style>