wechat/src/components/model1/index.vue

<style lang="scss" scoped>
@font-face {
  font-family: myFont;
  src: url("https://spaceofcheng.oss-cn-beijing.aliyuncs.com/hkhb.ttf");
}
@import "page.scss";
</style>

<template>
  <div class="bg mainPage">
    <img class="bg-img" :src="bg" alt="" width="100%">
    <transition name="fade">
      <div class="dialog" v-if="showDialog" @click="close">
        <div class="box">
          <img class='dialog-bg' @click.stop="close" :src="dialog" alt="">
          <div class='dialog-title'>恭喜你！<span>成功获得</span></div>
          <div class="dialog-name">{{winning}}</div>
          <img class="qrCode" :src="qrCode" alt="">
          <div v-if="showBtn" @click="get">
            <img class="lq" :src="lq" alt="">
          </div>
          <div class="desc">长按二维码“城的空间”，进入会员中心查看奖品吧</div>
        </div>
      </div>
    </transition>
    <div class="turntable">
      <div :class='{ "round": round }' class="turntable-body">
        <div v-for='(item, index) in data.prizeList' :key='index' :class='item.class' >
          <img :src="item.img" alt="">
          <span :class='item.font' v-html="item.PrizeName">{{item.PrizeName}}</span>
        </div>
        <img :src="turntable" alt="" width="100%" height="100%">
      </div>
      <img class="pointer"  @click="run" :src="pointer" alt="">
      <div class="titleText">山的艺墅季 金秋送好礼</div>
      <img class="down" :src="down" alt="">
      <img class="yf1" :src="yf1" alt="">
      <img class="yf2" :src="yf2" alt="">
      <img class="yf3" :src="yf3" alt="">
      <img class="yf4" :src="yf4" alt="">
      <img class="yf5" :src="yf3" alt="">
      <img class="yf6" :src="yf4" alt="">
      <img class="hx" :src="blackStar" alt="">
      <img class="hux" :src="xian" alt="">
      <img class="sl" :src="sl" alt="">
      <img class="sl2" :src="sl" alt="">
      <img class="jx" :src="jx" alt="">
    </div>
    <div class="paper">
      <img :src="paper" alt="" width="100%">
      <div class="winningList">
        <div class="title">
          <img :src="blackStar" alt="">
          <span>中奖名单</span>
          <img :src="jt" alt="">
        </div>
        <div class="list">
          <div v-for='(item, index) in  data.list' :key='index'>
            <img :src="item.UserHeadImg" alt="">
            <span>
              <div>{{item.UserName}}</div>
              <div>{{toolClass.dateFormatM(item.CreateDate)}}</div>
            </span>
            <span>{{item.PrizeName}}</span>
          </div>
        </div>
      </div>
      <div class="rule">
        <div class="title">
          <img :src="sy" alt="">
          <span>活动规则</span>
          <img :src="jt" alt="">
        </div>
        <div class="content">
          <pre v-html='data.prize.LuckdrawRule'></pre>
        </div>
      </div>
      <img class="bird" :src="bird" alt="">
      <img class="quan1" :src="quan" alt="">
      <img class="quan2" :src="quan" alt="">
      <img class="bl1" :src="bl" alt="">
      <img class="bl2" :src="bl" alt="">
      <img class="jx2" :src="jx" alt="">
    </div>
  </div>
</template>

