Skip to content

2
20250711_TBGuardingLife
Commit 6068da2c authored by qimiao's avatar qimiao
Browse files
Options

replace index

parent 977cf24c
Show whitespace changes
Inline Side-by-side
Showing with 139 additions and 128 deletions
src/assets/drawPage/draw_btn.png
View replaced file @ 977cf24c View file @ 6068da2c
src/assets/drawPage/draw_btn.png

75.5 KB | W: | H:

src/assets/drawPage/draw_btn.png

49.3 KB | W: | H:

src/assets/drawPage/draw_btn.png
src/assets/drawPage/draw_btn.png
src/assets/drawPage/draw_btn.png
src/assets/drawPage/draw_btn.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/drawPage/title.png
View replaced file @ 977cf24c View file @ 6068da2c
src/assets/drawPage/title.png

111 KB | W: | H:

src/assets/drawPage/title.png

118 KB | W: | H:

src/assets/drawPage/title.png
src/assets/drawPage/title.png
src/assets/drawPage/title.png
src/assets/drawPage/title.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/drawPage/turntable_bg.png
View replaced file @ 977cf24c View file @ 6068da2c
src/assets/drawPage/turntable_bg.png

91.9 KB | W: | H:

src/assets/drawPage/turntable_bg.png

51.3 KB | W: | H:

