ykt-wxapp/pages/work/team/invite/invite-teammate.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" @click="saveImage('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 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()
});
</script>
<style>
.canvas-box {
  top: 10000rpx;
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  overflow: hidden;
}
</style>