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

<script setup>
  import { ref } from 'vue'
  import TUICore, { TUIConstants } from '@tencentcloud/tui-core-lite'
  import { useUI } from '@/utils/use-ui'
  import { navigateTo } from '@/utils/router'
  import TUIChatEngine, {
    TUIFriendService
  } from '@tencentcloud/chat-uikit-engine-lite'

  const { showLoading, hideLoading } = useUI()
  const loading = ref(false)
  const searchValue = ref('')
  const searchList = ref([])
  const isSearc = ref(false)
  // 是否是好友
  const isFriend = ref(false)

  const onCancel = () => {
    isFriend.value = false
    isSearc.value = false
    searchList.value = []
  }

  const search = () => {
    if (!searchValue.value) {
      return
    }
    showLoading()
    loading.value = true
    TUICore.callService({
      serviceName: TUIConstants.TUISearch.SERVICE.NAME,
      method: TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_USER,
      params: {
        userID: searchValue.value
      }
    })
      .then(res => {
        isSearc.value = res.data.length === 0
        searchList.value = res.data
        if (searchList.value.length > 0) {
          TUIFriendService.checkFriend({
            type: TUIChatEngine.TYPES.SNS_CHECK_TYPE_BOTH,
            userIDList: [searchList.value[0].userID]
          })
            .then(v => {
              console.log(v.data.successUserIDList[0])
              isFriend.value =
                v.data.successUserIDList[0].relation ===
                TUIChatEngine.TYPES.SNS_TYPE_BOTH_WAY
              hideLoading()
              loading.value = false
            })
            .catch(() => {
              loading.value = false
              hideLoading()
            })
        } else {
          loading.value = false
          hideLoading()
        }
      })
      .catch(() => {
        loading.value = false
        hideLoading()
      })
  }

  const onAdd = item => {
    navigateTo('/pages/adduser/details', { id: item.userID })
  }

  const onDetails = item => {
    if (isFriend.value) {
      navigateTo('/pages/adduser/details', { id: item.userID, type: '1' })
    } else {
      onAdd(item)
    }
  }
</script>

<template>
  <view>
    <uni-search-bar
      v-model="searchValue"
      focus
      radius="100"
      bgColor="#f4f4f4"
      textColor="#333333"
      placeholder="请输入用户手机号"
      @confirm="search"
      @cancel="onCancel"
    ></uni-search-bar>
    <cb-empty v-if="isSearc" name="未搜索到此账号"></cb-empty>
    <!-- 好友列表 -->
    <view v-if="!loading" class="user-list">
      <view
        v-for="item in searchList"
        :key="item.userID"
        class="card"
        @click="onDetails(item)"
      >
        <image
          v-if="item?.avatar"
          :src="item?.avatar"
          mode="aspectFill"
          class="avatar"
        ></image>
        <view v-else class="avatar">
          <uni-icons type="contact-filled" size="130rpx"></uni-icons>
        </view>
        <view class="right-box">
          <view class="name-box">
            <text>{{ item.nick || '未知名称' }}</text>
            <text>{{ item.userID }}</text>
          </view>
          <text v-if="isFriend" class="tag">已添加</text>
          <button v-else @click.stop="onAdd(item)">添加</button>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .user-list {
    padding: 0 48rpx;
    .card {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      .avatar {
        flex-shrink: 0;
        width: 96rpx;
        height: 96rpx;
        border-radius: 96rpx;
        margin-right: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .right-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tag {
          font-size: 32rpx;
          color: #999999;
        }
        .name-box {
          height: 96rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            // 最后一个
            &:last-child {
              margin-top: 6rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
        button {
          margin: 0;
          width: 128rpx;
          height: 64rpx;
          line-height: 64rpx;
          background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
          border-radius: 100rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #ffffff;
          &::after {
            border: none;
          }
        }
      }
    }
  }
</style>