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

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

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

  /** 群列表 */
  const searchGroup = ref([])

  const isSearc = computed(() => {
    return searchList.value.length === 0 && searchGroup.value.length === 0
  })
  const onCancel = () => {
    isFriend.value = false
    searchGroup.value = []
    searchList.value = []
  }

  /** 群查询 */
  const getGroup = () => {
    showLoading()
    loading.value = true
    TUICore.callService({
      serviceName: TUIConstants.TUISearch.SERVICE.NAME,
      method: TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_GROUP,
      params: {
        groupID: searchValue.value
      }
    })
      .then(res => {
        searchGroup.value = [res.data.group]
      })
      .catch(err => {
        searchGroup.value = []
        console.log(err, '==')
        loading.value = false
        hideLoading()
      })
  }

  const search = async () => {
    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()
      })

    getGroup()
  }

  const onAdd = item => {
    navigateTo('/pages/adduser/details', {
      id: item.userID,
      type: item.userID == tencentUserSig.value.userId ? '99' : ''
    })
  }

  const onDetails = (item, state) => {
    if (state == 1) {
      navigateTo('/pages/adduser/details', {
        id: item.groupID,
        type: '9'
      })
    } else {
      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="请输入用户手机号/群ID进行搜索"
      @confirm="search"
      @cancel="onCancel"
    ></uni-search-bar>
    <cb-empty v-if="!loading && 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>
          <view v-if="item.userID !== tencentUserSig.userId">
            <text v-if="isFriend" class="tag">已添加</text>
            <button v-else @click.stop="onAdd(item)">添加</button>
          </view>
        </view>
      </view>
      <!-- 群列表 -->
      <view
        v-for="item in searchGroup"
        :key="item.groupID"
        class="card"
        @click="onDetails(item, 1)"
      >
        <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.name || '未知名称' }}</text>
            <text>{{ item.groupID }}</text>
          </view>
          <!-- <text class="tag-but">群聊</text> -->
          <button style="background: #828bff">群聊</button>
          <!-- <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;
        }
        .tag-but {
          padding: 4rpx 20rpx;
          background: #00d9c5;
          color: #fff;
          border-radius: 30rpx;
        }
        .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>