vue 代碼寫 老虎機(jī)抽獎(jiǎng)活動

公司讓用vue寫幾個(gè)活動，老虎機(jī)，大轉(zhuǎn)盤，搖一搖，砸金蛋，翻牌，刮刮樂等活動。記錄下來。
這個(gè)是我老虎機(jī)抽獎(jiǎng)寫好后的圖片效果。代碼在下面，全代碼，不包括，活動規(guī)則和中獎(jiǎng)記錄的模板代碼，沒啥大用。


老虎機(jī)抽獎(jiǎng)

代碼我也懶的一個(gè)一個(gè)講了,太忙了，讓我一個(gè)月整好10個(gè)活動。。。。。還都是vue-cli腳手架搭建來寫，我怕是要猝死啊，嗚嗚
直接上代碼。我要是忽然不更新了，我怕是已經(jīng)涼了，記著撈我。


<template>
<div class="counts">
  <div class="banner">
      <img src="~img/banner_newyear.png">
    </div>
    <div class="total">

      <div class="game_user">— {{title}} —</div>
      <div class="num" ref="numHeight">
        <div class='slot' v-for='slot in slots' ref='slots'>
          <div class='slot__window'>
            <div class='slot__wrap'>
              <div class='slot__item' v-for='opt in slot.items'>
                <img :src="opt.goodsIconUrl">
                <span class="isTitle">{{opt.prizeName}}</span>
              </div>
              <div class='slot__item slot__item--copy'>
                <img :src="slot.items[0].goodsIconUrl">
                <span class="isTitle">{{slot.items[0].prizeName}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <img src="https://ojlf2aayk.qnssl.com/onebtn.png" v-if="isLucky" class="luckybtn" @click="start"> -->
      <div class="touchbtn_start  point_touch" @click="start"></div>

      <div class="btn_group">

                        <div class="add_btn">
                            <div class="act_rule" @click="showdiv(1)">活動規(guī)則</div>
                            <div class="luck_recond" @click="showdiv(2)">中獎(jiǎng)記錄</div>
                        </div>
                    </div>

    </div>

      <ruleComponent :itemsListName="itemsListName" v-if="isShowRule"></ruleComponent>
      <codeComponent :itemsListCodeName="itemsListCodeName" v-if="isShowCode"></codeComponent>
    <mt-popup v-model="popupVisible" :closeOnClickModal=false :modal = false>
      <div class="pop_box" @touchmove.prevent>
        <div class="tell_tit">
          <h1 class="pop-idea">用戶登錄</h1>
        </div>
        <div class="info-set">
          <div class="writer"><span>手機(jī)號：</span> <input v-model.trim="ruleForm.phone" type="tel" placeholder="請輸入您的入手機(jī)號" maxlength="11" class="tel_writer"></div>
          <div class="writer"><span>隨機(jī)碼：</span>
            <input v-model.trim="ruleForm.code" type="text" placeholder="請輸入隨機(jī)碼" maxlength="5" class="tel_writer">
            <img :src="createCode" @click="imgClick" class="print-code">
          </div>
          <div class="writer"><span>驗(yàn)證碼：</span> <input v-model.trim="ruleForm.createCode" type="tel" placeholder="請輸入驗(yàn)證碼" maxlength="4" class="tel_writer"> <div :style="btnImg" @click="reginInto" id="btn">{{reginValue}}</div></div>
        </div>
        <div class="sure_btn" @click="buttomRegin">立即登錄</div>
        <div class="close-btn" @click="popupVisible=false"><img src="~img/close.png"></div>
      </div>
    </mt-popup>
    <transition name="fade">
    <div class="isVodel" v-show="popupVisible" @touchmove.prevent>
    </div>
      </transition>

        <div class="isVodel" v-if="isShowRule" @touchmove.prevent></div>

      <div class="isVodel" v-if="isShowCode" @touchmove.prevent></div>


      <div class="popup" v-if="toast_control">
          <div class="popbg"></div>
          <div class="popbox">
            <div class="img" :class="{'img1':isImgTrue}"></div>
            <div class="words1">{{hasPrize.words1}}</div>
            <div class="words2">{{hasPrize.words2}}</div>
            <div class="words3" v-show="hasPrize.words3!=''">{{hasPrize.words3}}</div>
          </div>
          <div class="close" @click="toast_control=false"></div>
        </div>

</div>
</template>
<script>
const next = window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  window.oRequestAnimationFrame || function(cb) {
    window.setTimeout(cb, 1000 / 60)
  }
  import ruleComponent from "./rule.vue"
    import codeComponent from "./code.vue"
  import {
    initApi,
    loginApi,
    lotteryApi,
    awardApi,
    getCaptcha,
    sendCaptcha,
    registerApi,
    winning
  } from "../api/api";
export default {
  data() {
    return {
      isButton: false,
      popupVisible: false,
      isShowRule:false,
      isShowCode:false,
      createCode: "",
      isImgTrue:false,
      ruleForm: {
        phone: '',
        code: '',
        createCode: "",
      },
      hasPrize:{},
      reginValue: "獲取驗(yàn)證碼",
      isCode: true, //驗(yàn)證碼開關(guān)
      toast_control:false,
      itemsList:"",
      itemsListName:"",
      btnImg: {},
      title: '幸運(yùn)老虎機(jī)',
      isLucky: true,
      interval: false,
      numone: 0,
      numtwo: 0,
      numthe: 0,
      textone: 24,
      texttwo: 27,
      textthe: 30,
      slots: [],
      objectItem:[],
      opts: null,
      startedAt: null,
      indexChoice:0,
      winnum:0,
      itemsListCodeName:[],
    }
  },
  components: {
    ruleComponent,
    codeComponent
  },
  methods: {
    winningMenu(){
      winning().then((res)=>{
        if(res.httpCode=200){
          this.itemsListCodeName = res.data;
          this.isShowCode = true;
        }

      })
    },
    showdiv(index){
      if(index==1){
        this.itemsListName = this.itemsList;
        this.isShowRule = true;

      }else{
        if (this.isButton) {
          this.popupVisible = true;
          return
        }
        this.winningMenu();

      }
    },
    loginMenu() {
      let paramsName = "";
      if (window.location.host.split(".")[0] != "192") {
        paramsName = window.location.host.split(".")[0];
      } else {
        paramsName = "m02bsfsk"
      }

      loginApi(paramsName).then((res) => {
        if (res.httpCode == 200) {
          window.localStorage.setItem("activity_lefeng", res.data.sign);
          this.initApiMenu();

        }
      })
    },
    initApiMenu() {
        initApi().then((res)=>{
          this.ObjectAll = res.data;
          this.popupVisible = res.data.proRegister;
          this.isButton = res.data.proRegister;
          this.imgClick();

          res.data.marketingCampaign.terms.forEach((item, index) => {
            if (item.termType == 10) {
              this.itemsList = item.termVal;
            }
          })


          res.data.marketingCampaign.pictures.forEach((item) => {
            if (item.picType == "1000") {

              //document.body.style.backgroundImage = "url(" + item.picUrl + ")"
            } else if (item.picType == "1202") {
              //this.beganToDraw = "url(" + item.picUrl + ")"
            } else if (item.picType == "1200") {
              //this.beganToDrawImg = "url(" + item.picUrl + ")"
            }


          })

          res.data.marketingCampaign.prizes.forEach((item, index) => {

            this.objectItem.push({
              "prizeType": index + 1,
              "prizeName": item.prizeName,
              "goodsIconUrl": item.goodsInfo.goodsIconUrl,
              "goodsId": item.goodsId,
            })



          })



          for(var i=0;i<4;i++){
            this.slots.push({
                title: i,
                items: this.objectItem,
              });

          }


          console.log(this.slots);
        })
    },
    buttomRegin() {

      if (this.ruleForm.phone != "" || this.ruleForm.phone) {
        if (/^1[34578]\d{9}$/.test(this.ruleForm.phone)) {
          console.log("手機(jī)號通過驗(yàn)證");
        } else {
          this.$toast("請輸入正確的手機(jī)號")

          return false;
        }
      } else {
        this.$toast("請輸入手機(jī)號")
        return false;
      }

      if (this.ruleForm.code == "") {
        this.$toast("請輸入隨機(jī)碼")
        return false;
      }
      if (this.ruleForm.createCode == "") {
        this.$toast("請輸入驗(yàn)證碼")
        return false;
      }
      this.$indicator.open({
         text: '加載中...',
         spinnerType: 'fading-circle'
       });
      let params = {
        "phone": this.ruleForm.phone,
        "phoneCode": this.ruleForm.createCode,
      }

      registerApi(params).then((res) => {
        this.$indicator.close()
        if (res.httpCode == 200) {
          this.isButton = false;
          this.popupVisible = false;

        } else {
          this.$toast(res.retMsg)
        }
      }).catch((err)=>{
        this.$indicator.close();
        this.$toast("接口異常");
      })
    },
    //驗(yàn)證碼
    reginInto() {


      if (this.ruleForm.phone != "" || this.ruleForm.phone) {
        if (/^1[34578]\d{9}$/.test(this.ruleForm.phone)) {
          console.log("手機(jī)號通過驗(yàn)證");
        } else {
          this.$toast("請輸入正確的手機(jī)號")

          return false;
        }
      } else {
        this.$toast("請輸入手機(jī)號")
        return false;
      }

      if (this.ruleForm.code == "") {
        this.$toast("請輸入隨機(jī)碼")
        return false;
      }

      if (!this.isCode) {
        return false;
      }
      this.sendCaptchaMenu(this.ruleForm.code);




    },
    //發(fā)送驗(yàn)證碼
    sendCaptchaMenu(code) {
      let params = {
        "mobile": this.ruleForm.phone,
        "type": "sms_login",
        "captcha": code,
      }
      sendCaptcha(params).then((res) => {
        if (res.httpCode == 200) {
          this.btnImg = {
            "background": "#d3d4d6"
          }
          this.reginValue = "60秒"
          let isNum = 60
          this.isCode = false;
          var inteval = setInterval(() => {
            isNum--
            this.reginValue = isNum + "秒"
            if (isNum == 0) {
              clearInterval(inteval);
              this.isCode = true;
              this.reginValue = "獲取驗(yàn)證碼"
              this.btnImg = {
                "background": "#fc817e"
              }
            }

          }, 1000);
        } else {
          this.$toast(res.retMsg);
          this.isCode = true;
          this.reginValue = "獲取驗(yàn)證碼"
          this.btnImg = {
            "background": "#fc817e"
          }
          return false;
        }
      })
    },
    //隨機(jī)碼
    imgClick() {
      getCaptcha().then(res => {
        console.log(res);
        this.createCode = "data:image/png;base64," + res.data;
      });
      //$("#codeImg").attr("src","createCode?r="+Math.random())
    },
    startChou(index){
      console.log(this.$refs.numHeight.offsetHeight);
      let heightN = this.$refs.numHeight.offsetHeight;

      if (this.opts) {
        return
      }
      this.opts = this.slots.map((data, i) => {
        const slot = this.$refs.slots[i]; // map(function(){})利用map便利slots的每一個(gè)選項(xiàng)組,最終得到return的返回值
        // const choice = Math.floor(Math.random() * data.items.length); // 隨機(jī)生成一個(gè)[0,data.items.length]的整數(shù)(floor向下取整)
         const choice = index;
        console.log("choice", i, data.items[choice])
        const opts = {
          el: slot.querySelector('.slot__wrap'), //指向獎(jiǎng)項(xiàng)元素的父級;
          finalPos: choice * heightN, // 180為每一個(gè)獎(jiǎng)品滾動標(biāo)簽的高度;
          //        startOffset: 2000 + Math.random() * 500 + i * 500,// 影響轉(zhuǎn)的圈數(shù)
          startOffset: 2000 + Math.random() * 500 + i * 500, // 影響轉(zhuǎn)的圈數(shù)
          height: data.items.length * heightN,
          duration: 3000 + i * 700, // milliseconds
          isFinished: false,
        }
        return opts
      })
      //    console.log(this.opts);//這個(gè)時(shí)候this.opts已經(jīng)和opts一模一樣了
      next(this.animate); // 開啟動畫
    },
    start: function() {
      if (this.isButton) {
        this.popupVisible = true;
        return
      }


      lotteryApi().then((res) => {
        if (res.httpCode == 200) {
          this.objectItem.forEach((item, index) => {
            if (item.goodsId == res.data.goodsId) {

                this.winnum = index;
                this.startChou(this.winnum);
            }
          })
        }else{
          if(res.retCode=="10030001"){
            this.loginMenu();
          }else{
            this.$toast(res.retMsg)
          }
        }
      });


    },
    game_over(index) {
      let _this = this;
      _this.toast_control = true;
        var obj = {}
        if(index == 1){
            this.isImgTrue = false;
          if (_this.objectItem[_this.winnum].prizeName == "謝謝參與") {
            obj = {
              type: 0,
              words1: '謝謝參與',
              words2: "不要?dú)怵H！",
              words3: '還有更多大獎(jiǎng)等著你~'
            }
          }  else {
            obj = {
              type: 1,
              words1: '恭喜您！',
              words2: "獲得" + _this.objectItem[_this.winnum].prizeName,
              words3: ''
            }
          }
        }else{
          this.isImgTrue = true;
            obj = {
              type: 3,
              words1: '抱歉！',
              words2: '出現(xiàn)未知錯(cuò)誤，請稍后再試',
              words3: ''
            }
        }

        _this.hasPrize = obj
    },
    //兌獎(jiǎng)apo
    awardApiMenu() {
      let _this = this
      awardApi().then((res) => {
        if (res.httpCode == 200) {
          _this.game_over(1);
        }else{
            _this.game_over(2);
        }
      })
    },
    animate: function(timestamp) { // timestamp當(dāng)前的方法持續(xù)的毫秒數(shù)
      if (this.startedAt == null) {
        this.startedAt = timestamp // 動畫初始時(shí)間
      }
      const timeDiff = timestamp - this.startedAt //動畫持續(xù)的時(shí)間
      this.opts.forEach(opt => {
        if (opt.isFinished) {
          return
        }
        const timeRemaining = Math.max(opt.duration - timeDiff, 0); // 總的持續(xù)時(shí)間 - 動畫持續(xù)時(shí)間 = 剩下的時(shí)間,0表示結(jié)束
        const power = 3
        const offset = (Math.pow(timeRemaining, power) / Math.pow(opt.duration, power)) * opt.startOffset
        // Math.pow(timeRemaining, power)表示: timeRemaining 的3 次冪;
        // negative, such that slots move from top to bottom
        const pos = -1 * Math.floor((offset + opt.finalPos) % opt.height)
        opt.el.style.transform = "translateY(" + pos + "px)"

        if (timeDiff > opt.duration) {
          //        console.log('finished', opt, pos, opt.finalPost)
          opt.isFinished = true
        }

      })

      if (this.opts.every(o => o.isFinished)) {
        this.opts = null
        this.startedAt = null
        this.awardApiMenu();
        //      console.log('finished')
      } else {
        next(this.animate)
      }
    }
  },
  mounted() {
    this.loginMenu();
  }
}
</script>
<style media="screen">
.fade-enter-active, .fade-leave-active {
  transition: opacity .2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.mint-indicator{
  position: relative;
  z-index: 2000;
}
.mint-popup {
  z-index: 200!important;
}

</style>
<style scoped>

.pop_box {
  border-radius: .08rem;
  position: relative;
  left: 0;
  width: 6.2rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  z-index: 400;
  padding-bottom: .35rem;
}
.isVodel{
  position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background: #000;
z-index: 100;
}
.tell_tit {
  width: 100%;
  height: 1.44rem;

  background-size: 100% 100%;
}

.pop-idea {
  line-height: 1.44rem;
  font-size: .38rem;
  color: #fff;
  text-align: center;
  font-weight: 700;
  background-color: #00aca6;
  background-image: url(~img/clold.png);

}

.info-set {
  text-align: center;
}

.writer {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #989594;
  display: -ms-flexbox;
  display: flex;
  padding-top: .08rem;
  padding-bottom: .08rem;
}

.writer span {
  text-align: center;
  width: 1.5rem;
  color: #4d3932;
  font-size: .28rem;
  line-height: .8rem;
}

input[type=text] {
  -webkit-appearance: none;
  background: none;
  outline: none;
}

.writer input {
  -ms-flex: 1;
  flex: 1;
  color: #5a5340;
  font-size: .26rem;
  line-height: .3rem;
  border: none;
}

.print-code {
  position: absolute;
  width: 1.39rem;
  height: .5rem;
  right: .2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  margin: 0;
  padding: 0;
  outline: none;
  font-family: Hiragino Sans GB, "sans-serif";
}

.writer span {
  text-align: center;
  width: 1.5rem;
  color: #4d3932;
  font-size: .28rem;
  line-height: .8rem;
}

#btn {
  position: absolute;
  width: 1.49rem;
  height: .6rem;
  line-height: .6rem;
  right: .2rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: .45rem;
  text-align: center;
  color: #fff;
  background: #fc817e;
  font-size: .22rem;
}

.sure_btn {
  margin-top: .3rem;
  line-height: .65rem;
  width: 4.2rem;
  background: #fc817e;
  color: #fff;
  font-size: .26rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: .45rem;
  border-bottom: 4px solid #dc625d;
  text-align: center;
}



.close-btn {
  font-size: 15px;
  margin: 0;
  padding: 0;
  outline: none;
  font-family: Hiragino Sans GB, "sans-serif";
  position: absolute;
  top: -.19rem;
  right: -.19rem;
}

.close-btn img {
  width: .42rem;
  height: .42rem;
}
</style>
<style lang='less' scoped>

</style>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容