移动端 分享页

src/views/gui/Share.vue

@@ -5,6 +5,11 @@
     <div
       id="capture"
       class="wrapper-1"
+      :style="{
+        width: initialWrapperWidth + 'px',
+        height: initialWrapperHeight + 'px',
+        transform: wrapperTransformCss,
+      }"
     >
       <button
         v-show="!isSaving"
@@ -23,10 +28,10 @@
         v-if="answerNumber !== undefined"
         class="main"
       >
-        <span class="name">{{ userInfo.userName }}</span>在浙江省博物馆文澜阁学习系统中参与答题{{ answerNumber }}道
+        <span class="name">{{ userInfo.userName }}</span>在浙江省博物馆文澜阁学习系统中参与答题{{ answerNumber }}道{{ (isMobile && (badgeArchCurrent >= badgeArchGoal) || (badgeHistoryCurrent >= badgeHistoryGoal) || (badgeProtectorCurrent >= badgeProtectorGoal)) ? '，获得徽章：' : '' }}
       </p>
       <p
-        v-if="(badgeArchCurrent >= badgeArchGoal) || (badgeHistoryCurrent >= badgeHistoryGoal) || (badgeProtectorCurrent >= badgeProtectorGoal)"
+        v-if="!isMobile && ((badgeArchCurrent >= badgeArchGoal) || (badgeHistoryCurrent >= badgeHistoryGoal) || (badgeProtectorCurrent >= badgeProtectorGoal))"
         class="badge-num"
       >
         获得徽章：
@@ -71,11 +76,14 @@
       </div>
       <div class="splitter" />
       <div class="QRCode">
-        <canvas
-          id="qrcode-canvas"
+        <img
+          v-show="qrcodeDataUrl"
+          class=""
+          :src="qrcodeDataUrl"
+          alt=""
           draggable="false"
-        />
-        <p>扫描二维码</p>
+        >
+        <p>{{ isMobile ? `长按` : `扫描` }}二维码</p>
         <p>云游西湖文澜阁</p>
       </div>
       <img
@@ -110,15 +118,10 @@ import QRCode from 'qrcode'
 export default {
   data() {
     return {
-      visitNum: 1939,
-      yingZaoZhuanJiaNum: 56,
-      liShiDaRen: 424,
-      huShuShiZhe: 32,
-
       answerNumber: undefined,
-
+      qrcodeDataUrl: null,
       isSaving: false,
-      aDownloadHref: ''
+      aDownloadHref: '',
     }
   },
   computed: {
@@ -131,7 +134,26 @@ export default {
       'badgeArchGoal',
       'badgeHistoryGoal',
       'badgeProtectorGoal',
-    ])
+    ]),
+    initialWrapperWidth() {
+      return this.isMobile ? 338 : 804
+    },
+    initialWrapperHeight() {
+      return this.isMobile ? 596 : 793
+    },
+    wrapperTransformCss() {
+      if (this.isMobile) {
+        const WHRateViewport = window.innerWidth / window.innerHeight
+        const WHRateComp = this.initialWrapperWidth / this.initialWrapperHeight
+        if (WHRateViewport >= WHRateComp) { // 视口矮宽
+          return `scale(${window.innerHeight / this.initialWrapperHeight * 0.9})`
+        } else {
+          return `scale(${window.innerWidth / this.initialWrapperWidth * 0.9})`
+        }
+      } else {
+        return ''
+      }
+    }
   },
   mounted() {
     globalApi.getAnswerRecord().then((res) => {
@@ -140,8 +162,8 @@ export default {
     this.$nextTick(() => {
       var canvas = document.getElementById('qrcode-canvas')
 
-      QRCode.toCanvas(canvas, `location.origin${process.env.BASE_URL}index.html#/?m=768`, function (error) {
-        if (error) console.error('qrcode生成失败：', error)
+      QRCode.toDataURL(`${location.origin}${process.env.BASE_URL || '/'}index.html#/?m=768`).then((url) => {
+        this.qrcodeDataUrl = url
       })
     })
   },
@@ -183,8 +205,6 @@ export default {
   justify-content: center;
   align-items: center;
   > .wrapper-1 {
-    width: 804px;
-    height: 793px;
     position: relative;
     background-image: url(@/assets/images/share-bg.png);
     background-size: contain;
@@ -192,7 +212,6 @@ export default {
     background-position: center center;
     text-align: left;
     padding: 40px 100px 80px 100px;
-    overflow: auto;
     font-family: Source Han Sans CN-Regular, Source Han Sans CN;
     > button.close {
       position: absolute;
@@ -299,7 +318,9 @@ export default {
       margin-top: 22px;
       width: fit-content;
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      > .qrcode-canvas {
+      > img {
+        width: 143px;
+        height: 143px;
       }
       > p {
         margin-top: 6px;
@@ -337,4 +358,84 @@ export default {
     }
   }
 }
+
+.mobile {
+  .share {
+    > .wrapper-1 {
+      position: relative;
+      background-image: url(@/assets/images/share-bg-mobile.png);
+      padding: 40px 24px 20px 35px;
+      > button.close {
+        top: 40px;
+        right: 25px;
+        width: 21px;
+        height: 21px;
+      }
+      > .introduction-title-wrapper {
+        > h1.introduction-title {
+          background-image: url(@/assets/images/title-decorator-mobile.png);
+          font-size: 24px;
+          padding: 0 30px 15px 30px;
+        }
+      }
+      > p.main {
+        margin-top: 20px;
+        font-size: 12px;
+        line-height: 3em;
+        > .name {
+          font-size: 30px;
+        }
+      }
+      > ul.sample-wrap {
+        margin-top: 21px;
+        > li {
+          margin-right: 8px;
+          &:last-of-type {
+          }
+          > img {
+            width: 85px;
+            height: 85px;
+            margin-bottom: 6px;
+          }
+          > span {
+            font-size: 14px;
+          }
+        }
+      }
+      > .no-badge {
+        height: 130px;
+        font-size: 20px;
+        letter-spacing: 2px;
+      }
+      > .splitter {
+        margin-top: 34px;
+        height: 1px;
+      }
+      > .QRCode {
+        margin-top: 22px;
+        > img {
+          width: 100px;
+          height: 100px;
+          margin-bottom: 5px;
+        }
+        > p {
+          margin-top: 0px;
+          font-size: 12px;
+        }
+      }
+      > img.stamp {
+        width: 200px;
+        height: 200px;
+        right: -10px;
+        bottom: 40px;
+      }
+      > button.save {
+        bottom: 30px;
+        width: 116px;
+        height: 31px;
+        font-size: 16px;
+      }
+    }
+  }
+}
 </style>

src/views/gui/UserInfoMobile.vue

@@ -27,7 +27,9 @@
         ref="menu"
         :class="isExpanded ? 'my-show' : 'my-hide'"
       >
-        <button>
+        <button
+          @click="onClickShare"
+        >
           <img
             class=""
             src="@/assets/images/share.png"
@@ -181,12 +183,15 @@ export default {
     },
     onClickLogout() {
       globalApi.logout()
+      this.isExpanded = false
     },
     onClickRuleDesc() {
       this.$router.push({ name: 'RuleDesc' })
+      this.isExpanded = false
     },
     onClickShare() {
       this.$router.push({ name: 'Share' })
+      this.isExpanded = false
     },
     onClickBadgeInfo(badgeCode) {
       this.$router.push({ name: 'QuestionPositionTip', query: { badgeCode } })