143 lines
4.5 KiB
Vue
143 lines
4.5 KiB
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 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=${account.value?.corpId}&userid=${userid}` })
|
||
}
|
||
|
||
async function getQrcode(userid) {
|
||
const res = await api('addContactWay', { corpUserId: userid, corpId: account.value?.corpId, 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 => {
|
||
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>
|