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">
                <view class="" style="width:95rpx;height:95rpx;display: inline-block;">
                  <u-image width="83" height="83" class="img" mode="aspectFill" :src="item.logo"></u-image>
                </view>
                <view class="draw-title ">
                  <u-text align="center" :lines="1" :text="item.title" :color="(checked === index)?'#fff':'#539188'" size="26rpx"></u-text>
                </view>
              </view>
            </view>
          </view>
          <view class="draw-item col-4" v-if="index === 3" style="padding:0;">
            <view  style="display:flex;height:100%;align-items: center;justify-content: center;">
              <view style="width:180rpx;height:180rpx;padding:5rpx;" class="draw-item-container start-draw" :class="{disabled:drawButton}">
                <view style="padding:0;height:100%;display: flex;flex-direction: column;align-items:center;justify-content: center;align-content: center;" class="draw-item-content " @click="doDraw()">
                  <view class="" style="width:95rpx;height:95rpx;display: inline-block;vertical-align: bottom;padding-top:20rpx;box-sizing: border-box;">
                    <u-image width="83" height="63" class="img" mode="aspectFill" :src="staticImage.pointDraw"></u-image>
                  </view>
                  <view class="draw-title">开始抽奖</view>
                </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">
          <view v-for="item in drawContent">
            {{ item }}
          </view>
<!--          <u-parse :content="drawContent"></u-parse>-->
        </view>
      </view>
    </view>
  </view>

  <view class="draw-shadow" v-if="drawShadow">
    <view class="draw-shadow-container">
      <view class="draw-shadow-image">
        <image class="img" :src="staticImage.drawInfoWZImg" mode="widthFix" v-if="!drawStatus"/>
        <image class="img" :src="staticImage.drawInfoZJImg" mode="widthFix" v-if="drawStatus"/>
      </view>
      <view class="draw-shadow-title">
        <image class="img" :src="staticImage.drawInfoWZTitle" mode="widthFix" v-if="!drawStatus"/>
        <image class="img" :src="staticImage.drawInfoZJTitle" mode="widthFix" v-if="drawStatus"/>
      </view>
      <view class="draw-shadow-content" v-if="drawStatus">
        <!--          恭喜小主获得XX奖励，客服将会1个 工作日内联系您-->
        恭喜小主获得{{gift.title}} * {{gift.number}}<br>客服将会1个 工作日内联系您

      </view>
      <view class="draw-shadow-content" v-else>
        <!--          恭喜小主获得XX奖励，客服将会1个 工作日内联系您-->
        并没中奖 <br>但收获了我们对你的爱

      </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, getDraw} from "@/api/draw";
import log from "@/utils/log";
import {getConfig} from "../../api/other";

export default {
  components: {
    HeaderNav,
    FooterNav,
    RightNav,
    MzButton
  },
  data() {
    return {
      drawButton: false,
      drawShadow: false,
      drawStatus: false,
      checked: 0,
      drawOrder: [],
      drawId: 0,
      drawOrderDefault: [0, 1, 2, 4, 7, 6, 5, 3],
      title: 'Hello',
      loading: true,
      staticImage: {
        screenActiveImg: imghost + '/screen-active.png',
        wallpaperBgImage: imghost + '/card-background.png',
        dogImage: imghost + '/index-user-title-dog.png',
        drawBackground: imghost + '/draw-background.png',
        drawInfoBackground: imghost + '/draw-info-background.png',
        drawInfoTitle: imghost + '/draw-info-title.png',
        drawInfoGun: imghost + '/draw-info-gun.png',
        drawInfoZJImg: imghost + '/draw-Zj-img.png',
        drawInfoWZImg: imghost + '/draw-Wz-img.png',
        drawInfoZJTitle: imghost + '/draw-Zj-title.png',
        drawInfoWZTitle: imghost + '/draw-Wz-title.png',
        pointDraw: imghost + '/draw-point.png',
        defaultImage:imghost + '/thanks-image.png',
      },
      indexBanner: [{
        image: imghost + '/banner.png',
        url: '',
      }],
      user: {
        avatar: imghost + '/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685
      },
      isTop: false,

      petImage: imghost + '/pet_avatar1.jpeg',
      drawList: [],
      loopIndex: 0,
      draw_id: '',
      thanksNumber:0,
      drawChecked:'',
      gift:{},
      drawContent:[],
    }
  },
  onLoad() {

  },
  methods: {
    navTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    notHaveDraw(){
      let that = this;
      let thankCheck = parseInt((Math.random() * this.thanksNumber));
      console.log(thankCheck)
      let i = 1;
      return new Promise((resolve,reject) => {
        that.drawList.forEach((item,index) => {
          if(item.title === '谢谢惠顾'){
            if(i === thankCheck){
              that.drawId = index;
              resolve(index);
            }else{
              i++;
            }
          }
        })
      });
    },
    haveDraw(id){
      let that = this;
      return new Promise((resolve, reject)=>{
        that.drawList.forEach((item,index) => {
          if(item.id === id){
            console.log(item.id)
            console.log(index)
            that.drawId = index;
            resolve(index);
          }
          if(that.drawList.length === (index+1)){
            resolve();
          }
        })
      })
    },
    doDraw(){
      let that = this;
      if(that.drawButton){
        return;
      }
      that.drawButton = true;
      getDraw({draw_id:this.draw_id}).then(res => {
        if(res.data.is_zhong === 1){
          this.gift = res.data
          that.drawStatus = true;
          that.haveDraw(res.data.goods_id).then((draw) => {
            that.drawAni(that.drawOrderDefault.indexOf(draw));
          })

        }else{

          that.drawStatus = false;
          that.notHaveDraw().then((draw) => {
            that.drawAni(that.drawOrderDefault.indexOf(draw));
          });
        }
      })

      // that.drawAni(that.drawOrderDefault.indexOf(0));
    },
    drawAni(drawIndex) {
      console.log('draw',drawIndex)
      // let draw = Math.round((Math.random() * 7)); // 奖品
      let loopIndex = 0;
      let checkIndex = this.drawOrderDefault;
      let speed = 3; // 初始步数，每轮翻倍
      let length = 500; // 最大步数
      let current = 0; // 当前步数
      let t = setInterval(() => {
        if (current > length && drawIndex === loopIndex) {
          console.log('loopIndex',loopIndex)
          console.log('checkIndex[loopIndex]',checkIndex[loopIndex])
          console.log(checkIndex)
          this.drawShadow = true;
          this.drawButton = false;
          clearInterval(t)
          return;
        }
        if ((current++ % speed) === 0) {
          loopIndex++;
          if (loopIndex >= 8) {
            loopIndex = 0;
            speed *= 2;
          }
          this.checked = checkIndex[loopIndex];
          console.log('checked',checkIndex[loopIndex])

        }
      }, 10)
    },
    closeDrawShadow() {
      this.drawShadow = false;
    },
    getDrawList() {
      drawList().then(data => {
        log(data)
        this.drawList = data.data.goodslists;
        this.draw_id = data.data.draw_id;

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

      })
    },
    getConfigData(){
      getConfig('Draw').then(res => {
        this.drawContent = res.data
      });
    }
  },
  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() {
    this.getDrawList();
    this.getConfigData();
  }
}
</script>

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