租号需求

pages/activity/rentNo/index.vue

@@ -0,0 +1,249 @@
+<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 }}</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 }}</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,
+  data() {
+    return {
+      show: false,
+      showResult: false,
+      token: '',
+      list: [],
+      num: 0,
+      code: ''
+    }
+  },
+  created() {
+    this.token = this.$route.query.token;
+    this.gameRentNoCodeInfo()
+  },
+  methods: {
+    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.showResult = true;
+      } catch (err) {
+        Toast({
+          message: err.message,
+          duration: 3000
+        });
+      }
+    },
+    async copy(item) {
+      await this.$native.clipboard.writeText(item.activationCode);
+      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>