ykt-team-wxapp/pages/archive/archive-result.vue

<template>
  <full-page mainClass="bg-white">
    <template #header>
      <view class="mb-10 py-30 flex items-center justify-center bg-white shadow-lg">
        <icon class="mr-5" type="success" size="24" />
        <view class="text-lg font-semibold">建档成功</view>
      </view>
    </template>
    <view v-if="friends.length" class="px-15">
      <view class="py-12 text-base tont-semibold text-dark">
        您可以加以下人员为好友, 随时提供一对一服务。
      </view>
      <template v-if="friends.length > 1">
        <view v-for="i in friends" :key="i.userid"
          class="flex items-center mb-10 overflow-hidden border-primary rounded" @click="toFriend(i.userid)">
          <view class="flex-shrink-0 p-10">
            <image class="avatar" :src="i.avatar || '/static/default-avatar.png'"></image>
          </view>
          <view class="flex-grow w-0 py-10 align-stretch">
            <view class="truncate">
              <text class="mr-5 text-lg text-dark font-semibold">{{ i.anotherName }}</text>
              <text class="text-base text-gray"> {{ memberJob[i.userid] }}</text>
            </view>
            <view class="mt-5 text-base line-clamp-2 leading-normal">
              {{ i.memberTroduce || '暂无简介' }}
            </view>
          </view>
          <view class="px-15 flex items-center align-stretch bg-primary text-base text-white text-center">
            加好友
          </view>
        </view>
      </template>
      <template v-else-if="friends.length === 1 && qrcode">
        <view class="mt-15 px-15">
          <view class="flex">
            <image class="mr-10 avatar" :src="member.avatar || '/static/default-avatar.png'"></image>
            <view class="w-0 flex-grow leading-normal">
              <view class="flex items-center">
                <view class="mr-5 text-lg font-semibold text-dark">{{ member.anotherName }}</view>
                <view class="text-base text-warning">@企业微信</view>
              </view>
              <view class="truncate text-base text-dark">{{ memberJob[member.userid] }}</view>
            </view>
          </view>
          <view class="mt-12 border-primary qrcode p-15 mx-auto rounded" @click="previewImage()">
            <image v-if="qrcode" class="h-full w-full" :show-menu-by-longpress="true" :src="qrcode"></image>
          </view>
          <view class="mt-12 text-base text-center text-dark">
            长按识别二维码，加我为好友
          </view>
        </view>
      </template>
    </view>
  </full-page>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import useGuard from '@/hooks/useGuard';
import useJob from '@/hooks/useJob';
import useAccount from '@/store/account';
import api from '@/utils/api';

import FullPage from '@/components/full-page.vue';

const team = ref(null);
const { useLoad } = useGuard();
const { account } = storeToRefs(useAccount());
const { memberJob, memberList: list } = useJob();
const qrcode = ref('');
const corpId = ref('')

const friends = computed(() => {
  const memberList = Array.isArray(team.value?.memberList) ? team.value.memberList : [];
  const friendlyMembers = Array.isArray(team.value?.friendlyMembers) ? team.value.friendlyMembers : [];
  return memberList.filter(i => i && i.userid && friendlyMembers.includes(i.userid))
})
const member = computed(() => friends.value[0])

function previewImage() {
  if (!qrcode.value) return;
  uni.previewImage({
    urls: [qrcode.value]
  })
}

function toFriend(userid) {
  uni.navigateTo({ url: `/pages/team/friend?corpId=${corpId.value}&userid=${userid}` })
}

async function getQrcode(userid) {
  const res = await api('addContactWay', { corpUserId: userid, corpId: corpId.value, unionid: account.value?.openid });
  if (res && res.data) {
    qrcode.value = res.data;
  }
}

async function getTeam(corpId, teamId) {
  const res = await api('getTeamData', { teamId, corpId });
  if (res && res.data) {
    team.value = res.data;
  } else {
    toast(res?.message || '获取团队信息失败')
  }
}

useLoad(options => {
  corpId.value = options.corpId;
  if (options.teamId && options.corpId) {
    getTeam(options.corpId, options.teamId);
  }
})

watch(friends, n => {
  list.value = Array.isArray(n) ? n : [];
  if (n.length === 1) {
    getQrcode(n[0].userid)
  }
}, { immediate: true })
</script>
<style>
.py-30 {
  padding-top: 60rpx;
  padding-bottom: 60rpx
}

.avatar {
  width: 120rpx;
  height: 128rpx;
}

.align-stretch {
  align-self: stretch
}

.mt-5 {
  margin-top: 10rpx
}

.qrcode {
  width: 560rpx;
  height: 560rpx;
}
</style>