修复练习不能分享的问题

src/components/BattleFooter.vue

@@ -160,10 +160,10 @@ const normalRounds = computed(
   padding-top: 5px;
 }
 .players > view:first-child > view {
-  background: linear-gradient(270deg, #172a86 0%, #0006 100%);
+  background: linear-gradient(270deg, #172a86 0%, #0000 100%);
 }
 .players > view:last-child > view {
-  background: linear-gradient(270deg, #0006 0%, #6a1212 100%);
+  background: linear-gradient(270deg, #0000 0%, #6a1212 100%);
 }
 .players > view > view {
   min-height: 52rpx;

src/components/ScoreResult.vue

@@ -5,7 +5,6 @@ import SButton from "@/components/SButton.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import BowData from "@/components/BowData.vue";
 import UserUpgrade from "@/components/UserUpgrade.vue";
-import { wxShare } from "@/util";
 import { directionAdjusts } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -45,6 +44,9 @@ const closePanel = () => {
     props.onClose();
   }, 300);
 };
+function onClickShare() {
+  uni.$emit("share-image");
+}
 onMounted(() => {
   if (props.result.lvl > user.value.lvl) {
     showUpgrade.value = true;
@@ -58,9 +60,6 @@ onMounted(() => {
   finished.value =
     props.result.arrows && props.result.arrows.length === props.total;
 });
-// setTimeout(() => {
-//   showPanel.value = true;
-// }, 300);
 </script>
 
 <template>
@@ -100,7 +99,7 @@ onMounted(() => {
           <IconButton
             name="分享"
             src="../static/share.png"
-            :onClick="wxShare"
+            :onClick="onClickShare"
           />
           <IconButton
             name="教练点评"

src/pages.json

@@ -45,9 +45,6 @@
     {
       "path": "pages/match-page"
     },
-    {
-      "path": "pages/image-share"
-    },
     {
       "path": "pages/my-device"
     },

src/pages/first-try.vue

@@ -13,7 +13,7 @@ import BowPower from "@/components/BowPower.vue";
 import TestDistance from "@/components/TestDistance.vue";
 import BubbleTip from "@/components/BubbleTip.vue";
 import { createPractiseAPI } from "@/apis";
-import { generateCanvasImage } from "@/util";
+import { generateCanvasImage, wxShare, debounce } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -79,23 +79,23 @@ async function onReceiveMessage(messages = []) {
             arrows: JSON.parse(msg.practice.arrows),
             lvl: msg.lvl,
           };
-          generateCanvasImage(
-            "shareCanvas",
-            1,
-            user.value,
-            practiseResult.value
-          );
         }, 1500);
       }
     }
   });
 }
 
+const onClickShare = debounce(async () => {
+  await generateCanvasImage("shareCanvas", 1, user.value, practiseResult.value);
+  await wxShare("shareCanvas");
+});
+
 onMounted(() => {
   uni.setKeepScreenOn({
     keepScreenOn: true,
   });
   uni.$on("socket-inbox", onReceiveMessage);
+  uni.$on("share-image", onClickShare);
 });
 
 onBeforeUnmount(() => {
@@ -103,6 +103,7 @@ onBeforeUnmount(() => {
     keepScreenOn: false,
   });
   uni.$off("socket-inbox", onReceiveMessage);
+  uni.$off("share-image", onClickShare);
 });
 
 const nextStep = async () => {

src/pages/image-share.vue

@@ -1,79 +0,0 @@
-<script setup>
-import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
-import Container from "@/components/Container.vue";
-import { generateCanvasImage } from "@/util";
-import { getPractiseAPI } from "@/apis";
-import { wxShare } from "@/util";
-import useStore from "@/store";
-import { storeToRefs } from "pinia";
-const store = useStore();
-const { user } = storeToRefs(store);
-
-onLoad(async (options) => {
-  const id = options.id || 461;
-  const data = await getPractiseAPI(id);
-  if (!data.arrows.length) return;
-  generateCanvasImage("shareCanvas", options.type, user.value, data);
-});
-
-const saveImage = () => {
-  uni.canvasToTempFilePath({
-    canvasId: "shareCanvas",
-    success: (res) => {
-      const tempFilePath = res.tempFilePath;
-
-      // 保存图片到相册
-      uni.saveImageToPhotosAlbum({
-        filePath: tempFilePath,
-        success: () => {
-          uni.showToast({ title: "保存成功" });
-        },
-        fail: () => {
-          uni.showToast({ title: "保存失败", icon: "error" });
-        },
-      });
-    },
-  });
-};
-</script>
-
-<template>
-  <Container>
-    <view class="content">
-      <view :style="{ overflow: 'hidden', borderRadius: '10px' }">
-        <canvas
-          :style="{ width: '300px', height: '534px' }"
-          canvas-id="shareCanvas"
-        ></canvas>
-      </view>
-    </view>
-  </Container>
-</template>
-
-<style scoped>
-.content {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 20px;
-}
-.footer {
-  width: 100%;
-  display: flex;
-  justify-content: space-around;
-  margin-top: 50px;
-}
-.footer > button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #fff;
-  font-size: 12px;
-}
-.footer > button > image {
-  width: 45px;
-  margin-bottom: 10px;
-}
-</style>

src/pages/practise-one.vue

@@ -11,7 +11,7 @@ import BowPower from "@/components/BowPower.vue";
 import TestDistance from "@/components/TestDistance.vue";
 import BubbleTip from "@/components/BubbleTip.vue";
 import { createPractiseAPI } from "@/apis";
-import { generateCanvasImage } from "@/util";
+import { generateCanvasImage, wxShare, debounce } from "@/util";
 import { MESSAGETYPES, roundsName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -62,12 +62,6 @@ async function onReceiveMessage(messages = []) {
             arrows: JSON.parse(msg.practice.arrows),
             lvl: msg.lvl,
           };
-          generateCanvasImage(
-            "shareCanvas",
-            2,
-            user.value,
-            practiseResult.value
-          );
         }, 1500);
       }
     }
