3D转盘（待整理）

3D转盘是大转盘的变体（变体的详细说明可以查看变体与预设），但是只是复用了转盘的逻辑。其为可控组件（详细说明可查看基础玩法组件逻辑规范）

另外，该转盘尚未标准化

按需引入

import Vue from 'vue'
import Wheel3D from '@tuia/market-ui/lib/Wheel3D'
import '@tuia/market-ui/lib/Wheel3D/style'

Vue.use(Wheel3D)

代码演示

<mk-wheel-3d
  ref="wheel"
  :prizeList="prizeList"
  @stateChange="stateChange"
  @clickStart="clickStart"
  @prizeClick="prizeClick"
>
</mk-wheel-3d>

点击展开完整代码

import { StateConstant } from '@tuia/market-ui';

export default {
  data() {
    return {
      state: 0,
      clickPrize: '',
      prizeList: [
        {
          title: '一等奖',
          image: '//yun.tuisnake.com/mami-media/img/50d7608a-ociowk8pm5.png',
        },
        {
          title: '二等奖',
          image: '//yun.tuisnake.com/mami-media/img/691aa62e-d5xwaga1hn.png',
        },
        {
          title: '三等奖',
          image: '//yun.tuisnake.com/h5-mami/couponPrize/lucky.png',
        },
        {
          title: '四等奖',
          image: '//yun.tuisnake.com/mami-media/img/8ecabe26-iq6wlrhpam.png',
        },
        {
          title: '五等奖',
          image: '//yun.tuisnake.com/mami-media/img/570a6594-vhcb3jmuz8.png',
        },
        {
          title: '谢谢参与',
          image: '//yun.tuisnake.com/h5-mami/couponPrize/thanks.png',
        },
      ],
      wheelSize: {},
    };
  },

  computed: {
    canStart() {
      return this.state === StateConstant.WAIT_START;
    },
    canStop() {
      return this.state === StateConstant.WAIT_END;
    },
  },

  mounted() {
    const { width, height } = this.$refs.wheel.$el.style;
    this.wheelSize = { width, height };
  },

  methods: {
    prizeClick({ item }) {
      this.clickPrize = item.title;
    },

    stateChange(opt) {
      this.state = opt.now;
    },

    async clickStart() {
      const wheel = this.$refs.wheel;
      if (wheel.getState() !== StateConstant.WAIT_START) {
        return;
      }
      await wheel.start();
    },

    async stop(index) {
      await this.$refs.wheel.stop({ index });
    },

    async reset() {
      await this.$refs.wheel.reset();
    },

    disable() {
      this.$refs.wheel.disable();
    },
  },
};

SquareWheel API

支持基本的屏幕适配以及基础玩法组件逻辑规范涉及的API

基本类型定义

// 样式值定义
export type StyleValueType = string | number;
// 样式对象定义
export type StyleType = Record<string, StyleValueType>;

// 转盘上奖品类型定义
export interface PrizeType {
  title?: string;
  image?: string;
}
// 奖品信息定义
export interface PrizeInfoType {
  // 奖品信息
  item: PrizeType,
  // 奖品在列表中的位置
  index: number,
}
// stop方法入参
export interface WheelStopOptionType {
  // 命中目标索引
  index?: number;
}

Props

参数	说明	类型	默认值
containerStyle	底盘样式（包含整体位置）	StyleType	{ width: 750, height: 465 }
perspective	透视距离	number	1500
itemStyle	奖项样式	StyleType	{ width: 252, height: 360 }
itemBgImg	奖项背景图片	string	//yun.tuisnake.com/market-ui/02b27f2f-b476-495e-b812-188981cf6261.png
prizeImgStyle	奖品图片样式	StyleType	{ width: 180, height: 180, top: 90 }
prizeTextStyle	奖品标题样式	StyleType	{ width: 180, height: 50, 'line-height': 50, top: 8, 'font-size': 24 }
prizeList	奖品列表（当前仅支持8个）	PrizeType[]	[...]
wheelRadius	转盘半价	number	24
idleTurningSpeed	转盘闲置每秒转动度数（闲置转速）	number	250
maxTurningSpeed	转盘运行每秒转动度数（最大转速）	number	900

Events

名称	参数	说明
prizeClick	PrizeInfoType	奖品被点击时触发

Methods

对于基础玩法组件的stop方法入参做了限定，来确定命中目标

名称	入参	出参	说明
stop	WheelStopOptionType	Promise	结束方法