分享功能优化

src/App.vue

@@ -138,4 +138,12 @@ button::after {
   animation: pumpIn 0.3s ease-out forwards;
   transform-origin: center center;
 }
+
+.share-canvas {
+  width: 302px;
+  height: 534px;
+  position: absolute;
+  top: -1000px;
+  left: 0;
+}
 </style>

src/components/BowTarget.vue

@@ -206,6 +206,7 @@ function calcRealY(num) {
 .footer > image {
   width: 40px;
   min-height: 40px;
+  max-height: 40px;
   border-radius: 50%;
 }
 .container > text {

src/components/ScoreResult.vue

@@ -4,6 +4,7 @@ import IconButton from "@/components/IconButton.vue";
 import SButton from "@/components/SButton.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import BowData from "@/components/BowData.vue";
+import { wxShare } from "@/util";
 const props = defineProps({
   show: {
     type: Boolean,
@@ -25,10 +26,6 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
-  dataType: {
-    type: Number,
-    default: 0,
-  },
 });
 const showPanel = ref(true);
 const showComment = ref(false);
@@ -42,11 +39,6 @@ const closePanel = () => {
 setTimeout(() => {
   showPanel.value = true;
 }, 300);
-const toSharePage = () => {
-  uni.navigateTo({
-    url: `image-share?id=${props.result.id}&type=${props.dataType}`,
-  });
-};
 </script>
 
 <template>
@@ -93,11 +85,7 @@ const toSharePage = () => {
         </view>
       </view>
       <view>
-        <IconButton
+        <IconButton name="分享" src="../static/share.png" :onClick="wxShare" />
-          name="分享"
-          src="../static/share.png"
-          :onClick="toSharePage"
-        />
         <IconButton
           name="教练点评"
           src="../static/review.png"

src/pages/first-try.vue

@@ -12,6 +12,7 @@ import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
 import StartCountdown from "@/components/StartCountdown.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
+import { generateCanvasImage } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -65,6 +66,7 @@ async function onReceiveMessage(messages = []) {
         ...msg.practice,
         arrows: JSON.parse(msg.practice.arrows),
       };
+      generateCanvasImage("shareCanvas", 1, user.value, practiseResult.value);
     }
   });
 }
@@ -95,8 +97,8 @@ const nextStep = async () => {
     step.value = 4;
     startCount.value = true;
   } else if (step.value === 5) {
-    const result = await getHomeData();
+    // const result = await getHomeData();
-    if (result.user) updateUser(result.user);
+    // if (result.user) updateUser(result.user);
     uni.navigateBack({
       delta: 1,
     });
@@ -220,8 +222,8 @@ const onClose = () => {
         v-if="step === 4"
         :onClose="onClose"
         :result="practiseResult"
-        :dataType="1"
       />
+      <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
       <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
     <view :style="{ marginBottom: '20px' }">

src/pages/practise-one.vue

@@ -10,6 +10,7 @@ import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
 import StartCountdown from "@/components/StartCountdown.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
+import { generateCanvasImage } from "@/util";
 import { MESSAGETYPES, roundsName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -57,13 +58,14 @@ async function onReceiveMessage(messages = []) {
         ...msg.practice,
         arrows: JSON.parse(msg.practice.arrows),
       };
+      generateCanvasImage("shareCanvas", 2, user.value, practiseResult.value);
     }
   });
 }
 
 async function onComplete() {
-  const result = await getHomeData();
+  // const result = await getHomeData();
-  if (result.user) updateUser(result.user);
+  // if (result.user) updateUser(result.user);
   uni.navigateBack();
 }
 
@@ -111,8 +113,8 @@ onUnmounted(() => {
         :show="showScore"
         :onClose="onComplete"
         :result="practiseResult"
-        :dataType="2"
       />
+      <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
       <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
     <view :style="{ marginBottom: '20px' }">

src/pages/practise-two.vue

@@ -10,6 +10,7 @@ import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
 import StartCountdown from "@/components/StartCountdown.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
+import { generateCanvasImage } from "@/util";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -54,13 +55,14 @@ async function onReceiveMessage(messages = []) {
         ...msg.practice,
         arrows: JSON.parse(msg.practice.arrows),
       };
+      generateCanvasImage("shareCanvas", 3, user.value, practiseResult.value);
     }
   });
 }
 
 async function onComplete() {
-  const result = await getHomeData();
+  // const result = await getHomeData();
-  if (result.user) updateUser(result.user);
+  // if (result.user) updateUser(result.user);
   uni.navigateBack();
 }
 
