141 lines
3.5 KiB
Vue
141 lines
3.5 KiB
Vue
<template>
|
||
<view v-if="team" class="flex flex-col justify-center h-full bg-white">
|
||
<view>
|
||
<view class="text-dark text-lg font-semibold text-center mb-10">
|
||
{{ team.name }}
|
||
</view>
|
||
<view class="mb-10 text-dark text-lg font-semibold text-center mb-10">
|
||
成员邀请码
|
||
</view>
|
||
<view class="flex justify-center overflow-hidden">
|
||
<uqrcode canvas-id="qrcode" :value="qrcode" :options="options"></uqrcode>
|
||
</view>
|
||
<view class="mt-10 px-15 text-base text-dark leading-normal text-center">
|
||
微信扫一扫上面的二维码
|
||
</view>
|
||
<view class="mt-10 px-15 text-base text-dark leading-normal text-center">
|
||
加入我的团队，协同开展患者管理服务
|
||
</view>
|
||
<view class="mt-10 flex px-15 leading-normal text-center">
|
||
<button class="mr-10 border-auto rounded py-5 text-base text-primary flex-grow"
|
||
@click="saveImage('save')">
|
||
保存图片
|
||
</button>
|
||
<button class="bg-primary rounded py-5 text-base text-white flex-grow" open-type="share">分享微信</button>
|
||
</view>
|
||
<view class="canvas-box">
|
||
<l-painter ref="painterRef" :board="poster" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
computed,
|
||
ref
|
||
} from "vue";
|
||
import {
|
||
storeToRefs
|
||
} from "pinia";
|
||
import {
|
||
onLoad,
|
||
onShareAppMessage
|
||
} from "@dcloudio/uni-app";
|
||
import useGuard from "@/hooks/useGuard.js";
|
||
import useAccountStore from "@/store/account.js";
|
||
import api from '@/utils/api';
|
||
import {
|
||
toast
|
||
} from "@/utils/widget";
|
||
import {
|
||
getInviteMatePoster
|
||
} from './base-poster-data';
|
||
|
||
const env = __VITE_ENV__;
|
||
const inviteQrcode = env.MP_INVITE_TEAMMATE_QRCODE;
|
||
|
||
const options = {
|
||
margin: 10
|
||
};
|
||
const team = ref(null);
|
||
const teamId = ref('');
|
||
const painterRef = ref()
|
||
const poster = ref({})
|
||
|
||
const {
|
||
useLoad,
|
||
useShow
|
||
} = useGuard();
|
||
const {
|
||
account
|
||
} = storeToRefs(useAccountStore());
|
||
|
||
const qrcode = computed(() => `${inviteQrcode}?type=inviteTeam&teamId=${teamId.value}`)
|
||
|
||
async function getTeam() {
|
||
const res = await api('getTeamData', {
|
||
teamId: teamId.value,
|
||
corpId: account.value.corpId
|
||
});
|
||
if (res && res.data) {
|
||
team.value = res.data;
|
||
} else {
|
||
toast(res?.message || '获取团队信息失败')
|
||
}
|
||
}
|
||
|
||
async function saveImage(action = 'save') {
|
||
const data = getInviteMatePoster(team.value.name, qrcode.value)
|
||
try {
|
||
await painterRef.value.render(data);
|
||
painterRef.value.canvasToTempFilePathSync({
|
||
fileType: "jpg",
|
||
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
|
||
pathType: 'url',
|
||
quality: 1,
|
||
success: (res) => {
|
||
console.log(res.tempFilePath);
|
||
if (action === 'save') {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: res.tempFilePath,
|
||
success: function() {
|
||
console.log('save success');
|
||
}
|
||
});
|
||
} else if (action === 'share') {
|
||
wx.showShareImageMenu({
|
||
path: res.tempFilePath,
|
||
needShowEntrance: false
|
||
})
|
||
}
|
||
},
|
||
});
|
||
} catch (e) {
|
||
toast(e?.message)
|
||
}
|
||
}
|
||
useLoad(options => {
|
||
teamId.value = options.teamId;
|
||
})
|
||
|
||
useShow(() => {
|
||
getTeam()
|
||
});
|
||
|
||
onShareAppMessage(() => {
|
||
return {
|
||
title: '邀请团队成员',
|
||
path: `pages/login/redirect-page?type=inviteTeam&teamId=${teamId.value}`
|
||
}
|
||
})
|
||
</script>
|
||
<style>
|
||
.canvas-box {
|
||
top: 10000rpx;
|
||
position: absolute;
|
||
z-index: -1;
|
||
width: 0;
|
||
height: 0;
|
||
overflow: hidden;
|
||
}
|
||
</style> |