upp

web/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@rollup/plugin-inject": "^5.0.3",
         "axios": "^1.4.0",
+        "html2canvas": "^1.4.1",
         "sass": "^1.62.1",
         "sass-loader": "^13.2.2",
         "vant": "^4.3.2",
@@ -562,6 +563,14 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -686,6 +695,14 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz",
@@ -908,6 +925,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.0.tgz",
@@ -1373,6 +1402,14 @@
         }
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1422,6 +1459,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vant": {
       "version": "4.3.2",
       "resolved": "https://registry.npmmirror.com/vant/-/vant-4.3.2.tgz",
@@ -1998,6 +2043,11 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -2060,6 +2110,14 @@
       "version": "2.20.3",
       "peer": true
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz",
@@ -2205,6 +2263,15 @@
       "version": "4.0.0",
       "peer": true
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "immutable": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.0.tgz",
@@ -2453,6 +2520,14 @@
         "terser": "^5.16.8"
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2476,6 +2551,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "vant": {
       "version": "4.3.2",
       "resolved": "https://registry.npmmirror.com/vant/-/vant-4.3.2.tgz",

web/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@rollup/plugin-inject": "^5.0.3",
     "axios": "^1.4.0",
+    "html2canvas": "^1.4.1",
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
     "vant": "^4.3.2",

web/src/components/Integral-detail.vue

@@ -90,11 +90,11 @@ const table = [
     integral: "+100",
     limit: "500",
   },
-  {
-    action: "分享",
-    integral: "+300",
-    limit: "900",
-  },
+  // {
+  //   action: "分享",
+  //   integral: "+300",
+  //   limit: "900",
+  // },
   {
     action: "青铜勋章",
     integral: "0-2000",

web/src/views/Courtyard.vue

@@ -8,27 +8,42 @@
         <img :src="`${config.cdn_url}images/btn_share.png`" alt="" />
       </li>
     </ul>
+    <!-- 点击分享出来的页面 -->
+    <div class="shareBox" v-show="shareShow">
+      <!-- 关闭按钮 -->
+      <div class="shareClose" @click="shareShow=false">
+        <img :src="`${config.cdn_url}images/icon_cancel.png`" alt="" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   setup(props) {},
+
+  data () {
+    return {
+      shareShow:false  
+    }
+  },
+
   methods: {
     // 点击编辑
     clickEdit() {
       this.$router.push({ name: "Editing" });
     },
     gotoShare() {
+      // this.shareShow=true
       // 跳转到小程序页面实现保存
       let ifrDom = document.querySelector("#ifr");
-
       ifrDom.contentWindow.postMessage(
         {
           source: "CallShareImage",
         },
         "*"
       );
+      // 直接使用canvs截图
     },
   },
 };
@@ -60,4 +75,24 @@ export default {
     }
   }
 }
+.shareBox {
+  position: fixed;
+  z-index: 101;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: aqua;
+  opacity: 0.5;
+  .shareClose{
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    width: 40px;
+    height: 40px;
+    &>img{
+      width: 100%;
+    }
+  }
+}
 </style>

web/yarn.lock

@@ -332,6 +332,11 @@
     "form-data" "^4.0.0"
     "proxy-from-env" "^1.1.0"
 
+"base64-arraybuffer@^1.0.2":
+  "integrity" "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+  "resolved" "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz"
+  "version" "1.0.2"
+
 "binary-extensions@^2.0.0":
   "integrity" "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
   "resolved" "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz"
@@ -386,6 +391,13 @@
 "commander@^2.20.0":
   "version" "2.20.3"
 
+"css-line-break@^2.1.0":
+  "integrity" "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w=="
+  "resolved" "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz"
+  "version" "2.1.0"
+  dependencies:
+    "utrie" "^1.0.2"
+
 "csstype@^2.6.8":
   "integrity" "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
   "resolved" "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz"
@@ -507,6 +519,14 @@
 "has-flag@^4.0.0":
   "version" "4.0.0"
 
+"html2canvas@^1.4.1":
+  "integrity" "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA=="
+  "resolved" "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz"
+  "version" "1.4.1"
+  dependencies:
+    "css-line-break" "^2.1.0"
+    "text-segmentation" "^1.0.3"
+
 "immutable@^4.0.0":
   "integrity" "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
   "resolved" "https://registry.npmmirror.com/immutable/-/immutable-4.3.0.tgz"
@@ -728,6 +748,13 @@
     "commander" "^2.20.0"
     "source-map-support" "~0.5.20"
 
+"text-segmentation@^1.0.3":
+  "integrity" "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw=="
+  "resolved" "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz"
+  "version" "1.0.3"
+  dependencies:
+    "utrie" "^1.0.2"
+
 "to-regex-range@^5.0.1":
   "integrity" "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="
   "resolved" "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz"
@@ -746,6 +773,13 @@
   dependencies:
     "punycode" "^2.1.0"
 
+"utrie@^1.0.2":
+  "integrity" "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw=="
+  "resolved" "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz"
+  "version" "1.0.2"
+  dependencies:
+    "base64-arraybuffer" "^1.0.2"
+
 "vant@^4.3.2":
   "integrity" "sha512-npAk1cxmVvth1L+/yQyNWUYb7Yrfhi0feojASUCVw9k9QnxGq+1pDjyjaFBXGv9dPuDOEqIiIZvTqUR2VvHGEA=="
   "resolved" "https://registry.npmmirror.com/vant/-/vant-4.3.2.tgz"