@@ -111,8 +113,8 @@ onUnmounted(() => {
         :show="showScore"
         :onClose="onComplete"
         :result="practiseResult"
-        :dataType="3"
       />
+      <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
       <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
     <view :style="{ marginBottom: '20px' }">

src/util.js

@@ -2,26 +2,7 @@ export function renderScores(ctx, arrows = []) {
   let rowIndex = 0;
   arrows.forEach((item, i) => {
     rowIndex = i;
-    if (arrows.length === 12) {
+    if (arrows.length >= 36 && i < 36) {
-      if (i > 5) rowIndex = i - 6;
-      ctx.drawImage(
-        "../static/score-bg.png",
-        16 + rowIndex * 46,
-        i > 5 ? 366 : 320,
-        40,
-        40
-      );
-      renderText(
-        ctx,
-        item.ring,
-        25,
-        "#fed847",
-        36 + rowIndex * 46,
-        i > 5 ? 395 : 349,
-        "center"
-      );
-    }
-    if (arrows.length === 36) {
       ctx.drawImage(
         "../static/score-bg.png",
         18 + (i % 9) * 30,
@@ -39,6 +20,24 @@ export function renderScores(ctx, arrows = []) {
         310 + Math.ceil((i + 1) / 9) * 30,
         "center"
       );
+    } else if (arrows.length >= 12 && i < 12) {
+      if (i > 5) rowIndex = i - 6;
+      ctx.drawImage(
+        "../static/score-bg.png",
+        16 + rowIndex * 46,
+        i > 5 ? 366 : 320,
+        40,
+        40
+      );
+      renderText(
+        ctx,
+        item.ring,
+        25,
+        "#fed847",
+        36 + rowIndex * 46,
+        i > 5 ? 395 : 349,
+        "center"
+      );
     }
   });
 }
@@ -131,3 +130,81 @@ export const drawRoundImage = async (
   ctx.drawImage(imgPath, x, y, width, height);
   ctx.restore();
 };
+
+export function generateCanvasImage(canvasId, type, user, data) {
+  var ctx = uni.createCanvasContext(canvasId);
+  const width = 303;
+  const height = 535;
+  ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
+  drawRoundImage(ctx, user.avatar, 20, 20, 35, 35, 20);
+  ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
+  renderText(ctx, user.nickName, 14, "#fff", 77, 35, "center");
+  renderRankTitle(ctx, user.lvlName, "center");
+
+  let titleImage = "../static/first-try-title.png";
+  let subTitle = "正式开启弓箭手之路";
+  if (type > 1) {
+    subTitle = `今日弓箭练习打卡 ${data.createdAt
+      .split(" ")[0]
+      .replaceAll("-", ".")}`;
+  }
+  if (type == 2) {
+    titleImage = "../static/practise-one-title.png";
+  } else if (type == 3) {
+    titleImage = "../static/practise-two-title.png";
+  }
+  ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40);
+  const subTitleWidth = ctx.measureText(subTitle).width;
+  renderText(ctx, subTitle, 18, "#fff", width / 2 - subTitleWidth + 10, 220);
+  renderText(ctx, "共", 16, "#fff", 124, 300);
+  const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
+  renderText(ctx, totalRing, 16, "#fed847", totalRing < 100 ? 144 : 142, 300);
+  renderText(ctx, "环", 16, "#fff", 166, 300);
+  renderLine(ctx, 80);
+  renderLine(ctx, 192);
+  renderScores(ctx, data.arrows);
+  ctx.drawImage(
+    "../static/device-icon.png",
+    width * 0.06,
+    height * 0.87,
+    55,
+    55
+  );
+  renderText(ctx, "射灵平台", 16, "#fff", width * 0.28, height * 0.9);
+  renderText(
+    ctx,
+    "快加入我们一起玩吧~",
+    11,
+    "rgba(255, 255, 255, 0.5)",
+    width * 0.28,
+    height * 0.93
+  );
+  renderText(
+    ctx,
+    "后羿就是这样练成的",
+    11,
+    "rgba(255, 255, 255, 0.5)",
+    width * 0.28,
+    height * 0.96
+  );
+  ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 60, 60);
+  ctx.draw();
+}
+
+export const wxShare = async () => {
+  try {
+    const res = await uni.canvasToTempFilePath({
+      canvasId: "shareCanvas",
+      fileType: "png", // 图片格式，可选 jpg 或 png
+      quality: 1, // 图片质量，取值范围为 0-1
+    });
+    wx.showShareImageMenu({
+      path: res.tempFilePath,
+    });
+  } catch (error) {
+    uni.showToast({
+      title: "生成图片失败",
+      icon: "error",
+    });
+  }
+};