@@ -89,11 +83,17 @@ async function onComplete() {
   }
 }
 
+const onClickShare = debounce(async () => {
+  await generateCanvasImage("shareCanvas", 2, user.value, practiseResult.value);
+  await wxShare("shareCanvas");
+});
+
 onMounted(() => {
   uni.setKeepScreenOn({
     keepScreenOn: true,
   });
   uni.$on("socket-inbox", onReceiveMessage);
+  uni.$on("share-image", onClickShare);
 });
 
 onBeforeUnmount(() => {
@@ -101,6 +101,7 @@ onBeforeUnmount(() => {
     keepScreenOn: false,
   });
   uni.$off("socket-inbox", onReceiveMessage);
+  uni.$off("share-image", onClickShare);
 });
 </script>
 

src/pages/practise-two.vue

@@ -11,7 +11,7 @@ import BowPower from "@/components/BowPower.vue";
 import TestDistance from "@/components/TestDistance.vue";
 import BubbleTip from "@/components/BubbleTip.vue";
 import { createPractiseAPI } from "@/apis";
-import { generateCanvasImage } from "@/util";
+import { generateCanvasImage, wxShare, debounce } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -56,12 +56,6 @@ async function onReceiveMessage(messages = []) {
             arrows: JSON.parse(msg.practice.arrows),
             lvl: msg.lvl,
           };
-          generateCanvasImage(
-            "shareCanvas",
-            3,
-            user.value,
-            practiseResult.value
-          );
         }, 1500);
       }
     }
@@ -82,11 +76,17 @@ async function onComplete() {
   }
 }
 
