如何用lucky-canvas插件,写一个老虎机抽奖组件?
2023-12-22 16:03:28
DrawLottery/index.tsx文件
import { useEffect, useRef, useState } from "react";
import { View, Image } from "@tarojs/components";
import { SlotMachine } from "@lucky-canvas/taro/react";
import "./index.less";
const DrawLottery = () => {
const myLucky = useRef<Mylucky>();
const [lotteryConfig, setLotteryConfig] = useState<LotteryConfigI>({
prizes: [],
slots: [],
});
// 是否正在抽奖
const _isDrawing = useRef(false)
const luckList = [
{
giftImage:
"https://resurl.fuchuang.com/584f26b0-8426-11ee-a4be-8be78400b871-callmgmt-login.png",
},
{
giftImage:
"https://resurl.fuchuang.com/db679e40-8482-11ee-a4be-8be78400b871-douhuiAI_546894.jpg",
},
{
giftImage:
"https://resurl.fuchuang.com/e4b97f00-8a76-11ee-a4be-8be78400b871-Snipaste_2023-03-20_17-23-17.png",
},
];
useEffect(() => {
init();
}, []);
const onStartLottery = async () => {
try {
if (_isDrawing.current) {
return
}
_isDrawing.current = true
myLucky.current?.play();
// 调用抽奖接口,获取抽奖结果
setTimeout(() => {
myLucky.current?.stop([1, 1, 2]);
_isDrawing.current = false
}, 2500);
} catch (error) {
// 接口报错时,设置老虎机为不选中
myLucky.current?.stop([0, 1, 2]);
_isDrawing.current = false
}
};
const onEndLottery = (prize) => {
console.log("奖品详情:", prize);
};
const init = () => {
let prizes = [] as prizesItemI[];
let order1 = [] as number[]; // 老虎机第一列奖品排序index
luckList.map((item, index) => {
order1.push(index);
prizes.push({
borderRadius: "24rpx",
background: "#FEEBB9",
imgs: [
{
src: item.giftImage,
width: "150rpx",
height: "150rpx",
top: "25rpx",
},
],
});
});
let slots = [] as slotsItemI[];
if (order1.length) {
const order2 = [...order1];
order2.push(order2.shift() as number);
const order3 = [...order2];
order3.push(order3.shift() as number);
slots = [
{ order: order1, direction: 1 },
{ order: order2, direction: -1 },
{ order: order3, direction: 1 },
];
}
setLotteryConfig({
prizes,
slots,
});
};
const defaultConfig = {
rowSpacing: "16rpx",
accelerationTime: 3000,
decelerationTime: 3000,
};
return (
<View className="com-draw-lottery">
<View className="com-draw-lottery-bg">
<SlotMachine
ref={myLucky}
width="614rpx"
height="199rpx"
prizes={lotteryConfig.prizes}
slots={lotteryConfig.slots}
defaultConfig={defaultConfig}
onEnd={onEndLottery}
></SlotMachine>
</View>
<Image
onClick={onStartLottery}
className="lottery-btn"
src="https://image.fuchuang.com/prod/ba4dc52_slotmachine_button20221010140613.png"
/>
</View>
);
};
export default DrawLottery;
DrawLottery/index.less文件
.com-draw-lottery {
text-align: center;
.com-draw-lottery-bg {
background: linear-gradient(#de3d00, #c91320);
border-radius: 32px;
padding: 12px;
box-sizing: border-box;
}
.lottery-btn {
width: 565px;
height: 150px;
margin-top: 39px;
}
}
文章来源:https://blog.csdn.net/qq_38990451/article/details/135153035
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!