wfg
/
lottery


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
  <title>领取奖励</title>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet"
    href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742018383195/element-ui.css">
  <!-- 必须先引入vue，  后使用element-ui -->
  <script
    src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
  <!-- 引入element 的组件库-->
  <script
    src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017747738/element-ui.js"></script>
  <!-- <script src="js/vconsole.min.js"></script>
  <script>
		  var vConsole = new window.VConsole();
		</script> -->
</head>
<style>
  body {
    margin: 0;
    padding: 0;
  }

  .box {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background: #FAFAFA;
  }

  .page5 {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 30px 20px 0;
  }

  .redeem_code {
    height: 343px;
    background: #FFFFFF;
    border-radius: 15px;
    padding: 20px 35px 15px 38px;
    margin: 0 10px;
    box-sizing: border-box;
  }

  .redeem_code_title {
    font-weight: 500;
    font-size: 14px;
    color: #999999;
    text-align: center;
  }

  .redeem_code_num {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    color: #2885FF;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .code_num {
    font-weight: 500;
    font-size: 14px;
    color: #222222;
    padding-right: 15px;
    line-height: 28px;
  }

  .redeem_erCode {
    width: 240px;
    height: 240px;
    float: right;
  }

  .tip_title {
    font-weight: 500;
    font-size: 14px;
    color: #222222;
    display: flex;
    align-items: center;
    padding: 20px 0 10px;
  }

  .tip_title:before {
    content: '';
    width: 4px;
    height: 16px;
    background: #2885FF;
    border-radius: 2px;
    display: inline-block;
    margin-right: 5px;
  }

  .tip_content {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    line-height: 20px;
    padding-bottom: 8px;
  }
</style>

<body>
  <div id="box" class="box">
    <!-- 领取奖励 -->
    <div class="page5">
      <div class="redeem_code">
        <div class="redeem_code_title">兑换码</div>
        <div class="redeem_code_num">
          <span class="code_num">{{prizeCode}}</span>
          <span @click="handleCopy(prizeCode)">复制</span>
        </div>
        <image class="redeem_erCode" :src="urlQrCode"></image>
      </div>
      <div class="tip_title">领取指引:</div>
      <div class="tip_content">1、请复制兑换码并保存二维码</div>
      <div class="tip_content">2、使用个人微信扫描二维码，输入兑换码，领取现金激励</div>
      <div class="tip_title">注意事项:</div>
      <div class="tip_content">1、兑换码仅限领一次</div>
      <div class="tip_content">2、兑换码是领取激励的唯一凭证，请妥善保管，避免因遗忘泄露等问题给您造成经济损失</div>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#box',
    data () {
      return {
        prizeCode: '',
        urlQrCode: '',
      }
    },
    created () {
      this.prizeCode = this.getQueryParam('prizeCode')
      this.urlQrCode = this.getQueryParam('urlQrCode')
    },
    methods: {
      // 检测是否iOS端
      iosAgent () {
        return navigator.userAgent.match(/(iPhone|iPod|iPad);?/i);
      },
      // 复制文本函数，微信端，需要在用户触发 Click 事件里面才能执行成功
      handleCopy (message) {
        if (this.iosAgent()) {
          let inputObj = document.createElement("input");
          inputObj.value = message;
          document.body.appendChild(inputObj);
          inputObj.select();
          inputObj.setSelectionRange(0, inputObj.value.length);
          this.execCommand('Copy');
          document.body.removeChild(inputObj);
        } else {
          let domObj = document.createElement("span");
          domObj.innerHTML = message;
          document.body.appendChild(domObj);
          let selection = window.getSelection();
          let range = document.createRange();
          range.selectNodeContents(domObj);
          selection.removeAllRanges();
          selection.addRange(range);
          this.execCommand('Copy');
          document.body.removeChild(domObj);
        }
      },
      // 执行浏览器命令 Copy 顺便输出一下日志，如果在移动端推荐写个方法展示日志或者用alert(msg)也行。
      execCommand (action) {
        let is = document.execCommand(action);
        if (is) {
          this.$message({
            message: '复制成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '复制失败',
            type: 'error'
          })
        }
      },
      // 截取url中的数据
      getQueryParam (paramName) {
        // 获取当前URL的查询字符串部分  
        const queryString = window.location.search;
        // 创建一个URLSearchParams对象  
        const urlParams = new URLSearchParams(queryString);
        // 返回指定参数的值，如果不存在则返回null  
        return urlParams.get(paramName);
      },
    }
  })   
</script>

</html>