Skip to content

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

modify

parent a94342d9
Hide whitespace changes
Inline Side-by-side
Showing with 506 additions and 48 deletions
mock/capsule.ts
View file @ ec541ace
......@@ -55,7 +55,7 @@ export default [
"message": "信息xxx",
"success": true,
"data": {
"boolPrize": true, // true-中奖，取prizeInfo信息，false-为中奖，取productInfo
"boolPrize": true, // true-中奖，取prizeInfo信息，false-未中奖，取productInfo
"productInfos": [
{
"productImg": "//yun.duiba.com.cn/spark/assets/f77861647e7b55e9c95e9c49d891a21526157a76.jpg",
......@@ -71,8 +71,8 @@ export default [
}
],
"prizeInfo": {
"prizeName": "reprehenderit tempor non",
"prizeImg": "Duis veniam ipsum voluptate eiusmod"
"prizeName": `奖品1`,
"prizeImg": `//yun.duiba.com.cn/polaris/jinmoqiang.9e5bbc004f69ab6a3f34d93daeda028616a9f00d.png`,
}
}
}
......
src/components/CodePop/CodePop.jsx 0 → 100644
View file @ ec541ace
import React from "react";
import {observer} from "mobx-react";
import "./CodePop.less";
import {Button} from "@src/components/Button";
import modalStore from "@src/store/modal";
import QRCode from "qrcode";
import store from "@src/store";
import {LOG_KEY, pageView, sensorLog} from "@src/utils/sensors";
@observer
class CodePop extends React.Component {
state = {
codeImg: ""
};
componentDidMount = async () => {
await this.creatCode();
pageView("b12854", {
page_name: "扫码唤端页",
});
sensorLog(LOG_KEY.exposure, "b12854", "d12855", {
page_name: "扫码唤端页",
button_name: "关闭按钮",
});
};
/** 生成二维码*/
creatCode = async () => {
await store.getFrontVariable();
const url = await QRCode.toDataURL(store.frontVariable?.Url,{
errorCorrectionLevel: 'L', // 纠错级别，可选值：'L'、'M'、'Q'、'H'
margin: 1, // 边距，单位：像素
});
this.setState({
codeImg: url
});
};
/** 关闭 */
clickClose = () => {
modalStore.closePop();
sensorLog(LOG_KEY.click, "b12854", "d12855", {
page_name: "扫码唤端页",
button_name: "关闭按钮",
});
};
render() {
const {codeImg} = this.state;
return <div className="CodePop modal_center md4">
<div className="light"/>
<div className="bg">
<img className="code" src={codeImg}/>
</div>
<Button className="close" onClick={this.clickClose}/>
</div>;
}
}
export default CodePop;
src/components/CodePop/CodePop.less 0 → 100644
View file @ ec541ace
@import "../../res.less";
.CodePop {
position: absolute;
left: 0;
top: 0;
width: 750px;
height: 1624px;
.light {
position: absolute;
left: 79px;
top: 275px;
width: 593px;
height: 593px;
// .sparkBg("common/light.png");
}
.bg {
position: absolute;
left: 99px;
top: 358px;
width: 553px;
height: 721px;
.sparkBg("CodePop/bg.png")
}
.code {
position: absolute;
left: 146px;
top: 371px;
width: 261px;
height: 261px;
//.sparkBg("CodePop/code.png")
}
.close {
position: absolute;
left: 345px;
top: 1122px;
width: 60px;
height: 60px;
.sparkBg("common/closeBtn.png")
}
}
\ No newline at end of file
src/components/NoPrizeCard/NoPrizeCard.jsx 0 → 100644
View file @ ec541ace
import React from "react";
import { observer } from "mobx-react";
import "./NoPrizeCard.less";
// import { SvgaPlayer } from "@grace/svgaplayer";
// import { RES_PATH } from "../../../sparkrc";
import { SvgaPlayer } from "@grace/svgaplayer";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { LOG_KEY, pageView, sensorLog } from "../../utils/sensors.js";
import { _throttle, randomNum } from "../../utils/utils";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
@observer
class NoPrizeCard extends React.Component {
state = {
card: true,
};
componentDidMount() {
pageView("b12872", {
page_name: "祝福语翻转页",
});
sensorLog(LOG_KEY.exposure, "b12872", "d12873", {
page_name: "祝福语翻转页",
button_name: "点击切换有惊喜按钮",
});
}
/** card1文本选择 */
opt1 = () => {
const list = [
'NoPrizeCard/text1.png',
'NoPrizeCard/text2.png',
'NoPrizeCard/text3.png',
'NoPrizeCard/text4.png'
]
const address = list[randomNum(0, 4)]
return address
}
/** 切换按钮*/
clickExchange1 = () => {
sensorLog(LOG_KEY.click, "b12872", "d12873", {
page_name: "祝福语翻转页",
button_name: "点击切换有惊喜按钮",
});
this.setState({
card: false,
svg: true
});
setTimeout(() => {
this.setState({
svg: false,
card: false,
});
}, 2000)
};
/** 关闭按钮*/
clickClose = _throttle(() => {
ModalCtrl.closeModal();
});
render() {
const { card } = this.state;
const { data } = this.props;
console.log(data, 123123);
return <div className="NoPrizeCard modal_center">
{
card === true ?
//翻转前
<div className="card1">
{/* <SvgaPlayer className="bg" src={RES_PATH + "svga/5输出展开.svga"} loop={1} /> */}
<span className="picture"></span>
{/* <img className="text" src={RES_PATH + this.opt1()} /> */}
</div>
//翻转后
: <div>
{/* <SvgaPlayer className="bg" src={RES_PATH + "svga/6输出切换.svga"} loop={1} /> */}
<Swiper className="prodSwiper"
slidesPerView={1}
pagination={{ clickable: true }}
>
{
data?.productInfos?.map((item, index) => {
return <SwiperSlide className="prodItem" key={index}>
<span className="line"></span>
<img className="picture2"
src={item?.productImg}
alt={item?.productText}
/>
<div className="txt">
{item?.productText}
</div>
</SwiperSlide>
})
}
</Swiper>
{/* <Button className="exchange2" /> */}
</div>
}
{
card === true && <Button className="exchange1 md27" onClick={this.clickExchange1} />
}
<Button className="close" onClick={this.clickClose} />
</div>;
}
}
export default NoPrizeCard;
src/components/NoPrizeCard/NoPrizeCard.less 0 → 100644
View file @ ec541ace
@import "../../res.less";
.NoPrizeCard {
position: absolute;
left: 0;
top: 0;
width: 750px;
height: 1624px;
.bg {
position: absolute;
left: 63px;
top: 256px;
width: 623px;
height: 1053px;
}
.picture {
position: absolute;
left: 148px;
top: 495px;
width: 473px;
height: 725px;
.sparkBg("NoPrizeCard/picture.png");
.fade-in;
}
.text {
position: absolute;
left: 270px;
top: 1074px;
width: 215px;
height: 115px;
.fade-in;
}
.prodSwiper {
position: absolute;
left: 148px;
top: 0px;
width: 452px;
height: 1258px;
transition: transform 288ms linear;
transition-delay: 288ms;
.fade-in;
.prodItem {
display: flex;
align-items: center;
justify-content: center;
.line {
position: absolute;
left: 5px;
top: 1035px;
width: 438px;
height: 2px;
.sparkBg("NoPrizeCard/line.png")
}
.picture2 {
position: absolute;
left: 0px;
top: 495px;
width: 452px;
height: 499px;
border-radius: 18px;
.sparkBg("NoPrizeCard/picture2.png")
}
.txt {
font-size: 23px;
color: rgb(42, 98, 23);
line-height: 1.391;
text-align: left;
position: absolute;
top: 1088px;
width: 417px;
height: 86px;
overflow-y: auto;
}
}
}
.exchange1 {
position: absolute;
left: 279px;
top: 1252px;
width: 191px;
height: 29px;
.sparkBg("NoPrizeCard/exchange.png")
}
// .exchange2 {
// position: absolute;
// left: 302px;
// top: 1252px;
// width: 134px;
// height: 29px;
// .sparkBg("NoPrizeCard/exchange2.png")
// }
.close {
position: absolute;
left: 345px;
top: 1332px;
width: 60px;
height: 60px;
.sparkBg("common/closeBtn.png")
}
}
\ No newline at end of file
src/components/prizepop/prizepop.jsx 0 → 100644
View file @ ec541ace
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./prizepop.less";
import { Button } from "@grace/ui";
import { _asyncThrottle } from "../../utils/utils";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
@observer
class Prizepop extends React.Component {
constructor(props) {
super(props);
}
handleReceive = _asyncThrottle(() => {
ModalCtrl.closeModal()
})
handleClose = _asyncThrottle(() => {
ModalCtrl.closeModal()
})
render() {
const { prizeInfo } = this.props || {};
const { prizeName = "", prizeImg = "" } = prizeInfo;
return (
<div className="prizepop modal_center">
<span className="light"></span>
<span className="bg"></span>
<Button className="receive" onClick={this.handleReceive} />
<img className="icon" src={prizeImg} alt={prizeName} />
<span className="name">{prizeName}</span>
<span className="tip">奖品可在首页 我的奖品 中查看</span>
<span className="title"></span>
<Button className="close" onClick={this.handleClose} />
</div>
);
}
}
export default Prizepop;
src/components/prizepop/prizepop.less 0 → 100644
View file @ ec541ace
@import "../../res.less";
.prizepop {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.light {
width: 750px;
height: 1008px;
left: 0px;
top: 324px;
position: absolute;
.sparkBg("prizePop/light.png");
}
.bg {
width: 646px;
height: 852px;
left: 32px;
top: 325px;
position: absolute;
.sparkBg("prizePop/bg.png");
}
.receive {
width: 263px;
height: 92px;
left: 237px;
top: 921px;
position: absolute;
.sparkBg("prizePop/receive.png");
}
.icon {
width: 217px;
height: 217px;
left: 256px;
top: 604px;
position: absolute;
.sparkBg("prizePop/icon.png");
border-radius: 15px;
}
.name {
width: 550px;
height: 33px;
left: 100px;
top: 843px;
text-align: center;
position: absolute;
font-size: 30px;
line-height: 33px;
color: rgba(153, 57, 27, 1);
.lineClamp1();
}
.tip {
width: 306px;
height: 21px;
left: 216px;
top: 1028px;
position: absolute;
font-size: 22px;
line-height: 21px;
color: rgba(153, 57, 27, 1);
}
.title {
width: 364px;
height: 57px;
left: 179px;
top: 405px;
position: absolute;
.sparkBg("prizePop/title.png");
}
.close {
width: 64px;
height: 64px;
left: 343px;
top: 1251px;
position: absolute;
.sparkBg("prizePop/close.png");
}
}
src/pages/CapsulePage/CapsulePage.jsx
View file @ ec541ace
......@@ -14,6 +14,8 @@ import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import { SvgaPlayer } from "@grace/svgaplayer";
import Homepage from "../HomePage/HomePage.tsx";
import Prizepop from "../../components/prizepop/prizepop.jsx";
import Noprizecard from "../../components/noprizecard/noprizecard.jsx";
import machineSvga from "../../assets/svga/1输出扭蛋机常态.svga";
import normalSvga from "../../assets/svga/2输出待机啊.svga";
......@@ -97,11 +99,15 @@ class Capsulepage extends React.Component {
if (success && data) {
// 扭蛋机转动开始抽奖
// this.turntableRef.launch();
this.setState({ btnDynamic: true });
// this.drawResultInfo = data || {};
const { boolPrzie, prizeInfo = {}, productInfo = [] } = data || {};
const { prizeName = "", prizeImg = "" } = prizeInfo || {};
const {
boolPrize = false,
prizeInfo = {},
productInfo = [],
} = data || {};
// const index = prizeVOs?.findIndex(
// (item) => item.prizeId === (this.drawResultInfo.prizeId || "thanks")
......@@ -109,10 +115,12 @@ class Capsulepage extends React.Component {
// console.info("index", index);
// 抽奖机停止转动
setTimeout(() => {
this.setState({ btnOutput: true });
}, 1600);
setTimeout(() => {
this.setState({ btnDynamic: false });
this.btnOutput = true;
this.stopOkHandle();
this.stopOkHandle(boolPrize, prizeInfo, productInfo);
}, 2000);
// this.turntableRef.braking(index);
} else {
......@@ -122,19 +130,23 @@ class Capsulepage extends React.Component {
});
// 抽奖停止处理
stopOkHandle = () => {
stopOkHandle = (boolPrize, prizeInfo, productInfo) => {
this.btnStarting = false;
setTimeout(() => {
this.setState({ btnOutput: false });
}, 2000);
}, 1600);
// 此时判断是否中奖 true-中奖，取prizeInfo信息，false-为中奖，取productInfo
if (boolPrzie) {
if (boolPrize) {
// 中奖
ModalCtrl.pushPop("Pop_winprize", { prizeName, prizeImg });
setTimeout(() => {
ModalCtrl.showModal(Prizepop, { prizeInfo });
}, 1600);
} else {
// 没中奖
ModalCtrl.pushPop("NoPrizeCard", productInfo || []);
setTimeout(() => {
ModalCtrl.showModal(Noprizecard, { productInfo });
}, 1600);
}
this.getDrawInfo();
......@@ -165,7 +177,7 @@ class Capsulepage extends React.Component {
const { btnDynamic, btnOutput } = this.state;
const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
return (
<div className="capsule modal_center">
<div className="capsule">
<span className="bg"></span>
<span className="logo"></span>
<Button className="back_btn" onClick={this.backHome} />
......@@ -182,36 +194,11 @@ class Capsulepage extends React.Component {
<SvgaPlayer className="machine" src={machineSvga} />
{btnOutput && (
<>
<span className="mengceng"></span>
<SvgaPlayer className="output1" src={output1Svga} />
<SvgaPlayer className="output2" src={output2Svga} />
</>
)}
{/* <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>
);
}
......
src/pages/CapsulePage/CapsulePage.less
View file @ ec541ace
@import "../../res.less";
.capsule {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
.bg {
width: 750px;
height: 1624px;
......@@ -73,6 +75,14 @@
// left: 114px;
}
.mengceng {
position: absolute;
width: 750px;
height: 1624px;
// left: 114px;
.sparkBg("capsulePage/mengceng.png");
}
// .task_btn {
// position: absolute;
// left: 548px;
......
src/pages/HomePage/HomePage.less
View file @ ec541ace
@import "../../res.less";
.homepage {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
.bg {
width: 750px;
height: 1624px;
......
src/pages/HomePage/HomePage.tsx
View file @ ec541ace
......@@ -144,7 +144,7 @@ class Homepage extends React.Component {
};
render() {
return (
<div className="homepage modal_center">
<div className="homepage">
<span className="bg"></span>
<span className="equipment"></span>
<span className="icon"></span>
......
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