uniapp小步伐抽奖怎么做？直接使用【almost-lottery转盘组件】或者【自定义 - ToB企服应用市场:ToB评测及商务社交产业平台

<template>
<almost-lottery
:prizeList="prizeList"
:prizeIndex="prizeIndex"
@draw-before="handleDrawBefore"
@draw-start="handleDrawStart"
@draw-end="handleDrawEnd"
/>
</template>
<script>
import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue';
export default {
components: { AlmostLottery },
data() {
return {
prizeList: [], // 奖品列表
prizeIndex: -1, // 中奖下标
};
},
methods: {
handleDrawBefore(callback) {
// 自定义抽奖前的逻辑
callback(true); // 返回 true 表示允许抽奖
},
handleDrawStart() {
// 抽奖开始时的逻辑
},
handleDrawEnd() {
// 抽奖结束后的逻辑
},
},
};
</script>

复制代码

<template>
<view class="container">
<view class="my-lottery row-between wrap" v-if="status">
<view v-for="(item, index) in lotteryData" :key="index" :class="(item.type == 999 ? 'lotty-btn' : 'lottery-item') + ' column-center ' + (activeIndex == index ? 'active' : '')" style="width: 180rpx;height: 180rpx;" @tap="onLotteryClick(item.type)">
<image :src="item.image" style="width: 80rpx;height: 80rpx; border-radius: 8rpx;"></image>
<text :class="item.type == 999 ? 'xs mt20' : 'nr mt10'"
:style="'color: ' + (item.type == 999 ? '#ED3720' : '#743C3C') + ';font-weight: 600;text-align: center;padding: 0 24rpx;'">{{item.name}}</text>
</view>
</view>
<view class="activity-null row-center" v-else>
活动暂未开始
</view>
</view>
</template>

复制代码

startLotteryFun() {
let {
currentIndex
} = this;
let activeIndex = this.getHighLightItemIndexFun(currentIndex);
this.activeIndex = activeIndex
const currentOrder = currentIndex % 8;
this.currentIndex = ++currentIndex;
console.log(77777123, currentIndex, this.circleTimes, this.luckyOrder, currentOrder)
if (currentIndex > this.circleTimes + 8 && this.luckyOrder == currentOrder) {
if (this.lotteryTimer) {
clearTimeout(this.lotteryTimer);
}
setTimeout(() => {
this.stopCallbackFun(LOTTERY_ORDER[this.luckyOrder]);
setTimeout(() => {
// this.reset();
this.activeIndex = -1
}, 1000);
}, 500);
} else {
if (currentIndex < this.circleTimes) {
this.speed -= 10
} else if (currentIndex > this.circleTimes + 8 && this.luckyOrder == currentOrder + 1) {
this.speed += 80
} else {
this.speed += 20
}
if (this.speed < 50) {
this.speed = 50
}
this.lotteryTimer = setTimeout(this.startLotteryFun.bind(this), this.speed);
}
},
// luckyIndex: 中奖在列表中的index
stopCallbackFun(luckyIndex) {
this.reset()
this.$emit("finish", {
detail: this.result
});
},
// 根据 currentIndex 获取当前应该高亮列表中的第几个奖品
getHighLightItemIndexFun(currentIndex) {
return LOTTERY_ORDER[currentIndex % LOTTERY_ORDER.length];
},
// 根据奖品在数据中的index，获取奖品在转盘中的位置
getLuckyItemOrderFun(index) {},
start(e) {
console.log(887777, e, this.isLottery)
// 如果还没开始转动,开始转动转盘
if (!this.isLottery) {
this.isLottery = true
this.userLotteryFun();
}
},
// 停止转动
stop(index, callback) {
this.luckyOrder = this.getLuckyItemOrderFun(index);
console.log("stop, ###", index);
this._stopCallback = callback;
},

复制代码