src/assets/drawPage/turntable_bg.png
src/assets/drawPage/turntable_bg.png
src/assets/drawPage/turntable_bg.png
src/assets/drawPage/turntable_bg.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/drawpage/drawpage.jsx
View file @ 6068da2c
'use strict';
"use strict";
import React from 'react';
import { observer } from 'mobx-react';
import './drawpage.less';
import API from '@src/api';
import { _asyncThrottle, _throttle } from '@src/utils/utils';
import modalStore from '@src/store/modal';
import store from '@src/store';
import { PAGE_MAP } from '@src/utils/constants';
import { CircleTurntable } from '@spark/circle-turntable'
import { pageLeave, sensorMdClick, sensorMdExpouse } from '@src/utils/sensorMd';
import { Button } from '@src/components/Button';
import React from "react";
import { observer } from "mobx-react";
import "./drawpage.less";
import API from "@src/api";
import { _asyncThrottle, _throttle } from "@src/utils/utils";
import modalStore from "@src/store/modal";
import store from "@src/store";
import { PAGE_MAP } from "@src/utils/constants";
import { CircleTurntable } from "@spark/circle-turntable";
import { pageLeave, sensorMdClick, sensorMdExpouse } from "@src/utils/sensorMd";
import { Button } from "@src/components/Button";
@observer
class Drawpage extends React.Component {
......@@ -18,115 +18,116 @@ class Drawpage extends React.Component {
super(props);
this.state = {
drawInfo: {},
}
this.btnStarting = false // 转盘是否启动
this.turntableRef = null // 大转盘
this.drawResultInfo = {}
};
this.btnStarting = false; // 转盘是否启动
this.turntableRef = null; // 大转盘
this.drawResultInfo = {};
}
async componentDidMount() {
await this.getDrawInfo()
sensorMdExpouse("activityPage", { pageName: "抽奖页", follow_action: this.props?.is_from == 'result' ? 4 : 2 });
await this.getDrawInfo();
sensorMdExpouse("activityPage", { pageName: "抽奖页", follow_action: this.props?.is_from == "result" ? 4 : 2 });
pageLeave("抽奖页", 5);
}
/** 获取转盘信息 */
getDrawInfo = async () => {
const { success, data } = await API.drawIndex()
const { success, data } = await API.drawIndex();
if (success && data) {
this.setState({
drawInfo: data || {},
})
}
});
}
};
// 开始抽奖
lottteryHandle = _asyncThrottle(async () => {
const { actPrizeList, remainDrawTimes } = this.state.drawInfo
const { actPrizeList, remainDrawTimes } = this.state.drawInfo;
sensorMdClick("activityClick", { pageName: "抽奖页点击", buttonName: "开始抽奖" });
// 无抽奖次数
if (!remainDrawTimes) {
return modalStore.pushPop("Drawchancepop", {
refresh: () => this.getDrawInfo()
})
refresh: () => this.getDrawInfo(),
});
}
if (this.btnStarting) return false
this.btnStarting = true
const { success, data } = await API.drawJoin()
if (this.btnStarting) return false;
this.btnStarting = true;
const { success, data } = await API.drawJoin();
if (success && data) {
// 转盘转动开始抽奖
this.turntableRef.launch()
this.drawResultInfo = data || {}
this.turntableRef.launch();
this.drawResultInfo = data || {};
// 转盘停止转动，指针停在index
const index = actPrizeList?.findIndex(item => item.prizeId === this.drawResultInfo.prizeId)
console.info('index', index)
const index = actPrizeList?.findIndex((item) => item.prizeId === this.drawResultInfo.prizeId);
console.info("index", index);
// !important 注意：randomOffset设置为false，这样每次旋转的偏移量就不是随机滴啦
this.turntableRef.braking(index, { immediately: false, randomOffset: false });
} else {
this.btnStarting = false
this.getDrawInfo()
this.btnStarting = false;
this.getDrawInfo();
}
})
});
// 转盘停止处理
stopOkHandle = () => {
this.btnStarting = false
this.btnStarting = false;
if (this.drawResultInfo?.prizeId == "thanks") {
modalStore.pushPop("Drawfailpop")
modalStore.pushPop("Drawfailpop");
} else {
modalStore.pushPop("Drawsucpop", { ...this.drawResultInfo })
modalStore.pushPop("Drawsucpop", { ...this.drawResultInfo });
}
this.getDrawInfo();
}
};
/** 返回 */
backHome = _throttle(() => {
if (this.btnStarting) return false
store.changePage(PAGE_MAP.HOME_PAGE)
})
if (this.btnStarting) return false;
store.changePage(PAGE_MAP.HOME_PAGE);
});
/** 奖品 */
prizeHandle = _throttle(async () => {
if (this.btnStarting) return false
if (!store.checkActStatus(true)) return
if (this.btnStarting) return false;
if (!store.checkActStatus(true)) return;
sensorMdClick("activityClick", { pageName: "抽奖页点击", buttonName: "奖品" });
location.href = CFG.prize;
})
});
/** 规则 */
ruleHandle = _throttle(async () => {
if (this.btnStarting) return false
if (!store.checkActStatus(true)) return
if (this.btnStarting) return false;
if (!store.checkActStatus(true)) return;
sensorMdClick("activityClick", { pageName: "抽奖页点击", buttonName: "规则" });
modalStore.pushPop("Rulepop")
})
modalStore.pushPop("Rulepop");
});
/** 任务 */
taskHandle = _throttle(() => {
if (this.btnStarting) return false
if (!store.checkActStatus()) return
if (this.btnStarting) return false;
if (!store.checkActStatus()) return;
sensorMdClick("activityClick", { pageName: "抽奖页点击", buttonName: "做任务" });
modalStore.pushPop("Taskpop", {
refresh: () => this.getDrawInfo()
})
})
refresh: () => this.getDrawInfo(),
});
});
render() {
const { actPrizeList, remainDrawTimes } = this.state.drawInfo
const { actPrizeList, remainDrawTimes } = this.state.drawInfo;
return (
<div className="drawpage modal_center">
<span className="beiJing"></span>
<div className="rule_prize"></div>
<span className="title"></span>
<div className="subtitle">
{/* <div className="subtitle">
<span className="subtitle_bg"></span>
<span className="subtitle_text">测一测你的端午专属人设</span>
</div>
</div> */}
<div className="turntable">
<span className="turntable_box_bg"></span>
<CircleTurntable
className="turntable_box"
ref={ref => this.turntableRef = ref}
ref={(ref) => (this.turntableRef = ref)}
options={actPrizeList || []}
angleOffset={23} // 角度偏移量
radian={80} // 奖项半径
......@@ -139,24 +140,25 @@ class Drawpage extends React.Component {
renderStartButton={<></>}
// 渲染奖品信息
renderOption={(option) => {
return <div className="prize_item">
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>
<span className="cloud"></span>
{/* <span className="cloud"></span> */}
</div>
<Button className="back" onClick={this.backHome} />
<Button className="rule_btn" onClick={this.ruleHandle}></Button>
<Button className="prize_btn" onClick={this.prizeHandle}></Button>
<Button className="task_btn" onClick={this.taskHandle}></Button>
<div className="draw_btn md10" onClick={this.lottteryHandle}>
<div className="draw_btn md10" onClick={this.lottteryHandle}></div>
<span className="left_num">剩余次数：{remainDrawTimes || 0}</span>
</div>
</div>
);
}
}
......
src/pages/drawpage/drawpage.less
View file @ 6068da2c
......@@ -13,6 +13,14 @@
position: absolute;
.sparkBg("drawPage/bg.png");
}
.rule_prize {
position: absolute;
left: 558px;
top: 227px;
width: 174px;
height: 44px;
.sparkBg("homePage/rule_prize.png");
}
.back {
width: 64px;
height: 65px;
......@@ -22,55 +30,56 @@
.sparkBg("common/back.png");
}
.rule_btn {
width: 95*1.2px;
height: 44*1.2px;
left: 0px;
top: 405px;
width: 87px;
height: 44px;
left: 558px;
top: 227px;
position: absolute;
.sparkBg("drawPage/rule_btn.png");
transform-origin: 0% 50%;
border-radius: 22px 0 0 22px;
}
.prize_btn {
width: 92*1.2px;
height: 44*1.2px;
right: 0px;
top: 405px;
width: 87px;
height: 44px;
left: 645px;
top: 227px;
position: absolute;
.sparkBg("drawPage/prize_btn.png");
transform-origin: 100% 50%;
border-radius: 0 22px 22px 0;
}
.task_btn {
width: 160px;
height: 202px;
left: 590px;
top: 1252px;
left: 603px;
top: 1260px;
width: 120px;
height: 129px;
position: absolute;
.sparkBg("drawPage/task_btn.png");
.sparkBg("homePage/task_btn.png");
}
.draw_btn {
width: 428px;
height: 133px;
left: 167px;
top: 1281px;
left: 182px;
top: 1291px;
width: 387px;
height: 135px;
position: absolute;
.sparkBg("drawPage/draw_btn.png");
}
.left_num {
width: 420px;
height: 22px;
left: 8px;
top: 96px;
width: 100%;
height: 26px;
left: 0;
top: 1440px;
position: absolute;
text-align: center;
font-size: 22px;
line-height: 22px;
font-size: 26px;
line-height: 26px;
color: rgb(249, 252, 206);
}
text-align: center;
}
.title {
width: 565px;
height: 152px;
left: 91px;
top: 204px;
left: 76px;
top: 283px;
width: 600px;
height: 182px;
position: absolute;
.sparkBg("drawPage/title.png");
}
......@@ -101,15 +110,15 @@
}
}
.turntable {
width: 704px;
height: 1022px;
left: 14px;
top: 260px;
width: 750px;
height: 843px;
left: 0px;
top: 462px;
position: absolute;
.turntable_box_bg {
width: 627px;
height: 1022px;
left: 60px;
width: 750px;
height: 843px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("drawPage/turntable_box.png");
......@@ -117,8 +126,8 @@
.turntable_box {
width: 519px;
height: 521px;
left: 115px;
top: 261px;
left: 110px;
top: 70px;
position: absolute;
}
.turntable_bg {
......@@ -153,9 +162,9 @@
width: 128px;
height: 139px;
left: 312px;
top: 447px;
top: 260px;
position: absolute;
.sparkBg("drawPage/pointer.png");
.sparkBg("drawPage/turntable_btn.png");
}
.cloud {
width: 704px;
......
src/pages/homepage/homepage.jsx
View file @ 6068da2c
......@@ -22,7 +22,7 @@ class Homepage extends React.Component {
}
async componentDidMount() {
// modalStore.pushPop("Bindpop");
await store.getHomeInfo();
// 初始化神策埋点 得在首页接口之后 首页接口会打上业务员绑定标记
await store.initSensorsMd();
......@@ -89,9 +89,8 @@ class Homepage extends React.Component {
<Button className="share_btn md3" onClick={this.doShare}></Button>
<Button className="task_btn md6" onClick={this.openTask}></Button>
<Button className="draw_btn md4" onClick={this.goDraw}></Button>
<div className="main_btn md5" onClick={this.goTest}>
{/* <span className="test_times">剩余次数：{store.homeInfo?.remainAnswerTimes || 0}</span> */}
</div>
<div className="main_btn md5" onClick={this.goTest}></div>
<span className="test_times">剩余次数：{store.homeInfo?.remainAnswerTimes || 0}</span>
{/* <span className="title"></span> */}
<SvgaPlayer className="home_svga" src={RES_PATH + "svga/home.svga"} />
{/* <div className="subtitle">
......
src/pages/homepage/homepage.less
View file @ 6068da2c
......@@ -56,17 +56,18 @@
position: absolute;
.sparkBg("homePage/main_btn.png");
.breathAnimation();
}
.test_times {
width: 422px;
height: 22px;
left: 7px;
top: 98px;
width: 100%;
height: 26px;
left: 0;
top: 1440px;
position: absolute;
text-align: center;
font-size: 22px;
line-height: 22px;
font-size: 26px;
line-height: 26px;
color: rgb(249, 252, 206);
}
text-align: center;
}
.title {
width: 565px;
......
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