完成分享图片UI

src/components/Avatar.vue

@@ -29,6 +29,7 @@ defineProps({
       v-if="frame"
       src="../static/avatar-frame.png"
       mode="widthFix"
+      :style="{ width: Number(size) + 10 + 'px', height: Number(size) + 10 + 'px' }"
       class="avatar-frame"
     />
     <image
@@ -67,8 +68,6 @@ defineProps({
 }
 .avatar-frame {
   position: absolute;
-  width: 55px;
-  height: 55px;
 }
 .avatar-rank,
 .rank-view {

src/components/ImageShare.vue

@@ -0,0 +1,168 @@
+<script setup>
+import useStore from "@/store";
+import Avatar from "@/components/Avatar.vue";
+
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "",
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const saveImage = () => {
+  // 获取当前页面的节点
+  const query = uni.createSelectorQuery();
+  query
+    .select(".content")
+    .fields({ node: true, size: true })
+    .exec((res) => {
+      // 创建canvas上下文
+      const canvas = uni.createCanvasContext("shareCanvas");
+
+      // 将页面内容绘制到canvas上
+      // 这里需要根据实际内容进行绘制
+      canvas.draw(false, () => {
+        // 将画布内容保存为图片
+        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>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view class="header">
+      <view @click="onClose">
+        <image src="../static/close-white.png" mode="widthFix" />
+      </view>
+    </view>
+    <view class="content">
+      <image src="../static/share-bg.png" mode="widthFix" />
+      <view>
+        <Avatar :src="user.avatarUrl" size="40" frame />
+        <view>
+          <text>{{ user.nickName }}</text>
+          <text>砖石1级</text>
+        </view>
+      </view>
+    </view>
+    <view class="footer">
+      <view>
+        <image src="../static/wechat-outline.png" mode="widthFix" />
+        <text>微信好友</text>
+      </view>
+      <view>
+        <image src="../static/wechat-moment.png" mode="widthFix" />
+        <text>朋友圈</text>
+      </view>
+      <view @click="saveImage">
+        <image src="../static/download.png" mode="widthFix" />
+        <text>保存到相册</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+.header {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+}
+.header > view > image {
+  width: 40px;
+  padding: 10px;
+}
+.content {
+  width: 75vw;
+  height: 130vw;
+  position: relative;
+}
+.content > image:first-child {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 15px;
+  z-index: -1;
+}
+.content > view:nth-child(2) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 20px 15px;
+}
+.content > view:nth-child(2) > view:last-child {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: #fff;
+  font-size: 14px;
+  margin-left: 10px;
+}
+.content > view:nth-child(2) > view:last-child > text:last-child {
+  font-size: 10px;
+  padding: 2px 5px;
+  background-color: #5f51ff;
+  border-radius: 10px;
+  color: #fff9;
+  margin-top: 5px;
+}
+.footer {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 50px;
+}
+.footer > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  font-size: 12px;
+}
+.footer > view > image {
+  width: 45px;
+  margin-bottom: 10px;
+}
+</style>

src/components/ScoreResult.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import IconButton from "@/components/IconButton.vue";
 import SButton from "@/components/SButton.vue";
+import ImageShare from "@/components/ImageShare.vue";
 import CoachComment from "@/components/CoachComment.vue";
 const props = defineProps({
   show: {
@@ -27,6 +28,7 @@ const props = defineProps({
 });
 const showPanel = ref(true);
 const showComment = ref(false);
+const showShare = ref(false);
 const closePanel = () => {
   showPanel.value = false;
   setTimeout(() => {
@@ -84,7 +86,11 @@ setTimeout(() => {
         </view>
       </view>
       <view>
-        <IconButton name="分享" src="../static/share.png" />
+        <IconButton
+          name="分享"
+          src="../static/share.png"
+          :onClick="() => (showShare = true)"
+        />
         <IconButton
           name="教练点评"
           src="../static/review.png"
@@ -95,6 +101,7 @@ setTimeout(() => {
         >
       </view>
     </view>
+    <ImageShare :show="showShare" :onClose="() => (showShare = false)" />
     <CoachComment :show="showComment" :onClose="() => (showComment = false)">
       {{ result.adjustmentHint }}
     </CoachComment>