更新记录
1.0.1(2021-01-28) 下载此版本
修改大转盘旋转角度的BUG
1.0.0(2021-01-28) 下载此版本
第一版
平台兼容性
示例小程序:
一、大转盘:
<turntable-reward ref="turntableChild" :listArr="turntableList" :widthNum="turntableWidthNum"
:resultIndex="resultIndex" :rewardInstruction="rewardInstruction" @goPlayReward="goPlayReward">
</turntable-reward>
import TurntableReward from '@/components/xtcj-com/circle/turntable-reward.vue'
export default {
components: {
TurntableReward
}
}
参数说明:
参数名 | 必选 | 类型 | 说明 |
---|---|---|---|
turntableList | 是 | array | 抽奖内容数组 |
turntableWidthNum | 是 | int | 内容宽度 |
resultIndex | 是 | int | 中奖INDEX |
rewardInstruction | 否 | string | 抽奖规则 |
goPlayReward | 是 | function | 抽奖方法 |
二、九宫格
<nine-box ref="nineChild" :circleList="circleList" :awardList="awardList" :rewardInstruction="rewardInstruction"
@goPlayReward="goPlayReward">
import NineBox from '@/components/xtcj-com/nine/nine-box.vue'
export default {
components: {
NineBox
}
}
参数说明:
参数名 | 必选 | 类型 | 说明 |
---|---|---|---|
circleList | 是 | array | 大转盘内容数组 |
awardList | 是 | array | 奖品图数组 |
rewardInstruction | 否 | string | 抽奖规则 |
goPlayReward | 是 | function | 抽奖方法 |
三、刮刮乐:
<scratch-card ref="scratchChild"
:percentage="56"
:touchSize="15"
fillColor='#ddd'
watermark="刮一刮"
watermarkColor="#c5c5c5"
:watermarkSize="14"
title="刮一刮开奖"
titleColor="#888"
:titleSize="24"
:disabled="false"
rewardStr=" "
:rewardInstruction="rewardInstruction"
:cantManageFlag="cantManageFlag"
@goPlayReward="goPlayReward">
import ScratchCard from '@/components/xtcj-com/scratch/scratch-card.vue'
export default {
components: {
ScratchCard
}
}
参数说明:
参数名 | 必选 | 类型 | 说明 |
---|---|---|---|
percentage | 否 | int | 刮到多少百分比开奖 |
touchSize | 否 | int | 刮的画笔尺寸 |
fillColor | 否 | string | 填充颜色 |
watermark | 否 | string | 开始打开上面的水印字 |
watermarkColor | 否 | string | 开始打开上面的水印字的颜色 |
title | 否 | string | 开始打开上面的字 |
titleColor | 否 | string | 开始打开上面的字的颜色 |
titleSize | 否 | int | 开始打开上面的字的尺寸 |
disabled | 否 | boolean | 是否不可以刮 |
rewardStr | 否 | string | 中将内容 |
rewardInstruction | 否 | string | 抽奖规则 |
cantManageFlag | 是 | function | 改变是否可以刮的标识 |
goPlayReward | 是 | function | 抽奖方法 |
四、摇一摇
<shake ref="shakeChild" :audioCtxObj="shakeAudioCtx" :windowHeight="shakeHeight"
@shakeHand="shakeHand" @goPlayReward="goPlayReward" :rewardInstruction="rewardInstruction" ></shake>
import ShakeComponent from '@/components/xtcj-com/scratch/scratch-card.vue'
export default {
components: {
ShakeComponent
},
data() {
return {
shakeAudioCtx:null,
shakeHeight:0
}
},
onLoad(){
// 设置显示区域高度
this.shakeHeight = uni.getSystemInfoSync().windowHeight;
// 声明音频实例
this.shakeAudioCtx = uni.createInnerAudioContext();
uni.onAccelerometerChange(this.$refs.shakeChild.starshake);
}
}
参数说明:
参数名 | 必选 | 类型 | 说明 |
---|---|---|---|
shakeAudioCtx | 是 | int | 音频实例 (uni.createInnerAudioContext()) |
shakeHeight | 是 | float | 窗口宽度(uni.getSystemInfoSync().windowHeight) |
shakeHand | 是 | function | 摇动手机后调用的方法 |
rewardInstruction | 否 | string | 抽奖规则 |
goPlayReward | 是 | function | 抽奖方法 |
五、抽牌
<poker-card ref="pokerChild" :card="cardAttr" :extractNum="extractNum" @open="openCard"
:rewardInstruction="rewardInstruction" @goPlayReward="goPlayReward">
</poker-card>
import PokerCard from '@/components/xtcj-com/poker/poker-card.vue'
export default {
components: {
PokerCard
}
}
参数说明:
参数名 | 必选 | 类型 | 说明 |
---|---|---|---|
cardAttr | 是 | array | 卡牌数组 |
extractNum | 是 | int | 可抽奖次数 |
openCard | 是 | function | 抽牌后的方法 |
rewardInstruction | 否 | string | 抽奖规则 |
goPlayReward | 是 | function | 抽奖方法 |