九宫格抽奖使用

Installation

Using npm:

npm i @foxit/luckydraw -S 

Example

<template>
  <div>
    <luckyDraw
      @startDraw="startDraw"
      @endDraw="endDraw"
      :configOptions="configOptions"
    ></luckyDraw>
  </div>
</template>

<script>
import luckyDraw from '@foxit/luckydraw';
export default {
  data () {
    return {
      configOptions: {}
    }
  },
  components: { luckyDraw },
  created () {
    this.init()
  },
  methods: {
    init () {
      // 模拟数据
      const drawList = [
        {
          name: 'iPhone 13 Pro', // 选项文字
          prize_img: require('./assets/img/item1.png'), // 选项图片
          prize_id: 'c10', // 选项id
          order: 1, // 顺序
          // 图片样式
          imgStyle: { width: '67px', height: '94px', marginTop: '17px'},
        },
        {
          name: '100元话费',
          prize_img: require('./assets/img/item2.png'),
          prize_id: 'c20',
          order: 2,
          imgStyle: { width: '122px', height: '69px', marginTop: '32px'},
          // 选项样式 覆盖默认样式
          item: { backgroundColor: '#ecedff', boxShadow: 'inset 0px -10px 0px #b7baff'},
        },
        {
          name: '积分',
          prize_img: require('./assets/img/item3.png'),
          prize_id: 'c30',
          order: 3,
          imgStyle: { width: '134px', height: '71px', marginTop: '32px'},
        },
        {
          name: '500元京东E卡',
          prize_img: require('./assets/img/item4.png'),
          prize_id: 'c40',
          order: 4,
          imgStyle: { width: '111px', height: '71px', marginTop: '30px'},
          item: { backgroundColor: '#ecedff', boxShadow: 'inset 0px -10px 0px #b7baff'},
        },
        {
          name: '1000元加油卡',
          prize_img: require('./assets/img/item5.png'),
          prize_id: 'c50',
          order: 5,
          imgStyle: { width: '115px', height: '73px', marginTop: '26px'},
        },
        {
          name: '10元365会员优惠券',
          prize_img: require('./assets/img/item6.png'),
          prize_id: 'c60',
          order: 6,
          imgStyle: { width: '131px', height: '80px', marginTop: '23px'},
          item: { backgroundColor: '#ecedff', boxShadow: 'inset 0px -10px 0px #b7baff'},
        },
        {
          name: '福昕翻译额度15额度',
          prize_img: require('./assets/img/item7.png'),
          prize_id: 'c70',
          order: 7,
          imgStyle: { width: '142px', height: '72px', marginTop: '31px'},
        },
        {
          name: '福昕会员3天',
          prize_img: require('./assets/img/item8.png'),
          prize_id: 'c80',
          order: 8,
          imgStyle: { width: '133px', height: '60px', marginTop: '37px'},
          item: { backgroundColor: '#ecedff', boxShadow: 'inset 0px -10px 0px #b7baff'},
        }
      ]
      this.configOptions = {
        // 选项列表
        drawList: drawList,
        // 容器
        container: { width: '510px', height: '510px', borderRadius: '26px', padding: '10px', backgroundColor: '#450199'},
        // 中间抽奖按钮
        button: {
          // 文字
          text: { name: "20积分抽一次", style: { fontSize: '16px', color: '#ff650b', top: '116px'} },
          // 按钮背景图片
          style: { backgroundImage: "url(" + require('./assets/img/go.png') + ")" }
        },
        // 选中项样式
        active: { backgroundColor: '#ffe87f', boxShadow: 'inset 0px -10px 0px #ffd200' },
        // 选项默认样式
        defaultItem: { width: '160px', height: '160px', borderRadius: '30px', backgroundColor: '#ffffff'},
        // 选项文字默认样式
        defaultFont: { fontSize: '14px', color: '#424242', top: '120px' },
      }
    },
    // 开始抽奖
    startDraw (callback) {
      // 获取接口中奖信息
      setTimeout(() => {
        callback(7) // 返回中奖order
      }, 500)
    },
    // 结束抽奖
    endDraw () {
      alert("中奖")
    }
  }
}
</script>

<style>

</style>