Skip to content

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

feat: 规则+奖品页+动效

parent dfdba24f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 836 additions and 41 deletions
mock/home.js
View file @ 7d93c92c
...@@ -16,10 +16,36 @@ export const homeJs = [{ ...@@ -16,10 +16,36 @@ export const homeJs = [{
url: '/activity/index', //请求地址 url: '/activity/index', //请求地址
response: () => { response: () => {
return { return {
code: 200, "ok": true,
msg: 'ok', "code": 200,
data: { "msg": 'nodano',
task: 1 "timestamp": +new Date(),
"data": {
"medalInfoList": [
{
"name": "labore velit ad aute",
"desc": "esse sint proident sed",
"icon": "magna ex Ut dolor",
"jumpUrl": "aute",
"endTime": 8437240.7502677,
"startTime": -11215907.080738455,
"boolGet": true,
"medalId": "eiusmod in",
"medalType": 62240986.127530545
}
],
"newGetMedalInfoList": [
{
"medalId": "laboris sunt incididunt magna",
"babyCredits": 12125148.969407722
},
],
"babyCredits": 6676,
"activityBaseInfo": {
"rule": "<p>以下是游戏规则：手速要快，点击红包雨。。333。。。。。。。。。。。。。。。。。。。。11111111111111sadasdadadsad555555555777777777779999999999991111111111111111111111122222222222222222222222222222222222222222222222222222222222222233333333333333333333333333333333333333333333333333333333333331111111111111111111111111111111111111111111111111111111111111112222222222222222222222222222222222222222222222222222222222222223333333333333333333333333333333333333333333333333333333333333</p>",
"startTime": +new Date() - 1000 * 60 * 60 * 24 * 30,
"endTime": +new Date() + 1000 * 60 * 60 * 24 * 30
}
} }
} }
}, },
......
public/assets/common/sub_page_bg.png 0 → 100644
View file @ 7d93c92c
This diff is collapsed.
src/api/request.js
View file @ 7d93c92c
...@@ -16,7 +16,7 @@ import Toast from '../components/toast'; ...@@ -16,7 +16,7 @@ import Toast from '../components/toast';
const service = axios.create({ const service = axios.create({
baseURL: import.meta.env.MODE != 'dev' ? '/dbcpic-api/app' : '', // mockjs 模拟数据这里必须为空,否则请求报404 baseURL: import.meta.env.MODE != 'dev' ? '/dbcpic-nj-api/app' : '', // mockjs 模拟数据这里必须为空,否则请求报404
// baseURL: '/api', // mockjs 模拟数据这里必须为空,否则请求报404 // baseURL: '/api', // mockjs 模拟数据这里必须为空,否则请求报404
method: 'post', method: 'post',
timeout: 20000 timeout: 20000
......
src/app.jsx
View file @ 7d93c92c
...@@ -7,11 +7,13 @@ import Modal from './modal/modal.jsx' ...@@ -7,11 +7,13 @@ import Modal from './modal/modal.jsx'
import store from './store/index.js' import store from './store/index.js'
import modalStore from './store/modal.js' import modalStore from './store/modal.js'
import HomePage from './pages/homePage/homePage.jsx' import HomePage from './pages/homePage/homePage.jsx'
import PrizePage from './pages/prizePage/prizePage.jsx'
import { PAGE_MAP } from './utils/constants.js' import { PAGE_MAP } from './utils/constants.js'
const pageMap = { const pageMap = {
[PAGE_MAP.HOME_PAGE]: <HomePage />, [PAGE_MAP.HOME_PAGE]: <HomePage />,
[PAGE_MAP.PRIZE_PAGE]: <PrizePage />,
}; };
@observer @observer
......
src/components/rulePop/rulePop.jsx 0 → 100644
View file @ 7d93c92c
import React, { Component } from 'react';
import './rulePop.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 RulePop extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
sensorMdExpouse("xcxPopupExpouse", { pageName: `退出挽留弹窗` })
}
handleClose() {
sensorMdClick("xcxPopupClick", { pageName: `退出挽留弹窗`, buttonName: '继续评估' })
modalStore.closePop("RulePop")
}
render() {
const { rulePop, common, svga } = skinStore
const { bg } = rulePop
const { close } = common
const { pop, light } = svga
const { rule } = store.indexInfo?.activityBaseInfo || {};
return <div className="rulePop modal_center">
<SvgaPlayer className="light" src={light} />
<SvgaPlayer className="pop" src={pop} />
<span className="bg" style={{ backgroundImage: `url(${bg})` }} ></span>
<div className="content" dangerouslySetInnerHTML={{ __html: rule }}></div>
<span className="close" onClick={this.handleClose} style={{ backgroundImage: `url(${close})` }} />
</div>
}
}
export default RulePop;
\ No newline at end of file
src/components/rulePop/rulePop.less 0 → 100644
View file @ 7d93c92c
@import url('../../res.less');
.rulePop {
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();
}
.content {
position: absolute;
width: 398px;
height: 423px;
top: 543px;
left: 177px;
font-size: 22px;
line-height: 36px;
color: rgb(131, 80, 42);
word-wrap: break-word;
white-space: pre-wrap;
overflow-x: hidden;
overflow-y: auto;
padding-right: 20px;
}
.close {
position: absolute;
left: 346px;
top: 1062px;
width: 61px;
height: 62px;
.formatBg();
}
}
src/components/svgaPlayer/index.js 0 → 100644
View file @ 7d93c92c
This diff is collapsed.
src/modal/modal.jsx
View file @ 7d93c92c
...@@ -4,12 +4,13 @@ import modalStore from '../store/modal'; ...@@ -4,12 +4,13 @@ import modalStore from '../store/modal';
import { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import WanLiuDialog from "../components/wanLiuDialog"; import WanLiuDialog from "../components/wanLiuDialog";
import RulePop from "../components/rulePop/rulePop";
/** /**
* 弹窗配置 * 弹窗配置
*/ */
export const cfg = { export const cfg = {
WanLiuDialog: WanLiuDialog, WanLiuDialog: WanLiuDialog,
RulePop: RulePop,
}; };
......
src/pages/homePage/homePage.jsx
View file @ 7d93c92c
import React, { Component } from 'react'; import React, { Component } from 'react';
import './homePage.less'; import './homePage.less';
import { _throttle } from '../../utils/utils'; import { _asyncThrottle, _throttle } from '../../utils/utils';
import skinStore from '../../store/newSkin'; import skinStore from '../../store/newSkin';
import Toast from '../../components/toast'; import store from '../../store';
import store, { skinId } from '../../store';
import { PAGE_MAP } from '../../utils/constants'; import { 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';
import { SvgaPlayer } from '../../components/SvgaPlayer';
@observer @observer
class HomePage extends Component { class HomePage extends Component {
constructor(props) { constructor(props) {
...@@ -18,28 +18,46 @@ class HomePage extends Component { ...@@ -18,28 +18,46 @@ class HomePage extends Component {
} }
} }
componentDidMount() { async componentDidMount() {
sensorMdExpouse("xcxPage", { pageName: `首页` }) sensorMdExpouse("xcxPage", { pageName: `首页` })
store.getIndexInfo(); await store.getIndexInfo();
// modalStore.pushPop("WanLiuDialog")
} }
beginBtnFun() { // 保贝值抽奖
drawHandle = _asyncThrottle(() => {
sensorMdClick("xcxClick", { pageName: `首页`, buttonName: '开始测试' }) sensorMdClick("xcxClick", { pageName: `首页`, buttonName: '开始测试' })
const flag = store.checkActivityStatus(); const flag = store.checkActivityStatus();
if (!flag) return; if (!flag) return;
store.joinActivity(); store.joinActivity();
} })
// 规则
ruleHandle = _asyncThrottle(() => {
sensorMdClick("xcxClick", { pageName: `首页`, buttonName: '规则' })
modalStore.pushPop("RulePop")
})
// 时光宝箱
prizeHandle = _asyncThrottle(() => {
sensorMdClick("xcxClick", { pageName: `首页`, buttonName: '时光宝箱' })
const flag = store.checkActivityStatus(true, false);
if (!flag) return;
store.changePage(PAGE_MAP.PRIZE_PAGE)
})
render() { render() {
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 { 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 || {};
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 === 1 ? 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} />
{/* 规则 */} {/* 规则 */}
<div className="btn_rule" style={{ 'backgroundImage': `url(${btn_rule})` }}></div> <div className="btn_rule" onClick={this.ruleHandle} style={{ 'backgroundImage': `url(${btn_rule})` }}></div>
{/* 分享 */} {/* 分享 */}
<div className="btn_share" style={{ 'backgroundImage': `url(${btn_share})` }}></div> <div className="btn_share" style={{ 'backgroundImage': `url(${btn_share})` }}></div>
{/* tab-活动展区 */} {/* tab-活动展区 */}
...@@ -82,17 +100,18 @@ class HomePage extends Component { ...@@ -82,17 +100,18 @@ class HomePage extends Component {
</div> </div>
{/* 左滑引导 */} {/* 左滑引导 */}
<div className="left_guide"> <div className="left_guide">
<div className="arrow_left" style={{ 'backgroundImage': `url(${arrow_left})` }}></div> {/* <div className="arrow_left" style={{ 'backgroundImage': `url(${arrow_left})` }}></div>
<div className="left_guide_text">左滑查看更多</div> <div className="left_guide_text">左滑查看更多</div> */}
<SvgaPlayer className="huadong" src={huadong} />
</div> </div>
{/* 时光宝箱 */} {/* 时光宝箱 */}
<div className="btn_prize" style={{ 'backgroundImage': `url(${btn_prize})` }}></div> <div className="btn_prize" onClick={this.prizeHandle} style={{ 'backgroundImage': `url(${btn_prize})` }}></div>
{/* 未来展品 */} {/* 未来展品 */}
<div className="btn_future" style={{ 'backgroundImage': `url(${btn_future})` }}></div> <div className="btn_future" style={{ 'backgroundImage': `url(${btn_future})` }}></div>
{/* 主按钮 */} {/* 主按钮 */}
<div className="mainbtn_box"> <div className="mainbtn_box" onClick={this.drawHandle}>
<div className="mainbtn" style={{ 'backgroundImage': `url(${mainbtn})` }}></div> <div className="mainbtn" style={{ 'backgroundImage': `url(${mainbtn})` }}></div>
<div className="current_bb">当前持有：XX保贝值</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>
</div> </div>
</div> </div>
......
src/pages/homePage/homePage.less
View file @ 7d93c92c
...@@ -23,6 +23,14 @@ ...@@ -23,6 +23,14 @@
.formatBg(); .formatBg();
} }
.home_svga {
position: absolute;
left: 0px;
top: 85px;
width: 750px;
height: 1101px;
}
.btn_rule { .btn_rule {
position: absolute; position: absolute;
left: 0px; left: 0px;
...@@ -136,6 +144,15 @@ ...@@ -136,6 +144,15 @@
line-height: 28px; line-height: 28px;
color: rgb(131, 80, 42); color: rgb(131, 80, 42);
} }
.huadong {
position: absolute;
left: 3px;
top: 2px;
width: 194px;
height: 25px;
pointer-events: none;
}
} }
.btn_prize { .btn_prize {
......
src/pages/prizePage/prizePage.jsx 0 → 100644
View file @ 7d93c92c
import React, { Component } from 'react';
import './prizePage.less';
import { _asyncThrottle, _throttle } from '../../utils/utils';
import skinStore from '../../store/newSkin';
import store from '../../store';
import { PAGE_MAP } from '../../utils/constants';
import { observer } from 'mobx-react';
import { sensorMdClick, sensorMdExpouse } from '../../utils/sensorMd';
@observer
class PrizePage extends Component {
constructor(props) {
super(props);
this.state = {
curTab: 0,
}
}
async componentDidMount() {
sensorMdExpouse("xcxPage", { pageName: `奖品页` })
}
// 切换tab
toggleTab = _asyncThrottle((index) => {
this.setState({ curTab: index })
})
// 返回
backHandle = _asyncThrottle(() => {
sensorMdClick("xcxClick", { pageName: `奖品页`, buttonName: '返回' })
store.changePage(PAGE_MAP.HOME_PAGE)
})
render() {
const { curTab } = this.state;
const { prize_img_bg, tab_active_bg, title, item_bg } = skinStore.prizePage;
const { back, sub_page_bg_cover, sub_page_bg } = skinStore.common;
return (
<div className="prizePage">
<div className="bg" style={{ 'backgroundImage': `url(${sub_page_bg})` }}></div>
{/* 返回 */}
<div className="back" onClick={this.backHandle} style={{ 'backgroundImage': `url(${back})` }}></div>
{/* 遮罩 */}
<div className="bg_cover" style={{ 'backgroundImage': `url(${sub_page_bg_cover})` }}></div>
{/* 标题 */}
<div className="title" style={{ 'backgroundImage': `url(${title})` }}></div>
{/* tab */}
<div className="tab_list">
{new Array(10).fill(0).map((item, index) => (
<div
className={`tab_item ${curTab === index ? 'active' : ''}`}
onClick={() => this.toggleTab(index)}
style={{ 'backgroundImage': `url(${curTab === index ? tab_active_bg : ''})` }}
>财神红包雨星{index + 1}
</div>
))}
</div>
{/* 奖品列表 */}
<div className="prize_list">
{new Array(20).fill(0).map((item, index) => (
<div className="prize_item" style={{ 'backgroundImage': `url(${item_bg})` }}>
<div className="prize_img_box" style={{ 'backgroundImage': `url(${prize_img_bg})` }}>
<img className="prize_img" src="//yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png" alt="" />
</div>
<div className="prize_info">
<div className="prize_name">奖品名称奖品名称奖品名称奖品名称${index + 1}</div>
<div className="prize_desc">奖品描述奖品描述奖品描述奖品描述奖品描述奖品描述奖品描述</div>
</div>
</div>
))}
</div>
</div>
);
}
}
export default PrizePage;
src/pages/prizePage/prizePage.less 0 → 100644
View file @ 7d93c92c
@import url('../../res.less');
.prizePage {
width: 750px;
height: 1624px;
position: relative;
.bg {
position: absolute;
left: 0;
top: 0;
width: 750px;
height: 1624px;
.formatBg();
}
.back {
width: 96px;
height: 47px;
position: absolute;
left: 0;
top: 152px;
.formatBg();
}
.bg_cover {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 1624px;
.formatBg();
}
.title {
position: absolute;
left: 281px;
top: 155px;
width: 193px;
height: 54px;
.formatBg();
}
.tab_list {
width: 674px;
height: 61px;
position: absolute;
left: 76px;
top: 239px;
display: flex;
overflow-y: auto;
.tab_item {
flex-shrink: 0;
width: 223px;
height: 61px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 28px;
color: rgb(121, 79, 40);
padding-top: 10px;
box-sizing: border-box;
&.active {
.formatBg();
font-size: 28px;
color: rgb(255, 255, 255);
padding-top: 0px;
}
}
}
.prize_list {
position: absolute;
left: 92px;
top: 327px;
width: 638px;
height: calc(100vh - 327px);
overflow: hidden;
overflow-y: auto;
.formatBg();
.prize_item {
position: relative;
width: 638px;
height: 151px;
margin-bottom: 10px;
.formatBg();
.prize_img_box {
position: absolute;
left: 17px;
top: 15px;
width: 117px;
height: 112px;
.formatBg();
}
.prize_img {
width: 100%;
height: 100%;
object-fit: contain;
}
.prize_info {
position: absolute;
left: 149px;
top: 0px;
padding: 10px 0;
width: 330px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.prize_name {
width: 100%;
height: 30px;
font-size: 28px;
line-height: 30px;
color: rgb(131, 80, 42);
color: rgb(255, 136, 17);
font-weight: bold;
.lineClampN(2);
}
.prize_desc {
width: 100%;
height: 22px;
font-size: 20px;
line-height: 22px;
color: rgb(255, 136, 17);
margin-top: 15px;
.lineClamp1();
}
}
}
}
src/store/index.js
View file @ 7d93c92c
...@@ -32,28 +32,31 @@ const store = makeAutoObservable({ ...@@ -32,28 +32,31 @@ const store = makeAutoObservable({
}, },
indexInfo: {}, indexInfo: {},
getIndexInfo() { async getIndexInfo() {
indexApi({ activityId: '' }).then(res => { const res = await indexApi()
console.log(res) console.log(res)
if (res.ok) { if (res.ok) {
store.indexInfo = res.data store.indexInfo = res.data || {}
} }
});
}, },
checkActivityStatus() {
const activityInfo = store.indexInfo.activityInfo; // 活动时间拦截
if (activityInfo && activityInfo.startTime && activityInfo.endTime) { // 结束不拦截 brakeEnd为false
const startTime = activityInfo.startTime; // 规则奖品始终可以点击 不用调方法
const endTime = activityInfo.endTime; checkActivityStatus(brakeStart = true, brakeEnd = true) {
const activityBaseInfo = store.indexInfo.activityBaseInfo;
if (activityBaseInfo && activityBaseInfo.startTime && activityBaseInfo.endTime) {
const startTime = activityBaseInfo.startTime;
const endTime = activityBaseInfo.endTime;
const now = new Date().getTime(); const now = new Date().getTime();
if (now >= startTime && now <= endTime) { if (now >= startTime && now <= endTime) {
return true; return true;
} }
if (now < startTime) { if (brakeStart && now < startTime) {
Toast('活动暂未开始，敬请期待～') Toast('活动暂未开始')
} }
if (now > endTime) { if (brakeEnd && now > endTime) {
Toast('活动已结束，感谢您的关注～') Toast('活动已经结束')
} }
} }
Toast('活动异常~') Toast('活动异常~')
......
src/store/newSkin.js
View file @ 7d93c92c
...@@ -9,9 +9,25 @@ import { ...@@ -9,9 +9,25 @@ import {
// hash.update(bundle[fileName].source); // hash.update(bundle[fileName].source);
// const hashValue = hash.digest('hex').substring(0, 8); // const hashValue = hash.digest('hex').substring(0, 8);
// 公共图片
const _common = {
close: './assets/common/close.png',
back: './assets/common/back.png',
sub_page_bg: './assets/common/sub_page_bg.png',
sub_page_bg_cover: './assets/common/sub_page_bg_cover.png',
}
// 动效文件
const _svga = {
home: './assets/svga/home.svga',
huadong: './assets/svga/huadong.svga',
pop: './assets/svga/pop.svga',
light: './assets/svga/light.svga',
}
// 首页 // 首页
let _homePage = { const _homePage = {
bg_type1: './assets/homePage/bg_type1.png', bg_type1: './assets/homePage/bg_type1.png',
bg_type2: './assets/homePage/bg_type2.png', bg_type2: './assets/homePage/bg_type2.png',
tab1: './assets/homePage/tab1.png', tab1: './assets/homePage/tab1.png',
...@@ -26,6 +42,19 @@ let _homePage = { ...@@ -26,6 +42,19 @@ let _homePage = {
btn_share: './assets/homePage/btn_share.png', btn_share: './assets/homePage/btn_share.png',
} }
// 规则
const _rulePop = {
bg: './assets/rulePop/bg.png',
light: './assets/rulePop/light.png',
}
// 时光宝箱
const _prizePage = {
prize_img_bg: './assets/prizePage/prize_img_bg.png',
tab_active_bg: './assets/prizePage/tab_active_bg.png',
title: './assets/prizePage/title.png',
item_bg: './assets/prizePage/item_bg.png',
}
// 处理图片防止缓存 // 处理图片防止缓存
const dealImg = (obj) => { const dealImg = (obj) => {
...@@ -41,7 +70,15 @@ const dealImg = (obj) => { ...@@ -41,7 +70,15 @@ const dealImg = (obj) => {
return obj return obj
} }
let homePage = dealImg(_homePage) let homePage = dealImg(_homePage)
let prizePage = dealImg(_prizePage)
let rulePop = dealImg(_rulePop)
let common = dealImg(_common)
let svga = _svga
const skinStore = makeAutoObservable({ const skinStore = makeAutoObservable({
homePage, homePage,
prizePage,
rulePop,
common,
svga,
}) })
export default skinStore; export default skinStore;
src/utils/constants.js
View file @ 7d93c92c
export const PAGE_MAP = { export const PAGE_MAP = {
HOME_PAGE: 'homePage', HOME_PAGE: 'homePage',
QUES_PAGE: 'quesPage', PRIZE_PAGE: 'prizePage',
AGREE_PAGE: 'agreePage',
RESULT_PAGE: 'resultPage'
} }
export const errMessageMap = { export const errMessageMap = {
......
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