Skip to content

太
太保-年鉴活动-20250625
Commit f6149401 authored by 俞嘉婷's avatar 俞嘉婷
Browse files
Options

feat: 首页勋章+勋章弹窗

parent 81145048
Hide whitespace changes
Inline Side-by-side
Showing with 552 additions and 49 deletions
index.html
View file @ f6149401
...@@ -63,6 +63,7 @@ ...@@ -63,6 +63,7 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="./src/main.jsx"></script> <script type="module" src="./src/main.jsx"></script>
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="./assets/js/duiba.js"></script> <script src="./assets/js/duiba.js"></script>
<script> <script>
......
mock/home.js
View file @ f6149401
...@@ -17,25 +17,32 @@ export const homeJs = [ ...@@ -17,25 +17,32 @@ export const homeJs = [
{ {
url: '/activity/index', //请求地址 url: '/activity/index', //请求地址
response: () => { response: () => {
const list = [
"//yun.duiba.com.cn/polaris/medal1.c022287fcb0174d828077cb5cf9b9b299d128a6b.png",
"//yun.duiba.com.cn/polaris/medal2.341cc76fa221193683be4944f19dd63e1e5eee70.png",
"//yun.duiba.com.cn/polaris/medal3.cd7c88c280902662cf3634b06ad0365ff7d75628.png",
"//yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png",
]
return { return {
"ok": true, "ok": true,
"code": 200, "code": 200,
"msg": 'nodano', "msg": 'nodano',
"timestamp": +new Date(), "timestamp": +new Date(),
"data": { "data": {
"medalInfoList": [ "medalInfoList": new Array(27).fill(0).map((item, index) => {
{ const type = index < 15 ? 1 : 2;
"name": "labore velit ad aute", return {
"desc": "esse sint proident sed", "name": `${type == 1 ? '活动' : '荣誉'}勋章名称${index + 1}`,
"icon": "magna ex Ut dolor", "desc": `${type == 1 ? '活动' : '荣誉'}勋章描述${index + 1}`,
"icon": list[index % 4],
"jumpUrl": "aute", "jumpUrl": "aute",
"endTime": 8437240.7502677, "endTime": index == 0 ? +new Date() - 1000 * 60 * 60 * 24 * 30 : +new Date() + 1000 * 60 * 60 * 24 * 30,
"startTime": -11215907.080738455, "startTime": +new Date() - 1000 * 60 * 60 * 24 * 30,
"boolGet": true, "boolGet": index != 3,
"medalId": "eiusmod in", "medalId": `勋章id${index + 1}`,
"medalType": 62240986.127530545 "medalType": type, // 勋章类型(1:活动勋章 2:荣誉勋章)
} }
], }),
"newGetMedalInfoList": [ "newGetMedalInfoList": [
{ {
"medalId": "laboris sunt incididunt magna", "medalId": "laboris sunt incididunt magna",
......
public/assets/homePage/mainbtn.png
View replaced file @ 81145048 View file @ f6149401
public/assets/homePage/mainbtn.png

98.3 KB | W: | H:

public/assets/homePage/mainbtn.png

31.7 KB | W: | H:

public/assets/homePage/mainbtn.png
public/assets/homePage/mainbtn.png
public/assets/homePage/mainbtn.png
public/assets/homePage/mainbtn.png
  • 2-up
  • Swipe
  • Onion skin
src/assetList.json
View file @ f6149401
{"preLoadImg":[],"asyncLoadImg":["./assets/common/back.png","./assets/common/close.png","./assets/common/sub_page_bg.png","./assets/common/sub_page_bg_cover.png","./assets/futurePage/btn.png","./assets/futurePage/item_bg.png","./assets/futurePage/prize_img_bg.png","./assets/futurePage/title.png","./assets/homePage/arrow_left.png","./assets/homePage/bg_type1.png","./assets/homePage/bg_type2.png","./assets/homePage/btn_future.png","./assets/homePage/btn_prize.png","./assets/homePage/btn_rule.png","./assets/homePage/btn_share.png","./assets/homePage/mainbtn.png","./assets/homePage/mainbtn_popover.png","./assets/homePage/tab1.png","./assets/homePage/tab2.png","./assets/homePage/title.png","./assets/prizePage/item_bg.png","./assets/prizePage/prize_img_bg.png","./assets/prizePage/tab_active_bg.png","./assets/prizePage/title.png","./assets/rulePop/bg.png","./assets/svga/4输出徽章紫色.svga","./assets/svga/5输出礼盒按钮.svga","./assets/svga/6输出徽章绿色.svga","./assets/svga/home.svga","./assets/svga/huadong.svga","./assets/svga/light.svga","./assets/svga/pop.svga"]} {"preLoadImg":[],"asyncLoadImg":["./assets/common/back.png","./assets/common/close.png","./assets/common/sub_page_bg.png","./assets/common/sub_page_bg_cover.png","./assets/futurePage/btn.png","./assets/futurePage/item_bg.png","./assets/futurePage/prize_img_bg.png","./assets/futurePage/title.png","./assets/homePage/arrow_left.png","./assets/homePage/bg_type1.png","./assets/homePage/bg_type2.png","./assets/homePage/btn_future.png","./assets/homePage/btn_prize.png","./assets/homePage/btn_rule.png","./assets/homePage/btn_share.png","./assets/homePage/mainbtn.png","./assets/homePage/mainbtn_bg.png","./assets/homePage/mainbtn_popover.png","./assets/homePage/tab1.png","./assets/homePage/tab2.png","./assets/homePage/title.png","./assets/lightedPop/bg.png","./assets/lightedPop/know_btn.png","./assets/prizePage/item_bg.png","./assets/prizePage/prize_img_bg.png","./assets/prizePage/tab_active_bg.png","./assets/prizePage/title.png","./assets/rulePop/bg.png","./assets/svga/4输出徽章紫色.svga","./assets/svga/6输出徽章绿色.svga","./assets/svga/box.svga","./assets/svga/home.svga","./assets/svga/huadong.svga","./assets/svga/light.svga","./assets/svga/pop.svga","./assets/svga/saoguang.svga"]}
\ No newline at end of file \ No newline at end of file
src/components/lightEndPop/lightEndPop.jsx 0 → 100644
View file @ f6149401
import React, { Component } from 'react';
import './lightEndPop.less';
import { observer } from 'mobx-react';
import modalStore from '../../store/modal';
import { sensorMdClick, sensorMdExpouse } from '../../utils/sensorMd';
import skinStore from '../../store/newSkin';
@observer
class LightEndPop extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
sensorMdExpouse("xcxPopupExpouse", { pageName: `点亮勋章弹窗` })
}
handleClose() {
sensorMdClick("xcxPopupClick", { pageName: `点亮勋章弹窗`, buttonName: '继续评估' })
modalStore.closePop("LightEndPop")
}
render() {
const { lightEndPop, common } = skinStore
const { bg, know_btn } = lightEndPop
const { close } = common
return <div className="lightEndPop modal_center">
<span className="bg" style={{ backgroundImage: `url(${bg})` }} ></span>
<div className="title">该展品活动已经结束啦</div>
<div className="desc">快去看看其他展品进行点亮吧!</div>
<span className="close" onClick={this.handleClose} style={{ backgroundImage: `url(${close})` }} />
<span className="know_btn" onClick={this.handleClose} style={{ backgroundImage: `url(${know_btn})` }} />
</div>
}
}
export default LightEndPop;
\ No newline at end of file
src/components/lightEndPop/lightEndPop.less 0 → 100644
View file @ f6149401
@import url('../../res.less');
.lightEndPop {
width: 750px;
height: 1624px;
position: absolute;
.bg {
position: absolute;
left: 109px;
top: 658px;
width: 531px;
height: 261px;
.formatBg();
}
.title {
width: 350px;
height: 24px;
position: absolute;
left: 200px;
top: 692px;
font-size: 23px;
color: #faeddd;
line-height: 24px;
font-weight: bold;
text-align: center;
text-shadow: 0px 4px 2px rgba(216, 137, 58, 0.85);
}
.desc {
position: absolute;
left: 140px;
top: 776px;
width: 470px;
height: 22px;
font-size: 20px;
color: rgb(131, 80, 42);
line-height: 22px;
text-align: center;
}
.know_btn {
position: absolute;
left: 237px;
top: 825px;
width: 276px;
height: 61px;
.formatBg();
}
.close {
position: absolute;
left: 346px;
top: 962px;
width: 61px;
height: 62px;
.formatBg();
}
}
src/components/lightGreyPop/lightGreyPop.jsx 0 → 100644
View file @ f6149401
import React, { Component } from 'react';
import './lightGreyPop.less';
import { observer } from 'mobx-react';
import store from '../../store';
import modalStore from '../../store/modal';
import { sensorMdClick, sensorMdExpouse } from '../../utils/sensorMd';
import skinStore from '../../store/newSkin';
import { SvgaPlayer } from '../SvgaPlayer';
import { _asyncThrottle } from '../../utils/utils';
@observer
class LightGreyPop extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
sensorMdExpouse("xcxPopupExpouse", { pageName: `点亮勋章弹窗` })
}
handleClose() {
sensorMdClick("xcxPopupClick", { pageName: `点亮勋章弹窗`, buttonName: '继续评估' })
modalStore.closePop("LightGreyPop")
}
handleJoin = _asyncThrottle(() => {
sensorMdClick("xcxPopupClick", { pageName: `点亮勋章弹窗`, buttonName: '立即点亮' })
modalStore.closePop("LightGreyPop")
const { jumpUrl } = this.props.popData || {}
if (jumpUrl) {
if (jumpUrl.indexOf('http') === 0) {
window.location.href = jumpUrl
} else {
wx.miniProgram.navigateTo({ url: jumpUrl });
}
}
})
render() {
const { lightGreyPop, common, svga } = skinStore
const { bg, join_btn, deng } = lightGreyPop
const { close } = common
const { pop, light } = svga
const { name, desc, icon } = this.props.popData || {}
return <div className="lightGreyPop modal_center">
<SvgaPlayer className="light" src={light} />
<SvgaPlayer className="pop" src={pop} />
<span className="bg" style={{ backgroundImage: `url(${bg})` }} ></span>
<div className="title">该勋章暂未点亮</div>
<div className="desc">{desc}</div>
<span className="deng" style={{ backgroundImage: `url(${deng})` }} ></span>
<img className="icon" src={icon} alt="" />
<div className="name">{name}</div>
<span className="close" onClick={this.handleClose} style={{ backgroundImage: `url(${close})` }} />
<span className="join_btn" onClick={this.handleJoin} style={{ backgroundImage: `url(${join_btn})` }} />
</div>
}
}
export default LightGreyPop;
\ No newline at end of file
src/components/lightGreyPop/lightGreyPop.less 0 → 100644
View file @ f6149401
@import url('../../res.less');
.lightGreyPop {
width: 750px;
height: 1624px;
position: absolute;
.light {
position: absolute;
left: 0px;
top: 234px;
width: 750px;
height: 1074px;
}
.pop {
position: absolute;
left: 42px;
top: 224px;
width: 664px;
height: 663px;
}
.bg {
position: absolute;
left: 109px;
top: 440px;
width: 531px;
height: 590px;
.formatBg();
}
.title {
width: 350px;
height: 24px;
position: absolute;
left: 200px;
top: 474px;
font-size: 23px;
color: #faeddd;
line-height: 24px;
font-weight: bold;
text-align: center;
text-shadow: 0px 4px 2px rgba(216, 137, 58, 0.85);
}
.desc {
position: absolute;
left: 140px;
top: 544px;
width: 470px;
height: 22px;
font-size: 20px;
color: rgb(131, 80, 42);
line-height: 22px;
text-align: center;
}
.deng {
position: absolute;
left: 350px;
top: 584px;
width: 44px;
height: 44px;
.formatBg();
}
.icon {
position: absolute;
left: 248px;
top: 630px;
width: 250px;
height: 250px;
object-fit: contain;
}
.name {
position: absolute;
left: 140px;
top: 884px;
width: 470px;
height: 22px;
font-size: 20px;
color: rgb(131, 80, 42);
line-height: 22px;
text-align: center;
}
.join_btn {
position: absolute;
left: 237px;
top: 921px;
width: 276px;
height: 61px;
.formatBg();
}
.close {
position: absolute;
left: 346px;
top: 1062px;
width: 61px;
height: 62px;
.formatBg();
}
}
src/components/lightedPop/lightedPop.jsx 0 → 100644
View file @ f6149401
import React, { Component } from 'react';
import './lightedPop.less';
import { observer } from 'mobx-react';
import store from '../../store';
import modalStore from '../../store/modal';
import { sensorMdClick, sensorMdExpouse } from '../../utils/sensorMd';
import skinStore from '../../store/newSkin';
import { SvgaPlayer } from '../SvgaPlayer';
@observer
class LightedPop extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
sensorMdExpouse("xcxPopupExpouse", { pageName: `点亮勋章弹窗` })
}
handleClose() {
sensorMdClick("xcxPopupClick", { pageName: `点亮勋章弹窗`, buttonName: '继续评估' })
modalStore.closePop("LightedPop")
}
render() {
const { lightedPop, common, svga } = skinStore
const { bg, know_btn, deng } = lightedPop
const { close } = common
const { pop, light } = svga
const { name, desc, icon } = this.props.popData || {}
return <div className="lightedPop modal_center">
<SvgaPlayer className="light" src={light} />
<SvgaPlayer className="pop" src={pop} />
<span className="bg" style={{ backgroundImage: `url(${bg})` }} ></span>
<div className="title">{name}</div>
<div className="desc">{desc}</div>
<span className="deng" style={{ backgroundImage: `url(${deng})` }} ></span>
<img className="icon" src={icon} alt="" />
<div className="name">{name}</div>
<span className="close" onClick={this.handleClose} style={{ backgroundImage: `url(${close})` }} />
<span className="know_btn" onClick={this.handleClose} style={{ backgroundImage: `url(${know_btn})` }} />
</div>
}
}
export default LightedPop;
\ No newline at end of file
src/components/lightedPop/lightedPop.less 0 → 100644
View file @ f6149401
@import url('../../res.less');
.lightedPop {
width: 750px;
height: 1624px;
position: absolute;
.light {
position: absolute;
left: 0px;
top: 234px;
width: 750px;
height: 1074px;
}
.pop {
position: absolute;
left: 42px;
top: 224px;
width: 664px;
height: 663px;
}
.bg {
position: absolute;
left: 109px;
top: 440px;
width: 531px;
height: 590px;
.formatBg();
}
.title {
width: 350px;
height: 24px;
position: absolute;
left: 200px;
top: 474px;
font-size: 23px;
color: #faeddd;
line-height: 24px;
font-weight: bold;
text-align: center;
text-shadow: 0px 4px 2px rgba(216, 137, 58, 0.85);
}
.desc {
position: absolute;
left: 140px;
top: 544px;
width: 470px;
height: 22px;
font-size: 20px;
color: rgb(131, 80, 42);
line-height: 22px;
text-align: center;
}
.deng {
position: absolute;
left: 350px;
top: 584px;
width: 44px;
height: 44px;
.formatBg();
}
.icon {
position: absolute;
left: 248px;
top: 630px;
width: 250px;
height: 250px;
object-fit: contain;
}
.name {
position: absolute;
left: 140px;
top: 884px;
width: 470px;
height: 22px;
font-size: 20px;
color: rgb(131, 80, 42);
line-height: 22px;
text-align: center;
}
.know_btn {
position: absolute;
left: 237px;
top: 921px;
width: 276px;
height: 61px;
.formatBg();
}
.close {
position: absolute;
left: 346px;
top: 1062px;
width: 61px;
height: 62px;
.formatBg();
}
}
src/modal/modal.jsx
View file @ f6149401
...@@ -6,6 +6,9 @@ import { observer } from "mobx-react"; ...@@ -6,6 +6,9 @@ import { observer } from "mobx-react";
import WanLiuDialog from "../components/wanLiuDialog"; import WanLiuDialog from "../components/wanLiuDialog";
import RulePop from "../components/rulePop/rulePop"; import RulePop from "../components/rulePop/rulePop";
import LongImgPop from "../components/longImgPop/longImgPop"; import LongImgPop from "../components/longImgPop/longImgPop";
import LightedPop from "../components/lightedPop/lightedPop";
import LightGreyPop from "../components/lightGreyPop/lightGreyPop";
import LightEndPop from "../components/lightEndPop/lightEndPop";
/** /**
* 弹窗配置 * 弹窗配置
*/ */
...@@ -13,6 +16,9 @@ export const cfg = { ...@@ -13,6 +16,9 @@ export const cfg = {
WanLiuDialog: WanLiuDialog, WanLiuDialog: WanLiuDialog,
RulePop: RulePop, RulePop: RulePop,
LongImgPop: LongImgPop, LongImgPop: LongImgPop,
LightedPop: LightedPop,
LightGreyPop: LightGreyPop,
LightEndPop: LightEndPop,
}; };
......
src/pages/homePage/homePage.jsx
View file @ f6149401
...@@ -3,7 +3,7 @@ import './homePage.less'; ...@@ -3,7 +3,7 @@ import './homePage.less';
import { _asyncThrottle, _throttle } from '../../utils/utils'; import { _asyncThrottle, _throttle } from '../../utils/utils';
import skinStore from '../../store/newSkin'; import skinStore from '../../store/newSkin';
import store from '../../store'; import store from '../../store';
import { PAGE_MAP } from '../../utils/constants'; import { MEDAL_TYPE, PAGE_MAP } from '../../utils/constants';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { sensorMdClick, sensorMdExpouse } from '../../utils/sensorMd'; import { sensorMdClick, sensorMdExpouse } from '../../utils/sensorMd';
import modalStore from '../../store/modal'; import modalStore from '../../store/modal';
...@@ -14,7 +14,7 @@ class HomePage extends Component { ...@@ -14,7 +14,7 @@ class HomePage extends Component {
super(props); super(props);
this.state = { this.state = {
curTab: 1, curTab: MEDAL_TYPE.ACTIVITY,
} }
} }
...@@ -52,15 +52,39 @@ class HomePage extends Component { ...@@ -52,15 +52,39 @@ class HomePage extends Component {
store.changePage(PAGE_MAP.FUTURE_PAGE) store.changePage(PAGE_MAP.FUTURE_PAGE)
}) })
// 勋章点击
medalHandle = (item) => {
const { boolGet, endTime, medalType } = item;
// 勋章活动时间已过 此弹窗只在活动展区逻辑下会出现
if (medalType === MEDAL_TYPE.ACTIVITY && endTime < +new Date()) {
modalStore.pushPop("LightEndPop", item)
}
// 勋章已点亮
else if (boolGet) {
modalStore.pushPop("LightedPop", item)
}
// 勋章未点亮
else {
modalStore.pushPop("LightGreyPop", item)
}
}
render() { render() {
const { bg_type1, bg_type2, title, tab1, tab2, arrow_left, btn_prize, mainbtn, mainbtn_bg, btn_future, mainbtn_popover, btn_rule, btn_share } = skinStore.homePage;
const { home, huadong, box, saoguang } = skinStore.svga;
const { curTab } = this.state; const { curTab } = this.state;
const { bg_type1, bg_type2, title, tab1, tab2, arrow_left, btn_prize, mainbtn, btn_future, mainbtn_popover, btn_rule, btn_share } = skinStore.homePage;
const { home, huadong } = skinStore.svga;
const { babyCredits } = store.indexInfo?.activityBaseInfo || {}; const { babyCredits } = store.indexInfo?.activityBaseInfo || {};
const medalInfoList = store.indexInfo?.medalInfoList?.filter(item => item.medalType === curTab) || [];
// 第一行 奇数索引的勋章
const medalList1 = medalInfoList.filter((_, index) => index % 2 === 0);
// 第二行 偶数索引的勋章
const medalList2 = medalInfoList.filter((_, index) => index % 2 === 1);
return ( return (
<div className="com_Container"> <div className="com_Container">
<div className="homePage"> <div className="homePage">
<div className="bg" style={{ 'backgroundImage': `url(${curTab === 1 ? bg_type1 : bg_type2})` }}></div> <div className="bg" style={{ 'backgroundImage': `url(${curTab === MEDAL_TYPE.ACTIVITY ? bg_type1 : bg_type2})` }}></div>
{/* <div className="title" style={{ 'backgroundImage': `url(${title})` }}></div> */} {/* <div className="title" style={{ 'backgroundImage': `url(${title})` }}></div> */}
<SvgaPlayer className="home_svga" src={home} /> <SvgaPlayer className="home_svga" src={home} />
{/* 规则 */} {/* 规则 */}
...@@ -68,41 +92,27 @@ class HomePage extends Component { ...@@ -68,41 +92,27 @@ class HomePage extends Component {
{/* 分享 */} {/* 分享 */}
<div className="btn_share" style={{ 'backgroundImage': `url(${btn_share})` }}></div> <div className="btn_share" style={{ 'backgroundImage': `url(${btn_share})` }}></div>
{/* tab-活动展区 */} {/* tab-活动展区 */}
{curTab === 1 && <div className="tab1" onClick={() => this.setState({ curTab: 2 })} style={{ 'backgroundImage': `url(${tab1})` }}></div>} {curTab === MEDAL_TYPE.ACTIVITY && <div className="tab1" onClick={() => this.setState({ curTab: MEDAL_TYPE.HONOR })} style={{ 'backgroundImage': `url(${tab1})` }}></div>}
{/* tab-荣耀展区 */} {/* tab-荣耀展区 */}
{curTab === 2 && <div className="tab2" onClick={() => this.setState({ curTab: 1 })} style={{ 'backgroundImage': `url(${tab2})` }}></div>} {curTab === MEDAL_TYPE.HONOR && <div className="tab2" onClick={() => this.setState({ curTab: MEDAL_TYPE.ACTIVITY })} style={{ 'backgroundImage': `url(${tab2})` }}></div>}
{/* 勋章列表 */} {/* 勋章列表 */}
<div className="medal_list_box"> <div className="medal_list_box">
<div className="medal_list line1"> <div className="medal_list line1">
<div className="medal_item"> {medalList1.map((item, index) => (
<img src="//yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png" alt="" /> <div className={`medal_item ${item.boolGet ? '' : 'grey'}`} key={"line1_" + index} onClick={() => this.medalHandle(item)}>
</div> <img src={item.icon} alt="" />
<div className="medal_item"> {/* TODO 动效确认 */}
<img src="//yun.duiba.com.cn/polaris/medal1.c022287fcb0174d828077cb5cf9b9b299d128a6b.png" alt="" /> {/* <SvgaPlayer className="saoguang" src={saoguang} /> */}
</div> </div>
<div className="medal_item"> ))}
<img src="//yun.duiba.com.cn/polaris/medal2.341cc76fa221193683be4944f19dd63e1e5eee70.png" alt="" />
</div>
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal3.cd7c88c280902662cf3634b06ad0365ff7d75628.png" alt="" />
</div>
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png" alt="" />
</div>
</div> </div>
<div className="medal_list line2"> <div className="medal_list line2">
<div className="medal_item"> {medalList2.map((item, index) => (
<img src="//yun.duiba.com.cn/polaris/medal1.c022287fcb0174d828077cb5cf9b9b299d128a6b.png" alt="" /> <div className={`medal_item ${item.boolGet ? '' : 'grey'}`} key={"line2_" + index} onClick={() => this.medalHandle(item)}>
</div> <img src={item.icon} alt="" />
<div className="medal_item grey"> {/* <SvgaPlayer className="saoguang" src={saoguang} /> */}
<img src="//yun.duiba.com.cn/polaris/medal2.341cc76fa221193683be4944f19dd63e1e5eee70.png" alt="" /> </div>
</div> ))}
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal3.cd7c88c280902662cf3634b06ad0365ff7d75628.png" alt="" />
</div>
<div className="medal_item">
<img src="//yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png" alt="" />
</div>
</div> </div>
</div> </div>
{/* 左滑引导 */} {/* 左滑引导 */}
...@@ -117,6 +127,8 @@ class HomePage extends Component { ...@@ -117,6 +127,8 @@ class HomePage extends Component {
<div className="btn_future" onClick={this.futureHandle} style={{ 'backgroundImage': `url(${btn_future})` }}></div> <div className="btn_future" onClick={this.futureHandle} style={{ 'backgroundImage': `url(${btn_future})` }}></div>
{/* 主按钮 */} {/* 主按钮 */}
<div className="mainbtn_box" onClick={this.drawHandle}> <div className="mainbtn_box" onClick={this.drawHandle}>
<div className="mainbtn_bg" style={{ 'backgroundImage': `url(${mainbtn_bg})` }}></div>
<SvgaPlayer className="box" src={box} />
<div className="mainbtn" style={{ 'backgroundImage': `url(${mainbtn})` }}></div> <div className="mainbtn" style={{ 'backgroundImage': `url(${mainbtn})` }}></div>
<div className="current_bb">当前持有：{babyCredits}保贝值</div> <div className="current_bb">当前持有：{babyCredits}保贝值</div>
<div className="mainbtn_popover" style={{ 'backgroundImage': `url(${mainbtn_popover})` }}>点亮勋章得XX保贝值</div> <div className="mainbtn_popover" style={{ 'backgroundImage': `url(${mainbtn_popover})` }}>点亮勋章得XX保贝值</div>
......
src/pages/homePage/homePage.less
View file @ f6149401
...@@ -97,6 +97,7 @@ ...@@ -97,6 +97,7 @@
} }
.medal_item { .medal_item {
position: relative;
flex-shrink: 0; flex-shrink: 0;
width: 260px; width: 260px;
height: 260px; height: 260px;
...@@ -108,6 +109,15 @@ ...@@ -108,6 +109,15 @@
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
.saoguang {
width: 90%;
height: 90%;
position: absolute;
left: 5%;
top: 5%;
pointer-events: none;
}
} }
.medal_item:nth-child(odd) { .medal_item:nth-child(odd) {
...@@ -180,12 +190,29 @@ ...@@ -180,12 +190,29 @@
width: 308px; width: 308px;
height: 286px; height: 286px;
.mainbtn_bg {
position: absolute;
left: 40px;
top: 0px;
width: 238px;
height: 238px;
.formatBg();
}
.box {
position: absolute;
left: -35px;
top: -20px;
width: 374px;
height: 250px;
}
.mainbtn { .mainbtn {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 0px; top: 171px;
width: 308px; width: 308px;
height: 286px; height: 115px;
.formatBg(); .formatBg();
} }
......
src/store/newSkin.js
View file @ f6149401
...@@ -20,6 +20,8 @@ const _common = { ...@@ -20,6 +20,8 @@ const _common = {
// 动效文件 // 动效文件
const _svga = { const _svga = {
home: './assets/svga/home.svga', home: './assets/svga/home.svga',
box: './assets/svga/box.svga',
saoguang: './assets/svga/saoguang.svga',
huadong: './assets/svga/huadong.svga', huadong: './assets/svga/huadong.svga',
pop: './assets/svga/pop.svga', pop: './assets/svga/pop.svga',
light: './assets/svga/light.svga', light: './assets/svga/light.svga',
...@@ -35,6 +37,7 @@ const _homePage = { ...@@ -35,6 +37,7 @@ const _homePage = {
arrow_left: './assets/homePage/arrow_left.png', arrow_left: './assets/homePage/arrow_left.png',
btn_prize: './assets/homePage/btn_prize.png', btn_prize: './assets/homePage/btn_prize.png',
mainbtn: './assets/homePage/mainbtn.png', mainbtn: './assets/homePage/mainbtn.png',
mainbtn_bg: './assets/homePage/mainbtn_bg.png',
btn_future: './assets/homePage/btn_future.png', btn_future: './assets/homePage/btn_future.png',
mainbtn_popover: './assets/homePage/mainbtn_popover.png', mainbtn_popover: './assets/homePage/mainbtn_popover.png',
btn_rule: './assets/homePage/btn_rule.png', btn_rule: './assets/homePage/btn_rule.png',
...@@ -64,6 +67,26 @@ const _futurePage = { ...@@ -64,6 +67,26 @@ const _futurePage = {
btn: './assets/futurePage/btn.png', btn: './assets/futurePage/btn.png',
} }
// 已点亮勋章
const _lightedPop = {
bg: './assets/lightedPop/bg.png',
deng: './assets/lightedPop/deng.png',
know_btn: './assets/lightedPop/know_btn.png',
}
// 未点亮勋章
const _lightGreyPop = {
bg: './assets/lightGreyPop/bg.png',
deng: './assets/lightGreyPop/deng.png',
join_btn: './assets/lightGreyPop/join_btn.png',
}
// 点亮勋章活动结束
const _lightEndPop = {
bg: './assets/lightEndPop/bg.png',
know_btn: './assets/lightedPop/know_btn.png',
}
// 处理图片防止缓存 // 处理图片防止缓存
const dealImg = (obj) => { const dealImg = (obj) => {
...@@ -83,7 +106,9 @@ let rulePop = dealImg(_rulePop) ...@@ -83,7 +106,9 @@ let rulePop = dealImg(_rulePop)
let common = dealImg(_common) let common = dealImg(_common)
let svga = _svga let svga = _svga
let futurePage = dealImg(_futurePage) let futurePage = dealImg(_futurePage)
let lightedPop = dealImg(_lightedPop)
let lightGreyPop = dealImg(_lightGreyPop)
let lightEndPop = dealImg(_lightEndPop)
const skinStore = makeAutoObservable({ const skinStore = makeAutoObservable({
homePage, homePage,
prizePage, prizePage,
...@@ -91,5 +116,8 @@ const skinStore = makeAutoObservable({ ...@@ -91,5 +116,8 @@ const skinStore = makeAutoObservable({
common, common,
svga, svga,
futurePage, futurePage,
lightedPop,
lightGreyPop,
lightEndPop,
}) })
export default skinStore; export default skinStore;
src/utils/constants.js
View file @ f6149401
...@@ -9,6 +9,14 @@ export const errMessageMap = { ...@@ -9,6 +9,14 @@ export const errMessageMap = {
200002: "请刷新页面，奖品库存已领完～", 200002: "请刷新页面，奖品库存已领完～",
} }
// 勋章类型(1:活动勋章 2:荣誉勋章)
export const MEDAL_TYPE = {
/** 活动勋章 */
ACTIVITY: 1,
/** 荣誉勋章 */
HONOR: 2,
}
/** /**
* 渠道参数 * 渠道参数
* 1.个险app gxapp * 1.个险app gxapp
......
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