fix: 分享功能开发

pages/work/team/detail/team-detail.vue

@@ -205,4 +205,6 @@ useShow(() => {
   -webkit-line-clamp: 3;
   overflow: hidden;
 }
+
+
 </style>

pages/work/team/invite/base-poster-data.js

@@ -1,4 +1,4 @@
-export default function getPosterData(name, qrcode) {
+export function getInvitePatientPoster(name, qrcode) {
   return {
     css: {
       width: "750rpx",
@@ -69,3 +69,107 @@ export default function getPosterData(name, qrcode) {
   }
 
 }
+
+export function getInviteMatePoster(name, qrcode) {
+  return {
+    css: {
+      width: "750rpx",
+      paddingTop: '40rpx',
+      paddingBottom: "160rpx",
+      background: "white"
+    },
+    views: [
+      {
+        css: {
+          marginLeft: "40rpx",
+          marginTop: "30rpx",
+          padding: "32rpx",
+          boxSizing: "border-box",
+          background: "#fff",
+          borderRadius: "16rpx",
+          width: "670rpx",
+          boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)",
+          paddingBottom: "120rpx",
+          paddingTop: '40rpx',
+        },
+        views: [
+          {
+            text: name,
+            type: "text",
+            css: {
+              width: "440rpx",
+              paddingRight: "30rpx",
+              marginLeft: "100rpx",
+              boxSizing: "border-box",
+              lineClamp: 3,
+              color: "#333333",
+              lineHeight: "1.5em",
+              fontSize: "36rpx",
+              fontWeight: "bold",
+              textAlign: 'center'
+            },
+          },
+          {
+            text: '成员邀请码',
+            type: "text",
+            css: {
+              width: "440rpx",
+              paddingRight: "30rpx",
+              marginLeft: "100rpx",
+              marginTop: '30rpx',
+              boxSizing: "border-box",
+              lineClamp: 1,
+              color: "#333333",
+              lineHeight: "1.5em",
+              fontSize: "36rpx",
+              fontWeight: "bold",
+              textAlign: 'center'
+            },
+          },
+          {
+            text: qrcode,
+            type: "qrcode",
+            css: {
+              marginTop: '30rpx',
+              marginLeft: '70rpx',
+              width: "480rpx",
+              height: "480rpx"
+            },
+          },
+          {
+            text: " 微信扫一扫上面的二维码",
+            type: "text",
+            css: {
+              marginTop: '60rpx',
+              width: "440rpx",
+              paddingRight: "30rpx",
+              marginLeft: "100rpx",
+              boxSizing: "border-box",
+              color: "#666",
+              lineHeight: "1.5em",
+              fontSize: "28rpx",
+              textAlign: 'center'
+            },
+          },
+          {
+            text: " 加入我的团队，协同开展患者管理服务",
+            type: "text",
+            css: {
+              marginTop: '20rpx',
+              width: "440rpx",
+              paddingRight: "30rpx",
+              marginLeft: "100rpx",
+              boxSizing: "border-box",
+              color: "#666",
+              lineHeight: "1.5em",
+              fontSize: "28rpx",
+              textAlign: 'center'
+            },
+          },
+        ],
+        type: "view"
+      }
+    ]
+  }
+
+}

pages/work/team/invite/invite-patient.vue

@@ -45,7 +45,7 @@
         <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>
+        <button class="bg-primary rounded py-5 text-base text-white flex-grow" @click="saveImage('share')">分享微信</button>
       </view>
     </view>
     <view class="canvas-box">
@@ -63,7 +63,7 @@ import useAccountStore from "@/store/account.js";
 import useGuard from '@/hooks/useGuard';
 import api from "@/utils/api.js";
 import { toast, shareToWeChat } from "@/utils/widget";
-import getPosterData from './base-poster-data';
+import { getInvitePatientPoster } from './base-poster-data';
 
 import emptyData from "@/components/empty-data.vue";
 import renamePopup from "./rename-popup.vue";
@@ -130,7 +130,7 @@ async function change(name) {
 async function saveImage(action = 'save') {
   const team = list.value[current.value] || null;
   if (!team) return;
-  const data = getPosterData(team.name, team.qrcode)
+  const data = getInvitePatientPoster(team.name, team.qrcode)
   try {
     await painterRef.value.render(data);
     painterRef.value.canvasToTempFilePathSync({
@@ -148,8 +148,9 @@ async function saveImage(action = 'save') {
             }
           });
         } else if (action === 'share') {
-           wx.shareFileMessage({
+          wx.showShareImageMenu({
-            filePath: res.tempFilePath,
+            path: res.tempFilePath,
+            needShowEntrance: false
           })
         }
       },

pages/work/team/invite/invite-teammate.vue

@@ -16,6 +16,15 @@
       <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>
@@ -26,6 +35,7 @@ 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;
@@ -33,6 +43,9 @@ 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());
 
@@ -46,6 +59,37 @@ async function getTeam() {
     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;
 })
@@ -54,4 +98,13 @@ useShow(() => {
   getTeam()
 });
 </script>
-<style></style>
+<style>
+.canvas-box {
+  top: 10000rpx;
+  position: absolute;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+</style>