pet_uni/pages/Draw/index.vue

<template>
  <HeaderNav title="惊喜抽抽抽" :is-back="true"></HeaderNav>
  <view class="body-background" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}"></view>
  <view class="app-wallpaper">
    <view class="draw-container" :style="{backgroundImage:'url('+staticImage.drawBackground+')'}">
      <view class="draw-content row">
          <template v-for="(item,index) in drawList">
              <view class="draw-item col-4" :class="{active:(checked === index)}" >
                  <view class="draw-item-container" >
                      <view class="draw-item-content">
                          <image class="img" mode="aspectFill" :src="item.logo"/>
                          <view class="draw-title ">{{item.title}}</view>
                      </view>
                  </view>
              </view>
              <view class="draw-item col-4"  v-if="index === 3" >
                  <view class="draw-item-container start-draw" :class="{disabled:!drawButton}">
                      <view class="draw-item-content " @click="drawAni()">
                          <image class="img" mode="aspectFill" :src="item.logo"/>
                          <view class="draw-title">开始抽奖</view>
                      </view>
                  </view>
              </view>
          </template>
      </view>
    </view>
    <view class="draw-info-container" :style="{backgroundImage:'url('+staticImage.drawInfoBackground+')'}">
      <view class="draw-title-group">
        <view class="draw-gun">
          <image class="img" :src="staticImage.drawInfoGun" mode="heightFix"/>
        </view>
        <view class="draw-image">
          <image class="img" :src="staticImage.drawInfoTitle" mode="widthFix"/>
        </view>
        <view class="draw-title">
          1、每人每次限参加一次抽奖活动<br>
          2、实物请到门店进行兑换<br>
          3、优惠券自动发送到中奖账户<br>
          4、优惠券不代表实际金额进行店内消费
        </view>
      </view>
    </view>
  </view>

  <view class="draw-shadow" v-show="drawShadow">
    <view class="draw-shadow-container">
        <view class="draw-shadow-image">
          <image class="img" :src="staticImage.drawInfoWZImg" mode="widthFix" v-show="!drawStatus"/>
          <image class="img" :src="staticImage.drawInfoZJImg" mode="widthFix" v-show="drawStatus"/>
        </view>
        <view class="draw-shadow-title">
          <image class="img" :src="staticImage.drawInfoWZTitle" mode="widthFix" v-show="!drawStatus"/>
          <image class="img" :src="staticImage.drawInfoZJTitle" mode="widthFix" v-show="drawStatus"/>
        </view>
        <view class="draw-shadow-content">
<!--          恭喜小主获得XX奖励，客服将会1个 工作日内联系您-->
          恭喜小主获得一匹大马，客服将会1个 工作日内联系您
        </view>
        <view class="draw-shadow-button row" @click="closeDrawShadow">
          <MzButton
              title="好的"
              button-color="#4DC3B8"
              font-color="#ffffff"
              button-width="250rpx"
          >
          </MzButton>
        </view>
    </view>
  </view>
  <!-- <RightNav></RightNav> -->
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import HeaderNav from '@/components/HeaderNav/Index.vue';
import FooterNav from '@/components/FooterNav/Index.vue';
import RightNav from '@/components/RightNav/Index.vue';
import MzButton from '../../components/MzButton/Index.vue';
import {drawList} from "@/api/draw";
import log from "@/utils/log";

export default {
  components: {
    HeaderNav,
    FooterNav,
    RightNav,
    MzButton
  },
  data() {
    return {
      drawButton:true,
      drawShadow:false,
      drawStatus:false,
      checked:0,
      drawOrder:[],
      drawId:7,
      drawOrderDefault:[0,1,2,5,8,7,6,3],
      title: 'Hello',
      loading: true,
      staticImage: {
        screenActiveImg: imghost + '/static/image/screen-active.png',
        wallpaperBgImage: imghost + '/static/image/card-background.png',
        dogImage: imghost + '/static/image/index-user-title-dog.png',
        drawBackground: imghost + '/static/image/draw-background.png',
        drawInfoBackground: imghost + '/static/image/draw-info-background.png',
        drawInfoTitle: imghost + '/static/image/draw-info-title.png',
        drawInfoGun: imghost + '/static/image/draw-info-gun.png',
        drawInfoZJImg: imghost + '/static/image/draw-Zj-img.png',
        drawInfoWZImg: imghost + '/static/image/draw-Wz-img.png',
        drawInfoZJTitle: imghost + '/static/image/draw-Zj-title.png',
        drawInfoWZTitle: imghost + '/static/image/draw-Wz-title.png',
      },
      indexBanner: [{
        image: imghost + '/static/image/banner.png',
        url: '',
      }],
      user: {
        avatar: imghost + '/static/image/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685
      },
      isTop: false,
      pagePadding: 100,
      petImage: imghost + '/static/image/pet_avatar1.jpeg',
      defaultImage: imghost + '/static/image/banner.png',
      drawList: [],
        loopIndex:0,
    }
  },
  onLoad() {
      this.getDrawList();
  },
  methods: {
    navTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    drawAni(){
        let draw = Math.round((Math.random() * 7)); // 奖品
        let loopIndex = 0;
        let checkIndex = [0, 1, 2, 4, 7, 6, 5, 3];
        let speed   = 3; // 初始步数，每轮翻倍
        let length  = 500; // 最大步数
        let current = 0; // 当前步数
        let t = setInterval(() => {
            if ((current++ % speed) === 0){
                this.checked = checkIndex[loopIndex++];
                if (loopIndex >= 8) {
                    loopIndex = 0;
                    speed *= 2;
                }
            }
            if (current > length && draw === loopIndex){
                clearInterval(t)
            }
        }, 10)

      //   // let t1 = this.loop(50);
      //   // setTimeout(() => {
      //   //     clearInterval(t1);
      //   //     let t2 = this.loop(100);
      //   //     setTimeout(() => {
      //   //         clearInterval(t2)
      //   //         let t3 = this.loop(200)
      //   //         setTimeout(() => clearInterval(t3), 2000)
      //   //     }, 2000);
      //   // },3000);
      //
      //   return;
      //
      //   let that = this;
      //   if(that.drawButton === false){
      //     return;
      //   }
      //   that.drawButton = false;
      //   that.drawOrder = [];
      //   for(let i=2;i<=3;i++){
      //     for(let index in that.drawOrderDefault){
      //       if(i===3 && that.drawId === that.drawOrderDefault[index]){
      //         break;
      //       }else{
      //         that.drawOrder.push(that.drawOrderDefault[index])
      //       }
      //     }
      //   }
      // console.log(that.drawOrder)
      //   let index = 0;
      //   let ani = setInterval(()=>{
      //     that.checked = that.drawOrder[index]
      //     index++;
      //     if(index>=that.drawOrder.length){
      //       clearInterval(ani);
      //       that.drawButton = true;
      //       that.drawShadow = true;
      //     }
      //   },200)
    },
    closeDrawShadow(){
      this.drawShadow = false;
    },
      getDrawList(){
          drawList().then(data => {
              log(data)
              this.drawList = data.data.goodslists;

              if (this.drawList.length < 8){
                  this.drawList.push(...Array(8 - this.drawList.length).fill({
                      logo:this.defaultImage,
                      title:'谢谢惠顾'
                  }));
              }

          })
      }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {
    // this.pagePadding = (api.navHeight().navPaddingTop +
    // api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {

  }
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>