228 lines
6.5 KiB
Vue
228 lines
6.5 KiB
Vue
<template>
|
||
<view class="flex flex-col justify-center h-full bg-white">
|
||
<view v-if="list.length === 0" class="w-full">
|
||
<empty-data text="暂无团队" />
|
||
<view class="mt-10 mx-auto w-100 text-base text-primary border-auto leading-normal py-5 text-center rounded">
|
||
创建团队
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<view class="flex items-center">
|
||
<view class="flex-shrink-0 p-15 flex items-center" :class="list.length > 1 ? '' : 'opacity-0'"
|
||
@click="toggle(-1)">
|
||
<uni-icons type="left" size="32" :color="indicator.prev ? '#0074ff' : '#999'"></uni-icons>
|
||
</view>
|
||
<view class="w-0 flex-grow text-white overflow-hidden">
|
||
<view v-if="list.length > 1" class="py-5 text-center text-lg font-semibold text-dark">
|
||
({{ current + 1 }} / {{ list.length }})
|
||
</view>
|
||
<swiper class="swiper" :current="current">
|
||
<swiper-item v-for="(i, idx) in list" :key="i.teamId">
|
||
<view class="flex items-center justify-center h-30 mb-10">
|
||
<view class="mr-5 text-dark text-lg font-semibold truncate">{{ i.name }}</view>
|
||
<view class="edit-sub flex-shrink-0 flex items-center justify-center rounded-full bg-primary"
|
||
@click="visible = true">
|
||
<image class="edit-icon" src="/static/work/pen.svg" mode="aspectFill" />
|
||
</view>
|
||
</view>
|
||
<view v-if="i.qrcode" class="flex justify-center overflow-hidden">
|
||
<uqrcode ref="qrcodes" :canvasId="`qrcode-${idx}`" :value="i.qrcode" :options="options">
|
||
</uqrcode>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="flex-shrink-0 p-15 flex items-center" :class="list.length > 1 ? '' : 'opacity-0'"
|
||
@click="toggle(1)">
|
||
<uni-icons type="right" size="32" :color="indicator.next ? '#0074ff' : '#999'"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="mt-10 px-15 text-base text-gray leading-normal text-center">
|
||
微信扫一扫上面的二维码
|
||
</view>
|
||
<view class="px-15 text-base text-gray leading-normal text-center">进入团队首页，即可发起线上咨询、建档授权等服务</view>
|
||
<view class="mt-10 flex px-15">
|
||
<view class="mr-10 border-auto rounded py-10 text-base text-primary text-center flex-grow" @click="saveImage">保存图片</view>
|
||
<button class=" bg-primary rounded py-10 text-base text-white text-center flex-grow" open-type="share">分享微信</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<rename-popup :team="team" :visible="visible" @close="visible = false" @change="change" />
|
||
</template>
|
||
<script setup>
|
||
import { computed, ref } from "vue";
|
||
import { storeToRefs } from "pinia";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import useAccountStore from "@/store/account.js";
|
||
import useGuard from '@/hooks/useGuard';
|
||
import api from "@/utils/api.js";
|
||
import { toast, saveImageToPhotosAlbum, shareToWeChat } from "@/utils/widget";
|
||
|
||
import emptyData from "@/components/empty-data.vue";
|
||
import renamePopup from "./rename-popup.vue";
|
||
|
||
const options = { margin: 10 }
|
||
|
||
const { useShow } = useGuard();
|
||
const { doctorInfo, account } = storeToRefs(useAccountStore());
|
||
const current = ref(0);
|
||
const list = ref([]);
|
||
const visible = ref(false);
|
||
const teamId = ref('')
|
||
const qrcodes = ref(null);
|
||
const indicator = computed(() => ({
|
||
prev: current.value > 0,
|
||
next: current.value < list.value.length - 1
|
||
}))
|
||
const team = computed(() => list.value[current.value] || null);
|
||
|
||
function toggle(val) {
|
||
const num = current.value + val;
|
||
if (num > 0) {
|
||
current.value = Math.min(num, list.value.length - 1);
|
||
} else {
|
||
current.value = Math.max(num, 0);
|
||
}
|
||
}
|
||
|
||
async function getTeams() {
|
||
const res = await api('getJoinedTeams', { corpId: account.value?.corpId, mateId: doctorInfo.value?.userid });
|
||
const arr = res && Array.isArray(res.data) ? res.data.map(i => ({
|
||
id: i._id,
|
||
teamId: i.teamId,
|
||
name: i.name,
|
||
qrcode: i.qrcodes && i.qrcodes[0] && i.qrcodes[0].qrcode ? i.qrcodes[0].qrcode : ''
|
||
})) : [];
|
||
if (teamId.value) {
|
||
const idx = arr.findIndex(i => i.teamId === teamId.value);
|
||
if (idx > -1) {
|
||
current.value = idx
|
||
}
|
||
teamId.value = '';
|
||
}
|
||
list.value = arr;
|
||
}
|
||
|
||
async function change(name) {
|
||
const res = await api('updateTeamInfo', { teamId: team.value.teamId, name, corpId: account.value.corpId, id: team.value.id });
|
||
if (res && res.success) {
|
||
await toast('保存成功');
|
||
list.value[current.value].name = name;
|
||
visible.value = false
|
||
} else {
|
||
toast('保存失败');
|
||
}
|
||
}
|
||
|
||
// 保存二维码图片
|
||
async function saveImage() {
|
||
if (!team.value || !team.value.qrcode) {
|
||
toast('暂无二维码');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const qrcodeComponent = qrcodes.value[current.value];
|
||
if (!qrcodeComponent) {
|
||
toast('二维码未加载完成');
|
||
return;
|
||
}
|
||
|
||
// 获取二维码临时文件路径
|
||
const tempFilePath = qrcodeComponent.toTempFilePath();
|
||
if (tempFilePath) {
|
||
await saveImageToPhotosAlbum(tempFilePath);
|
||
} else {
|
||
toast('获取二维码失败');
|
||
}
|
||
} catch (err) {
|
||
console.error('保存图片失败:', err);
|
||
toast('保存失败');
|
||
}
|
||
}
|
||
|
||
// 分享配置
|
||
function onShareAppMessage() {
|
||
if (!team.value) {
|
||
return shareToWeChat({
|
||
title: '邀请患者加入团队',
|
||
path: '/pages/work/team/invite/invite-patient'
|
||
});
|
||
}
|
||
|
||
return shareToWeChat({
|
||
title: `邀请您加入${team.value.name}`,
|
||
path: `/pages/work/team/invite/invite-patient?teamId=${team.value.teamId}`,
|
||
imageUrl: team.value.qrcode || ''
|
||
});
|
||
}
|
||
|
||
// 分享到朋友圈
|
||
function onShareTimeline() {
|
||
if (!team.value) {
|
||
return {
|
||
title: '邀请患者加入团队',
|
||
path: '/pages/work/team/invite/invite-patient'
|
||
};
|
||
}
|
||
|
||
return {
|
||
title: `邀请您加入${team.value.name}`,
|
||
query: `teamId=${team.value.teamId}`,
|
||
imageUrl: team.value.qrcode || ''
|
||
};
|
||
}
|
||
|
||
onLoad(opts => {
|
||
teamId.value = opts.teamId || '';
|
||
})
|
||
|
||
useShow(() => {
|
||
getTeams()
|
||
})
|
||
|
||
// 导出分享方法供页面使用
|
||
defineExpose({
|
||
onShareAppMessage,
|
||
onShareTimeline
|
||
})
|
||
|
||
</script>
|
||
<style>
|
||
.w-100 {
|
||
width: 200rpx;
|
||
}
|
||
|
||
.opacity-0 {
|
||
opacity: 0;
|
||
}
|
||
|
||
.swiper {
|
||
height: 500rpx;
|
||
}
|
||
|
||
.edit-sub {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.edit-icon {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
}
|
||
|
||
.h-30 {
|
||
height: 60rpx;
|
||
}
|
||
|
||
.share-btn {
|
||
border: none;
|
||
padding: 0;
|
||
line-height: normal;
|
||
background: transparent;
|
||
}
|
||
|
||
.share-btn::after {
|
||
border: none;
|
||
}
|
||
</style> |