+const onClickShare = debounce(async () => {
+  await generateCanvasImage("shareCanvas", 3, user.value, practiseResult.value);
+  await wxShare("shareCanvas");
+});
+
 onMounted(() => {
   uni.setKeepScreenOn({
     keepScreenOn: true,
   });
   uni.$on("socket-inbox", onReceiveMessage);
+  uni.$on("share-image", onClickShare);
 });
 
 onBeforeUnmount(() => {
@@ -94,6 +94,7 @@ onBeforeUnmount(() => {
     keepScreenOn: false,
   });
   uni.$off("socket-inbox", onReceiveMessage);
+  uni.$off("share-image", onClickShare);
 });
 </script>
 

src/store.js

@@ -71,22 +71,16 @@ export default defineStore("store", {
     },
     async updateUser(user = {}) {
       this.user = { ...defaultUser, ...user };
-      if (user.avatar) {
-        // 先保存到本地，分享只能用本地图片
-        const imageInfo = await uni.getImageInfo({ src: user.avatar });
-        this.user.avatar = imageInfo.path;
-      }
       if (this.user.rankLvl !== undefined) {
         this.user.lvlName = getLvlName(
           this.user.rankLvl,
           this.config.randInfos
         );
       }
-      const lvlImage = getLvlImage(this.user.rankLvl, this.config.randInfos);
+      this.user.lvlImage = getLvlImage(
-      if (lvlImage) {
+        this.user.rankLvl,
-        const imageInfo = await uni.getImageInfo({ src: lvlImage });
+        this.config.randInfos
-        this.user.lvlImage = imageInfo.path;
+      );
-      }
     },
     updateDevice(deviceId, deviceName) {
       this.device.deviceId = deviceId;
@@ -95,13 +89,15 @@ export default defineStore("store", {
     async updateConfig(config) {
       this.config = config;
       if (this.user.scores !== undefined) {
-        this.user.lvlName = getLvlName(this.user.scores, this.config.randInfos);
+        this.user.lvlName = getLvlName(
-      }
+          this.user.rankLvl,
-      const lvlImage = getLvlImage(this.user.rankLvl, this.config.randInfos);
+          this.config.randInfos
-      if (lvlImage) {
+        );
-        const imageInfo = await uni.getImageInfo({ src: lvlImage });
-        this.user.lvlImage = imageInfo.path;
       }
+      this.user.lvlImage = getLvlImage(
+        this.user.rankLvl,
+        this.config.randInfos
+      );
     },
   },
 

src/util.js

@@ -162,14 +162,29 @@ export const drawRoundImage = async (
   ctx.restore();
 };
 
+const loadImage = (src) =>
+  new Promise((resolve) => {
+    try {
+      uni.getImageInfo({
+        src,
+        success: (res) => resolve(res.path || res.tempFilePath || src),
+        fail: () => resolve(src),
+      });
+    } catch (e) {
+      resolve(src);
+    }
+  });
+
 export async function generateCanvasImage(canvasId, type, user, data) {
   try {
     var ctx = uni.createCanvasContext(canvasId);
     const width = 300;
     const height = 534;
     ctx.drawImage("../static/share-bg.png", 0, 0, width, height);
-    drawRoundImage(ctx, user.avatar, 17, 20, 32, 32, 20);
+    const avatar = await loadImage(user.avatar);
-    ctx.drawImage(user.lvlImage, 12, 15, 42, 42);
+    drawRoundImage(ctx, avatar, 17, 20, 32, 32, 20);
+    const lvlImage = await loadImage(user.lvlImage);
+    ctx.drawImage(lvlImage, 12, 15, 42, 42);
     renderText(ctx, user.nickName, 13, "#fff", 58, 34);
     renderRankTitle(ctx, user.lvlName);
 
@@ -239,6 +254,7 @@ export const wxShare = async (canvasId = "shareCanvas") => {
       path: res.tempFilePath,
     });
   } catch (error) {
+    console.log("生成图片失败:", error);
     uni.showToast({
       title: "生成图片失败",
       icon: "error",