页面优化

components/SimpleShare/index.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="simple-share" v-if="shareFlag">
+    <!-- 分享按钮 -->
+    <div class="share__btns" @click="handleShare"></div>
+    <!-- 分享弹窗 -->
+    <div class="share__dialog" v-if="showDialog">
+      <div class="share__dialog_wrapper">
+        <div class="share__dialog__item" @click="handleShareWechat">
+          <i class="icon icon-share-wechat"></i>
+          <span>分享给好友</span>
+        </div>
+        <template v-if="showImage">
+          <div class="share__dialog__item">
+            <i class="icon icon-share-download"></i>
+            <span>保存相册</span>
+          </div>
+        </template>
+        <template v-else>
+          <div class="share__dialog__item" @click="handleGenerateImage">
+            <i class="icon icon-share-code"></i>
+            <span>生成二维码</span>
+          </div>
+        </template>
+      </div>
+      <div class="share-concel" @click="handleCancel">取消</div>
+    </div>
+    <!-- 图片预览 -->
+    <div class="share__image" v-if="showImage"><img :src="imageUrl" /></div>
+    <!-- 遮罩层 -->
+    <div class="share__mask" :class="maskClass" v-if="showMask" @click="handleCancel"></div>
+    <!-- 画布 -->
+    <canvas ref="canvas"></canvas>
+  </div>
+</template>
+
+<script>
+import { loadImage } from '~/utils'
+import QRCode from 'qrcode'
+import { isWeChat } from '~/utils/validator'
+export default {
+  data() {
+    return {
+      shareFlag: false,
+      showDialog: false,
+      showImage: false,
+      showMask: false,
+      imageUrl: '/share-code-bg.png',
+      shareGuide: false,
+      shareImageGuide: false,
+    }
+  },
+  computed: {
+    maskClass() {
+      return {
+        'share-guide': this.shareGuide,
+        'share-image-guide': this.shareImageGuide,
+      }
+    },
+  },
+  created() {
+    this.shareFlag = isWeChat()
+  },
+  methods: {
+    // 分享弹窗
+    handleShare() {
+      this.showDialog = true
+      this.showMask = true
+    },
+    // 取消
+    handleCancel() {
+      this.showDialog = false
+      this.showImage = false
+      this.showMask = false
+      this.shareGuide = false
+      this.shareImageGuide = false
+    },
+    // 生成图片
+    handleGenerateImage() {
+      this.drawImage()
+      this.showDialog = false
+    },
+    handleShareWechat() {
+      this.shareGuide = true
+      this.showDialog = false
+    },
+    async drawImage() {
+      const canvas = document.createElement('canvas')
+      canvas.width = 800
+      canvas.height = 1200
+
+      const ctx = canvas.getContext('2d')
+      const image = await loadImage('/share-code-bg.png')
+      ctx.drawImage(image, 0, 0, 800, 1200)
+      const url = window.location.href
+      const qrcodeUrl = await QRCode.toDataURL(url, { version: 5 })
+      const qrcodeImage = await loadImage(qrcodeUrl)
+      ctx.drawImage(qrcodeImage, 190, 600, 420, 420)
+
+      this.imageUrl = canvas.toDataURL('image/jpg')
+      this.showImage = true
+      this.shareImageGuide = true
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .simple-share {
+    display: none;
+  }
+}
+@media screen and (max-width: 768px) {
+  .simple-share {
+    position: relative;
+
+    .share__mask {
+      position: fixed;
+      z-index: 19;
+      width: 100vw;
+      height: 100vh;
+      left: 0;
+      top: 0;
+      background: rgba(0, 0, 0, 0.8);
+
+      &.share-guide {
+        background-image: url(/icon-share-guide1.png);
+        background-repeat: no-repeat;
+        background-position: top right;
+        background-size: 70vw;
+        z-index: 1000;
+      }
+
+      &.share-image-guide {
+        background-image: url(/icon-share-guide2.png);
+        background-repeat: no-repeat;
+        background-position: center 90%;
+        background-size: 50vw;
+      }
+    }
+
+    .share__btns {
+      position: fixed;
+      right: 4vw;
+      bottom: 32vw;
+      width: 12vw;
+      height: 12vw;
+      background: url(/icon-share.png) no-repeat center;
+      background-size: 12vw;
+      border-radius: 50%;
+      z-index: 19;
+    }
+
+    .share__image {
+      width: 80vw;
+      height: 120.2vw;
+      position: fixed;
+      left: 10vw;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 20;
+
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .share__dialog {
+      position: fixed;
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      background: #fff;
+      z-index: 21;
+      padding: 7.2vw 0;
+
+      .share-concel {
+        padding: 5.6vw 0;
+        margin-top: 5.6vw;
+        border-top: 0.1vw solid #e1e1e1;
+        text-align: center;
+        color: #333333;
+        font-size: 3.6vw;
+      }
+
+      .share__dialog_wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+
+        .share__dialog__item {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          width: 24%;
+
+          span {
+            font-size: 3.6vw;
+            color: #333333;
+            margin-top: 2.4vw;
+          }
+
+          .icon {
+            display: block;
+            width: 8.8vw;
+            height: 8.8vw;
+            background-size: 8.8vw;
+            background-repeat: no-repeat;
+            background-position: center;
+
+            &.icon-share-wechat {
+              background-image: url('~assets/image/share-icon-wechat.png');
+            }
+
+            &.icon-share-code {
+              background-image: url('~assets/image/share-icon-code.png');
+            }
+
+            &.icon-share-download {
+              background-image: url('~assets/image/share-icon-download.png');
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

configs/jssdk.js

@@ -3,4 +3,4 @@ export const appId = 'wx6512b1dfb84c28e1' // 测试
 
 // export const appSecret = '10f94918f59f630351319382bb29cab1'
 
-export const jsApiList = ['updateAppMessageShareData']
+export const jsApiList = ['updateAppMessageShareData','previewImage']

package-lock.json

@@ -19,6 +19,7 @@
         "js-cookie": "^3.0.1",
         "moment": "^2.29.4",
         "nuxt": "^2.15.8",
+        "qrcode": "^1.5.1",
         "sha1": "^1.1.1",
         "swiper": "^5.4.5",
         "three-dots": "^0.2.3",
@@ -6633,7 +6634,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6905,6 +6905,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
+      "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -7124,6 +7129,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
     "node_modules/encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -8575,7 +8585,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
       }
@@ -12482,6 +12491,14 @@
       "resolved": "https://registry.npmmirror.com/platform/-/platform-1.3.6.tgz",
       "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/pnp-webpack-plugin": {
       "version": "1.7.0",
       "resolved": "https://registry.npmmirror.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.7.0.tgz",
@@ -15457,6 +15474,66 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz",
+      "integrity": "sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.10.3",
       "resolved": "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz",
@@ -16073,7 +16150,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16081,8 +16157,7 @@
     "node_modules/require-main-filename": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "dev": true
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
     },
     "node_modules/requires-port": {
       "version": "1.0.0",
@@ -16795,8 +16870,7 @@
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "dev": true
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
     },
     "node_modules/set-value": {
       "version": "2.0.1",
@@ -19695,8 +19769,7 @@
     "node_modules/which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==",
-      "dev": true
+      "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q=="
     },
     "node_modules/wide-align": {
       "version": "1.1.5",
@@ -25192,8 +25265,7 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "dev": true
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
     },
     "decamelize-keys": {
       "version": "1.1.0",
@@ -25412,6 +25484,11 @@
         }
       }
     },
+    "dijkstrajs": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
+      "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -25611,6 +25688,11 @@
       "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
     },
+    "encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -26764,8 +26846,7 @@
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
     },
     "get-intrinsic": {
       "version": "1.1.1",
@@ -29921,6 +30002,11 @@
       "resolved": "https://registry.npmmirror.com/platform/-/platform-1.3.6.tgz",
       "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="
     },
+    "pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+    },
     "pnp-webpack-plugin": {
       "version": "1.7.0",
       "resolved": "https://registry.npmmirror.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.7.0.tgz",
@@ -32377,6 +32463,56 @@
       "resolved": "https://registry.npmmirror.com/q/-/q-1.5.1.tgz",
       "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
     },
+    "qrcode": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz",
+      "integrity": "sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==",
+      "requires": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "qs": {
       "version": "6.10.3",
       "resolved": "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz",
@@ -32892,14 +33028,12 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
     },
     "require-main-filename": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "dev": true
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
     },
     "requires-port": {
       "version": "1.0.0",
@@ -33483,8 +33617,7 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "dev": true
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
     },
     "set-value": {
       "version": "2.0.1",
@@ -35827,8 +35960,7 @@
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==",
-      "dev": true
+      "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q=="
     },
     "wide-align": {
       "version": "1.1.5",

package.json

@@ -25,6 +25,7 @@
     "js-cookie": "^3.0.1",
     "moment": "^2.29.4",
     "nuxt": "^2.15.8",
+    "qrcode": "^1.5.1",
     "sha1": "^1.1.1",
     "swiper": "^5.4.5",
     "three-dots": "^0.2.3",

pages/_template/ross/activity/challenge/index.vue

@@ -46,7 +46,8 @@
             <div>二等奖：视频点赞NO.2，30w+本地KOL网红探店种草；</div>
             <div>三等奖：视频点赞NO.3，10w+本地KOL网红探店种草；</div>
             <div>参与奖：成功发布3个带ROSS相关素材的视频，获2000元导胶一瓶（奖品数量有限，送完即止）；</div>
-            <div class="link">点击链接获取素材：<a href="https://zp.caimei365.com/12/ross/docs/1046"
+            <div class="link">
+              点击链接获取素材：<a href="https://zp.caimei365.com/12/ross/docs/1046"
                 >https://zp.caimei365.com/12/ross/docs/1046</a
               >
             </div>
@@ -114,6 +115,9 @@
       :confirmText="promptConfirmText"
       @confirm="onPromptConfirm"
     ></GeneralDialog>
+
+    <!-- 分享 -->
+    <SimpleShare />
   </div>
 </template>
 
@@ -134,6 +138,7 @@ export default {
     }
 
     return {
+      shareReady: false,
       dialog: true,
       activityState: 0,
       videoList: [],
@@ -490,7 +495,7 @@ export default {
   .page {
     padding-bottom: 120px;
     background: url(~assets/theme-images/ross/pc_activity_page_bg.png);
-    background-size:cover;
+    background-size: cover;
     .page-top {
       width: 100%;
       height: 530px;
@@ -530,11 +535,11 @@ export default {
         .title {
           font-size: 16px;
           font-weight: bold;
-          color: #FFFFFF;
+          color: #ffffff;
         }
         .more {
           font-size: 14px;
-          color: #FFFFFF;
+          color: #ffffff;
           cursor: pointer;
 
           &:hover {
@@ -548,7 +553,7 @@ export default {
 
         .title {
           font-size: 40px;
-          color: #FFF;
+          color: #fff;
           height: 80px;
           box-sizing: border-box;
           text-align: center;
@@ -570,16 +575,16 @@ export default {
             div {
               line-height: 24px;
               display: inline-block;
-              color:#FFFFFF;
-              position:relative;
-              &:before{
-                content:'';
-                width:117px;
-                height:5px;
-                background: linear-gradient(83deg, #DF1EFC 0%, #14C2ED 50%, #1430FF 100%);
-                position:absolute;
-                bottom:-5px;
-                left:3px;
+              color: #ffffff;
+              position: relative;
+              &:before {
+                content: '';
+                width: 117px;
+                height: 5px;
+                background: linear-gradient(83deg, #df1efc 0%, #14c2ed 50%, #1430ff 100%);
+                position: absolute;
+                bottom: -5px;
+                left: 3px;
               }
             }
           }
@@ -668,7 +673,7 @@ export default {
   .page {
     padding-bottom: 10vw;
     background: url(~assets/theme-images/ross/h5_activity_page_bg.png);
-    background-size:cover;
+    background-size: cover;
     .page-top {
       width: 100%;
       height: 100vw;
@@ -713,7 +718,7 @@ export default {
         }
         .more {
           font-size: 14px;
-          color: #FFFFFF;
+          color: #ffffff;
           cursor: pointer;
 
           &:hover {
@@ -728,7 +733,7 @@ export default {
 
         .title {
           font-size: 5vw;
-          color: #FFF;
+          color: #fff;
           height: 9vw;
           box-sizing: border-box;
           text-align: center;
@@ -748,22 +753,22 @@ export default {
             div {
               line-height: 3.2vw;
               display: inline-block;
-              color:#FFFFFF;
-              position:relative;
-              &:before{
-                content:'';
-                width:18.2vw;
-                height:0.8vw;
-                background: linear-gradient(83deg, #DF1EFC 0%, #14C2ED 50%, #1430FF 100%);
-                position:absolute;
-                bottom:-1vw;
-                left:0.5vw;
+              color: #ffffff;
+              position: relative;
+              &:before {
+                content: '';
+                width: 18.2vw;
+                height: 0.8vw;
+                background: linear-gradient(83deg, #df1efc 0%, #14c2ed 50%, #1430ff 100%);
+                position: absolute;
+                bottom: -1vw;
+                left: 0.5vw;
               }
             }
           }
           dd {
             font-size: 3.4vw;
-            color: #FFF;
+            color: #fff;
             text-align: justify;
             line-height: 5.6vw;
             margin-bottom: 8.8vw;
@@ -771,7 +776,7 @@ export default {
             a {
               color: #f3920d;
             }
-            .link{
+            .link {
               text-align: left;
             }
             &.desc {
@@ -790,7 +795,7 @@ export default {
             &.message {
               text-align: left;
             }
-            &.offset-time{
+            &.offset-time {
               text-align: center;
             }
           }

pages/_template/ross/activity/challenge/message.vue

@@ -3,6 +3,14 @@
     <div class="page-top">
       <div class="icon-submit-succsss"></div>
       <div class="tip">上传成功</div>
+      <template v-if="!isLoading">
+        <div class="msg" v-if="uploadedNum === 3">已成功上传<b>3</b>条视频，我们会尽快联系您领取奖品，敬请留意！</div>
+        <div class="msg" v-else>
+          已成功上传<b>{{ uploadedNum }}</b
+          >条视频，再上传<b>{{ unUploadedNum }}</b
+          >条视频即可获得 <span>2000元导胶一瓶</span>！
+        </div>
+      </template>
     </div>
     <div class="btn back" @click="onBack">返回首页</div>
   </div>
@@ -12,12 +20,45 @@
 import { mapGetters } from 'vuex'
 export default {
   layout: 'app-ross',
+  data() {
+    return {
+      isLoading: true,
+      videoList: [],
+    }
+  },
   computed: {
-    ...mapGetters(['routePrefix']),
+    ...mapGetters(['routePrefix', 'userInfo', 'authUserId']),
+    uploadedNum() {
+      return this.videoList.length
+    },
+    unUploadedNum() {
+      return 3 - this.videoList.length
+    },
+  },
+  created() {
+    this.fetchVideoList()
   },
   methods: {
+    // 获取当前机构已发布的视频列表
+    async fetchVideoList() {
+      try {
+        this.isLoading = true
+        if (!this.userInfo) return
+        const { clubUserId, mobile } = this.userInfo
+        const res = await this.$http.api.fetchOwnerVideoList({
+          mobile: mobile,
+          clubUserId: clubUserId,
+          authUserId: this.authUserId,
+        })
+        this.videoList = res.data
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
     // 返回
     onBack() {
+      console.log(this.routePrefix)
       const path = `${this.routePrefix}/activity/challenge`
       this.$router.push(path)
     },
@@ -57,6 +98,20 @@ export default {
       font-weight: bold;
       color: #1890ff;
     }
+
+    .msg {
+      margin-top: 16px;
+      font-size: 16px;
+
+      b {
+        margin: 0 2px;
+      }
+
+      span {
+        color: #f3920d;
+        font-weight: bold;
+      }
+    }
   }
 
   .page-content {
@@ -97,6 +152,18 @@ export default {
       font-weight: bold;
       color: #1890ff;
     }
+
+    .msg {
+      width: 68.8vw;
+      margin: 4vw auto auto;
+      font-size: 3.4vw;
+      text-align: center;
+
+      span {
+        color: #f3920d;
+        font-weight: bold;
+      }
+    }
   }
 
   .page-content {
@@ -128,7 +195,6 @@ export default {
     text-align: center;
     line-height: 12vw;
     font-size: 3.6vw;
-    margin-top: 24vw;
     margin-bottom: 24vw;
   }
 }

plugins/jssdk.js

@@ -7,7 +7,6 @@ Vue.prototype.$wxReady = async function (callback, apiList = []) {
     const url = window.location.href.split('#')[0]
     // console.log('当前页面地址：', url)
     const res = await Vue.prototype.$http.api.initWxConfig({ url, appId })
-    console.log(res)
     const wx = window.wx
     if (!wx) return
     wx.config({
@@ -19,7 +18,7 @@ Vue.prototype.$wxReady = async function (callback, apiList = []) {
       jsApiList: [...jsApiList, ...apiList], // 必填，需要使用的 JS 接口列表
     })
     wx.ready(callback(wx))
-    wx.fail(function (error) {
+    wx.error(function (error) {
       throw error
     })
   } catch (error) {

utils/index.js

@@ -140,7 +140,7 @@ export function getVideoBase64(url) {
     video.setAttribute('preload', 'auto')
     video.setAttribute('src', url)
     video.style.display = 'none'
-    if (/iPad|iPhone|iPod/.test(navigator.userAgent)){
+    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
       video.setAttribute('autoplay', true)
     }
     video.onloadeddata = () => {
@@ -157,3 +157,24 @@ export function getVideoBase64(url) {
     }
   })
 }
+
+/**
+ * 加载图片
+ * @param {string} url 图片链接
+ */
+export function loadImage(url, width, height) {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.width = width
+    image.height = height
+    image.src = url
+
+    image.onload = () => {
+      resolve(image)
+    }
+
+    image.onerror = (err) => {
+      reject(err)
+    }
+  })
+}