Skip to content

R
RB_StrongestBrain_250520
Commit b7414f18 authored by cc's avatar cc
Browse files
Options

Merge branch 'master' of http://gitlab2.dui88.com/sparkprojects/rb_strongestbrain_250520

parents c70332dc 9d2bf73e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 793 additions and 57 deletions
mock/draw.js 0 → 100644
View file @ b7414f18
export default [
{
url: '/draw/index.do',
method: 'get',
response: ({ query }) => {
return {
"success": true,
"message": "报错了~",
"code": null,
timeStamp: Date.now(),
"data": {
"remainDrawTimes": 1, // 抽奖次数
"prizeVOs": [
{
prizeName: `奖品1`,
prizeImg: `//yun.duiba.com.cn/polaris/jinmoqiang.9e5bbc004f69ab6a3f34d93daeda028616a9f00d.png`,
prizeId: `1`,
},
{
prizeName: `奖品名称2`,
prizeImg: `//yun.duiba.com.cn/polaris/kouzhao.dc55dac6db1ff94c4666c2602d6cb0ac84139982.png`,
prizeId: `2`,
},
{
prizeName: `奖品名称3`,
prizeImg: `//yun.duiba.com.cn/polaris/mac.fe55aa43e5a231d568973dcdd0b91e0263d5a12c.png`,
prizeId: `3`,
},
{
prizeName: `奖品名称4`,
prizeImg: `//yun.duiba.com.cn/polaris/mgtv.e5f0709a2a4083bc57ce52ff200a50a2e56b2658.png`,
prizeId: `4`,
},
{
prizeName: `奖品名称5`,
prizeImg: `//yun.duiba.com.cn/polaris/qq.73ad13cd0c6fd705327d12957c12e9d5b2e77baa.png`,
prizeId: `5`,
},
{
prizeName: `谢谢参与`,
prizeImg: `https://yun.duiba.com.cn/spark/assets/f77861647e7b55e9c95e9c49d891a21526157a76.jpg`,
prizeId: `thanks`,
},
]
}
}
},
},
{
url: '/draw/doDraw.do',
method: 'get',
"code": "",
"message": null,
"success": true,
"data": {
"prizeName": "",
"prizeId": "",
"prizeImg": "",
"productInfos": [
{
"productImg": "//yun.duiba.com.cn/spark/assets/f77861647e7b55e9c95e9c49d891a21526157a76.jpg",
"productText": "介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1介绍1介绍费1介绍1"
},
{
"productImg": "//yun.duiba.com.cn/polaris/111.8b981b3fc7d090da2457b4f29b9feec496dc95fd.png",
"productText": "介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2介绍2"
},
{
"productImg": "//yun.duiba.com.cn/polaris/mgtv.e5f0709a2a4083bc57ce52ff200a50a2e56b2658.png",
"productText": "介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3介绍3"
}
]
},
"timeStamp": 1739176246085
},
]
\ No newline at end of file
mock/md.ts
View file @ b7414f18
......@@ -9,4 +9,4 @@ export default [
method: 'get',
response: 1,
},
]
]
\ No newline at end of file
pnpm-lock.yaml
View file @ b7414f18
This diff is collapsed.
src/api/index.ts
View file @ b7414f18
......@@ -2,14 +2,17 @@ import { generateAPI } from "./utils"
const API = generateAPI({
/** 获取活动规则 */
getRule: 'projectRule.query',
getRule: "projectRule.query",
/** 获取前端配置项 */
getFrontVariable: 'coop_frontVariable.query',
// getShareInfo: '/wechatShare/getShareInfo/v2',
getShareInfo: '/wechatMiniApp/ticket/info',
getFrontVariable: "coop_frontVariable.query",
/** 参与接口 post请求 */
doJoin: {
uri: "join.do",
method: "post"
},
/** 签到 */
doSign: {
uri: 'checkin_1/doSign.do',
uri: "checkin_1/doSign.do",
withToken: true, // 携带token
},
......
src/core/ctrls/ModalCtrl.tsx
View file @ b7414f18
import React, { ComponentType, Component } from "react";
import styles from "./ModalCtrl.module.less";
import SignSucPanel from "@/panels/SignSucPanel/SignSucPanel.tsx";
import TipPanel from "@/panels/TipPanel/TipPanel.tsx";
// 弹窗优先级配置Map，key为弹窗组件名（建议用组件.displayName或组件名字符串），value为优先级数值
// 数值越大优先级越高，未配置的默认0
const modalPriorityMap = new Map<ComponentType<any>, number>([
[SignSucPanel, 15],
[TipPanel, 15],
]);
interface ModalItem {
......
src/pages/DrawPage/DrawPage.jsx
View file @ b7414f18
'use strict';
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./DrawPage.less";
import { _asyncThrottle, _throttle } from "../../utils/utils.ts";
import store from "../../store/store.ts";
import { CHANNEL_PARAMS } from "../../utils/constants.ts";
import { CircleTurntable } from "@spark/circle-turntable";
import { isWeiXin } from "../../AppTools.ts";
import API from "../../api/index.ts";
import { Button, Toast } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
<<<<<<< HEAD
=======
import React from 'react';
import { observer } from 'mobx-react';
import './DrawPage.less';
......@@ -10,25 +25,23 @@ import { CircleTurntable } from '@spark/circle-turntable'
// import { Button } from '@src/components/Button';
// import { Marquee, Toast } from '@spark/ui';
// import { isWeChat } from '@src/utils/share';
>>>>>>> 9220288db04479c19dd6c72d8df036f6453c36b0
// import { LOG_KEY, pageView, sensorLog } from '@src/utils/sensors';
import { isWeiXin } from '../../AppTools.ts';
import API from '../../api';
import { Button, Toast } from '@grace/ui';
@observer
class Drawpage extends React.Component {
constructor(props) {
super(props);
this.state = {
drawInfo: {}
}
this.btnStarting = false // 转盘是否启动
this.turntableRef = null // 大转盘
this.drawResultInfo = {}
drawInfo: {},
};
this.btnStarting = false; // 转盘是否启动
this.turntableRef = null; // 大转盘
this.drawResultInfo = {};
}
componentDidMount() {
this.getDrawInfo()
this.getDrawInfo();
// pageView("b12842", {
// page_name: "抽奖大转盘",
// });
......@@ -48,13 +61,13 @@ class Drawpage extends React.Component {
/** 获取转盘信息 */
getDrawInfo = async () => {
const { success, data } = await API.drawIndex()
const { success, data } = await API.drawIndex();
if (success && data) {
this.setState({
drawInfo: data || {}
})
drawInfo: data || {},
});
}
}
};
// 开始抽奖
lottteryHandle = _asyncThrottle(async () => {
......@@ -66,49 +79,51 @@ class Drawpage extends React.Component {
if (isWeiXin()) {
// 友客小程序
if (CFG.channel == CHANNEL_PARAMS.YK_MINI) {
return Toast.show("请前往人保寿险管家app活动抽奖～")
return Toast.show("请前往人保寿险管家app活动抽奖～");
}
// 其他微信端 提醒唤端弹窗
else {
return modalStore.pushPop("CodePop")
return modalStore.pushPop("CodePop");
}
}
const { prizeVOs, remainDrawTimes } = this.state.drawInfo
const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
// 抽奖次数为0
if (!remainDrawTimes) {
return Toast("抽奖次数不足，快去做任务赚次数吧～")
return Toast("抽奖次数不足，快去做任务赚次数吧～");
}
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 = prizeVOs?.findIndex(item => item.prizeId === (this.drawResultInfo.prizeId || 'thanks'))
console.info('index', index)
const index = prizeVOs?.findIndex(
(item) => item.prizeId === (this.drawResultInfo.prizeId || "thanks")
);
console.info("index", index);
this.turntableRef.braking(index);
} else {
this.btnStarting = false
this.getDrawInfo()
this.btnStarting = false;
this.getDrawInfo();
}
})
});
// 转盘停止处理
stopOkHandle = () => {
this.btnStarting = false
this.btnStarting = false;
if (!this.drawResultInfo?.prizeId) {
// modalStore.pushPop("NoPrizeCard", { data: this.drawResultInfo })
} else {
// modalStore.pushPop("Pop_winprize", { data: this.drawResultInfo })
}
this.getDrawInfo()
}
this.getDrawInfo();
};
/** 返回 */
backHome = _throttle(() => {
......@@ -116,9 +131,9 @@ class Drawpage extends React.Component {
// page_name: "抽奖大转盘",
// button_name: "返回按钮",
// });
if (this.btnStarting) return false
if (this.btnStarting) return false;
// store.changePage(PAGE_MAP.HOME_PAGE)
})
});
goTask = _throttle(() => {
// sensorLog(LOG_KEY.click, "b12842", "d12844", {
......@@ -126,12 +141,12 @@ class Drawpage extends React.Component {
// button_name: "做任务，赚次数按钮",
// });
if (this.btnStarting) return false
if (this.btnStarting) return false;
// modalStore.pushPop("Taskpop", { onClose: () => this.getDrawInfo() })
})
});
render() {
const { prizeVOs, remainDrawTimes } = this.state.drawInfo
const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
return (
<div className="drawpage modal_center">
<span className="bg"></span>
......@@ -144,23 +159,23 @@ class Drawpage extends React.Component {
<div className="turantable">
<CircleTurntable
className="turantable_box"
ref={ref => this.turntableRef = ref}
ref={(ref) => (this.turntableRef = ref)}
options={prizeVOs || []}
angleOffset={30} // 角度偏移量
radian={100} // 奖项半径
launchDuration={1000} // 启动时间
angleOffset={30} // 角度偏移量
radian={100} // 奖项半径
launchDuration={1000} // 启动时间
// 大转盘背景
renderBackground={<div className="turantable_bg"></div>}
// 大转盘指针
renderStartButton={<></>}
// 渲染奖品信息
renderOption={(option) => {
return <div className="prize_item">
<div className="prize_name">{option.prizeName}</div>
<img className="prize_img"
src={option.prizeImg}
alt="" />
</div>
return (
<div className="prize_item">
<div className="prize_name">{option.prizeName}</div>
<img className="prize_img" src={option.prizeImg} alt="" />
</div>
);
}}
didStop={this.stopOkHandle}
/>
......
src/pages/HomePage/HomePage.tsx
View file @ b7414f18
......@@ -26,6 +26,7 @@ class Homepage extends React.Component {
componentDidMount() {
store.updateIndex()
}
handleButtonClick = _asyncThrottle(async (number) => {
// 活动时间判断
// 规则 奖品始终可以点击 我的排名结束可以点击 其余常规逻辑
......@@ -39,12 +40,12 @@ class Homepage extends React.Component {
// 0 我的排名
case 0:
// TODO 换成我的排名页面 记得引用
PageCtrl.changePage(RankPage);
// PageCtrl.changePage();
break;
// 1 抽奖
case 1:
// PageCtrl.changePage(DrawPage);
PageCtrl.changePage(DrawPage);
break;
// 2 做任务
......@@ -52,6 +53,7 @@ class Homepage extends React.Component {
// TODO
ModalCtrl.showModal(Taskpop);
break;
// 3 答题
case 3:
// TODO
......
src/pages/drawpage/drawpage.jsx 0 → 100644
View file @ b7414f18
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./DrawPage.less";
import { _asyncThrottle, _throttle } from "../../utils/utils.ts";
import store from "../../store/store.ts";
import { CHANNEL_PARAMS } from "../../utils/constants.ts";
import { CircleTurntable } from "@spark/circle-turntable";
import { isWeiXin } from "../../AppTools.ts";
import API from "../../api/index.ts";
import { Button, Toast } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
<<<<<<< HEAD
=======
import React from 'react';
import { observer } from 'mobx-react';
import './DrawPage.less';
import { _asyncThrottle } from '../../utils/utils.ts';
import store from '../../store/store.ts';
import { CHANNEL_PARAMS } from '@/utils/constants';
import { CircleTurntable } from '@spark/circle-turntable'
// import { Button } from '@src/components/Button';
// import { Marquee, Toast } from '@spark/ui';
// import { isWeChat } from '@src/utils/share';
>>>>>>> 9220288db04479c19dd6c72d8df036f6453c36b0
// import { LOG_KEY, pageView, sensorLog } from '@src/utils/sensors';
@observer
class Drawpage extends React.Component {
constructor(props) {
super(props);
this.state = {
drawInfo: {},
};
this.btnStarting = false; // 转盘是否启动
this.turntableRef = null; // 大转盘
this.drawResultInfo = {};
}
componentDidMount() {
this.getDrawInfo();
// pageView("b12842", {
// page_name: "抽奖大转盘",
// });
// sensorLog(LOG_KEY.exposure, "b12842", "d12843", {
// page_name: "抽奖大转盘",
// button_name: "立即抽奖按钮",
// });
// sensorLog(LOG_KEY.exposure, "b12842", "d12844", {
// page_name: "抽奖大转盘",
// button_name: "做任务，赚次数按钮",
// });
// sensorLog(LOG_KEY.exposure, "b12842", "d12845", {
// page_name: "抽奖大转盘",
// button_name: "返回按钮",
// });
}
/** 获取转盘信息 */
getDrawInfo = async () => {
const { success, data } = await API.drawIndex();
if (success && data) {
this.setState({
drawInfo: data || {},
});
}
};
// 开始抽奖
lottteryHandle = _asyncThrottle(async () => {
// sensorLog(LOG_KEY.click, "b12842", "d12843", {
// page_name: "抽奖大转盘",
// button_name: "立即抽奖按钮",
// });
// 微信端拦截
if (isWeiXin()) {
// 友客小程序
if (CFG.channel == CHANNEL_PARAMS.YK_MINI) {
return Toast.show("请前往人保寿险管家app活动抽奖～");
}
// 其他微信端 提醒唤端弹窗
else {
return modalStore.pushPop("CodePop");
}
}
const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
// 抽奖次数为0
if (!remainDrawTimes) {
return Toast("抽奖次数不足，快去做任务赚次数吧～");
}
if (this.btnStarting) return false;
this.btnStarting = true;
const { success, data } = await API.drawJoin();
if (success && data) {
// 转盘转动开始抽奖
this.turntableRef.launch();
this.drawResultInfo = data || {};
// 转盘停止转动，指针停在index
const index = prizeVOs?.findIndex(
(item) => item.prizeId === (this.drawResultInfo.prizeId || "thanks")
);
console.info("index", index);
this.turntableRef.braking(index);
} else {
this.btnStarting = false;
this.getDrawInfo();
}
});
// 转盘停止处理
stopOkHandle = () => {
this.btnStarting = false;
if (!this.drawResultInfo?.prizeId) {
// modalStore.pushPop("NoPrizeCard", { data: this.drawResultInfo })
} else {
// modalStore.pushPop("Pop_winprize", { data: this.drawResultInfo })
}
this.getDrawInfo();
};
/** 返回 */
backHome = _throttle(() => {
// sensorLog(LOG_KEY.click, "b12842", "d12845", {
// page_name: "抽奖大转盘",
// button_name: "返回按钮",
// });
if (this.btnStarting) return false;
// store.changePage(PAGE_MAP.HOME_PAGE)
});
goTask = _throttle(() => {
// sensorLog(LOG_KEY.click, "b12842", "d12844", {
// page_name: "抽奖大转盘",
// button_name: "做任务，赚次数按钮",
// });
if (this.btnStarting) return false;
// modalStore.pushPop("Taskpop", { onClose: () => this.getDrawInfo() })
});
render() {
const { prizeVOs, remainDrawTimes } = this.state.drawInfo;
return (
<div className="drawpage modal_center">
<span className="bg"></span>
<Button className="back_btn md19" onClick={this.backHome} />
<Button className="task_btn md21" onClick={this.goTask} />
<Button className="draw_btn_box md20" onClick={this.lottteryHandle}>
<span className="draw_btn"></span>
<span className="left_num">剩余次数：{remainDrawTimes || 0}</span>
</Button>
<div className="turantable">
<CircleTurntable
className="turantable_box"
ref={(ref) => (this.turntableRef = ref)}
options={prizeVOs || []}
angleOffset={30} // 角度偏移量
radian={100} // 奖项半径
launchDuration={1000} // 启动时间
// 大转盘背景
renderBackground={<div className="turantable_bg"></div>}
// 大转盘指针
renderStartButton={<></>}
// 渲染奖品信息
renderOption={(option) => {
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>
</div>
<span className="cover"></span>
</div>
);
}
}
export default Drawpage;
src/panels/SignSucPanel/SignSucPanel.tsx → src/panels/TipPanel/TipPanel.tsx
View file @ b7414f18
import React from "react";
import {observer} from "mobx-react";
import "./SignSucPanel.less";
import "./TipPanel.less";
import {Button} from "@grace/ui";
import {_asyncThrottle} from "@/utils/utils.ts";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import HomePage from "@/pages/HomePage/HomePage.tsx";
import { SvgaPlayer } from "@grace/svgaplayer";
import bgEffectSvga from "@/assets/svga/2输出签到成功弹窗.svga";
export interface ISignSucPanelProps {
signCredits: number;
extraCredits: number;
boolLimit: boolean;
multipleValue: number;
url: string;
taskId: string;
newLuckCreditsNum: number;
export interface ITipPanelProps {
tip: string;
}
@observer
class SignSucPanel extends React.Component<ISignSucPanelProps> {
class TipPanel extends React.Component<ITipPanelProps> {
componentDidMount() {
}
......@@ -35,33 +24,15 @@ class SignSucPanel extends React.Component<ISignSucPanelProps> {
});
render() {
const { signCredits, extraCredits } = this.props;
const { tip } = this.props;
return <div className="SignSucPanel modal_center">
<SvgaPlayer className="bgEffect" src={bgEffectSvga}/>
<div className="bg"/>
<div className="title"/>
{
!!extraCredits
? <div className="vip">
<div className="tip">获得</div>
<div className="left">{signCredits}积分</div>
<div className="right">{extraCredits}积分</div>
<div className="img"/>
</div>
: <div className="normal">
<div className="tip">获得{signCredits}积分</div>
<div className="img"/>
</div>
}
<div className="com_banner"/>
<div></div>
<Button className="btn" onClick={this.clickBtn}/>
<Button className="close" onClick={this.clickClose}/>
</div>;
}
}
export default SignSucPanel;
export default TipPanel;
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