android-cloud-H5/pages/activity/rentNo/index.vue

<template>
  <div class="bg">
    <img v-if="num" class="btn" src="~/assets/image/activity/rentNo/btn-active.png" alt="" @click="receiverGameRentNoCode()">
    <img v-else class="btn" src="~/assets/image/activity/rentNo/btn.png" alt="">
    <div class="tip">
      领取次数剩余 <span class="cFE87C7">{{ num }}</span> 次（数量有限 先到先得）
    </div>
    <img class="rule" src="~/assets/image/activity/rentNo/rule.png" alt="" @click="getRecordList()">
    <van-popup v-model="show" :style="{ background: 'transparent' }">
      <div class="w280h335">
        <div class="c333333">领取记录</div>
        <div class="mlr15">
          <div class="frnb bb1">
            <div class="c666666 ml20">激活码</div>
            <div class="c666666 mr30">操作</div>
          </div>
          <div class="h173">
            <div v-for="item in list" :key="item.id" class="frnb">
              <div class="fs15 ml20">{{ item.code | activationCodeMask }}</div>
              <div class="c2E76F9 mr30" @click="copy(item.code)">复制</div>
            </div>
          </div>
        </div>
      </div>
      <img class="wh35" src="~/assets/image/activity/rentNo/close.png" alt="" @click="show = false">
    </van-popup>
    <van-popup v-model="showResult" :style="{ background: 'transparent' }">
      <div class="w280h248">
        <div class="c333333">恭喜您获得体验会员</div>
        <div class="fs15">激活码：<span class="c0FA2EB">{{ code | activationCodeMask }}</span></div>
        <img class="w160h44" src="~/assets/image/activity/rentNo/btn-copy.png" alt="" @click="copy(code)">
      </div>
      <img class="wh35" src="~/assets/image/activity/rentNo/close.png" alt="" @click="showResult = false">
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  auth: false,
  filters: {
    activationCodeMask(value) {
      // 微信环境不支持零宽断言
      return value.replace(/(.{4})(.*)(.{4}$)/, '$1***$3');
    },
  },
  data() {
    return {
      show: false,
      showResult: false,
      token: '',
      list: [],
      num: 0,
      code: ''
    }
  },
  head: {
    title: '惊喜礼包领取'
  },
  created() {
    this.token = this.$route.query.token;
    this.gameRentNoCodeInfo()
  },
  mounted() {
    document.addEventListener('visibilitychange', this.handleVisiable)
  },
  destroyed() {
    document.removeEventListener('visibilitychange', this.handleVisiable)
  },
  methods: {
    handleVisiable(e) {
      if (e.target.visibilityState === 'visible') {
        this.gameRentNoCodeInfo();
      }
    },
    async gameRentNoCodeInfo() {
      try {
        const res = await this.$axios.$get('/activity/game/rentNo/gameRentNoCodeInfo', { headers: { Authorization: this.token } });
        this.num = res.data
      } catch (err) {
        Toast({
          message: err.message,
          duration: 3000
        });
      }
    },
    async getRecordList() {
      try {
        const res = await this.$axios.$get('/activity/game/rentNo/receive/record?pageNum=1&pageSize=10000', { headers: { Authorization: this.token } });
        this.list = res.data.list;
        this.show = true
      } catch (err) {
        Toast({
          message: err.message,
          duration: 3000
        });
      }
    },
    async receiverGameRentNoCode() {
      try {
        const res = await this.$axios.$post('/activity/game/rentNo/receiverGameRentNoCode', { userName: this.$auth.user.username }, { headers: { Authorization: this.token } });
        this.code = res.data
        this.gameRentNoCodeInfo();
        this.showResult = true;
      } catch (err) {
        Toast({
          message: err.message,
          duration: 3000
        });
      }
    },
    async copy(code) {
      await this.$native.clipboard.writeText(code);
      this.$toast.success('复制成功');
    }
  }
}
</script>

<style lang="scss">
.bg {
  background-size: 100% auto;
  overflow: hidden;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 30px);
  background-image: url('~/assets/image/activity/rentNo/bg.png');
  height: 1052px;

  .btn {
    width: 300px;
    height: 72px;
    display: block;
    margin: 484px auto 0;
  }

  .tip {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    color: #FFFFFF;
    text-shadow: 0px 1px 2px rgba(253, 93, 190, 0.18);
    border-radius: 5px;
    margin-top: 11px;

    .cFE87C7 {
      color: #FE87C7;
      font-size: 20px;
      font-weight: bold;
    }
  }

  .rule {
    width: 35px;
    height: 103px;
    position: absolute;
    right: 0;
    top: 183px;
  }

  .w280h335 {
    width: 280px;
    height: 335px;
    background: url('~/assets/image/activity/rentNo/dialog.png');
    background-size: 100% 100%;
    overflow: hidden;

    .c333333 {
      height: 18px;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      text-align: center;
      margin-top: 91px;
    }

    .mlr15 {
      margin: 10px 15px 22px;

      .frnb {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 30px;
        line-height: 30px;
      }

      .c666666 {
        font-size: 15px;
        color: #666666;
      }

      .ml20 {
        margin-left: 20px;
      }

      .mr30 {
        margin-right: 30px;
      }

      .bb1 {
        border-bottom: 1px solid #E6E6E6;
      }

      .fs15 {
        font-size: 15px;
        font-weight: 400;
        color: #333333;
      }

      .c2E76F9 {
        font-size: 15px;
        font-weight: 400;
        color: #2E76F9;
      }

      .h173 {
        height: 173px;
        overflow-y: auto;
      }
    }
  }

  .w280h248 {
    width: 280px;
    height: 248px;
    background: url('~/assets/image/activity/rentNo/dialog2.png');
    background-size: 100% 100%;
    overflow: hidden;

    .c333333 {
      font-size: 24px;
      font-weight: 400;
      color: #333333;
      text-align: center;
      margin-top: 108px;
    }

    .fs15 {
      font-size: 15px;
      font-weight: 400;
      color: #333333;
      text-align: center;
      margin-top: 10px;
    }

    .c0FA2EB {
      font-size: 15px;
      font-weight: 400;
      color: #0FA2EB !important;
    }

    .w160h44 {
      width: 160px;
      height: 44px;
      display: block;
      margin: 11px auto 0;
    }
  }

  .wh35 {
    width: 35px;
    height: 35px;
    margin: 23px auto 0;
    display: block;
  }
}
</style>