wechat/src/page/index/index.vue

<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" @click.stop='stop'>
          <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 v-else @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'>{{item.PrizeName}}</span>
        </div>
        <img :src="turntable" alt="" width="100%" height="100%">
      </div>
      <img class="pointer"  @click="run" :src="pointer" alt="">
      <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>{{item.PrizeName}}</span>
            <span>{{item.UserName}}</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 style="white-space:pre-line; text-align: left;">{{data.prize.LuckdrawRule}}</pre>
          <!-- <div class="mb">抽奖活动</div>
          <div v-for="(item,index) in data.prizeList" :key='index'>
            <span>{{item.PrizeName}}</span>
            <span>{{item.Probability}}%几率</span>
          </div>
          <div class="mb mt">抽奖方式：通过分享链接，点击立即抽奖按钮，每个活动每人仅可参加一次</div>
          <div class="mb">领取方式：线下出示奖品二维码即可扫码核销</div>
          <div>领取地点：悦见山G99</div> -->
        </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 wxsdk from '@/util/share'
import logo from '@/assets/indexlogo.jpg'
import bg from '@/assets/bg.png'
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 { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapAppActions } = createNamespacedHelpers('app')
export default {
  data () {
    return {
      bg,
      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,
      logo,
      isRun: false,
      round: false,
      showDialog: false,
      data: {
        userInfo: {},
        prize: {},
        prizeList: [],
        list: []
      },
      winning: '',
      showBtn: false,
      jump: ''
    }
  },
  created () {
    this.data.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.getData()
  },
  computed: {
    ...mapState({
      userInfo: x => x.app.userInfo,
      prize: x => x.app.prize,
      list: x => x.app.record,
      lotteryId: x => x.app.lotteryId
    })
  },
  methods: {
    ...mapAppActions(['getUserInfo', 'getPrize', 'setPrize', 'getRecord']),
    getData () {
      if (this.data.userInfo.record) {
        this.winning = this.data.userInfo.record.PrizeName
        this.showDialog = true
        if (this.data.userInfo.detail) {
          if (this.data.userInfo.detail.Url) {
            this.showBtn = 1
            this.jump = this.data.userInfo.detail.Url
          }
        }
      }
      this.getPrize({ id: this.lotteryId }).then((res) => {
        this.data.prize = this.prize
        this.data.prizeList = this.data.prize.Prizes
        this.init()
      })
      this.getRecord({ id: this.lotteryId }).then((res) => {
        if (this.list.length >= 10) {
          this.data.list = this.list.slice(0, 10)
        } else {
          this.data.list = this.list
        }
      })
      wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
        title: '城的空间抽奖',
        desc: '抽奖小游戏',
        link: window.location.href.split('?')[0],
        thu_image: this.logo
      })
    },
    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 / 2)}deg);transform-origin:0 0;}`
      }
      let style = document.createElement('style')
      style.type = 'text/css'
      style.innerHTML = rule
      document.getElementsByTagName('head')[0].appendChild(style)
      this.stylesheet = document.styleSheets[document.styleSheets.length - 1]
    },
    start () {
      return new Promise((resolve, reject) => {
        if (this.isRun) {
        } else {
          this.isRun = true
          let dynamicValue = -3690
          this.setPrize({ id: this.lotteryId, openId: this.data.userInfo.user.OpenId }).then((res) => {
            for (let i = 0; i < this.data.prizeList.length; i++) {
              if (this.data.prizeList[i].Id === res.prize.Id) {
                dynamicValue -= ((360 / this.data.prizeList.length * (i + 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 = document.styleSheets[document.styleSheets.length - 1]
            this.round = true
            resolve(res)
          })
        }
      })
    },
    get () {
      console.log('去领取')
      window.location.href = this.jump
    },
    close (data) {
      this.showDialog = false
    },
    run () {
      this.start().then((res) => {
        this.winning = res.prize.PrizeName
        this.showBtn = res.detail.Url ? 1 : 0
        this.jump = res.detail.Url
        setTimeout(() => {
          this.showDialog = true
        }, 10000)
      })
    },
    stop () {
      console.log('stop')
    }
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: myFont;
  src: url("../../assets/hkhb.ttf");
}
@import "page.scss";
</style>