Commit b76b96d4 authored by haiyoucuv's avatar haiyoucuv

init

parent ca266fd9
......@@ -8,8 +8,6 @@ import "./MD";
import './App.less'
import '@csstools/normalize.css';
import musicStore from "@/store/musicStore.ts";
import {initWx} from "@/built-in/share/weixin/weixin.ts";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import { GetCurrSkinId, getCustomShareId } from "@/utils/utils.ts";
......@@ -19,8 +17,8 @@ import MyPrize from "@/pages/MyPrize/MyPrize.tsx";
import LoadingDemo from "@/pages/LoadingDemo/LoadingDemo.tsx";
import { loadFont } from "@/core/preload.ts";
import zzgfyht from "@/assets/font/zzgfyht.ttf";
import DetailPage from "@/pages/DetailPage/DetailPage.tsx";
import RecordPage from "@/pages/RecordPage/RecordPage.tsx";
@observer
......@@ -31,15 +29,13 @@ class App extends Component {
const defaultPage = {
myPrize: MyPrize, // TODO 举例子 新宿台奖品页
index: LoadingDemo,
}[skinId] || DetailPage;
}[skinId] || RecordPage;
PageCtrl.changePage(defaultPage);
}
async componentDidMount() {
this.showDefaultPage();
loadFont(zzgfyht);
await store.getFrontVariable();
store.initShare()
}
......
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./assist_fail.less";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
/** 网络异常默认展示 */
export const DEFAULT_NET_ERROR = '网络异常,请稍后再试';
const FAIL_TEXT = {
// todo
// 助力已达上限 同一用户每天只可助力1次
// 100020: "无法为自己助力",
// // 活动已结束
// 500322: "每日只能为同一好友助力一次哦",
};
@observer
class Assist_fail extends React.Component {
constructor(props) {
super(props);
}
handlesign = () => {
ModalCtrl.closeModal();
};
render() {
const { code, message } = this.props || {}
console.log(this.props);
return (
<div className="assist_fail modal_center">
<span className="bg"></span>
<span className="title"></span>
<span className="tip" dangerouslySetInnerHTML={{ __html: FAIL_TEXT[code] || message || DEFAULT_NET_ERROR }}></span>
<Button className="sign" onClick={this.handlesign} />
<span className="ribbon"></span>
<span className="ditu"></span>
</div>
);
}
}
export default Assist_fail;
@import "../../res.less";
.assist_fail {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 580px;
height: 335px;
left: 86px;
top: 641px;
position: absolute;
.sparkBg("assist_fail/bg.png");
}
.title {
width: 331px;
height: 60px;
left: 211px;
top: 693px;
position: absolute;
.sparkBg("assist_fail/title.png");
}
.tip {
width: 580px;
height: 38px;
left: 86px;
top: 788px;
text-align: center;
position: absolute;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
.lineClamp1();
}
.sign {
width: 280px;
height: 69px;
left: 235px;
top: 853px;
position: absolute;
.sparkBg("assist_fail/sign.png");
}
.ribbon {
width: 682px;
height: 245px;
left: 18px;
top: 615px;
position: absolute;
.sparkBg("assist_fail/ribbon.png");
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("assist_fail/ditu.png");
}
}
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './assist_succeed.less';
import { Button } from "@grace/ui";
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { SvgaPlayer } from '@grace/svgaplayer';
import lightSvga from "../../assets/svga/1通用弹窗氛围.svga";
@observer
class Assist_succeed extends React.Component {
constructor(props) {
super(props);
}
handlesign = () => {
ModalCtrl.closeModal();
}
render() {
return (
<div className="assist_succeed modal_center">
<SvgaPlayer className="dongxiao" src={lightSvga}/>
<span className="bg"></span>
<span className="title"></span>
<span className="tip1">点击立即签到</span>
<span className="tip2">即可参与活动领取积分奖励哦!</span>
<Button className="sign" onClick={this.handlesign} />
<span className="ribbon"></span>
<span className="ditu"></span>
</div>
);
}
}
export default Assist_succeed;
@import "../../res.less";
.assist_succeed {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.dongxiao {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
// position: absolute;
// .sparkBg("assist_succeed/dongxiao.png");
}
.bg {
width: 580px;
height: 455px;
left: 86px;
top: 546px;
position: absolute;
.sparkBg("assist_succeed/bg.png");
}
.title {
width: 331px;
height: 61px;
left: 211px;
top: 597px;
position: absolute;
.sparkBg("assist_succeed/title.png");
}
.tip1 {
width: 580px;
height: 38px;
left: 86px;
top: 714px;
position: absolute;
text-align: center;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
.lineClamp1();
}
.tip2 {
width: 580px;
height: 38px;
left: 86px;
top: 764px;
position: absolute;
text-align: center;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
.lineClamp1();
}
.sign {
width: 280px;
height: 69px;
left: 235px;
top: 863px;
position: absolute;
.sparkBg("assist_succeed/sign.png");
}
.ribbon {
width: 682px;
height: 346px;
left: 18px;
top: 520px;
position: absolute;
.sparkBg("assist_succeed/ribbon.png");
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("assist_succeed/ditu.png");
}
}
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./choice_challenge.less";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import store from "../../store/store.ts";
import { toJS } from "mobx";
import API from "../../api/index.ts";
import { handleLogExposure, handleLogClick } from "@/MD";
@observer
class Choice_challenge extends React.Component {
constructor(props) {
super(props);
this.state = {
activeIndex: 0, // 默认第一项
};
}
handleClick = (index) => {
this.setState({ activeIndex: index });
};
handlechallenge = async (id) => {
handleLogClick(15);
const { success } = await API.getChooseChallenge({
challengeId: id,
});
console.log(id);
if (success) {
await ModalCtrl.closeModal(Choice_challenge);
store.getTaskInfo();
}
};
// handleclose = () => {
// ModalCtrl.closeModal();
// }
render() {
handleLogExposure(15);
const { activeIndex } = this.state;
const { challengeConfigList = [] } = store?.taskInfo || {};
// console.log(toJS(store?.taskInfo), 111);
const selectedItem = challengeConfigList[activeIndex];
return (
<div className="choice_challenge modal_center">
<span className="bg"></span>
<div className="list">
{challengeConfigList.length > 0 &&
challengeConfigList.map((item, index) => (
<div
className="sample"
key={index}
onClick={() => this.handleClick(index)}
>
<span
className={activeIndex === index ? "s_bg2" : "s_bg1"}
></span>
<img
className="icon"
src={item.prizeImg}
alt={item.prizeName}
/>
<span className="demand">
连续打卡{item.challengeTotalDay}
</span>
<span className="name">{item.prizeName}</span>
</div>
))}
</div>
<span className="title"></span>
<span className="tip"></span>
<Button
className="challenge"
onClick={() => this.handlechallenge(selectedItem?.challengeId)}
/>
<span className="ditu"></span>
</div>
);
}
}
export default Choice_challenge;
@import "../../res.less";
.choice_challenge {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 626px;
height: 788px;
left: 60px;
top: 394px;
position: absolute;
.sparkBg("choice_challenge/bg.png");
}
.list {
position: absolute;
height: 350px;
width: 453px;
overflow-y: auto;
overflow-x: hidden;
top: 510px;
left: 150px;
.sample {
width: 453px;
height: 116px;
// left: 148px;
// top: 503px;
position: relative;
.s_bg2 {
width: 453px;
height: 114px;
left: 1px;
top: 0px;
position: absolute;
.sparkBg("choice_challenge/s_bg2.png");
}
.s_bg1 {
width: 451px;
height: 112px;
left: 1px;
top: 0px;
position: absolute;
.sparkBg("choice_challenge/s_bg.png");
}
.icon {
width: 97px;
height: 92px;
left: 16px;
top: 10px;
position: absolute;
.sparkBg("choice_challenge/icon.png");
border-radius: 15px;
}
.demand {
width: 320px;
height: 28px;
left: 131px;
top: 63px;
position: absolute;
font-size: 28px;
line-height: 28px;
color: rgba(158, 158, 158, 1);
.lineClamp1();
}
.name {
width: 320px;
height: 36px;
left: 131px;
top: 21px;
position: absolute;
font-size: 36px;
line-height: 36px;
color: rgba(41, 41, 41, 1);
font-weight: bold;
.lineClamp1();
}
}
// .zhanwei {
// width: 451px;
// height: 233px;
// left: 149px;
// top: 645px;
// position: absolute;
// .sparkBg("choice_challenge/zhanwei.png");
// }
}
.title {
width: 621px;
height: 103px;
left: 37px;
top: 256px;
position: absolute;
.sparkBg("choice_challenge/title.png");
}
.tip {
width: 389px;
height: 40px;
left: 180px;
top: 437px;
position: absolute;
.sparkBg("choice_challenge/tip.png");
}
.challenge {
width: 420px;
height: 123px;
left: 164px;
top: 987px;
position: absolute;
.sparkBg("choice_challenge/challenge.png");
}
// .close {
// width: 79px;
// height: 79px;
// left: 336px;
// top: 1201px;
// position: absolute;
// .sparkBg("choice_challenge/close.png");
// }
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("choice_challenge/ditu.png");
}
}
\ No newline at end of file
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./consume_credits.less";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import Finish_task from "../finish_task/finish_task";
import API from "../../../src/api/index";
import store from "../../../src/store/store.ts";
import { pre_reduce_score } from "../../store/credits.js";
import { handleLogExposure, handleLogClick } from "@/MD";
import { _asyncThrottle } from "../../utils/utils.ts";
@observer
class Consume_credits extends React.Component {
constructor(props) {
super(props);
}
handleclock = _asyncThrottle(async (n, code) => {
handleLogClick(16);
await pre_reduce_score(
{
toPlaywayId: "challenge",
toActionId: "taskComplete",
desc: "taskComplete_credits_desc",
credits: n,
},
async () => {
const { success } = await API.getChallenegeComplete({
taskCode: code,
ticket: store.ticketNum,
});
if (success) {
ModalCtrl.closeModal();
}
store.getTaskInfo();
store.getBaseIndex();
}
);
});
handleclose = () => {
ModalCtrl.closeModal();
};
render() {
const { n = 0, code, title } = this.props;
handleLogExposure(16);
return (
<div className="consume_credits modal_center">
<span className="bg"></span>
<span className="tile"></span>
<span className="tip1">消耗{n}积分</span>
<span className="tip2">完成打卡</span>
<Button className="close" onClick={this.handleclose} />
<Button
className="clock"
onClick={() => this.handleclock(n, code, title)}
/>
<span className="icon"></span>
<span className="ditu"></span>
</div>
);
}
}
export default Consume_credits;
@import "../../res.less";
.consume_credits {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
/* 定义字体 */
@font-face {
font-family: "zzgfyht";
src: url('/src/assets/font/zzgfyht.ttf') format('truetype');
// font-display: swap;
}
.bg {
width: 649px;
height: 741px;
left: 39px;
top: 408px;
position: absolute;
.sparkBg("consume_credits/bg.png");
}
.tile {
width: 365px;
height: 107px;
left: 160px;
top: 308px;
position: absolute;
.sparkBg("consume_credits/tile.png");
}
.tip1 {
width: 649px;
height: 50px;
left: 50px;
top: 491px;
text-align: center;
position: absolute;
font-size: 48px;
line-height: 48px;
font-family: "zzgfyht";
.lineClamp1();
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tip2 {
width: 649px;
height: 50px;
left: 39px;
top: 550px;
text-align: center;
position: absolute;
font-size: 48px;
line-height: 48px;
font-family: "zzgfyht";
.lineClamp1();
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.close {
width: 79px;
height: 79px;
left: 336px;
// top: 1205px;
top: 1180px;
position: absolute;
.sparkBg("consume_credits/close.png");
}
.clock {
width: 420px;
height: 123px;
left: 164px;
top: 956px;
position: absolute;
.sparkBg("consume_credits/clock.png");
}
.icon {
width: 306px;
height: 202px;
left: 221px;
top: 628px;
position: absolute;
.sparkBg("consume_credits/icon.png");
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("consume_credits/ditu.png");
}
}
\ No newline at end of file
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./consume_qg.less";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import Finish_task from "../finish_task/finish_task";
import API from "../../../src/api/index";
import store from "../../../src/store/store.ts";
import { handleLogExposure, handleLogClick } from "@/MD";
import { _asyncThrottle } from "../../utils/utils.ts";
@observer
class Consume_qg extends React.Component {
constructor(props) {
super(props);
}
handleclock = _asyncThrottle(async (code) => {
handleLogClick(17);
const { success } = await API.getChallenegeComplete({ taskCode: code });
if (success) {
ModalCtrl.closeModal();
}
store.getTaskInfo();
store.getBaseIndex();
});
handleclose = () => {
ModalCtrl.closeModal();
};
render() {
const { n = 0, code, title } = this.props;
handleLogExposure(17);
return (
<div className="consume_qg modal_center">
<span className="bg"></span>
<span className="tile"></span>
<span className="tip1">消耗{n}青果</span>
<span className="tip2">完成打卡</span>
<Button className="close" onClick={this.handleclose} />
<Button className="clock" onClick={() => this.handleclock(code)} />
<span className="icon"></span>
<span className="ditu"></span>
</div>
);
}
}
export default Consume_qg;
@import "../../res.less";
.consume_qg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
/* 定义字体 */
@font-face {
font-family: "zzgfyht";
src: url('/src/assets/font/zzgfyht.ttf') format('truetype');
// font-display: swap;
}
.bg {
width: 649px;
height: 741px;
left: 39px;
top: 408px;
position: absolute;
.sparkBg("consume_qg/bg.png");
}
.tile {
width: 365px;
height: 107px;
left: 160px;
top: 308px;
position: absolute;
.sparkBg("consume_qg/tile.png");
}
.tip1 {
width: 649px;
height: 50px;
left: 50px;
top: 491px;
text-align: center;
position: absolute;
font-size: 48px;
line-height: 48px;
font-family: "zzgfyht";
.lineClamp1();
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tip2 {
width: 649px;
height: 50px;
left: 39px;
top: 550px;
text-align: center;
position: absolute;
font-size: 48px;
line-height: 48px;
font-family: "zzgfyht";
.lineClamp1();
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.close {
width: 79px;
height: 79px;
left: 336px;
// top: 1205px;
top: 1180px;
position: absolute;
.sparkBg("consume_qg/close.png");
}
.clock {
width: 420px;
height: 123px;
left: 164px;
top: 956px;
position: absolute;
.sparkBg("consume_qg/clock.png");
}
.icon {
width: 306px;
height: 202px;
left: 221px;
top: 628px;
position: absolute;
.sparkBg("consume_qg/icon.png");
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("consume_qg/ditu.png");
}
}
\ No newline at end of file
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./fail_challenge.less";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
@observer
class Fail_challenge extends React.Component {
constructor(props) {
super(props);
}
handleknow = () => {
ModalCtrl.closeModal();
};
render() {
return (
<div className="fail_challenge modal_center">
<span className="ditu"></span>
<span className="bg"></span>
<span className="title"></span>
<span className="tip1">打卡活动时间已结束</span>
<span className="tip2">打卡失败了! 下次加油!</span>
<Button className="know" onClick={this.handleknow} />
<span className="ribbon"></span>
</div>
);
}
}
export default Fail_challenge;
@import "../../res.less";
.fail_challenge {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("fail_challenge/ditu.png");
}
.bg {
width: 580px;
height: 368px;
left: 86px;
top: 612px;
position: absolute;
.sparkBg("fail_challenge/bg.png");
}
.title {
width: 480px;
height: 61px;
left: 134px;
top: 661px;
position: absolute;
.sparkBg("fail_challenge/title.png");
}
.tip1 {
width: 580px;
height: 38px;
left: 86px;
top: 747px;
text-align: center;
position: absolute;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
}
.tip2 {
width: 580px;
height: 38px;
left: 96px;
top: 794px;
text-align: center;
position: absolute;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
}
.know {
width: 280px;
height: 69px;
left: 235px;
top: 858px;
position: absolute;
.sparkBg("fail_challenge/know.png");
}
.ribbon {
width: 674px;
height: 308px;
left: 36px;
top: 590px;
position: absolute;
.sparkBg("fail_challenge/ribbon.png");
}
}
\ No newline at end of file
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./finish_challenge.less";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import { SvgaPlayer } from '@grace/svgaplayer';
import lightSvga from "../../assets/svga/2输出签到成功弹窗.svga";
@observer
class Finish_challenge extends React.Component {
constructor(props) {
super(props);
}
handleclose = () => {
ModalCtrl.closeModal();
};
handlehappy = () => {
ModalCtrl.closeModal();
};
render() {
const { prizeName, prizeImg } = this.props;
return (
<div className="finish_challenge modal_center">
<SvgaPlayer className="dongxiao" src={lightSvga}/>
<span className="bg"></span>
<span className="title"></span>
<span className="tip">获得{prizeName}奖励</span>
<Button className="close" onClick={this.handleclose} />
<Button className="happy" onClick={this.handlehappy} />
<img className="icon" src={prizeImg} />
<span className="ditu"></span>
</div>
);
}
}
export default Finish_challenge;
@import "../../res.less";
.finish_challenge {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
/* 定义字体 */
@font-face {
font-family: "zzgfyht";
src: url('/src/assets/font/zzgfyht.ttf') format('truetype');
// font-display: swap;
}
.dongxiao {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
// .sparkBg("finish_challenge/dongxiao.png");
}
.bg {
width: 697px;
height: 792px;
left: 27px;
top: 376px;
position: absolute;
.sparkBg("finish_challenge/bg.png");
}
.title {
width: 580px;
height: 93px;
left: 59px;
top: 267px;
position: absolute;
.sparkBg("finish_challenge/title.png");
}
.tip {
width: 697px;
height: 40px;
left: 27px;
top: 450px;
text-align: center;
position: absolute;
font-size: 41px;
line-height: 40px;
font-family: "zzgfyht";
.lineClamp1();
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.close {
width: 79px;
height: 79px;
left: 336px;
// top: 1224px;
top: 1180px;
position: absolute;
.sparkBg("finish_challenge/close.png");
}
.happy {
width: 420px;
height: 123px;
left: 164px;
top: 910px;
position: absolute;
.sparkBg("finish_challenge/happy.png");
}
.icon {
width: 272px;
height: 272px;
left: 238px;
top: 527px;
position: absolute;
border-radius: 15px;
.sparkBg("finish_challenge/icon.png");
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("finish_challenge/ditu.png");
}
}
\ No newline at end of file
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './finish_resign.less';
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import { SvgaPlayer } from '@grace/svgaplayer';
import lightSvga from "../../assets/svga/1通用弹窗氛围.svga";
@observer
class Finish_resign extends React.Component {
constructor(props) {
super(props);
}
handleclose = () => {
ModalCtrl.closeModal();
}
handleknow = () => {
ModalCtrl.closeModal();
}
render() {
return (
<div className="finish_resign modal_center">
<span className="ditu"></span>
<SvgaPlayer className="dongxiao" src={lightSvga}/>
<span className="bg"></span>
<Button className="close" onClick={this.handleclose} />
<span className="title"></span>
<span className="tip">快去完成打卡任务吧!</span>
<Button className="know" onClick={this.handleknow} />
</div>
);
}
}
export default Finish_resign;
@import "../../res.less";
.finish_resign {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("finish_resign/ditu.png");
}
.dongxiao {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
// .sparkBg("finish_resign/dongxiao.png");
}
.bg {
width: 682px;
height: 428px;
left: 18px;
top: 563px;
position: absolute;
.sparkBg("finish_resign/bg.png");
}
.close {
width: 79px;
height: 79px;
left: 336px;
top: 1031px;
position: absolute;
.sparkBg("finish_resign/close.png");
}
.title {
width: 231px;
height: 62px;
left: 259px;
top: 672px;
position: absolute;
.sparkBg("finish_resign/title.png");
}
.tip {
width: 682px;
height: 35px;
left: 46px;
top: 781px;
text-align: center;
position: absolute;
font-size: 36px;
line-height: 35px;
color: rgba(32, 16, 3, 1);
}
.know {
width: 280px;
height: 69px;
left: 234px;
top: 869px;
position: absolute;
.sparkBg("finish_resign/know.png");
}
}
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './finish_task.less';
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { Button } from '@grace/ui';
import { SvgaPlayer } from '@grace/svgaplayer';
import lightSvga from "../../assets/svga/1通用弹窗氛围.svga";
@observer
class Finish_task extends React.Component {
constructor(props) {
super(props);
}
handleknow = () => {
ModalCtrl.closeModal();
}
handleclose = () => {
ModalCtrl.closeModal();
}
render() {
const { title } = this.props;
console.log(title);
return (
<div className="finish_task modal_center">
<SvgaPlayer className="dongxiao" src={lightSvga}/>
<span className="bg"></span>
<span className="line"></span>
<span className="title">{title}任务完成</span>
<span className="tip1">打卡任务完成啦!</span>
<span className="tip2">继续保持哦!</span>
<Button className="know" onClick={this.handleknow} />
<span className="ribbon"></span>
<span className="ditu"></span>
<Button className="close" onClick={this.handleclose} />
</div>
);
}
}
export default Finish_task;
@import "../../res.less";
.finish_task {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
/* 定义字体 */
@font-face {
font-family: "zzgfyht";
src: url('/src/assets/font/zzgfyht.ttf') format('truetype');
// font-display: swap;
}
.dongxiao {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
// .sparkBg("finish_task/dongxiao.png");
}
.bg {
width: 580px;
height: 368px;
left: 86px;
top: 623px;
position: absolute;
.sparkBg("finish_task/bg.png");
}
.line {
width: 327px;
height: 22px;
left: 209px;
top: 711px;
position: absolute;
.sparkBg("finish_task/line.png");
}
.title {
width: 580px;
height: 53px;
left: 86px;
top: 671px;
text-align: center;
position: absolute;
font-size: 53px;
line-height: 53px;
font-family: "zzgfyht";
background: linear-gradient(to right,
rgb(79, 12, 29),
rgba(132, 20, 57, 0.76));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tip1 {
width: 580px;
height: 38px;
left: 86px;
top: 755px;
position: absolute;
text-align: center;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
.lineClamp1();
}
.tip2 {
width: 580px;
height: 38px;
left: 86px;
top: 805px;
position: absolute;
text-align: center;
font-size: 36px;
line-height: 36px;
color: rgba(32, 16, 3, 1);
.lineClamp1();
}
.know {
width: 280px;
height: 69px;
left: 235px;
top: 869px;
position: absolute;
.sparkBg("finish_task/know.png");
}
.ribbon {
width: 682px;
height: 346px;
left: 18px;
top: 563px;
position: absolute;
.sparkBg("finish_task/ribbon.png");
}
.ditu {
width: 684px;
height: 150px;
left: 33px;
top: 1300px;
position: absolute;
.sparkBg("finish_task/ditu.png");
}
.close {
width: 79px;
height: 79px;
left: 336px;
// top: 1205px;
top: 1040px;
position: absolute;
.sparkBg("consume_credits/close.png");
}
}
\ No newline at end of file
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./renewmodule.less";
import { Button, Toast } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import API from "../../../src/api/index";
import store from "../../../src/store/store.ts";
import { pre_reduce_score } from "../../store/credits.js";
import Finish_resign from "../finish_resign/finish_resign.jsx";
import { handleLogExposure, handleLogClick } from "@/MD";
import { _asyncThrottle } from "../../utils/utils.ts";
@observer
class Renewmodule extends React.Component {
constructor(props) {
super(props);
this.state = {
activeChoice: "credits", // 默认
};
}
componentDidMount() {
store.getBaseIndex();
}
handleclose = () => {
ModalCtrl.closeModal();
};
handleClick = (choice) => {
this.setState({ activeChoice: choice });
};
handleUse = _asyncThrottle(
async (activeChoice, inferQg, inferJf, resignJf) => {
handleLogClick(18);
if (activeChoice === "credits") {
// 执行积分续签逻辑 todo
if (!inferJf) return Toast.show("积分不足");
await pre_reduce_score(
{
toPlaywayId: "challenge",
toActionId: "resign",
desc: "resign_credits_desc",
credits: resignJf,
},
async () => {
const { success } = await API.getChallengeResign({
costType: 2,
ticket: store.ticketNum,
});
if (success) {
ModalCtrl.closeModal();
ModalCtrl.showModal(Finish_resign);
}
store.getTaskInfo();
store.getBaseIndex();
}
);
} else {
// 执行青果续签逻辑 todo
if (!inferQg) return Toast.show("青果不足");
const { success } = await API.getChallengeResign({ costType: 1 });
if (success) {
ModalCtrl.closeModal();
ModalCtrl.showModal(Finish_resign);
}
store.getTaskInfo();
store.getBaseIndex();
}
}
);
render() {
handleLogExposure(18);
const { activeChoice } = this.state;
const { hasChallengeDay, resignJf, resignQg } = this.props;
const { jfNum, qgNum } = store?.baseInfo || {};
// qg是否足够
const inferQg = qgNum >= resignQg;
// 积分是否足够
const inferJf = jfNum >= resignJf;
// bg1、bg3 是红色背景 bg2、bg4是白色背景
return (
<div className="renewmodule">
<span className="bg"></span>
<span className="headline"></span>
<Button
className="use"
onClick={() =>
this.handleUse(activeChoice, inferQg, inferJf, resignJf)
}
/>
<div
className="choice_credits"
onClick={() => this.handleClick("credits")}
>
<span className={activeChoice === "credits" ? "bg1" : "bg2"}></span>
<span className="tip1">消耗积分续签</span>
<span className="credits">当前积分:{jfNum}</span>
<span className="consume_credits">
消耗<span className="count1">{resignJf}</span>积分进行续签
</span>
</div>
<div className="choice_qg" onClick={() => this.handleClick("qg")}>
<span className={activeChoice === "qg" ? "bg3" : "bg4"}></span>
<span className="tip2">消耗青果续签</span>
<span className="qg">当前青果:{qgNum}</span>
<span className="consume_qg">
消耗<span className="count2">{resignQg}</span>青果进行续签
</span>
</div>
<span className="title2">
{hasChallengeDay + 1}<span className="special">未打卡</span>
</span>
<span className="title1">已累计打卡{hasChallengeDay}</span>
<Button className="close" onClick={this.handleclose} />
</div>
);
}
}
export default Renewmodule;
@import "../../res.less";
.renewmodule {
width: 750px;
height: 1624px;
left: 0px;
top: calc(100vh - 1624px);
position: absolute;
.bg {
width: 750px;
height: 821px;
left: 0px;
top: 803px;
position: absolute;
.sparkBg("renewModule/bg.png");
}
.headline {
width: 351px;
height: 81px;
left: 79px;
top: 854px;
position: absolute;
.sparkBg("renewModule/headline.png");
}
.use {
width: 705px;
height: 137px;
left: 22px;
top: 1443px;
position: absolute;
.sparkBg("renewModule/use.png");
}
.choice_credits {
width: 688px;
height: 201px;
left: 34px;
top: 1060px;
position: absolute;
.bg1 {
width: 688px;
height: 201px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("renewModule/bg1.png");
}
.bg2 {
width: 688px;
height: 201px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("renewModule/bg2.png");
}
.tip1 {
width: 143px;
height: 23px;
left: 42px;
top: 30px;
position: absolute;
font-size: 23px;
line-height: 23px;
color: rgba(255, 255, 255, 1);
}
.credits {
width: 688px;
height: 26px;
// left: 229px;
top: 132px;
text-align: center;
position: absolute;
font-size: 23px;
line-height: 23px;
color: rgba(0, 0, 0, 1);
.lineClamp1();
}
.consume_credits {
width: 688px;
height: 40px;
// left: 126px;
top: 88px;
font-weight: bold;
text-align: center;
position: absolute;
font-size: 37px;
line-height: 37px;
color: rgba(0, 0, 0, 1);
.lineClamp1();
.count1 {
color: red;
}
}
}
.choice_qg {
width: 688px;
height: 201px;
left: 34px;
top: 1246px;
position: absolute;
.bg3 {
width: 688px;
height: 201px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("renewModule/bg1.png");
}
.bg4 {
width: 688px;
height: 201px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("renewModule/bg2.png");
}
.tip2 {
width: 143px;
height: 23px;
left: 42px;
top: 29px;
position: absolute;
font-size: 23px;
line-height: 23px;
color: rgba(255, 255, 255, 1);
}
.qg {
width: 688px;
height: 26px;
// left: 232px;
top: 131px;
text-align: center;
position: absolute;
font-size: 23px;
line-height: 23px;
color: rgba(0, 0, 0, 1);
.lineClamp1();
}
.consume_qg {
width: 688px;
height: 40px;
// left: 126px;
top: 87px;
font-weight: bold;
text-align: center;
position: absolute;
font-size: 37px;
line-height: 37px;
color: rgba(0, 0, 0, 1);
.lineClamp1();
.count2 {
color: red;
}
}
}
.title2 {
width: 750px;
height: 27px;
// left: 272px;
top: 1025px;
text-align: center;
position: absolute;
font-size: 27px;
line-height: 27px;
color: rgba(0, 0, 0, 1);
.special {
font-weight: bold;
}
}
.title1 {
width: 750px;
height: 53px;
// left: 192px;
top: 960px;
text-align: center;
position: absolute;
font-weight: bold;
font-size: 56px;
line-height: 53px;
color: rgba(0, 0, 0, 1);
}
.close {
left: 20px;
top: 740px;
width: 28px;
height: 43px;
position: absolute;
.sparkBg("renewModule/返回.png");
}
}
\ No newline at end of file
import React, { ComponentType, Component } from "react";
import styles from "./ModalCtrl.module.less";
import NewcomerPanel from "@/panels/NewcomerPanel/NewcomerPanel.tsx";
import WedExpPanel from "@/panels/WedExpPanel/WedExpPanel.tsx";
import SignSucPanel from "@/panels/SignSucPanel/SignSucPanel.tsx";
import VideoPanel from "@/panels/VideoPanel/VideoPanel.tsx";
import GuidePanel from "@/panels/GuidePanel/GuidePanel.tsx";
import top from "@/pages/HomePage/Top/Top.tsx";
// 弹窗优先级配置Map,key为弹窗组件名(建议用组件.displayName或组件名字符串),value为优先级数值
// 数值越大优先级越高,未配置的默认0
const modalPriorityMap = new Map<ComponentType<any>, number>([
[NewcomerPanel, 20],
[WedExpPanel, 15],
[SignSucPanel, 15],
[VideoPanel, 10],
[NewcomerPanel, 8],
[GuidePanel, 100],
]);
interface ModalItem {
......
@import "../../res.less";
.RecordPage {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
overflow: hidden;
.webpBg("RecordPage/bg.jpg");
background-size: 750px 1746px;
background-position: left top;
display: flex;
align-items: center;
justify-content: center;
.title {
position: absolute;
left: 253px;
top: 57px;
width: 243px;
height: 33px;
.webpBg("RecordPage/title.png");
}
.backBtn {
position: absolute;
left: 28px;
top: 58px;
width: 18px;
height: 32px;
.webpBg("RecordPage/backBtn.png");
}
.list {
position: absolute;
top: 143px;
bottom: 0;
width: 710px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
overflow-x: hidden;
overflow-y: auto;
.item {
position: relative;
width: 100%;
height: 141px;
.title {
position: absolute;
left: 56px;
top: 57px;
font-size: 30px;
color: black;
font-weight: bold;
}
.date {
position: absolute;
left: 56px;
top: 104px;
font-size: 24px;
color: rgba(0, 0, 0, 0.6);
}
.num {
position: absolute;
right: 60px;
top: 61px;
font-size: 30px;
color: black;
font-weight: bold;
}
.state {
position: absolute;
right: 60px;
top: 100px;
font-size: 24px;
color: rgba(0, 0, 0, 0.6);
// #ee4e32
// #1b8a4f
}
}
}
}
import React from 'react';
import { observer } from 'mobx-react';
import styles from './DetailPage.module.less';
import { Button } from "@grace/ui";
@observer
class RecordPage extends React.Component<any, any> {
state = {}
async componentDidMount() {
}
clickBack = () => {
}
render() {
const {} = this.state;
return <div className={styles.RecordPage}>
<div className={styles.title}/>
<Button className={styles.backBtn} onClick={this.clickBack}/>
<div className={styles.list}>
{
new Array(100).fill(1).map(() => {
return <div className={styles.item}>
<div className={styles.title}>纯债日开2号</div>
<div className={styles.date}>2025.06.23 10:32:32</div>
<div className={styles.num}>¥10000.00</div>
<div className={styles.state}>购买待确认</div>
</div>
})
}
</div>
</div>;
}
}
export default RecordPage;
@import "../../res.less";
.GuidePanel {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
//background-color: rgba(0, 0, 0, 0.7);
.guide {
position: absolute;
width: 750px;
height: 1624px;
left: 0;
top: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: left top;
}
.tip {
position: absolute;
width: 100%;
left: 0;
bottom: 100px;
text-align: center;
font-size: 38px;
//color: rgba(255, 255, 255, 0.6);
color: white;
}
.guide6Tip {
position: absolute;
width: 100%;
left: 0;
top: 952px;
text-align: center;
font-size: 42px;
color: white;
font-family: zzgfyht;
}
.guide6Btn {
position: absolute;
left: 164px;
top: 1203px;
width: 420px;
height: 123px;
.webpBg("GuidePanel/按钮.png");
}
}
import React from "react";
import { observer } from "mobx-react";
import styles from "./GuidePanel.module.less";
import { Button } from "@grace/ui";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
import classNames from "classnames";
import store from "@/store/store.ts";
import API from "@/api";
import { _asyncThrottle } from "@/utils/utils.ts";
export interface IGuidePanelProps {
}
@observer
class GuidePanel extends React.Component<IGuidePanelProps> {
state = {
step: 1,
}
componentDidMount() {
}
clickGuide = () => {
const { step } = this.state;
if (step == 6) return;
this.setState({
step: step + 1,
});
};
clickGuide6Btn = _asyncThrottle(async () => {
const { step } = this.state;
if (step != 6) return;
await API.completeGuide();
ModalCtrl.closeModal(GuidePanel);
store.doSign();
});
render() {
const { expireDays } = store.indexData;
const { step } = this.state;
const guideSrc = new URL(`../../assets/GuidePanel/引导${step}.png?x-oss-process=image/format,webp`, import.meta.url).href;
return <div className={styles.GuidePanel} onClick={this.clickGuide}>
<div className={styles.guide} style={{
backgroundImage: `url(${guideSrc})`,
}}/>
{
step == 6
? <>
<div className={styles.guide6Tip}>
超过{expireDays}天未登录<br/>
积分会清零<br/>
记得来“取积分”哦
</div>
<Button className={styles.guide6Btn} onClick={this.clickGuide6Btn}/>
</>
: <div className={classNames(styles.tip)} style={{
top: step == 2 && 700 * remScale,
}}>点击屏幕继续</div>
}
</div>;
}
}
export default GuidePanel;
@import "../../res.less";
.NewcomerPanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.bgEffect {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
}
.bg {
position: absolute;
left: 0;
top: 340px;
width: 750px;
height: 932px;
.webpBg("NewcomerPanel/bg.png");
}
.tip {
font-family: "zzgfyht";
font-size: 53.62px;
line-height: 1.2;
color: #8f2245;
position: absolute;
left: 0;
top: 520px;
width: 100%;
text-align: center;
}
.ok {
position: absolute;
left: 164px;
top: 973px;
width: 420px;
height: 123px;
.webpBg("NewcomerPanel/按钮.png");
}
.close {
position: absolute;
left: 336px;
top: 1242px;
width: 79px;
height: 79px;
.webpBg("common/close.png");
}
}
import React from "react";
import { observer } from "mobx-react";
import styles from "./NewcomerPanel.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 INewcomerPanelProps {
creditNum: number,
}
@observer
class NewcomerPanel extends React.Component<INewcomerPanelProps> {
componentDidMount() {
}
close = () => {
ModalCtrl.closeModal();
};
clickGet = () => {
ModalCtrl.closeModal();
};
render() {
const {creditNum} = this.props;
return <div className={classNames(styles.NewcomerPanel, "modal_center")}>
<SvgaPlayer className={styles.bgEffect} src={bgEffectSvga}/>
<div className={styles.bg}/>
<div className={styles.tip}>恭喜获得{creditNum}积分</div>
<div className="com_banner"/>
<Button className={classNames(styles.ok, "md20")} onClick={this.clickGet}/>
<Button className={styles.close} onClick={this.close}/>
</div>;
}
}
export default NewcomerPanel;
@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 = () => {
ModalCtrl.closeModal();
};
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.expansion]: isExp,
[styles.normal]: !isExp,
})}/>
<div className="com_banner"/>
<Button className={classNames(styles.ok, isExp?"md9": "md13")} onClick={this.clickGet}/>
<Button className={styles.close} onClick={this.close}/>
</div>;
}
}
export default ObtainPanel;
@import "../../res.less";
.ReturnAwardPanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.bgEffect {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
}
.bg {
position: absolute;
left: 0;
top: 283px;
width: 750px;
height: 941px;
.webpBg("ReturnAwardPanel/bg.png");
}
.tip {
font-family: "zzgfyht";
font-size: 46.66px;
line-height: 1.2;
color: #8f2245;
position: absolute;
left: 0;
top: 480px;
width: 100%;
text-align: center;
}
.ok {
position: absolute;
left: 164px;
top: 930px;
width: 420px;
height: 123px;
.webpBg("ReturnAwardPanel/按钮.png");
}
.close {
position: absolute;
left: 336px;
top: 1242px;
width: 79px;
height: 79px;
.webpBg("common/close.png");
}
}
import React from "react";
import { observer } from "mobx-react";
import styles from "./ReturnAwardPanel.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 IReturnAwardPanelProps {
creditNum: number,
}
@observer
class ReturnAwardPanel extends React.Component<IReturnAwardPanelProps> {
componentDidMount() {
}
close = () => {
ModalCtrl.closeModal();
};
clickGet = () => {
ModalCtrl.closeModal();
};
render() {
const {creditNum} = this.props;
return <div className={classNames(styles.ReturnAwardPanel, "modal_center")}>
<SvgaPlayer className={styles.bgEffect} src={bgEffectSvga}/>
<div className={styles.bg}/>
<div className={styles.tip}>恭喜获得{creditNum}积分</div>
<div className="com_banner"/>
<Button className={classNames(styles.ok, "md14")} onClick={this.clickGet}/>
<Button className={styles.close} onClick={this.close}/>
</div>;
}
}
export default ReturnAwardPanel;
@import "../../res.less";
.SignSucPanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.bgEffect {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
}
.bg {
position: absolute;
left: 0;
top: 397px;
width: 750px;
height: 741px;
.webpBg("SignSucPanel/bg.png");
}
.title {
position: absolute;
left: 138px;
top: 306px;
width: 384px;
height: 84px;
.webpBg("SignSucPanel/签到成功.png");
}
.normal {
.tip {
font-family: "zzgfyht";
font-size: 53.62px;
color: #8f2245;
position: absolute;
left: 0;
top: 485px;
width: 100%;
text-align: center;
}
.img {
position: absolute;
left: 245px;
top: 583px;
width: 263px;
height: 253px;
.webpBg("SignSucPanel/金币堆.png");
}
}
.vip {
color: #8f2245;
text-align: center;
.txt {
font-size: 20px;
color: #fdf4e4;
position: absolute;
left: 410px;
top: 644px;
width: 162px;
text-align: center;
}
.tip {
font-size: 54.52px;
position: absolute;
left: 0;
top: 481px;
width: 100%;
text-align: center;
}
.left {
position: absolute;
left: 105px;
top: 581px;
width: 300px;
font-size: 43.19px;
font-family: "zzgfyht";
}
.right {
position: absolute;
left: 340px;
top: 581px;
width: 300px;
font-size: 43.19px;
font-family: "zzgfyht";
}
.img {
position: absolute;
left: 168px;
top: 643px;
width: 402px;
height: 184px;
.webpBg("SignSucPanel/会员金币堆.png");
}
}
.btn {
position: absolute;
left: 164px;
top: 925px;
width: 420px;
height: 123px;
.webpBg("SignSucPanel/按钮.png");
}
.close {
position: absolute;
left: 336px;
top: 1194px;
width: 79px;
height: 79px;
.webpBg("common/close.png");
}
}
import React from "react";
import {observer} from "mobx-react";
import "./SignSucPanel.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;
vipLevel: number;
taskId: string;
newLuckCreditsNum: number;
}
@observer
class SignSucPanel extends React.Component<ISignSucPanelProps> {
componentDidMount() {
}
clickClose = () => {
ModalCtrl.closeModal();
};
clickBtn = _asyncThrottle(async () => {
ModalCtrl.closeModal();
});
render() {
const { signCredits, extraCredits, vipLevel } = 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 className="txt">k{vipLevel}会员额外奖励</div>
</div>
: <div className="normal">
<div className="tip">获得{signCredits}积分</div>
<div className="img"/>
</div>
}
<div className="com_banner"/>
<Button className="btn" onClick={this.clickBtn}/>
<Button className="close" onClick={this.clickClose}/>
</div>;
}
}
export default SignSucPanel;
@import "../../res.less";
.SkyFullGoldPanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.bgEffect {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
}
.bg {
position: absolute;
left: 27px;
top: 268px;
width: 697px;
height: 900px;
.webpBg("SkyFullGoldPanel/bg.png");
}
.tip {
font-family: "zzgfyht";
font-size: 49.92px;
line-height: 1.2;
color: #8f2245;
position: absolute;
left: 0;
top: 438px;
width: 100%;
text-align: center;
}
.normal {
.img {
position: absolute;
left: 260px;
top: 576px;
width: 234px;
height: 228px;
.webpBg("SkyFullGoldPanel/金币堆.png");
}
}
.vip {
.img {
position: absolute;
left: 164px;
top: 590px;
width: 415px;
height: 209px;
.webpBg("SkyFullGoldPanel/会员金币堆.png");
}
}
.taskBg {
position: absolute;
left: 73px;
top: 837px;
width: 603px;
height: 266px;
.webpBg("SkyFullGoldPanel/任务bg.png");
}
.logo {
position: absolute;
left: 140px;
top: 931px;
width: 95px;
height: 83px;
.webpBg("SkyFullGoldPanel/logo.png");
}
.txt {
font-size: 28px;
color: rgb(32, 16, 3);
position: absolute;
left: 243px;
top: 938px;
line-height: 1.2;
font-weight: bold;
}
.btn {
position: absolute;
left: 460px;
top: 947px;
width: 152px;
height: 50px;
.webpBg("SkyFullGoldPanel/去看视频.png");
}
.close {
position: absolute;
left: 336px;
top: 1200px;
width: 79px;
height: 79px;
.webpBg("common/close.png");
}
}
import React from "react";
import { observer } from "mobx-react";
import "./SkyFullGoldPanel.less";
import { Button } from "@grace/ui";
import { _asyncThrottle } from "@/utils/utils.ts";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
import { SvgaPlayer } from "@grace/svgaplayer";
import bgEffectSvga from "@/assets/svga/2输出签到成功弹窗.svga";
import VideoPanel from "@/panels/VideoPanel/VideoPanel.tsx";
export interface ISkyFullGoldPanelProps {
creditsNum: number;
multipleValue: number;
taskId: string;
url: string;
}
@observer
class SkyFullGoldPanel extends React.Component<ISkyFullGoldPanelProps> {
componentDidMount() {
}
clickClose = () => {
ModalCtrl.closeModal();
};
clickVideo = _asyncThrottle(async () => {
const { url, taskId } = this.props;
ModalCtrl.closeModal();
ModalCtrl.showModal(VideoPanel, { taskId, url, isExp: false });
});
render() {
const { creditsNum, multipleValue } = this.props;
return <div className="SkyFullGoldPanel modal_center">
<SvgaPlayer className="bgEffect" src={bgEffectSvga}/>
<div className="bg"/>
<div className="tip">
观看视频<br/>
获得{creditsNum}积分
</div>
{/*<div className="vip">*/}
{/* <div className="img"/>*/}
{/*</div>*/}
<div className="normal">
<div className="img"/>
</div>
<div className="taskBg"/>
<div className="logo"/>
<div className="txt">
观看品牌视频15s<br/>
可获得奖励
</div>
<div className="com_banner"/>
<Button className="btn md11" onClick={this.clickVideo}/>
<Button className="close" onClick={this.clickClose}/>
</div>;
}
}
export default SkyFullGoldPanel;
@import "../../res.less";
.VideoPanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.video {
border: solid rgba(255, 255, 255, 0.4) 3px;
border-radius: 60px;
background-color: rgb(0, 0, 0);
position: absolute;
left: 45px;
top: 86px;
width: 648px;
height: 1148px;
}
.cd {
border: 4px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
background-color: white;
position: absolute;
left: 535px;
top: 127px;
width: 112px;
height: 112px;
display: flex;
align-items: center;
justify-content: center;
font-size: 37px;
font-weight: bold;
}
.progressBar {
background-color: rgb(196, 196, 196);
position: absolute;
left: 522px;
top: 225px;
width: 146px;
height: 33px;
border-radius: 33px;
overflow: hidden;
}
.progressFill {
background-color: #e51f29;
position: absolute;
left: 0;
top: 0;
width: 146px;
height: 33px;
border-radius: 33px;
}
.close {
position: absolute;
left: 336px;
top: 1283px;
width: 79px;
height: 79px;
.webpBg("common/close.png");
}
}
import React from "react";
import { observer } from "mobx-react";
import styles from "./VideoPanel.module.less";
import { Button } from "@grace/ui";
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";
import store from "@/store/store.ts";
export interface IVideoPanelProps {
url: string;
taskId: string;
isExp: string;
}
@observer
class VideoPanel extends React.Component<IVideoPanelProps> {
state = {
cd: 15,
}
video: HTMLVideoElement;
completeData = null;
componentDidMount() {
this.video.onpause = this.onPause;
this.video.play();
this.startCd();
}
intervalId: number = 0;
startCd = () => {
this.intervalId = window.setInterval(() => {
const cd = this.state.cd - 1;
this.setState({ cd });
if (cd <= 0) {
clearInterval(this.intervalId);
this.finishVideoTask();
return;
}
}, 1000);
}
finishVideoTask = _asyncThrottle(async () => {
const { taskId } = this.props;
const { success, data } = await API.startVideo({ taskId });
store.updateIndex();
if (!success) return;
this.completeData = data;
});
onPause = () => {
}
clickClose = () => {
ModalCtrl.closeModal();
if (this.completeData?.creditNum) {
ModalCtrl.showModal(ObtainPanel, {
creditNum: this.completeData.creditNum,
isExp: this.props.isExp,
});
}
};
render() {
const { url, isExp } = this.props;
const { cd } = this.state;
return <div className={classNames(styles.VideoPanel, "modal_center", isExp ? "md10_0" : "md10_1")}>
<video
ref={(el) => this.video = el}
id="my-player"
className={styles.video}
preload="auto"
controls={true}
poster={`${url}?x-oss-process=video/snapshot,t_1000,f_jpg,w_648,h_1148,m_fast`}
>
<source src={url} type="video/mp4"/>
<p className="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
<div className={styles.cd}>{cd ? `${cd}s` : "已完成"}</div>
<div className={styles.progressBar}>
<div className={styles.progressFill} style={{
width: `${100 - cd / 15 * 100}%`,
}}/>
</div>
<div className="com_banner"/>
<Button className={styles.close} onClick={this.clickClose}/>
</div>;
}
}
export default VideoPanel;
@import "../../res.less";
.WedExpPanel {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
.bgEffect {
width: 750px;
height: 1624px;
position: absolute;
left: 0;
top: 0;
}
.bg {
position: absolute;
left: 27px;
top: 268px;
width: 697px;
height: 900px;
.webpBg("WedExpPanel/bg.png");
}
.tip {
font-family: "zzgfyht";
font-size: 45.23px;
color: #8f2245;
position: absolute;
left: 0;
top: 440px;
width: 100%;
text-align: center;
line-height: 1.2;
}
.normal {
.img {
position: absolute;
left: 255px;
top: 576px;
width: 243px;
height: 228px;
.webpBg("WedExpPanel/金币堆.png");
}
.multuple {
position: absolute;
left: 460px;
top: 597px;
font-size: 28px;
color: #e70813;
font-weight: bold;
font-style: italic;
}
}
.vip {
.img {
position: absolute;
left: 164px;
top: 590px;
width: 415px;
height: 209px;
.webpBg("WedExpPanel/会员金币堆.png");
}
.txt {
font-size: 20px;
color: #fdf4e4;
position: absolute;
left: 415px;
top: 601px;
width: 164px;
text-align: center;
}
.multuple {
position: absolute;
left: 350px;
top: 606px;
font-size: 28px;
color: #e70813;
font-weight: bold;
font-style: italic;
}
}
.taskBg {
position: absolute;
left: 73px;
top: 837px;
width: 603px;
height: 266px;
.webpBg("WedExpPanel/任务bg.png");
}
.logo {
position: absolute;
left: 144px;
top: 931px;
width: 95px;
height: 83px;
.webpBg("WedExpPanel/logo.png");
}
.txt {
font-size: 28px;
color: rgb(32, 16, 3);
position: absolute;
left: 243px;
top: 938px;
line-height: 1.2;
font-weight: bold;
}
.btn {
position: absolute;
left: 485px;
top: 947px;
width: 128px;
height: 50px;
.webpBg("WedExpPanel/去膨胀.png");
}
.close {
position: absolute;
left: 336px;
top: 1200px;
width: 79px;
height: 79px;
.webpBg("common/close.png");
}
}
import React from "react";
import { observer } from "mobx-react";
import "./WedExpPanel.less";
import { Button } from "@grace/ui";
import { _asyncThrottle } from "@/utils/utils.ts";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
import { SvgaPlayer } from "@grace/svgaplayer";
import bgEffectSvga from "@/assets/svga/2输出签到成功弹窗.svga";
import VideoPanel from "@/panels/VideoPanel/VideoPanel.tsx";
import classNames from "classnames";
export interface IWedExpPanelProps {
signCredits: number;
extraCredits: number;
boolLimit: boolean;
multipleValue: number;
url: string;
vipLevel: number;
taskId: string;
newLuckCreditsNum: number;
}
@observer
class WedExpPanel extends React.Component<IWedExpPanelProps> {
componentDidMount() {
}
clickClose = () => {
ModalCtrl.closeModal();
};
clickVideo = _asyncThrottle(async () => {
const { url, taskId } = this.props;
ModalCtrl.closeModal();
ModalCtrl.showModal(VideoPanel, { taskId, url, isExp: true });
});
render() {
const { signCredits, extraCredits, multipleValue, vipLevel } = this.props;
const isVip = !!extraCredits;
return <div className="WedExpPanel modal_center">
<SvgaPlayer className="bgEffect" src={bgEffectSvga}/>
<div className="bg"/>
<div className="tip">
获得{signCredits + extraCredits}积分<br/>
解锁周三限时奖励
</div>
{
isVip
? <div className="vip">
<div className="img"/>
<div className="txt">k{vipLevel}会员额外奖励</div>
<div className="multuple">{multipleValue}x</div>
</div>
: <div className="normal">
<div className="img"/>
<div className="multuple">{multipleValue}x</div>
</div>
}
<div className="taskBg"/>
<div className="logo"/>
<div className="txt">
观看品牌视频15s<br/>
积分膨胀至{(signCredits + extraCredits) * multipleValue}积分
</div>
<div className="com_banner"/>
<Button className={classNames("btn", isVip ? "md8" : "md7")} onClick={this.clickVideo}/>
<Button className="close" onClick={this.clickClose}/>
</div>;
}
}
export default WedExpPanel;
......@@ -5,21 +5,8 @@ import { initWx, IWxShareInfo } from "@/built-in/share/weixin/weixin.ts";
import { _asyncThrottle, _debounce, getUrlParam } from '@/utils/utils';
import { PageCtrl } from '@/core/ctrls/PageCtrl';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import Choice_challenge from '../../src/components/choice_challenge/choice_challenge';
import SkyFullGoldPanel from "@/panels/SkyFullGoldPanel/SkyFullGoldPanel.tsx";
import Renewmodule from '../../src/components/renewmodule/renewmodule';
import Finish_challenge from '../../src/components/finish_challenge/finish_challenge';
import Finish_task from '../../src/components/finish_task/finish_task';
import ReturnAwardPanel from "@/panels/ReturnAwardPanel/ReturnAwardPanel.tsx";
import NewcomerPanel from "@/panels/NewcomerPanel/NewcomerPanel.tsx";
import WedExpPanel from "@/panels/WedExpPanel/WedExpPanel.tsx";
import SignSucPanel from "@/panels/SignSucPanel/SignSucPanel.tsx";
import { getDomain } from '@spark/dbdomain';
import { showShareGuide } from '@spark/share';
import Assist_succeed from "../../src/components/assist_succeed/assist_succeed"
import Assist_fail from "../../src/components/assist_fail/assist_fail"
import Fail_challenge from "../../src/components/fail_challenge/fail_challenge"
import GuidePanel from "@/panels/GuidePanel/GuidePanel.tsx";
class Store {
......@@ -116,22 +103,6 @@ class Store {
return;
}
this.indexData = data;
if (data.downGoldVo) {
ModalCtrl.showModal(SkyFullGoldPanel, data.downGoldVo);
}
if (data.returnAwardCreditsNum) {
ModalCtrl.showModal(ReturnAwardPanel, {
creditNum: data.returnAwardCreditsNum,
});
}
if (!data.guideFlag) {
ModalCtrl.closeModal(GuidePanel);
ModalCtrl.showModal(GuidePanel, {}, false);
}
}
/**
......@@ -150,16 +121,6 @@ class Store {
const { boolLimit, newLuckCreditsNum } = data;
if (newLuckCreditsNum) {
ModalCtrl.showModal(NewcomerPanel, { creditNum: newLuckCreditsNum, });
}
if (boolLimit) {
// 周三限时奖励
ModalCtrl.showModal(WedExpPanel, data);
} else {
ModalCtrl.showModal(SignSucPanel, data);
}
}
......@@ -243,41 +204,6 @@ class Store {
item => item.challengeId === choosedChallengeId
);
// 当前挑战信息
const {
// challengeTotalDay = 0,
// prizeName = '',
// prizeImg = '',
resignJf = 0,
resignQg = 0,
} = currentChallenge || {};
// 当前挑战的挑战礼物信息
const {
prizeName = '',
prizeImg = ''
} = challengeSuccessPopInfo || {};
if (boolOpenChallenge) {
if (!choosedChallengeId) {
ModalCtrl.showModal(Choice_challenge)
}
if (boolNeedResignPop) {
ModalCtrl.showModal(Renewmodule, { hasChallengeDay, resignJf, resignQg });
}
taskInfoList.forEach(task => {
if (task.boolShowCompletePop) {
const { title } = task
ModalCtrl.showModal(Finish_task, { title });
}
});
}
if (challengeSuccessPopInfo) {
ModalCtrl.showModal(Finish_challenge, { prizeName, prizeImg })
}
if (boolShowFailPop) {
ModalCtrl.showModal(Fail_challenge)
}
}
};
......@@ -330,10 +256,6 @@ class Store {
let inviteCode = getUrlParam('inviteCode')
if (!inviteCode || inviteCode == 'null' || inviteCode == 'undefined') return false;
const { success, message, code } = await API.getChallengeAssist({ inviteCode: inviteCode });
if (success) {
ModalCtrl.showModal(Assist_succeed);
} else { ModalCtrl.showModal(Assist_fail, { code, message }); }
await this.getTaskInfo();
history.replaceState({}, '', location.href.replace(new RegExp(`[?&]inviteCode=[^&]*`), ''));
}
......
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