细节调整

src/pages/image-share.vue

@@ -2,14 +2,9 @@
 import { ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
-import {
-  renderText,
-  renderRankTitle,
-  renderLine,
-  renderScores,
-  drawRoundImage,
-} from "@/util.js";
+import { generateCanvasImage } from "@/util";
 import { getPractiseAPI } from "@/apis";
+import { wxShare } from "@/util";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -19,63 +14,7 @@ onLoad(async (options) => {
   const id = options.id || 462;
   const data = await getPractiseAPI(id);
   if (!data.arrows.length) return;
-  var ctx = uni.createCanvasContext("shareCanvas");
-  const width = 303;
-  const height = 535;
-  ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
-  drawRoundImage(ctx, user.value.avatar, 20, 20, 35, 35, 20);
-  ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
-  renderText(ctx, user.value.nickName, 14, "#fff", 77, 35, "center");
-  renderRankTitle(ctx, user.value.lvlName, "center");
-
-  let titleImage = "../static/first-try-title.png";
-  let subTitle = "正式开启弓箭手之路";
-  if (options.type > 1) {
-    subTitle = `今日弓箭练习打卡 ${data.createdAt
-      .split(" ")[0]
-      .replaceAll("-", ".")}`;
-  }
-  if (options.type == 2) {
-    titleImage = "../static/practise-one-title.png";
-  } else if (options.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();
+  generateCanvasImage("shareCanvas", options.type, user.value, data);
 });
 
 const saveImage = () => {
@@ -104,24 +43,23 @@ const saveImage = () => {
     <view class="content">
       <view :style="{ overflow: 'hidden', borderRadius: '10px' }">
         <canvas
-          style="width: 302px; height: 534px"
+          :style="{ width: '302px', height: '534px' }"
           canvas-id="shareCanvas"
-          id="firstCanvas"
         ></canvas>
       </view>
       <view class="footer">
-        <view>
+        <button hover-class="none" @click="wxShare">
           <image src="../static/wechat-outline.png" mode="widthFix" />
           <text>微信好友</text>
-        </view>
-        <view>
+        </button>
+        <button hover-class="none">
           <image src="../static/wechat-moment.png" mode="widthFix" />
           <text>朋友圈</text>
-        </view>
-        <view @click="saveImage">
+        </button>
+        <button hover-class="none" @click="saveImage">
           <image src="../static/download.png" mode="widthFix" />
           <text>保存到相册</text>
-        </view>
+        </button>
       </view>
     </view>
   </Container>
@@ -141,14 +79,14 @@ const saveImage = () => {
   justify-content: space-around;
   margin-top: 50px;
 }
-.footer > view {
+.footer > button {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: #fff;
   font-size: 12px;
 }
-.footer > view > image {
+.footer > button > image {
   width: 45px;
   margin-bottom: 10px;
 }