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">
        <view class="draw-item col-4" :class="{active:(checked == index)}" v-for="(item,index) in drawList">
          <view class="draw-item-container" v-if="index != 4">
            <view class="draw-item-content">
              <image class="img" mode="aspectFill" :src="item.img"/>
              <view class="draw-title ">{{item.title}}</view>
            </view>
          </view>
          <view class="draw-item-container start-draw" :class="{disabled:!drawButton}" v-else>
            <view class="draw-item-content " @click="drawAni()">
              <image class="img" mode="aspectFill" :src="item.img"/>
              <view class="draw-title">{{item.title}}</view>
            </view>
          </view>
        </view>
      </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';

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',
      drawList: [
        {
          img:imghost+'/static/image/banner.png',
          title:'优惠券'
        },{
          img:imghost+'/static/image/banner.png',
          title:'优惠券'
        },{
          img:imghost+'/static/image/banner.png',
          title:'优惠券'
        },{
          img:imghost+'/static/image/banner.png',
          title:'优惠券'
        },{
          img:imghost+'/static/image/banner.png',
          title:'开始抽奖'
        },{
          img:imghost+'/static/image/banner.png',
          title:'优惠券'
        },{
          img:imghost+'/static/image/banner.png',
          title:'优惠券'
        },{
          img:imghost+'/static/image/banner.png',
          title:'优惠券'
        },{
          img:imghost+'/static/image/banner.png',
          title:'优惠券'
        },
      ],
    }
  },
  onLoad() {

  },
  methods: {
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
    drawAni(){
        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;
    }
  },
  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>