xiuli.gao
/
h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530
							<!DOCTYPE html>
<html lang="zh" style="font-size: 365.867px;">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="stylesheet" type="text/css" href="./static/public_css.css">
    <link rel="stylesheet" type="text/css" href="./static/common.css">
    <script type="text/javascript" src="./static/public.js"></script>
    <script type="text/javascript" src="./static/nanoid.js"></script>
    <script type="text/javascript" src="./static/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="./static/vue.js"></script>
    
    <title>999感冒灵-暖心补给大吉大灵</title>
    <style>
      .container {
        background-color: #9ccb71;
        min-height: 100vh;
        box-sizing: border-box;
        position: relative;
        padding-bottom: 20px;
      }
      .container .bg-img {
        width: 100%;
      }
      .container .bg-write{
        position: absolute;
        top: 0.86rem;
        width: 78vw;
        left: 50%;
        transform: translateX(-50%);
      }
      .title-btn {
        position: absolute;
        width: 2.5rem;
        top: 5.2rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .container .prize-wrap {
        position: absolute;
        width: 100%;
        top: 7.45rem;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        padding: 0 0.25rem;
      }
      .container .prize-wrap .prize-item {
        width: 0.95rem;
        margin-bottom: 0.07rem;
      }
      .container .prize-wrap .prize-item:nth-child(7),
      .container .prize-wrap .prize-item:nth-child(8),
      .container .prize-wrap .prize-item:nth-child(9) {
        margin-bottom: 0;
      }
      .container .prize-wrap .prize-item img {
        width: 100%;
      }
      .container .prize-wrap .prize-item.active img {
        transform: scale(1.1);
      }

      .container .context {
        position: fixed;
        bottom: 50vh;
        width: 100%;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .container .context .tip {
        background-color: rgba(40, 40, 40, 0.8);
        color: aliceblue;
        font-size: 0.13rem;
        padding: 0.1rem;
        border-radius: 0.08rem;
      }

      .win-dialog {
        position: fixed;
        top: 20vh;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
      }
      .win-dialog .win-wrap {
        position: relative;
        width: 75vw;
      }
      .win-dialog .win-wrap .win-bg {
        width: 100%;
      }
      .win-dialog .win-wrap .win-prizeName {
        position: absolute;
        top: 1.8rem;
        color: #444;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
      .win-dialog .win-wrap .win-prizeName .win-prizeName-name{
        font-size: 0.15rem;
        font-weight: 500;
        line-height: 0.18rem;
      }
      .win-dialog .win-wrap .win-prizeName-note {
        font-size: 0.1rem;
        transform: scale(0.88);
        margin-top: -0.03rem;
      }
      .win-dialog .win-wrap .win-prizeImg {
        position: absolute;
        top: 0.912rem;
        left: 50%;
        transform: translateX(-50%);
        width: 0.8rem;
        height: 0.8rem;
      }
      .win-dialog .win-wrap .win-name {
        position: absolute;
        bottom: 1.54rem;
        left: 0.65rem;
        width: 1.9rem;
        height: 0.22rem;
        font-size: 0.11rem;
        font-weight: 500;
        background-color: transparent;
        border: none;
        outline: none;
        color: #fff;
      }
      .win-dialog .win-wrap .win-phone {
        position: absolute;
        bottom: 1.16rem;
        left: 0.65rem;
        width: 1.9rem;
        height: 0.22rem;
        font-size: 0.11rem;
        font-weight: 500;
        background-color: transparent;
        border: none;
        outline: none;
        color: #fff;
      }
      .win-dialog .win-wrap .win-adress {
        position: absolute;
        bottom: 0.79rem;
        left: 0.65rem;
        width: 1.9rem;
        height: 0.22rem;
        font-size: 0.11rem;
        font-weight: 500;
        background-color: transparent;
        border: none;
        outline: none;
        color: #fff;
      }
      .win-dialog .win-wrap .win-submit {
        position: absolute;
        bottom: 0.14rem;
        width: 1.4rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .lose-dialog {
        position: fixed;
        top: 25vh;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
      }
      .lose-dialog .lose-wrap {
        position: relative;
        width: 75vw;
      }
      .lose-dialog .lose-wrap .lose-bg {
        width: 100%;
      }
      .lose-dialog .lose-wrap .lose-btn{
        position: absolute;
        bottom: 0.5rem;
        width: 1.4rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .close-btn {
        position: absolute;
        right: 0;
        top: -0.4rem;
        width: 0.25rem;
        height: 0.25rem;
      }
      .yszc{
        bottom: 17px;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
      }
    </style>
    <script type="text/javascript">
      var url_params = getQueryUrl();
      var mz_ca = url_params.mz_ca || ''
      var mz_sp = url_params.mz_sp
      // 获取地址栏信息
      function getQueryUrl () {
        let url = window.location.href;
        let result = {};
        if (url.indexOf('?') > -1) {
          let str = url.split('?')[1];
          let temp = str.split('&');
          for (let i = 0; i < temp.length; i++) {
            let temp2 = temp[i].split('=');
            result[temp2[0]] = temp2[1]
          }
        }
        return result
      }
    </script>

    <script>
      (function(a, e, f, g, b, c, d) {
      a.ClickiTrackerName = b;
      a[b] = a[b] || function() {(a[b].queue = a[b].queue || []).push(arguments)};
      a[b].start = +new Date; c = e.createElement(f); d = e.getElementsByTagName(f)[0];
      c.async = 1; c.src = g; d.parentNode.insertBefore(c, d)
      })(window, document, 'script', '//stm-cdn.cn.miaozhen.com/clicki.min.js?v='+Math.round(new Date().getTime()/1000/300), 'stm_clicki');
      // console.log('mz_ca => ', mz_ca)
      // console.log('mz_sp => ', mz_sp)
      // var dcParam = 'dc-' + mz_ca
      // stm_clicki('create', dcParam, 'auto');
      stm_clicki('create', 'dc-2000593', 'auto');
      stm_clicki('send', 'pageview');
    </script>

  </head>

  <body>
    <div id="app" class="container">
      <div v-if="isShowWinDialog || isShowLoseDialog" class="mask"></div>
      <div class="context" v-show="isShowMsg">
        <span class="tip">{{ msg }}</span>
      </div>
      <img class="bg-write" src="./img2/play-write.png" alt="">
      <img src="./img2/bg-img.png" class="bg-img" />
      <div class="prize-wrap">
        <div
          v-for="(item, idx) in prizeList"
          :key="idx"
          :class="['prize-item', currentIdx === idx ? 'active' : '']"
          @click="onClickPrizeItem(idx)"
        >
          <img :src="item.img" />
        </div>
      </div>
      <div class="yszc" @click="showPrivacy = true">《隐私政策》</div>

      <div v-if="isShowWinDialog" class="win-dialog">
        <div class="win-wrap">
          <img class="close-btn" src="./img2/close-btn.png" @click="onClickClose" />
          <img class="win-bg" src="./img2/win-bg.png" />
          <img v-show="winPrizeImg" class="win-prizeImg" :src="winPrizeImg" />
          <div class="win-prizeName">
            <span class="win-prizeName-name">{{ winPrizeName }}</span>
            <p class="win-prizeName-note" v-if="winPrizeNote && winPrizeNote != ''">{{ winPrizeNote }}</p>
          </div>
          <input class="win-name" v-model="name" placeholder="请输入您的姓名" />
          <input class="win-phone" v-model="phone" placeholder="请输入您的电话" />
          <input class="win-adress" v-model="adress" placeholder="请输入您的地址" />
          <img class="win-submit" src="./img2/submit-btn.png" @click="onClickSubmit" />
        </div>
      </div>

      <div v-if="isShowLoseDialog" class="lose-dialog">
        <div class="lose-wrap">
          <img class="close-btn" src="./img2/close-btn.png" @click="onClickClose" />
          <img class="lose-bg" src="./img2/lose-bg.png" />
          <img class="lose-btn" src="./img2/lose_btn.png" @click="onClickClose" alt="">
        </div>
      </div>

      <!-- S 秒针隐私政策 -->
      <div class="mask" v-show="showPrivacy">
        <div class="mask_container">
          <div class="mask_title">隐私保护指引概要</div>
          <div class="mask_con">
            为了数据统计和分析的目的，我们的平台集成合作方秒针的 SDK，将收集您的如下信息，收集信息的目的、方式和范围具体见下表所示。 若您想进一步了解秒针的个人信息保护政策，您可以前往 <a
              href="https://miaozhen.com/cn/privacy" style="color:#3173FF;">https://miaozhen.com/cn/privacy</a> 进行查看。
          </div>
          <div class="mask_btn" @click="showPrivacy = false">我知道了</div>
        </div>
      </div>
      <!-- E 秒针隐私政策 -->
    </div>

    <script>
      // stm_clicki('send', 'event', '返回首页按钮', '点击', '导航按钮');
      console.log('url_params => ', url_params)
      var app = new Vue({
        el: '#app',
        data() {
          return {
            web_type: 'media_land_page2',
            prizeList: [
              { name: '', img: './img2/prize-default.png' },
              { name: '', img: './img2/prize-default.png' },
              { name: '', img: './img2/prize-default.png' },
              { name: '', img: './img2/prize-default.png' },
              { name: '', img: './img2/start-btn.png' },
              { name: '', img: './img2/prize-default.png' },
              { name: '', img: './img2/prize-default.png' },
              { name: '', img: './img2/prize-default.png' },
              { name: '', img: './img2/prize-default.png' }
            ],
            prizeIdxList: [0, 1, 2, 5, 8, 7, 6, 3],
            currentIdx: '',
            intervalTimer: null,
            timeoutTimer: null,

            uid: '',
            name: '',
            phone: '',
            adress: '',

            isShowMsg: false,
            msg: '',

            winPrizeName: '',
            winPrizeImg: '',
            winPrizeNote: '',
            isShowWinDialog: false,
            isShowLoseDialog: false,
            showPrivacy: false
          }
        },
        watch: {
          isShowMsg(isShow) {
            if (isShow) {
              setTimeout(() => {
                this.isShowMsg = false;
              }, 2000);
            }
          },
        },
        mounted() {
          this.handleGetUserInfo()
        },
        methods: {
          handleGetUserInfo() {
            this.uid = localStorage.getItem(`${this.web_type}_uid`) || ''
            if (!this.uid) {
              this.uid = nanoid && nanoid(10)
              localStorage.setItem(`${this.web_type}_uid`, `${this.web_type}_${this.uid}`)
            }
            console.log('this.uid => ', this.uid)
          },
          handleSetCurrentDay() {
            let date = new Date();
            let currentDay = date.getDate();
            localStorage.setItem('currentDay', currentDay)
          },
          handleGetIsJoined() { // 每天1次抽奖
            this.handleSetCurrentDay()
            const preDay = localStorage.getItem(`${this.web_type}_preDay`) || 0
            const currentDay = localStorage.getItem('currentDay')
            if (preDay && (Number(preDay) === Number(currentDay))) {
              return true
            } else {
              localStorage.setItem(`${this.web_type}_preDay`, currentDay)
              return false
            }
          },
          // handleGetIsJoined() { // 每个设备(uid)1次抽奖
          //   const isJoined = localStorage.getItem('isJoined') || false
          //   return isJoined
          // },
          // handleGetIsJoined() { // 不限制次数
          //   return false
          // },
          handleSetIsJoined(isJoined) {
            localStorage.setItem('isJoined', isJoined)
          },
          onClickPrizeItem(idx) {
            if (idx !== 4) return
            this.handleStart()
          },
          handleStart() {
            try {
              stm_clicki('send', 'event', '按钮', '点击', '抽奖按钮');
            } catch (error) {
              console.log(error)
            }
            if (this.handleGetIsJoined()) {
              this.msg = '您今日已参与过抽奖'
              this.isShowMsg = true
              return
            }
            this.handleSetIsJoined(true)
            this.handleGo()
            this.handleGetLucky()
          },
          handleGo() {
            let step = 0
            this.intervalTimer = setInterval(() => {
              if (step <= 7) {
                this.currentIdx = this.prizeIdxList[step]
                step++
              } else {
                this.currentIdx = 0
                step = 0
              }
            }, 60);
          },
          handleStop() {
            this.intervalTimer && clearInterval(this.intervalTimer)
            this.intervalTimer = null
            this.timeoutTimer && clearTimeout(this.timeoutTimer)
            this.timeoutTimer = null
            this.currentIdx = ''
          },
          handleGetLucky() {
            $.ajax({
              type: "post",
              url: "/api/kx/luckyDraw",
              dataType: 'json',
              data: {
                uid: this.uid,
                web_type: this.web_type
              },
              success: (res) => {
                if (this.intervalTimer) {
                  setTimeout(() => {
                    this.handleStop()
                    if (res.code == 0) {
                      if (res.data.lucky == 1) {
                        this.winPrizeName = res.data.prize.name
                        this.winPrizeImg = res.data.prize.img
                        this.winPrizeNote = res.data.prize.note
                        this.isShowWinDialog = true
                      } else {
                        this.isShowLoseDialog = true
                      }
                    } else {
                      this.msg = res.msg
                      this.isShowMsg = true
                    }
                  }, 2000);
                } else {
                  if (res.code == 0) {
                    if (res.data.lucky == 1) {
                      this.winPrizeName = res.data.prize.name
                      this.winPrizeImg = res.data.prize.img
                      this.winPrizeNote = res.data.prize.note
                      this.isShowWinDialog = true
                    } else {
                      this.isShowLoseDialog = true
                    }
                  } else {
                    this.msg = res.msg
                    this.isShowMsg = true
                  }
                }
              },
              error: () => {
                this.handleStop()
              }
            });
          },
          onClickSubmit() {
            if (!this.name) {
              this.msg = '请输入您的姓名'
              this.isShowMsg = true
              return
            }
            if (!this.phone) {
              this.msg = '请输入您的电话'
              this.isShowMsg = true
              return
            }
            if (!this.adress) {
              this.msg = '请输入您的地址'
              this.isShowMsg = true
              return
            }
            $.ajax({
              type: "post",
              url: "/api/kx/addLuckyInfo",
              dataType: 'json',
              data: {
                uid: this.uid,
                phone: this.phone,
                name: this.name,
                adress: this.adress,
              },
              success: (res) => {
                if (res.code == 0) {
                  this.isShowWinDialog = false
                  this.msg = '提交成功，感谢参与'
                  this.isShowMsg = true
                } else {
                  this.msg = res.msg
                  this.isShowMsg = true
                }
              }
            });
          },
          onClickClose() {
            this.isShowWinDialog = false
            this.isShowLoseDialog = false
          },
        },
      })
    </script>

  </body>
</html>