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';
import React from 'react';
import { observer } from 'mobx-react';
import {observer} from 'mobx-react';
import './resultpage.less';
import store from '@src/store';
import { Button } from '@src/components/Button';
import { _throttle } from '@src/utils/utils';
import {Button} from '@src/components/Button';
import {_throttle} from '@src/utils/utils';
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 { sensorMdClick, sensorMdExpouse } from '@src/utils/sensorMd';
import { hideLoading, showLoading } from '@spark/ui';
import { htmlShot } from '@spark/utils';
import {sensorMdClick, sensorMdExpouse} from '@src/utils/sensorMd';
import {hideLoading, showLoading} from '@spark/ui';
import {htmlShot} from '@spark/utils';
@observer
class Resultpage extends React.Component {
......@@ -21,8 +21,9 @@ class Resultpage extends React.Component {
poster: null,
};
}
async componentDidMount() {
sensorMdExpouse("activityPage", { pageName: "结果页", follow_action: 3 });
sensorMdExpouse("activityPage", {pageName: "结果页", follow_action: 3});
showLoading();
await this.doCreatePoster();
this.pageRef?.scrollTo(0, 240 * window.remScale);
......@@ -32,55 +33,50 @@ class Resultpage extends React.Component {
doCreatePoster = async () => {
setTimeout(async () => {
const url = await htmlShot(this.shotRef)
this.setState({ poster: url })
this.setState({poster: url})
hideLoading()
}, 500);
};
doShare = _throttle(() => {
sensorMdClick("activityClick", { pageName: "结果页", buttonName: "分享人设" });
sensorMdClick("activityClick", {pageName: "结果页", buttonName: "分享人设"});
shareStore.doShare();
})
goDraw = _throttle(() => {
sensorMdClick("activityClick", { pageName: "结果页", buttonName: "立即抽奖" });
store.changePage(PAGE_MAP.DRAW_PAGE, { is_from: 'result' });
sensorMdClick("activityClick", {pageName: "结果页", buttonName: "立即抽奖"});
store.changePage(PAGE_MAP.DRAW_PAGE, {is_from: 'result'});
})
// 查看产品详情
openProduct = _throttle(() => {
sensorMdClick("activityClick", { pageName: "结果页", buttonName: "点击查看" });
modalStore.pushPop("LongImgPop2", { imgUrl: ROLE_MAP[store.roleId].productLink })
sensorMdClick("activityClick", {pageName: "结果页", buttonName: "点击查看"});
modalStore.pushPop("LongImgPop2", {imgUrl: ROLE_MAP[store.roleId].productLink})
})
backHandle = _throttle(() => {
sensorMdClick("activityClick", { pageName: "结果页", buttonName: "返回" });
sensorMdClick("activityClick", {pageName: "结果页", buttonName: "返回"});
store.changePage(PAGE_MAP.HOME_PAGE)
})
render() {
const { poster } = this.state;
return (
<div className="com_Container" ref={r => this.pageRef = r}>
<div className="resultpage">
<div className="shot_content" ref={r => this.shotRef = r}>
<span className="bg"></span>
<span className={`role_${store.roleId}`}></span>
<div className="code_boc">
<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>
const {poster} = this.state;
const {score} = this.props;
return <div className="Resultpage" ref={r => this.pageRef = r}>
<div className="bg"/>
<div className="poster" ref={r => this.shotRef = r}>
<span className="posterBg"></span>
</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;
src/pages/resultpage/resultpage.less
View file @ d521ba70
@import "../../res.less";
.resultpage {
.Resultpage {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
left: 0;
top: 0;
position: absolute;
.shot_content {
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("resultPage/bg.png");
}
.role_a {
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");
}
.sparkBg("resultPage/负债.jpg");
}
.poster {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.code_boc {
width: 679px;
height: 190px;
......@@ -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 {
width: 750px;
height: 1624px;
......@@ -103,49 +56,45 @@
top: 0px;
position: absolute;
}
.bottom_btn {
width: 677px;
height: 138px;
left: 34px;
top: 1437px;
.product_btn {
position: absolute;
.share_btn {
width: 323px;
height: 105px;
left: 354px;
top: 0px;
position: absolute;
.sparkBg("resultPage/share_btn.png");
}
.draw_btn {
width: 323px;
height: 105px;
left: 0px;
top: 0px;
left: 546px;
top: 1288px;
width: 150px;
height: 52px;
.sparkBg("resultPage/去查看.png");
}
.share_btn {
position: absolute;
.sparkBg("resultPage/draw_btn.png");
}
.tips {
width: 254px;
height: 18px;
left: 216px;
top: 120px;
left: 387px;
top: 1399px;
width: 316px;
height: 97px;
.sparkBg("resultPage/分享结果.png");
}
.draw_btn {
position: absolute;
font-size: 17px;
line-height: 18px;
color: rgba(53, 95, 49, 1);
text-align: center;
text-decoration: underline;
}
left: 46px;
top: 1399px;
width: 316px;
height: 97px;
.sparkBg("resultPage/去抽奖.png");
}
.back_btn {
width: 64px;
height: 65px;
left: 12px;
// top: 133px;
// position: absolute;
top: 50px;
position: fixed;
.sparkBg("common/back.png");
.tips {
width: 100%;
left: 0;
top: 1370px;
text-align: center;
position: absolute;
font-size: 17px;
line-height: 18px;
color: black;
text-decoration: underline;
}
}
src/store/index.js
View file @ d521ba70
......@@ -4,7 +4,7 @@ import API from "../api/index";
import { GetCurrSkinId, getCustomShareId } from "@src/utils/utils";
import { initSensors } from "@src/utils/sensorMd";
import { Toast } from "@spark/ui";
import { AESDecrypt } from "@src/utils/Crypto";
import {AESDecrypt, AESEncrypt} from "@src/utils/Crypto";
const skinId = GetCurrSkinId() || getCustomShareId();
......@@ -108,19 +108,20 @@ const store = makeAutoObservable({
param.recordId = this.startInfo.recordId;
param.timestamp = Date.now();
const paramDe = AESDecrypt(
const paramEn = AESEncrypt(
JSON.stringify(param),
"1c5f9cab3460e316",
"cDOiBC1n2QrkAY2P",
);
const { success, data } = await API.submitAnswer({
param: paramDe,
param: paramEn,
});
if (success) {
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