Commit 121e4bbb authored by haiyoucuv's avatar haiyoucuv

init

parent 1cde35b5
......@@ -14,6 +14,8 @@ export default [
actEndTime: Date.now() + 1000000,
currentTime: Date.now(),
guideFlag: false,
creditsNum: 923,
expireDays: 7,
currentStoreNum: 923,
storeLimitNum: 2222,
continueSignDays: 3,
......
......@@ -29,6 +29,7 @@ import { SvgaPlayer } from "@grace/svgaplayer";
import lightSvga from "@/assets/svga/5光点飘散.svga";
import API from "@/api";
import VideoPanel from "@/panels/VideoPanel/VideoPanel.tsx";
import ObtainPanel from "@/panels/ObtainPanel/ObtainPanel.tsx";
@observer
......@@ -42,6 +43,7 @@ class HomePage extends React.Component<any, any> {
// if (getUrlParam('inviteCode')) {
// store.doAssist()
// }
}
clickPrize = () => {
......@@ -53,7 +55,7 @@ class HomePage extends React.Component<any, any> {
}
render() {
const { } = store.indexData
const { creditsNum } = store.indexData
return <div className="homepage" ref={(el) => this.root = el}>
<div className="homeRoot">
......@@ -64,7 +66,7 @@ class HomePage extends React.Component<any, any> {
<Sign/>
<Check/>
<Button className="credits">1344691</Button>
<Button className="credits">{creditsNum}</Button>
{/*<Button className="cash"><span>¥</span>32.88</Button>*/}
<Button className="rule" onClick={this.clickRule} />
......
......@@ -39,14 +39,14 @@ class Sign extends React.Component<any, any> {
});
render() {
const { signRecords, continueSignDays, todaySignFlag } = store.indexData;
const { signRecords, continueSignDays, todaySignFlag, expireDays } = store.indexData;
const signedCount = signRecords?.filter((item) => item.boolSign).length || 0;
const signProgress = Math.max(signedCount - 1, 0);
return <div className={styles.sign}>
<div className={styles.title}>已连续签到<span>{continueSignDays}</span></div>
<div className={styles.tip}>断签7天后积分将清零</div>
<div className={styles.tip}>断签{expireDays}天后积分将清零</div>
<div className={styles.itemRoot}>
......
@import "../../res.less";
.BackPanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.bg {
position: absolute;
left: 105px;
top: 448px;
width: 539px;
height: 533px;
.webpBg("BackPanel/bg.png");
}
.ok {
position: absolute;
left: 413px;
top: 847px;
width: 199px;
height: 90px;
.webpBg("BackPanel/确认.png");
}
.cancel {
position: absolute;
left: 140px;
top: 855px;
width: 242px;
height: 74px;
.webpBg("BackPanel/继续游戏.png");
}
}
import React from "react";
import { observer } from "mobx-react";
import "./BackPanel.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";
export interface IFailPanelProps {
ok: () => void,
cancel: () => void,
}
@observer
class BackPanel extends React.Component<IFailPanelProps> {
componentDidMount() {
}
clickCancel = () => {
const { cancel } = this.props;
ModalCtrl.closeModal();
cancel && cancel();
};
clickOk = _asyncThrottle(async () => {
const { ok } = this.props;
ModalCtrl.closeModal();
ok && ok();
PageCtrl.changePage(HomePage);
});
render() {
return <div className="BackPanel">
<div className="bg"/>
<Button className="ok" onClick={this.clickOk}/>
<Button className="cancel" onClick={this.clickCancel}/>
</div>;
}
}
export default BackPanel;
@import "../../res.less";
.FailPanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.bg {
position: absolute;
left: 151px;
top: 447px;
width: 444px;
height: 560px;
.webpBg("FailPanel/bg.png");
}
.rank {
font-size: 29px;
color: rgb(255, 255, 255);
position: absolute;
left: 0;
top: 535px;
width: 100%;
text-align: center;
text-shadow: 0 0 5px #16c8c2,
0 0 5px #16c8c2,
0 0 5px #16c8c2,
0 0 10px #16c8c2,
0 0 10px #16c8c2,
0 0 20px #16c8c2;
}
.score {
font-size: 96.09px;
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
position: absolute;
left: 0;
top: 672px;
width: 100%;
text-shadow: 0 0 5px #f3d71a,
0 0 5px #f3d71a,
0 0 5px #f3d71a,
0 0 10px #f3d71a,
0 0 10px #f3d71a;
span {
font-size: 32.34px;
}
}
.tip {
color: rgb(255, 255, 255);
font-size: 20px;
text-align: center;
position: absolute;
left: 0;
top: 800px;
width: 100%;
line-height: 33px;
span {
font-size: 26px;
color: #f3c81b;
}
}
.btn {
position: absolute;
left: 214px;
top: 887px;
width: 318px;
height: 80px;
.webpBg("FailPanel/btn.png");
}
.close {
position: absolute;
left: 340px;
top: 1023px;
width: 70px;
height: 70px;
.webpBg("FailPanel/close.png");
}
}
import React from "react";
import {observer} from "mobx-react";
import "./FailPanel.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";
export interface IFailPanelProps {
score: number,
rank: number,
prizeName: string,
reachTargetScore: boolean,
drawChance: number,
}
@observer
class FailPanel extends React.Component<IFailPanelProps> {
componentDidMount() {
}
clickClose = () => {
ModalCtrl.closeModal();
PageCtrl.changePage(HomePage);
};
clickBtn = _asyncThrottle(async () => {
});
render() {
const {score, rank} = this.props;
return <div className="FailPanel">
<div className="bg"/>
<div className="rank">当前排名:NO.{rank}</div>
<div className="score">{score}<span></span></div>
<div className="tip">
单局游戏分数达200<br/>
即可获得<span>1次抽奖机会</span>
</div>
<Button className="btn" onClick={this.clickBtn}/>
<Button className="close" onClick={this.clickClose}/>
</div>;
}
}
export default FailPanel;
@import "../../res.less";
.ObtainPanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.bgEffect {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
}
.normal {
position: absolute;
left: 273px;
top: 600px;
width: 205px;
height: 197px;
.webpBg("ObtainPanel/金币堆.png");
}
.expansion {
position: absolute;
left: 273px;
top: 600px;
width: 248px;
height: 197px;
.webpBg("ObtainPanel/金币堆膨胀.png");
}
.bg {
position: absolute;
left: 27px;
top: 348px;
width: 697px;
height: 814px;
.webpBg("ObtainPanel/bg.png");
}
.tip {
font-family: "zzgfyht";
font-size: 45.23px;
line-height: 1.2;
color: #8f2245;
position: absolute;
left: 0;
top: 517px;
width: 100%;
text-align: center;
}
.ok {
position: absolute;
left: 161px;
top: 886px;
width: 420px;
height: 123px;
.webpBg("ObtainPanel/按钮.png");
}
.close {
position: absolute;
left: 336px;
top: 1218px;
width: 79px;
height: 79px;
.sparkBg("common/close.png");
}
}
import React from "react";
import { observer } from "mobx-react";
import styles from "./ObtainPanel.module.less";
import { Button } from "@grace/ui";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
import classNames from "classnames";
import { SvgaPlayer } from "@grace/svgaplayer";
import bgEffectSvga from "@/assets/svga/2输出签到成功弹窗.svga";
export interface IObtainPanelProps {
creditNum: number,
isExp: boolean,
}
@observer
class ObtainPanel extends React.Component<IObtainPanelProps> {
componentDidMount() {
}
close = () => {
ModalCtrl.closeModal();
};
clickGet = () => {
};
render() {
const {creditNum, isExp} = this.props;
return <div className={classNames(styles.ObtainPanel, "modal_center")}>
<SvgaPlayer className={styles.bgEffect} src={bgEffectSvga}/>
<div className={styles.bg}/>
<div className={styles.tip}>恭喜获得{creditNum}积分</div>
<div className={classNames({
[styles.exp]: isExp,
[styles.normal]: !isExp,
})}/>
<div className="com_banner"/>
<Button className={styles.ok} onClick={this.clickGet}/>
<Button className={styles.close} onClick={this.close}/>
</div>;
}
}
export default ObtainPanel;
@import "../../res.less";
.PrizePanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.PrizeBg {
position: absolute;
left: 93px;
top: 237px;
width: 562px;
height: 809px;
.webpBg("PrizePanel/bg.png");
}
.prizeImg {
border-width: 1px;
border-color: rgb(249, 114, 28);
border-style: solid;
border-radius: 22px;
background-color: rgb(255, 255, 255);
position: absolute;
left: 273px;
top: 580px;
width: 199px;
height: 198px;
}
.prizeName {
font-size: 24px;
color: rgba(103, 25, 10, 0.8);
text-align: center;
position: absolute;
left: 93px;
top: 800px;
width: 562px;
font-weight: bold;
}
.ok {
position: absolute;
left: 215px;
top: 844px;
width: 318px;
height: 95px;
.webpBg("PrizePanel/开心收下.png");
}
.close {
position: absolute;
left: 348px;
top: 1092px;
width: 54px;
height: 54px;
.sparkBg("common/close.png");
}
}
import React from "react";
import { observer } from "mobx-react";
import "./PrizePanel.less";
import { Button } from "@grace/ui";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
export interface IPrizePanelProps {
prizeVO: {
prizeId: string | "thanks",
prizeName: string,
prizeImg: string,
},
remainGameTimes: number,
}
@observer
class PrizePanel extends React.Component<IPrizePanelProps> {
componentDidMount() {
}
close = () => {
ModalCtrl.closeModal();
};
clickGet = () => {
};
render() {
const { prizeVO } = this.props;
return <div className="PrizePanel">
<div className="PrizeBg"/>
<img className="prizeImg" src={prizeVO.prizeImg}/>
<div className="prizeName">{prizeVO?.prizeName}</div>
<Button className="ok md18" onClick={this.clickGet}/>
<Button className="close" onClick={this.close}/>
</div>;
}
}
export default PrizePanel;
......@@ -69,7 +69,7 @@
.logo {
position: absolute;
left: 144px;
left: 140px;
top: 931px;
width: 95px;
height: 83px;
......@@ -88,11 +88,11 @@
.btn {
position: absolute;
left: 485px;
left: 460px;
top: 947px;
width: 128px;
width: 152px;
height: 50px;
.webpBg("SkyFullGoldPanel/去翻倍.png");
.webpBg("SkyFullGoldPanel/去看视频.png");
}
.close {
......
......@@ -30,7 +30,7 @@ class SkyFullGoldPanel extends React.Component<ISkyFullGoldPanelProps> {
const { url, taskId } = this.props;
ModalCtrl.closeModal();
ModalCtrl.showModal(VideoPanel, { taskId, url });
ModalCtrl.showModal(VideoPanel, { taskId, url, isExp: false });
});
render() {
......@@ -55,7 +55,7 @@ class SkyFullGoldPanel extends React.Component<ISkyFullGoldPanelProps> {
<div className="logo"/>
<div className="txt">
观看品牌视频15s<br/>
积分膨胀至{creditsNum * multipleValue}
可获得奖励
</div>
<div className="com_banner"/>
......
......@@ -6,10 +6,12 @@ import { _asyncThrottle } from "@/utils/utils.ts";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
import classNames from "classnames";
import API from "@/api";
import ObtainPanel from "@/panels/ObtainPanel/ObtainPanel.tsx";
export interface IVideoPanelProps {
url: string;
taskId: string;
isExp: string;
}
@observer
......@@ -21,6 +23,8 @@ class VideoPanel extends React.Component<IVideoPanelProps> {
video: HTMLVideoElement;
completeData = null;
componentDidMount() {
this.video.onpause = this.onPause;
this.video.play();
......@@ -45,9 +49,8 @@ class VideoPanel extends React.Component<IVideoPanelProps> {
const { taskId } = this.props;
const { success, data } = await API.startVideo({ taskId });
if (!success) return;
const { creditsNum } = data;
})
this.completeData = data;
});
onPause = () => {
......@@ -55,6 +58,14 @@ class VideoPanel extends React.Component<IVideoPanelProps> {
clickClose = () => {
ModalCtrl.closeModal();
if (this.completeData?.creditsNum) {
ModalCtrl.showModal(ObtainPanel, {
creditsNum: this.completeData.creditsNum,
isExp: this.props.isExp,
});
}
};
render() {
......
......@@ -33,7 +33,7 @@ class WedExpPanel extends React.Component<IWedExpPanelProps> {
const { url, taskId } = this.props;
ModalCtrl.closeModal();
ModalCtrl.showModal(VideoPanel, { taskId, url });
ModalCtrl.showModal(VideoPanel, { taskId, url, isExp: true });
});
render() {
......
......@@ -57,6 +57,8 @@ class Store {
currentTime?: number,
guideFlag?: boolean,
creditsNum?: number,
expireDays?: number,
currentStoreNum?: number,
storeLimitNum?: number,
continueSignDays?: number,
......
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