Commit f016a81b authored by cc's avatar cc

update

parents f2be2cb4 6798dbca
......@@ -76,7 +76,7 @@ const API = generateAPI({
},
// 奖品
queryOrder: "customActivity/kouweiwang/prize/queryOrderNo",
queryOrder: "/customActivity/kouweiwang/prize/queryOrderNo",
index: "main/index.do",
completeGuide: "main/completeGuide.do",
......
import API from "@/api";
import {isWeiXin} from "@/AppTools.ts";
import { isWeiXin } from "@/AppTools.ts";
export interface IWxShareInfo {
title: string,
......@@ -43,37 +43,39 @@ export async function initWx(shareInfo: IWxShareInfo) {
console.info('分享信息', param)
// @ts-ignore
wx.miniProgram.postMessage(param);
wx.miniProgram.postMessage({
data: param
});
// if (!isWeiXin()) {
// return;
// }
// if (!isWeiXin()) {
// return;
// }
// const {
// success,
// // @ts-ignore
// data,
// timestamp,
// } = await API.getShareInfo({wxdebug: false, url: shareInfo.link,isMiniApp:true,apk:'2J2Dt6DHw8bGf2vZb14E34Uthr6q',});
// // wxappid, wxtimestamp, wxnonceStr, wxsignature
// if (!success) {
// return;
// }
// wx.config({
// debug: false,
// appId: data.wxAppId,
// timestamp: data.wxTimestamp,
// nonceStr: data.wxNonceStr,
// signature: data.wxSignature,
// jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
// });
// const {
// success,
// // @ts-ignore
// data,
// timestamp,
// } = await API.getShareInfo({wxdebug: false, url: shareInfo.link,isMiniApp:true,apk:'2J2Dt6DHw8bGf2vZb14E34Uthr6q',});
// // wxappid, wxtimestamp, wxnonceStr, wxsignature
// if (!success) {
// return;
// }
// wx.config({
// debug: false,
// appId: data.wxAppId,
// timestamp: data.wxTimestamp,
// nonceStr: data.wxNonceStr,
// signature: data.wxSignature,
// jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
// });
// wx.error(function (res) {
// console.error("wx error", res);
// });
// wx.error(function (res) {
// console.error("wx error", res);
// });
// wx.ready(function () {
// invokeWX(shareInfo);
// });
// wx.ready(function () {
// invokeWX(shareInfo);
// });
}
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './rulepop.less';
import store from '../../store/store';
import { Button } from '@grace/ui';
import {_asyncThrottle} from "../../utils/utils";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
@observer
class Rulepop extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
store.initRule();
}
handleClose = _asyncThrottle(() => {
ModalCtrl.closeModal()
})
render() {
return (
<div className="rulepop modal_center">
<span className="bg"></span>
<span className="title"></span>
<span className="rule" dangerouslySetInnerHTML={{ __html: store.ruleInfo }}></span>
<Button className="close" onClick={this.handleClose} />
</div>
);
}
}
export default Rulepop;
@import "../../res.less";
.rulepop {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 606px;
height: 956px;
left: 72px;
top: 287px;
position: absolute;
.sparkBg("rulePop/bg.png");
}
.title {
width: 175px;
height: 42px;
left: 276px;
top: 382px;
position: absolute;
.sparkBg("rulePop/title.png");
}
.rule {
width: 431px;
height: 570px;
left: 148px;
top: 469px;
position: absolute;
font-size: 25px;
color: rgba(153, 57, 27, 1);
word-wrap: break-word;
white-space: pre-wrap;
overflow-x: hidden;
overflow-y: auto;
}
.close {
width: 64px;
height: 64px;
left: 343px;
top: 1243px;
position: absolute;
.sparkBg("rulePop/close.png");
}
}
'use strict';
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';
// 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 = {}
}
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;
@import "../../res.less";
.drawpage {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("drawPage/bg.png");
}
.back_btn {
left: 31px;
top: 199px;
width: 56px;
height: 57px;
position: absolute;
.sparkBg("common/back.png");
}
.task_btn {
position: absolute;
left: 548px;
top: 1211px;
width: 202px;
height: 203px;
.sparkBg("common/task.png");
}
.prize_info {
position: absolute;
left: 57px;
top: 470px;
width: 615px;
height: 46px;
.prize_info_bg {
position: absolute;
left: 0;
top: 0;
width: 615px;
height: 46px;
.sparkBg("drawPage/prize_info_bg.png");
}
.prize_info_laba {
position: absolute;
left: 142px;
top: 11px;
width: 31px;
height: 25px;
.sparkBg("drawPage/prize_info_laba.png");
}
.prize_info_list {
width: 360px;
height: 46px;
position: absolute;
left: 185px;
top: 0;
.prize_info_item {
width: 100%;
height: 46px;
font-size: 20px;
color: rgb(40, 85, 84);
line-height: 46px;
text-align: left;
.lineClamp1();
}
}
}
.draw_btn_box {
width: 373px;
height: 115px;
left: 190px;
top: 1258px;
position: absolute;
.draw_btn {
width: 373px;
height: 115px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("drawPage/draw_btn.png");
}
.left_num {
width: 100%;
height: 27px;
left: 0px;
top: 70px;
position: absolute;
font-size: 20px;
color: rgb(202, 57, 0);
text-align: center;
}
}
.turantable {
left: 35px;
top: 476px;
width: 680px;
height: 681px;
position: absolute;
.sparkBg("drawPage/turantable_box.png");
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
.turantable_box {
position: relative;
}
.turantable_bg {
width: 584px;
height: 584px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("drawPage/turantable_bg.png");
}
.prize_item {
width: 190px;
height: 150px;
color: rgba(248, 103, 89, 1);
font-size: 28px;
box-sizing: border-box;
text-align: center;
.prize_name {
width: 100%;
font-weight: bold;
.lineClamp1();
}
.prize_img {
width: 80px;
height: 70px;
object-fit: contain;
margin-top: 10px;
}
}
.pointer {
position: absolute;
left: 276px;
top: 251px;
width: 126px;
height: 131px;
position: absolute;
.sparkBg("drawPage/pointer.png");
}
}
.cover {
left: 318px;
top: 430px;
width: 114px;
height: 138px;
position: absolute;
.sparkBg("drawPage/cover.png");
pointer-events: none;
}
}
\ No newline at end of file
......@@ -3,29 +3,86 @@
import React from 'react';
import { observer } from 'mobx-react';
import './homepage.less';
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import RankPage from '../RankPage/RankPage';
import MyPrize from '../MyPrize/MyPrize';
import Taskpop from '@/panels/taskpop/taskpop';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { Button, Toast } from '@grace/ui';
import { _asyncThrottle } from "../../utils/utils";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import Rulepop from "../../components/rulepop/rulepop.jsx";
import DrawPage from "../DrawPage/DrawPage.jsx";
import store from '@/store/store';
import Taskpop from '@/panels/taskpop/taskpop.js';
import RankPage from '../RankPage/RankPage.js';
import MyPrize from '../MyPrize/MyPrize.js';
@observer
class Homepage extends React.Component {
constructor(props) {
super(props);
this.handleButtonClick = this.handleButtonClick.bind(this);
}
componentDidMount(): void {
componentDidMount() {
store.updateIndex()
}
showTask = () =>{
ModalCtrl.showModal(Taskpop);
handleButtonClick = _asyncThrottle(async (number) => {
// 活动时间判断
// 规则 奖品始终可以点击 我的排名结束可以点击 其余常规逻辑
if (!(number === 0 || number === 4 || number === 5)) {
if ((!store.judgeActTime(true, true))) return;
}
showRank = () => {
PageCtrl.changePage(RankPage);
if ((number === 0)) {
if ((!store.judgeActTime(true, false))) return;
}
showPrize = () =>{
switch (number) {
// 0 我的排名
case 0:
// TODO 换成我的排名页面 记得引用
PageCtrl.changePage(RankPage);
break;
// 1 抽奖
case 1:
// PageCtrl.changePage(DrawPage);
break;
// 2 做任务
case 2:
// TODO
ModalCtrl.showModal(Taskpop);
break;
// 3 答题
case 3:
// TODO
break;
// 4 我的奖品
case 4:
// TODO 换成我的奖品页面 记得引用
PageCtrl.changePage(MyPrize);
break;
// 5 活动规则
case 5:
ModalCtrl.showModal(Rulepop);
break;
// 6 拜访清单
case 6:
// TODO
break;
// 7 分享活动
case 7:
// TODO
break;
default:
console.warn("未知按钮类型", number);
}
})
render() {
return (
<div className="homepage modal_center">
......@@ -36,25 +93,26 @@ class Homepage extends React.Component {
<span className="brain"></span>
<span className="wenhao"></span>
<span className="title"></span>
<span className="draw"></span>
<span className="task" onClick={this.showTask}></span>
<div className="matter">
<span className="m_bg"></span>
<span className="answer"></span>
<span className="remain">剩余次数:3</span>
</div>
{/* 按钮 共7个 */}
<div className="rank">
<span className="r_bg"></span>
<span className="name">用户uid:132802</span>
<span className="head"></span>
<span className="myrank"></span>
<Button className="myrank" onClick={() => this.handleButtonClick(0)} />
<span className="number">000</span>
</div>
<span className="prize" onClick={this.showPrize}></span>
<span className="rule"></span>
<span className="visit"></span>
<span className="share"></span>
<span className="logo"></span>
<Button className="draw" onClick={() => this.handleButtonClick(1)} />
<Button className="task" onClick={() => this.handleButtonClick(2)} />
<Button className="matter" onClick={() => this.handleButtonClick(3)}>
<span className="m_bg"></span>
<span className="answer"></span>
<span className="remain">剩余次数:3</span>
</Button>
<Button className="prize" onClick={() => this.handleButtonClick(4)} />
<Button className="rule" onClick={() => this.handleButtonClick(5)} />
<Button className="visit" onClick={() => this.handleButtonClick(6)} />
<Button className="share" onClick={() => this.handleButtonClick(7)} />
</div>
);
}
......
......@@ -99,7 +99,7 @@ class Store {
// 活动时间拦截
// 结束不拦截 brakeEnd为false
// 规则奖品始终可以点击 不用调方法 其余两个参数均传true即可 todo
// 规则奖品始终可以点击 不用调方法
judgeActTime(brakeStart = true, brakeEnd = true) {
if (brakeStart && this.indexData.currentTime < this.indexData.actStartTime) {
Toast.show("活动未开始");
......
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