Skip to content

2
20250711_TBGuardingLife
Commit d521ba70 authored by haiyoucuv's avatar haiyoucuv
Browse files
Options

init

parent 1be6edc1
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 145 deletions
src/assets/resultPage/bg.png deleted 100644 → 0
View file @ 1be6edc1
This diff is collapsed.
src/pages/resultpage/resultpage.jsx
View file @ d521ba70
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { observer } from 'mobx-react'; import {observer} from 'mobx-react';
import './resultpage.less'; import './resultpage.less';
import store from '@src/store'; import store from '@src/store';
import { Button } from '@src/components/Button'; import {Button} from '@src/components/Button';
import { _throttle } from '@src/utils/utils'; import {_throttle} from '@src/utils/utils';
import modalStore from '@src/store/modal'; import modalStore from '@src/store/modal';
import { PAGE_MAP, ROLE_MAP } from '@src/utils/constants'; import {PAGE_MAP, ROLE_MAP} from '@src/utils/constants';
import shareStore from '@src/store/share'; import shareStore from '@src/store/share';
import { sensorMdClick, sensorMdExpouse } from '@src/utils/sensorMd'; import {sensorMdClick, sensorMdExpouse} from '@src/utils/sensorMd';
import { hideLoading, showLoading } from '@spark/ui'; import {hideLoading, showLoading} from '@spark/ui';
import { htmlShot } from '@spark/utils'; import {htmlShot} from '@spark/utils';
@observer @observer
class Resultpage extends React.Component { class Resultpage extends React.Component {
...@@ -21,8 +21,9 @@ class Resultpage extends React.Component { ...@@ -21,8 +21,9 @@ class Resultpage extends React.Component {
poster: null, poster: null,
}; };
} }
async componentDidMount() { async componentDidMount() {
sensorMdExpouse("activityPage", { pageName: "结果页", follow_action: 3 }); sensorMdExpouse("activityPage", {pageName: "结果页", follow_action: 3});
showLoading(); showLoading();
await this.doCreatePoster(); await this.doCreatePoster();
this.pageRef?.scrollTo(0, 240 * window.remScale); this.pageRef?.scrollTo(0, 240 * window.remScale);
...@@ -32,55 +33,50 @@ class Resultpage extends React.Component { ...@@ -32,55 +33,50 @@ class Resultpage extends React.Component {
doCreatePoster = async () => { doCreatePoster = async () => {
setTimeout(async () => { setTimeout(async () => {
const url = await htmlShot(this.shotRef) const url = await htmlShot(this.shotRef)
this.setState({ poster: url }) this.setState({poster: url})
hideLoading() hideLoading()
}, 500); }, 500);
}; };
doShare = _throttle(() => { doShare = _throttle(() => {
sensorMdClick("activityClick", { pageName: "结果页", buttonName: "分享人设" }); sensorMdClick("activityClick", {pageName: "结果页", buttonName: "分享人设"});
shareStore.doShare(); shareStore.doShare();
}) })
goDraw = _throttle(() => { goDraw = _throttle(() => {
sensorMdClick("activityClick", { pageName: "结果页", buttonName: "立即抽奖" }); sensorMdClick("activityClick", {pageName: "结果页", buttonName: "立即抽奖"});
store.changePage(PAGE_MAP.DRAW_PAGE, { is_from: 'result' }); store.changePage(PAGE_MAP.DRAW_PAGE, {is_from: 'result'});
}) })
// 查看产品详情 // 查看产品详情
openProduct = _throttle(() => { openProduct = _throttle(() => {
sensorMdClick("activityClick", { pageName: "结果页", buttonName: "点击查看" }); sensorMdClick("activityClick", {pageName: "结果页", buttonName: "点击查看"});
modalStore.pushPop("LongImgPop2", { imgUrl: ROLE_MAP[store.roleId].productLink }) modalStore.pushPop("LongImgPop2", {imgUrl: ROLE_MAP[store.roleId].productLink})
}) })
backHandle = _throttle(() => { backHandle = _throttle(() => {
sensorMdClick("activityClick", { pageName: "结果页", buttonName: "返回" }); sensorMdClick("activityClick", {pageName: "结果页", buttonName: "返回"});
store.changePage(PAGE_MAP.HOME_PAGE) store.changePage(PAGE_MAP.HOME_PAGE)
}) })
render() { render() {
const { poster } = this.state; const {poster} = this.state;
return (
<div className="com_Container" ref={r => this.pageRef = r}> const {score} = this.props;
<div className="resultpage">
<div className="shot_content" ref={r => this.shotRef = r}> return <div className="Resultpage" ref={r => this.pageRef = r}>
<span className="bg"></span> <div className="bg"/>
<span className={`role_${store.roleId}`}></span> <div className="poster" ref={r => this.shotRef = r}>
<div className="code_boc"> <span className="posterBg"></span>
<span className="code_bg"></span>
<img className="code_img" src={store.frontVariable.posterQrCode} alt="" />
</div>
</div>
{poster && <img className="poster_img" src={poster} style={{ opacity: 0 }} alt="" />}
<Button className={`product_btn type_${store.roleId}`} onClick={this.openProduct}></Button>
<div className="bottom_btn">
<Button className="share_btn md9" onClick={this.doShare}></Button>
<Button className="draw_btn md8" onClick={this.goDraw}></Button>
<span className="tips">长按保存海报分享</span>
</div>
<Button className="back_btn" onClick={this.backHandle}></Button>
</div>
</div> </div>
); {poster && <img className="poster_img" src={poster} style={{opacity: 0}} alt=""/>}
<Button className="product_btn" onClick={this.openProduct}></Button>
<span className="tips">长按保存海报分享</span>
<Button className="share_btn" onClick={this.doShare}/>
<Button className="draw_btn" onClick={this.goDraw}/>
</div>;
} }
} }
export default Resultpage; export default Resultpage;
src/pages/resultpage/resultpage.less
View file @ d521ba70
@import "../../res.less"; @import "../../res.less";
.resultpage {
.Resultpage {
width: 750px; width: 750px;
height: 1624px; height: 1624px;
left: 0px; left: 0;
top: 0px; top: 0;
position: absolute; position: absolute;
.shot_content {
.bg {
width: 750px; width: 750px;
height: 1624px; height: 1624px;
left: 0px; left: 0px;
top: 0px; top: 0px;
position: absolute; position: absolute;
.bg { .sparkBg("resultPage/负债.jpg");
width: 750px; }
height: 1624px;
left: 0px; .poster {
top: 0px; width: 750px;
position: absolute; height: 1624px;
.sparkBg("resultPage/bg.png"); left: 0px;
} top: 0px;
.role_a { position: absolute;
width: 750px;
height: 1064px;
left: 0px;
top: 219px;
position: absolute;
.sparkBg("resultPage/传统守护者.png");
}
.role_b {
width: 750px;
height: 1057px;
left: 0px;
top: 219px;
position: absolute;
.sparkBg("resultPage/社交组局王.png");
}
.role_c {
width: 750px;
height: 1059px;
left: 0px;
top: 219px;
position: absolute;
.sparkBg("resultPage/狂热尝新党.png");
}
.role_d {
width: 750px;
height: 1055px;
left: 0px;
top: 219px;
position: absolute;
.sparkBg("resultPage/佛系随性派.png");
}
.role_e {
width: 750px;
height: 1065px;
left: 0px;
top: 219px;
position: absolute;
.sparkBg("resultPage/元气美食家.png");
}
.code_boc { .code_boc {
width: 679px; width: 679px;
height: 190px; height: 190px;
...@@ -84,18 +48,7 @@ ...@@ -84,18 +48,7 @@
} }
} }
} }
.product_btn {
width: 129px;
height: 51px;
left: 505px;
top: 1113px;
position: absolute;
.sparkBg("resultPage/product_btn.png");
&.type_d {
left: 525px;
top: 1124px;
}
}
.poster_img { .poster_img {
width: 750px; width: 750px;
height: 1624px; height: 1624px;
...@@ -103,49 +56,45 @@ ...@@ -103,49 +56,45 @@
top: 0px; top: 0px;
position: absolute; position: absolute;
} }
.bottom_btn {
width: 677px;
height: 138px; .product_btn {
left: 34px;
top: 1437px;
position: absolute; position: absolute;
.share_btn { left: 546px;
width: 323px; top: 1288px;
height: 105px; width: 150px;
left: 354px; height: 52px;
top: 0px; .sparkBg("resultPage/去查看.png");
position: absolute; }
.sparkBg("resultPage/share_btn.png");
} .share_btn {
.draw_btn {
width: 323px;
height: 105px;
left: 0px;
top: 0px;
position: absolute; position: absolute;
.sparkBg("resultPage/draw_btn.png"); left: 387px;
} top: 1399px;
.tips { width: 316px;
width: 254px; height: 97px;
height: 18px; .sparkBg("resultPage/分享结果.png");
left: 216px; }
top: 120px;
.draw_btn {
position: absolute; position: absolute;
font-size: 17px; left: 46px;
line-height: 18px; top: 1399px;
color: rgba(53, 95, 49, 1); width: 316px;
text-align: center; height: 97px;
text-decoration: underline; .sparkBg("resultPage/去抽奖.png");
}
} }
.back_btn {
width: 64px; .tips {
height: 65px; width: 100%;
left: 12px; left: 0;
// top: 133px; top: 1370px;
// position: absolute; text-align: center;
top: 50px; position: absolute;
position: fixed; font-size: 17px;
.sparkBg("common/back.png"); line-height: 18px;
color: black;
text-decoration: underline;
} }
} }
src/store/index.js
View file @ d521ba70
...@@ -4,7 +4,7 @@ import API from "../api/index"; ...@@ -4,7 +4,7 @@ import API from "../api/index";
import { GetCurrSkinId, getCustomShareId } from "@src/utils/utils"; import { GetCurrSkinId, getCustomShareId } from "@src/utils/utils";
import { initSensors } from "@src/utils/sensorMd"; import { initSensors } from "@src/utils/sensorMd";
import { Toast } from "@spark/ui"; import { Toast } from "@spark/ui";
import { AESDecrypt } from "@src/utils/Crypto"; import {AESDecrypt, AESEncrypt} from "@src/utils/Crypto";
const skinId = GetCurrSkinId() || getCustomShareId(); const skinId = GetCurrSkinId() || getCustomShareId();
...@@ -108,19 +108,20 @@ const store = makeAutoObservable({ ...@@ -108,19 +108,20 @@ const store = makeAutoObservable({
param.recordId = this.startInfo.recordId; param.recordId = this.startInfo.recordId;
param.timestamp = Date.now(); param.timestamp = Date.now();
const paramDe = AESDecrypt( const paramEn = AESEncrypt(
JSON.stringify(param), JSON.stringify(param),
"1c5f9cab3460e316", "1c5f9cab3460e316",
"cDOiBC1n2QrkAY2P", "cDOiBC1n2QrkAY2P",
); );
const { success, data } = await API.submitAnswer({ const { success, data } = await API.submitAnswer({
param: paramDe, param: paramEn,
}); });
if (success) { if (success) {
this.changePage(PAGE_MAP.RESU_PAGE, { this.changePage(PAGE_MAP.RESU_PAGE, {
awardTimes: data.awardTimes || 0, ...data,
score: param.score,
}); });
} }
}, },
......
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