gaoxinqu_tangjia/src/components/question/prize.vue

<template>
  <div class="prize" :class="{mobilePrize:isMobile}">
    <h1 v-if="isMobile">幸运大转盘</h1>
    <LuckyWheel
      class="lw"
      ref="LuckyWheel"
      width="340px"
      height="340px"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      @start="startCallBack"
       @end="endCallBack"
    />
    <div class="bubble">
      <img class="btip" :src="require('@/assets/images/question/tipdialog.png')" alt="">
      <div class="b-title">
        本轮奖品详情
      </div>
      <ul>
        <li v-for="(item,i) in 10" :key="i">一等奖：可爱的发哥抱枕</li>
      </ul>
      <div class="desc">
        <p>请保存当前二维码，可到现场领取精美礼品一份<br/>活动截止时间：2021年12月31日</p>
      </div>
    </div>

    <div class="lingjiang" v-show="lingjiang">
      <div class="ljcon">
         <img
          @click="lingjiang=false"
            class="qclose"
            :src="require('@/assets/images/question/close.png')"
            alt=""
          />
        <img class="lbg" :src="require('@/assets/images/question/lingjiang_bg.png')" alt="">
        <div class="lbody">
          <div class="ltitle">领取奖励</div>
          <img class="qrcode" :src="require('@/assets/images/question/qrcode.png')" alt="">
          <p>{{currentPrize.title}}</p>
          <div class="ldesc">请保存当前二维码，可到现场领取精美礼品一份<br/>活动截止时间：2021年12月31日</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import browser from '@/util/browser'
// 设置奖品
const prizes = []
let data = [
  '感谢参与',
  '一等奖',
  '二等奖',
  '三等奖',
  '一等奖',
  '二等奖',
  '三等奖',
  '一等奖',
  '二等奖',
  '三等奖',
  '二等奖',
  '三等奖'
]
data.forEach((item, index) => {
  prizes.push({
    title: item,
    fonts: [
      {
        fontColor: index % 2 ? '#ffffff' : '#311B04',
        text: item,
        lengthLimit: '20',
        fontSize: 12
      }
    ]
  })
})
export default {
  data () {
    return {
      blocks: [
        {
          padding: '40px',
          imgs: [
            {
              src: require('@/assets/images/question/prize_bigbg.png'),
              width: '100%',
              rotate: false
            }
          ]
        },
        {
          padding: '20px',
          imgs: [
            {
              src: require('@/assets/images/question/prize_bg.png'),
              width: '100%',
              rotate: true
            }
          ]
        }
      ],
      defaultStyle: {},
      prizes,
      defaultConfig: {
        stopRange: 0
      },
      currentPrize: {},
      lingjiang: false,
      buttons: [
        {
          fonts: [
            {
              fontSize: 18,
              fontWeight: 800,
              text: '开始',
              top: -12,
              fontColor: '#54320B'
            }
          ],
          radius: '50%',
          pointer: false,
          imgs: [
            {
              src: require('@/assets/images/question/pointer.png'),
              top: -48,
              width: 64
            }
          ]
        }
      ],
      isMobile: browser.mobile,
    }
  },
  methods: {
    startCallBack () {
      this.$refs.LuckyWheel.play()
      setTimeout(() => {
        let stop = (Math.random() * 12) >> 0
        console.log(data[stop])
        this.$refs.LuckyWheel.stop(stop)
      }, 1000)
    },
    endCallBack (prize) {
      this.currentPrize = prize
      this.lingjiang = true
    }
  }
}
</script>

<style lang="less" scoped>
.prize {
  margin: 0 auto;
  position: relative;
  z-index: 999;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  .lw {
    margin: 0 auto;
  }
  .bubble {
    width: 340px;
    height: 350px;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    margin-right: 40px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    @wh:30px;
    &:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 40px;
      width: 0;
      height: 0;
      border-top: @wh solid #fff;
      border-right: @wh solid transparent;
      color: #fff;
    }
    .btip{
      position: absolute;
      bottom: -50px;
      right: -30px;
      pointer-events: none;
    }
    .b-title{
      background-color: #311B04;
      font-size: 18px;
      font-weight: bold;
      border-radius: 9px 9px 0  0;
      padding:14px 0;
      width: 100%;
      box-shadow: 0 0 15px rgba(0,0,0,0.5);
    }
    >ul{
      width: 100%;
      height: 240px;
      overflow-y: auto;
      >li{
        color: #FA3800;
        line-height: 1.5;
        margin: 8px 0;
      }
    }
    .desc{
      font-size: 12px;
      color: #311B04;
      line-height: 1.5;
      margin-top: 14px;
      width: 100%;
    }
  }
  .lingjiang{
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    .ljcon{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      .qclose {
          position: absolute;
          right: 30px;
          top: 24px;
          cursor: pointer;
          z-index: 999;
        }
      .lbody{
        position: absolute;
        top: 42%;
        width: 80%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;

        .ltitle{
          font-size: 24px;
          font-weight: bold;
        }
        .qrcode{
          margin-top: 10px;
        }
        >p{
          margin: 10px 0 20px;
          font-weight: bold;
        }
        .ldesc{
          font-size: 12px;
          color: #311B04;
          line-height: 1.5;
        }
      }
    }
  }
}

.mobilePrize {

}
</style>