PrizeList 奖励列表

引入

import PressPrizeList from '@tencent/press-plus/press-prize-list/press-prize-list';

export default {
  components: {
    PressPrizeList,
  }
}

代码演示

基础用法

<PressPrizeList
  :prize-list="prizeList"
  :show-cash-lottery="showCashLottery"
  @clickExplain="clickExplain"
  @clickPrize="clickPrize"
  @clickCashLottery="clickCashLottery"
/>

function getMockData() {
  const PIC = 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2024/1/own_mike_b4dd7d92644d642238.png';
  return [
    {
      title: '第一名',
      pic: PIC,
    },
    {
      title: '第二名',
      pic: PIC,
    },
    {
      title: '第三名',
      pic: PIC,
    },
    {
      title: '第三名',
      pic: PIC,
    },
    {
      title: '前十名',
      pic: PIC,
    },
  ];
}

export default {
  data() {
    return [
      prizeList: getMockData(),
      showCashLottery: true,
    ]
  },
  methods: {
    clickExplain() {
      this.onGTip('[clickExplain]');
    },
    clickPrize(prize, index) {
      this.onGTip('[clickPrize]');
      console.log('[clickPrize]', prize, index);
      this.prizeList = this.prizeList.slice(0, this.prizeList.length - 1);
    },
    clickCashLottery() {
      this.onGTip('[clickCashLottery]');
      this.showCashLottery = !this.showCashLottery;
    },
  }
}

API

Props

参数	说明	类型	默认值
prize-list	奖励列表	array	-
show-cash-lottery	是否显示现金抽奖入口	boolean	false

Events

事件名	说明	参数
clickExplain	点击奖励说明	-
clickPrize	点击奖励图片	prize, prizeIndex
clickCashLottery	点击现金抽奖入口	-