<script>
import turntable from '@/assets/zhuanpan.png'
import pointer from '@/assets/zhizhen.png'
import paper from '@/assets/zhi.png'
import blackStar from '@/assets/heixing.png'
import jt from '@/assets/jiantou.png'
import tx from '@/assets/touxiang.png'
import sy from '@/assets/shuangyuan.png'
import bird from '@/assets/xiaoniao.png'
import yf1 from '@/assets/yinfu1.png'
import yf2 from '@/assets/yinfu2.png'
import yf3 from '@/assets/yinfu3.png'
import yf4 from '@/assets/yinfu4.png'
import xian from '@/assets/huxian.png'
import sl from '@/assets/xiaosenlin.png'
import jx from '@/assets/juxing.png'
import quan from '@/assets/quan.png'
import bl from '@/assets/bolang.png'
import down from '@/assets/down.png'
import dialog from '@/assets/dialog.png'
import lq from '@/assets/lq.png'
import qrCode from '@/assets/qrCode.jpg'
import line1 from '@/assets/line4.png'
import line2 from '@/assets/line5.png'
import line3 from '@/assets/line6.png'
import line4 from '@/assets/line7.png'
import line5 from '@/assets/line8.png'
import line6 from '@/assets/line9.png'
import line7 from '@/assets/line1.png'
import line8 from '@/assets/line2.png'
import line9 from '@/assets/line3.png'
import { createNamespacedHelpers } from 'vuex'
const { mapActions: mapAppActions } = createNamespacedHelpers('app')
export default {
  data () {
    return {
      turntable,
      pointer,
      paper,
      blackStar,
      jt,
      sl,
      jx,
      tx,
      sy,
      yf1,
      yf2,
      yf3,
      yf4,
      xian,
      bird,
      quan,
      bl,
      down,
      dialog,
      qrCode,
      lq,
      line1,
      line2,
      line3,
      line4,
      line5,
      line6,
      line7,
      line8,
      line9,
      round: false,
      showDialog: false,
      showBtn: false,
      winning: '',
      jump: '',
      style: null,
      stylesheet: null
    }
  },
  props: ['prizeData', 'prizeNum', 'data', 'bg', 'activityStatus'],
  created () {
    this.init()
  },
  methods: {
    ...mapAppActions(['setRunState']),
    init () {
      let lineList = [this.line1, this.line2, this.line3, this.line4, this.line5, this.line6, this.line7, this.line8, this.line9]
      if (Math.ceil(this.data.prizeList.length / lineList.length) > 1) {
        let length = Math.ceil(this.data.prizeList.length / lineList.length)
        for (let i = 1; i < length; i++) {
          lineList = lineList.concat(lineList)
        }
      }
      let deg = 360 / this.data.prizeList.length
      let rule = ''
      for (let i = 0; i < this.data.prizeList.length; i++) {
        this.data.prizeList[i].class = 'prize' + i
        this.data.prizeList[i].font = 'font' + i
        this.data.prizeList[i].img = lineList[i]
        console.log(deg * (i + 1))
        rule += `.prize${i}{transform: rotate(${deg * (i + 1)}deg);transform-origin:0 0;} .font${i}{transform: rotate(${(deg / 3)}deg);transform-origin:0 0;}`
      }
      let style = document.createElement('style')
      style.type = 'text/css'
      style.innerHTML = rule
      document.getElementsByTagName('head')[0].appendChild(style)
    },
    start () {
      if (this.stylesheet) {
        document.getElementsByTagName('head')[0].removeChild(this.stylesheet)
      }
      setTimeout(() => {
        let dynamicValue = -3690
        dynamicValue -= ((360 / this.data.prizeList.length * (this.prizeNum + 1)) + 360 / this.data.prizeList.length / 2)
        let rule = `@keyframes round {0% {transform: rotate(0deg);}100% {transform: rotate(${dynamicValue}deg);}}`
        let style = document.createElement('style')
        style.type = 'text/css'
        style.innerHTML = rule
        document.getElementsByTagName('head')[0].appendChild(style)
        this.stylesheet = style
        this.round = true
      }, 50)
      this.winning = this.prizeData.prize.PrizeName
      this.showBtn = this.prizeData.detail.Url ? 1 : 0
      this.jump = this.prizeData.detail.Url
      setTimeout(() => {
        this.showDialog = true
        this.setRunState(2)
      }, 10000)
    },
    get () {
      console.log('去领取')
      window.location.href = `${window.location.origin}/wechat/user.html#/receiveShared${this.jump}?isAuto=auto`
    },
    close (data) {
      this.showDialog = false
    },
    run () {
      this.$emit('run')
    }
  },
  watch: {
    prizeData: {
      handler (cur, old) {
        console.log(cur)
        this.start()
      },
      immediate: false,
      deep: false
    }
  }
}
</script>