Skip to content

R
RB-studyChina-20250617
Commit 1fafff73 authored by 徐士卿's avatar 徐士卿
Browse files
Options

draw

parent 88989443
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 163 deletions
mock/draw.ts
View file @ 1fafff73
......@@ -9,7 +9,7 @@ export default [
"code": null,
timeStamp: Date.now(),
"data": {
"remainDrawTimes": 1, // 抽奖次数
"remainDrawTimes": 3, // 抽奖次数
"prizeVOs": [
{
prizeName: `奖品1`,
......@@ -46,31 +46,36 @@ export default [
}
},
},
{
url: '/draw/doDraw.do',
method: 'get',
"code": "",
"message": null,
"success": true,
"data": {
"prizeName": "",
"prizeId": "",
"prizeImg": "",
"productInfos": [
{
"productImg": "//yun.duiba.com.cn/spark/assets/f77861647e7b55e9c95e9c49d891a21526157a76.jpg",
"productText": "介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1"
},
{
"productImg": "//yun.duiba.com.cn/polaris/111.8b981b3fc7d090da2457b4f29b9feec496dc95fd.png",
"productText": "介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2"
response: ({ query }) => {
return {
"code": "",
"message": null,
"success": true,
"data": {
"prizeName": "",
"prizeId": "1",
"prizeImg": "",
"productInfos": [
{
"productImg": "//yun.duiba.com.cn/spark/assets/f77861647e7b55e9c95e9c49d891a21526157a76.jpg",
"productText": "介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1"
},
{
"productImg": "//yun.duiba.com.cn/polaris/111.8b981b3fc7d090da2457b4f29b9feec496dc95fd.png",
"productText": "介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2"
},
{
"productImg": "//yun.duiba.com.cn/polaris/mgtv.e5f0709a2a4083bc57ce52ff200a50a2e56b2658.png",
"productText": "介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3"
}
]
},
{
"productImg": "//yun.duiba.com.cn/polaris/mgtv.e5f0709a2a4083bc57ce52ff200a50a2e56b2658.png",
"productText": "介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3"
}
]
"timeStamp": 1739176246085
}
},
"timeStamp": 1739176246085
},
}
]
\ No newline at end of file
src/assets/drawPage/bg.png 0 → 100644
View file @ 1fafff73
This diff is collapsed.
src/pages/DrawPage/DrawPage.jsx
View file @ 1fafff73
......@@ -12,6 +12,12 @@ import API from "../../api/index.ts";
import { Button, Toast } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import { SvgaPlayer } from "@grace/svgaplayer";
import Homepage from "../HomePage/HomePage.tsx";
import machineSvga from "../../assets/svga/1输出扭蛋机常态.svga";
import normalSvga from "../../assets/svga/2输出待机啊.svga";
import dynamicSvga from "../../assets/svga/3输出出奖啊.svga";
// import { LOG_KEY, pageView, sensorLog } from '@src/utils/sensors';
......@@ -21,9 +27,10 @@ class Drawpage extends React.Component {
super(props);
this.state = {
drawInfo: {},
btnDynamic: false, // 抽奖机是否动态中
};
this.btnStarting = false; // 转盘是否启动
this.turntableRef = null; // 大转盘
this.btnStarting = false; // 抽奖机是否启动
// this.turntableRef = null; // 大转盘
this.drawResultInfo = {};
}
......@@ -46,7 +53,7 @@ class Drawpage extends React.Component {
// });
}
/** 获取转盘信息 */
/** 获取抽奖信息 */
getDrawInfo = async () => {
const { success, data } = await API.drawIndex();
if (success && data) {
......@@ -70,37 +77,43 @@ class Drawpage extends React.Component {
}
// 其他微信端 提醒唤端弹窗
else {
return modalStore.pushPop("CodePop");
// return modalStore.pushPop("CodePop"); //TODO
}
}
const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
// 抽奖次数为0
if (!remainDrawTimes) {
return Toast("抽奖次数不足，快去做任务赚次数吧～");
return Toast.show("抽奖次数不足，快去做任务赚次数吧～");
}
if (this.btnStarting) return false;
this.btnStarting = true;
const { success, data } = await API.drawJoin();
if (success && data) {
// 转盘转动开始抽奖
this.turntableRef.launch();
// 抽奖机转动开始抽奖
// this.turntableRef.launch();
this.setState({ btnDynamic: true });
this.drawResultInfo = data || {};
// 转盘停止转动，指针停在index
const index = prizeVOs?.findIndex(
(item) => item.prizeId === (this.drawResultInfo.prizeId || "thanks")
);
console.info("index", index);
this.turntableRef.braking(index);
// 抽奖机停止转动
setTimeout(() => {
this.setState({ btnDynamic: false });
this.stopOkHandle();
}, 2000);
// this.turntableRef.braking(index);
} else {
this.btnStarting = false;
this.getDrawInfo();
}
});
// 转盘停止处理
// 抽奖停止处理
stopOkHandle = () => {
this.btnStarting = false;
......@@ -120,6 +133,7 @@ class Drawpage extends React.Component {
// });
if (this.btnStarting) return false;
// store.changePage(PAGE_MAP.HOME_PAGE)
PageCtrl.changePage(Homepage);
});
goTask = _throttle(() => {
......@@ -133,17 +147,25 @@ class Drawpage extends React.Component {
});
render() {
const { btnDynamic } = this.state;
const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
return (
<div className="drawpage modal_center">
<span className="bg"></span>
<Button className="back_btn md19" onClick={this.backHome} />
<Button className="task_btn md21" onClick={this.goTask} />
<Button className="draw_btn_box md20" onClick={this.lottteryHandle}>
<span className="logo"></span>
<Button className="back_btn" onClick={this.backHome} />
{/* <Button className="task_btn" onClick={this.goTask} /> */}
<Button className="draw_btn_box" onClick={this.lottteryHandle}>
<span className="draw_btn"></span>
<span className="left_num">剩余次数：{remainDrawTimes || 0}</span>
</Button>
<div className="turantable">
{btnDynamic ? (
<SvgaPlayer className="dynamic" src={dynamicSvga} />
) : (
<SvgaPlayer className="normal" src={normalSvga} />
)}
<SvgaPlayer className="machine" src={machineSvga} />
{/* <div className="turantable">
<CircleTurntable
className="turantable_box"
ref={(ref) => (this.turntableRef = ref)}
......@@ -167,8 +189,8 @@ class Drawpage extends React.Component {
didStop={this.stopOkHandle}
/>
<span className="pointer"></span>
</div>
<span className="cover"></span>
</div> */}
{/* <span className="cover"></span> */}
</div>
);
}
......
src/pages/DrawPage/DrawPage.less
View file @ 1fafff73
......@@ -16,79 +16,116 @@
.sparkBg("drawPage/bg.png");
}
.logo {
width: 290px;
height: 28px;
left: 230px;
top: 113px;
position: absolute;
.sparkBg("drawPage/logo.png");
}
.back_btn {
left: 31px;
top: 199px;
width: 56px;
top: 115px;
width: 59px;
height: 57px;
position: absolute;
.sparkBg("common/back.png");
.sparkBg("drawPage/back.png");
}
.task_btn {
.machine {
position: absolute;
left: 548px;
top: 1211px;
width: 202px;
height: 203px;
.sparkBg("common/task.png");
width: 742px;
height: 1067px;
top: 184px;
}
.prize_info {
.normal {
position: absolute;
left: 57px;
top: 470px;
width: 615px;
height: 46px;
.prize_info_bg {
position: absolute;
left: 0;
top: 0;
width: 615px;
height: 46px;
.sparkBg("drawPage/prize_info_bg.png");
}
.prize_info_laba {
position: absolute;
left: 142px;
top: 11px;
width: 31px;
height: 25px;
.sparkBg("drawPage/prize_info_laba.png");
}
width: 515px;
height: 452px;
top: 427px;
left: 114px;
}
.prize_info_list {
width: 360px;
height: 46px;
position: absolute;
left: 185px;
top: 0;
.prize_info_item {
width: 100%;
height: 46px;
font-size: 20px;
color: rgb(40, 85, 84);
line-height: 46px;
text-align: left;
.lineClamp1();
}
.dynamic {
position: absolute;
width: 515px;
height: 452px;
top: 427px;
left: 114px;
}
}
.fade-out {
transition: opacity 0.3s ease-out;
opacity: 0;
}
// .task_btn {
// position: absolute;
// left: 548px;
// top: 1211px;
// width: 202px;
// height: 203px;
// .sparkBg("common/task.png");
// }
// .prize_info {
// position: absolute;
// left: 57px;
// top: 470px;
// width: 615px;
// height: 46px;
// .prize_info_bg {
// position: absolute;
// left: 0;
// top: 0;
// width: 615px;
// height: 46px;
// .sparkBg("drawPage/prize_info_bg.png");
// }
// .prize_info_laba {
// position: absolute;
// left: 142px;
// top: 11px;
// width: 31px;
// height: 25px;
// .sparkBg("drawPage/prize_info_laba.png");
// }
// .prize_info_list {
// width: 360px;
// height: 46px;
// position: absolute;
// left: 185px;
// top: 0;
// .prize_info_item {
// width: 100%;
// height: 46px;
// font-size: 20px;
// color: rgb(40, 85, 84);
// line-height: 46px;
// text-align: left;
// .lineClamp1();
// }
// }
// }
.draw_btn_box {
width: 373px;
height: 115px;
left: 190px;
top: 1258px;
width: 422px;
height: 154px;
left: 164px;
top: 1222px;
position: absolute;
.draw_btn {
width: 373px;
height: 115px;
width: 422px;
height: 154px;
left: 0px;
top: 0px;
position: absolute;
......@@ -99,79 +136,79 @@
width: 100%;
height: 27px;
left: 0px;
top: 70px;
top: 92px;
position: absolute;
font-size: 20px;
font-size: 22px;
color: rgb(202, 57, 0);
text-align: center;
}
}
.turantable {
left: 35px;
top: 476px;
width: 680px;
height: 681px;
position: absolute;
.sparkBg("drawPage/turantable_box.png");
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
.turantable_box {
position: relative;
}
.turantable_bg {
width: 584px;
height: 584px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("drawPage/turantable_bg.png");
}
.prize_item {
width: 190px;
height: 150px;
color: rgba(248, 103, 89, 1);
font-size: 28px;
box-sizing: border-box;
text-align: center;
.prize_name {
width: 100%;
font-weight: bold;
.lineClamp1();
}
.prize_img {
width: 80px;
height: 70px;
object-fit: contain;
margin-top: 10px;
}
}
.pointer {
position: absolute;
left: 276px;
top: 251px;
width: 126px;
height: 131px;
position: absolute;
.sparkBg("drawPage/pointer.png");
}
}
.cover {
left: 318px;
top: 430px;
width: 114px;
height: 138px;
position: absolute;
.sparkBg("drawPage/cover.png");
pointer-events: none;
}
// .turantable {
// left: 35px;
// top: 476px;
// width: 680px;
// height: 681px;
// position: absolute;
// .sparkBg("drawPage/turantable_box.png");
// pointer-events: none;
// display: flex;
// justify-content: center;
// align-items: center;
// .turantable_box {
// position: relative;
// }
// .turantable_bg {
// width: 584px;
// height: 584px;
// left: 0px;
// top: 0px;
// position: absolute;
// .sparkBg("drawPage/turantable_bg.png");
// }
// .prize_item {
// width: 190px;
// height: 150px;
// color: rgba(248, 103, 89, 1);
// font-size: 28px;
// box-sizing: border-box;
// text-align: center;
// .prize_name {
// width: 100%;
// font-weight: bold;
// .lineClamp1();
// }
// .prize_img {
// width: 80px;
// height: 70px;
// object-fit: contain;
// margin-top: 10px;
// }
// }
// .pointer {
// position: absolute;
// left: 276px;
// top: 251px;
// width: 126px;
// height: 131px;
// position: absolute;
// .sparkBg("drawPage/pointer.png");
// }
// }
// .cover {
// left: 318px;
// top: 430px;
// width: 114px;
// height: 138px;
// position: absolute;
// .sparkBg("drawPage/cover.png");
// pointer-events: none;
// }
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment