WenLanGe/src/views/gui/Share.vue

<template>
  <div
    class="share"
  >
    <div
      id="capture"
      class="wrapper-1"
      :style="{
        width: initialWrapperWidth + 'px',
        height: initialWrapperHeight + 'px',
        transform: wrapperTransformCss,
      }"
    >
      <button
        v-show="!isSaving"
        class="close"
        @click="$router.go(-1)"
      />
      <div class="introduction-title-wrapper">
        <h1
          class="introduction-title"
        >
          分享成绩
        </h1>
      </div>

      <p
        v-if="answerNumber !== undefined"
        class="main"
      >
        <span class="name">{{ userInfo.userName }}</span>在浙江省博物馆文澜阁学习系统中参与答题{{ answerNumber }}道{{ (isMobile && (badgeArchCurrent >= badgeArchGoal) || (badgeHistoryCurrent >= badgeHistoryGoal) || (badgeProtectorCurrent >= badgeProtectorGoal)) ? '，获得徽章：' : '' }}
      </p>
      <p
        v-if="!isMobile && ((badgeArchCurrent >= badgeArchGoal) || (badgeHistoryCurrent >= badgeHistoryGoal) || (badgeProtectorCurrent >= badgeProtectorGoal))"
        class="badge-num"
      >
        获得徽章：
      </p>
      <ul
        v-if="(badgeArchCurrent >= badgeArchGoal) || (badgeHistoryCurrent >= badgeHistoryGoal) || (badgeProtectorCurrent >= badgeProtectorGoal)"
        class="sample-wrap"
      >
        <li v-if="badgeArchCurrent >= badgeArchGoal">
          <img
            class=""
            src="@/assets/images/badge-architecture.png"
            alt=""
            draggable="false"
          >
          <span>营造专家</span>
        </li>
        <li v-if="badgeHistoryCurrent >= badgeHistoryGoal">
          <img
            class=""
            src="@/assets/images/badge-hitstory.png"
            alt=""
            draggable="false"
          >
          <span>历史达人</span>
        </li>
        <li v-if="badgeProtectorCurrent >= badgeProtectorGoal">
          <img
            class=""
            src="@/assets/images/badge-protector.png"
            alt=""
            draggable="false"
          >
          <span>护书使者</span>
        </li>
      </ul>
      <div
        v-else
        class="no-badge"
      >
        暂未获得勋章
      </div>
      <div class="splitter" />
      <div class="QRCode">
        <img
          v-show="qrcodeDataUrl"
          class=""
          :src="qrcodeDataUrl"
          alt=""
          draggable="false"
        >
        <p>{{ isMobile ? `长按` : `扫描` }}二维码</p>
        <p>云游西湖文澜阁</p>
      </div>
      <img
        v-if="(badgeArchCurrent >= badgeArchGoal) || (badgeHistoryCurrent >= badgeHistoryGoal) || (badgeProtectorCurrent >= badgeProtectorGoal)"
        src="@/assets/images/stamp.png"
        alt=""
        class="stamp"
      >
      <button
        v-show="!isSaving"
        class="save"
        @click="onClickSave"
      >
        <div class="text-wrapper">
          保存图片
        </div>
      </button>
    </div>
    <a
      v-show="false"
      ref="for-download"
      :href="aDownloadHref"
      download="share.jpg"
    />
  </div>
</template>

<script>
import html2canvas from "html2canvas"
import QRCode from 'qrcode'
import globalApi from "@/api"

export default {
  data() {
    return {
      answerNumber: undefined,
      qrcodeDataUrl: null,
      isSaving: false,
      aDownloadHref: '',
    }
  },
  computed: {
    ...globalMapState([
      'userInfo',
      'loginStatus',
      'badgeArchCurrent',
      'badgeHistoryCurrent',
      'badgeProtectorCurrent',
      '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) => {
      this.answerNumber = res.length
    })
    this.$nextTick(() => {
      QRCode.toDataURL(`${location.origin}${process.env.BASE_URL || '/'}index.html#/?m=768`).then((url) => {
        this.qrcodeDataUrl = url
      })
    })
  },
  methods: {
    onClickSave: globalUtils.throttle(function() {
      this.isSaving = true
      this.$nextTick(() => {
        // #capture 就是我们要获取截图对应的 DOM 元素选择器
        html2canvas(document.querySelector('#capture'), {
          useCORS: true, // 【重要】开启跨域配置
          scale: 1,
          allowTaint: true, // 允许跨域图片
          preserveDrawingBuffer: true,
        }).then((canvas) => {
          this.aDownloadHref = canvas.toDataURL('image/jpeg', 1.0)
          this.$nextTick(() => {
            this.$refs['for-download'].click()
            this.isSaving = false
          })
        })
      })
    }, 400)
  }
}
</script>

<style lang="less" scoped>
.share {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(46,32,19,0.55);
  backdrop-filter: blur(5px);
  z-index: 10000;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  display: flex;
  justify-content: center;
  align-items: center;
  > .wrapper-1 {
    position: relative;
    background-image: url(@/assets/images/share-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: left;
    padding: 40px 100px 80px 100px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    > button.close {
      position: absolute;
      top: 42px;
      right: 36px;
      width: 35px;
      height: 35px;
      background-image: url(@/assets/images/close.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    }
    > .introduction-title-wrapper {
      text-align: center;
      > h1.introduction-title {
        display: inline-block;
        background-image: url(@/assets/images/title-decorator-long.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        padding: 0 45px 15px 45px;
        font-size: 36px;
        font-family: LiSu-Regular, LiSu;
        font-weight: 400;
        color: #9A2D0A;
      }
    }
    > p.main {
      margin-top: 40px;
      font-size: 16px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      color: #8F4831;
      line-height: 20px;
      letter-spacing: 3px;
      > .name {
        font-size: 36px;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #8F4831;
        line-height: 40px;
        letter-spacing: 3px;
        text-decoration: underline;
      }
    }
    > p.badge-num {
      margin-top: 20px;
      text-align: left;
      font-size: 16px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      color: #8F4831;
      line-height: 20px;
      letter-spacing: 3px;
    }
    > ul.sample-wrap {
      margin-top: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      > li {
        text-align: center;
        margin-right: 87px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        &:last-of-type {
          margin-right: initial;
        }
        > img {
          display: block;
          width: 120px;
          height: 120px;
          margin-bottom: 7px;
        }
        > span {
          font-size: 16px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #693D2F;
        }
      }
    }
    > .no-badge {
      width: 100%;
      height: 238px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #8F4831;
      letter-spacing: 3px;
      opacity: 0.5;
    }
    > .splitter {
      margin-top: 32px;
      width: 100%;
      height: 2px;
      background: #8F4831;
      opacity: 0.5;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    }
    > .QRCode {
      margin-top: 22px;
      width: fit-content;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      > img {
        width: 143px;
        height: 143px;
      }
      > p {
        margin-top: 6px;
        width: 100%;
        text-align: center;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #583329;
      }
    }
    > img.stamp {
      position: absolute;
      width: 300px;
      height: 300px;
      right: 25px;
      bottom: 60px;
    }
    > button.save {
      position: absolute;
      left: 50%;
      bottom: 75px;
      transform: translateX(-50%);
      background-image: url(@/assets/images/button-border-small-color.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      width: 149px;
      height: 40px;
      padding: 3px;
      font-size: 20px;
      font-family: LiSu-Regular, LiSu;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}

.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>