Skip to content

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

merge

parent 9b7456a3
Hide whitespace changes
Inline Side-by-side
Showing with 413 additions and 0 deletions
src/assets/capsulePage/bg.png 0 → 100644
View file @ 3f146e63
This diff is collapsed.
src/pages/CapsulePage/CapsulePage.jsx 0 → 100644
View file @ 3f146e63
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./CapsulePage.less";
import { _asyncThrottle, _throttle } from "../../utils/utils.ts";
import store from "../../store/store.ts";
import { CHANNEL_PARAMS } from "../../utils/constants.ts";
import { CircleTurntable } from "@spark/circle-turntable";
import { isWeiXin } from "../../AppTools.ts";
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';
@observer
class Capsulepage extends React.Component {
constructor(props) {
super(props);
this.state = {
drawInfo: {},
btnDynamic: false, // 抽奖机是否动态中
};
this.btnStarting = false; // 抽奖机是否启动
// this.turntableRef = null; // 大转盘
this.drawResultInfo = {};
}
componentDidMount() {
this.getDrawInfo();
// pageView("b12842", {
// page_name: "抽奖大转盘",
// });
// sensorLog(LOG_KEY.exposure, "b12842", "d12843", {
// page_name: "抽奖大转盘",
// button_name: "立即抽奖按钮",
// });
// sensorLog(LOG_KEY.exposure, "b12842", "d12844", {
// page_name: "抽奖大转盘",
// button_name: "做任务，赚次数按钮",
// });
// sensorLog(LOG_KEY.exposure, "b12842", "d12845", {
// page_name: "抽奖大转盘",
// button_name: "返回按钮",
// });
}
/** 获取抽奖信息 */
getDrawInfo = async () => {
const { success, data } = await API.drawIndex();
if (success && data) {
this.setState({
drawInfo: data || {},
});
}
};
// 开始抽奖
lottteryHandle = _asyncThrottle(async () => {
// sensorLog(LOG_KEY.click, "b12842", "d12843", {
// page_name: "抽奖大转盘",
// button_name: "立即抽奖按钮",
// });
// 微信端拦截
if (isWeiXin()) {
// 友客小程序
if (CFG.channel == CHANNEL_PARAMS.YK_MINI) {
return Toast.show("请前往人保寿险管家app活动抽奖～");
}
// 其他微信端 提醒唤端弹窗
else {
// return modalStore.pushPop("CodePop"); //TODO
}
}
const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
// 抽奖次数为0
if (!remainDrawTimes) {
return Toast.show("抽奖次数不足，快去做任务赚次数吧～");
}
if (this.btnStarting) return false;
this.btnStarting = true;
const { success, data } = await API.drawJoin();
if (success && data) {
// 抽奖机转动开始抽奖
// this.turntableRef.launch();
this.setState({ btnDynamic: true });
this.drawResultInfo = data || {};
const index = prizeVOs?.findIndex(
(item) => item.prizeId === (this.drawResultInfo.prizeId || "thanks")
);
console.info("index", index);
// 抽奖机停止转动
setTimeout(() => {
this.setState({ btnDynamic: false });
this.stopOkHandle();
}, 2000);
// this.turntableRef.braking(index);
} else {
this.btnStarting = false;
this.getDrawInfo();
}
});
// 抽奖停止处理
stopOkHandle = () => {
this.btnStarting = false;
if (!this.drawResultInfo?.prizeId) {
// modalStore.pushPop("NoPrizeCard", { data: this.drawResultInfo })
} else {
// modalStore.pushPop("Pop_winprize", { data: this.drawResultInfo })
}
this.getDrawInfo();
};
/** 返回 */
backHome = _throttle(() => {
// sensorLog(LOG_KEY.click, "b12842", "d12845", {
// page_name: "抽奖大转盘",
// button_name: "返回按钮",
// });
if (this.btnStarting) return false;
// store.changePage(PAGE_MAP.HOME_PAGE)
PageCtrl.changePage(Homepage);
});
goTask = _throttle(() => {
// sensorLog(LOG_KEY.click, "b12842", "d12844", {
// page_name: "抽奖大转盘",
// button_name: "做任务，赚次数按钮",
// });
if (this.btnStarting) return false;
// modalStore.pushPop("Taskpop", { onClose: () => this.getDrawInfo() })
});
render() {
const { btnDynamic } = this.state;
const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
return (
<div className="capsule modal_center">
<span className="bg"></span>
<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>
{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)}
options={prizeVOs || []}
angleOffset={30} // 角度偏移量
radian={100} // 奖项半径
launchDuration={1000} // 启动时间
// 大转盘背景
renderBackground={<div className="turantable_bg"></div>}
// 大转盘指针
renderStartButton={<></>}
// 渲染奖品信息
renderOption={(option) => {
return (
<div className="prize_item">
<div className="prize_name">{option.prizeName}</div>
<img className="prize_img" src={option.prizeImg} alt="" />
</div>
);
}}
didStop={this.stopOkHandle}
/>
<span className="pointer"></span>
</div> */}
{/* <span className="cover"></span> */}
</div>
);
}
}
export default Capsulepage;
src/pages/CapsulePage/CapsulePage.less 0 → 100644
View file @ 3f146e63
@import "../../res.less";
.capsule {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("capsulePage/bg.png");
}
.logo {
width: 290px;
height: 28px;
left: 230px;
top: 113px;
position: absolute;
.sparkBg("capsulePage/logo.png");
}
.back_btn {
left: 31px;
top: 115px;
width: 59px;
height: 57px;
position: absolute;
.sparkBg("capsulePage/back.png");
}
.machine {
position: absolute;
width: 742px;
height: 1067px;
top: 184px;
}
.normal {
position: absolute;
width: 515px;
height: 452px;
top: 427px;
left: 114px;
}
.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("capsulePage/prize_info_bg.png");
// }
// .prize_info_laba {
// position: absolute;
// left: 142px;
// top: 11px;
// width: 31px;
// height: 25px;
// .sparkBg("capsulePage/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: 422px;
height: 154px;
left: 164px;
top: 1222px;
position: absolute;
.draw_btn {
width: 422px;
height: 154px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("capsulePage/draw_btn.png");
}
.left_num {
width: 100%;
height: 27px;
left: 0px;
top: 92px;
position: absolute;
font-size: 22px;
color: rgb(202, 57, 0);
text-align: center;
}
}
// .turantable {
// left: 35px;
// top: 476px;
// width: 680px;
// height: 681px;
// position: absolute;
// .sparkBg("capsulePage/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("capsulePage/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("capsulePage/pointer.png");
// }
// }
// .cover {
// left: 318px;
// top: 430px;
// width: 114px;
// height: 138px;
// position: absolute;
// .sparkBg("capsulePage/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