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