Skip to content

湖
湖南口味王-520猜数游戏-20250409
Commit 7b89dc23 authored by 韦燕's avatar 韦燕
Browse files
Options

feat:merg

parents 8cb20562 8e6fe2b4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 22792 additions and 68 deletions
mock/project/homeInfo.js 0 → 100644
View file @ 7b89dc23
module.exports = {
"GET /main/index.do": {
"code": "Lorem",
"message": "cillum pariatur quis sit nostrud",
"success": true,
"data": {
"actStartTimestamp": -4048493.213529885,
"boxInfo": [
{
"boxId": "1",
"score": 100,
"receive": true,
"sendCount": 100
},
{
"boxId": "2",
"score": 500,
"receive": true,
"sendCount": 200
},
{
"boxId": "3",
"score": 1000,
"receive": false,
"sendCount": 300
},
{
"boxId": "4",
"score": 2000,
"receive": false,
"sendCount": 400
}
],
"historyMaxScore": 2259892.7346440405,
"currentTimestamp": 46409094.17754674,
"actEndTimestamp": 43535651.10143122
}
}
};
\ No newline at end of file
mock/project/main.js 0 → 100644
View file @ 7b89dc23
module.exports = {
// 排行榜信息
"GET /main/rankInfo.do": {
"code": "ut dolor",
"message": "quis sint velit commodo",
"success": true,
"data": {
"rankInfo": [
{
"index": 1,
"userName": "路人甲",
"score": 100,
"meFlag": "false"
},
{
"index": 2,
"userName": "路人乙",
"score": 200,
"meFlag": "false"
},
{
"index": 3,
"userName": "路人丙",
"score": 30000,
"meFlag": "false"
},
{
"index": 4,
"userName": "小明",
"score": 400000,
"meFlag": "true"
},
{
"index": 5,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 6,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 7,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 8,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 9,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 10,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 11,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 12,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 13,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 14,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 15,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
{
"index": 100,
"userName": "路人丁",
"score": 300,
"meFlag": "false"
},
],
"myRank": {
"index": 4,
"userName": "小明",
"score": 400
}
}
},
// 青果明细
"GET /main/qgDetails.do": {
"success": true,
"message": "nulla veniam do culpa Lorem",
"code": "ut culpa qui",
"data": {
"list": [
{
"id": 1,
"changedType": "+",
"quantity": 100,
"extra": "完成100分获得青果",
"createTimestamp": -10558650.718847722,
"playwayId": "nulla eiusmod deserunt anim",
"actionId": "labore anim aliqua ad velit"
},
{
"id": 2,
"changedType": "+",
"quantity": 10000,
"extra": "完成10000分获得青果",
"createTimestamp": 37304141.000525266,
"playwayId": "minim nisi velit commodo nulla",
"actionId": "voluptate elit magna dolor qui"
},
{
"id": 3,
"changedType": "+",
"quantity": 100000,
"extra": "完成100000分获得青果",
"createTimestamp": 79460372.33933905,
"playwayId": "reprehenderit consectetur",
"actionId": "exercitation veniam tempor magna"
},
{
"id": 4,
"changedType": "+",
"quantity": 200,
"extra": "完成200分获得青果",
"createTimestamp": -74285506.14657179,
"playwayId": "elit id qui labore non",
"actionId": "Excepteur consectetur"
},
{
"id": 5,
"changedType": "+",
"quantity": 100,
"extra": "完成100分获得青果",
"createTimestamp": 84285291.15363145,
"playwayId": "id ut",
"actionId": "sed ex enim Duis"
},
{
"id": 6,
"changedType": "+",
"quantity": 100,
"extra": "完成100分获得青果",
"createTimestamp": 84285291.15363145,
"playwayId": "id ut",
"actionId": "sed ex enim Duis"
},
{
"id":7,
"changedType": "+",
"quantity": 100,
"extra": "完成100分获得青果",
"createTimestamp": 84285291.15363145,
"playwayId": "id ut",
"actionId": "sed ex enim Duis"
},
{
"id": 8,
"changedType": "+",
"quantity": 100,
"extra": "完成100分获得青果",
"createTimestamp": 84285291.15363145,
"playwayId": "id ut",
"actionId": "sed ex enim Duis"
},
{
"id": 9,
"changedType": "+",
"quantity": 100,
"extra": "完成100分获得青果",
"createTimestamp": 84285291.15363145,
"playwayId": "id ut",
"actionId": "sed ex enim Duis"
},
{
"id": 10,
"changedType": "+",
"quantity": 100,
"extra": "完成100分获得青果",
"createTimestamp": 84285291.15363145,
"playwayId": "id ut",
"actionId": "sed ex enim Duis"
},
{
"id": 11,
"changedType": "+",
"quantity": 200,
"extra": "完成200分获得青果",
"createTimestamp": -74285506.14657179,
"playwayId": "elit id qui labore non",
"actionId": "Excepteur consectetur"
},
{
"id": 12,
"changedType": "+",
"quantity": 200,
"extra": "完成200分获得青果",
"createTimestamp": -74285506.14657179,
"playwayId": "elit id qui labore non",
"actionId": "Excepteur consectetur"
},
{
"id": 13,
"changedType": "+",
"quantity": 200,
"extra": "完成200分获得青果",
"createTimestamp": -74285506.14657179,
"playwayId": "elit id qui labore non",
"actionId": "Excepteur consectetur"
},
{
"id": 14,
"changedType": "+",
"quantity": 9000,
"extra": "完成9000分获得青果",
"createTimestamp": -74285506.14657179,
"playwayId": "elit id qui labore non",
"actionId": "Excepteur consectetur"
},
],
"haveMore": false
},
"timeStamp": -87748265.39137948
}
}
\ No newline at end of file
package-lock.json 0 → 100644
View file @ 7b89dc23
This diff is collapsed.
spark.config.json
View file @ 7b89dc23
{"proName":"湖南口味王—520猜数游戏-20250409","proDesc":"","proPath":"/Users/duibagroup/Documents/口味王猜数字/湖南口味王—520猜数游戏-20250409","createTime":1744169151592}
{"proName":"湖南口味王—520猜数游戏-20250409","proDesc":"","proPath":"F:\\2025\\20250409口味王猜数","createTime":1744169151592}
src/api/index.js
View file @ 7b89dc23
......@@ -16,6 +16,12 @@ const API = generateAPI({
withToken: true, // 携带token
},
// 获取排行榜信息
getRankInfo: "main/rankInfo.do",
// 获取青果明细信息
getQGDetails: "main/qgDetails.do",
// cookie丢失-临时保存cookie
tempSaveCookie: {
uri: "/autoLogin/tempSaveCookie",
......@@ -31,6 +37,8 @@ const API = generateAPI({
uri: "home/buriedPoint.do",
showMsg: false,
},
indexInfo:'main/index.do',
startGame:'main/start.do',
})
......
src/app.jsx
View file @ 7b89dc23
......@@ -12,17 +12,21 @@ import MD from "../MD"; // 埋点
MD();
// 此处为spark-cli动态生成
import LoadingDemo from "@src/pages/LoadingDemo/LoadingDemo";
import HomeDemo from "@src/pages/HomeDemo/HomeDemo";
import Detailpage from "./pages/detailpage/detailpage";
import Rankpage from "./pages/rankpage/rankpage";
import { PAGE_MAP } from "./utils/constants";
import Loading from "./pages/loading/loading";
import Homepahe from "./pages/homepahe/homepahe";
import GamePage from "./pages/gamePage/gamePage";
/**
* 所有页面场景
*/
const pageMap = {
[PAGE_MAP.LOADING_PAGE]: <LoadingDemo />,
[PAGE_MAP.HOME_PAGE]: <HomeDemo />,
[PAGE_MAP.LOADING_PAGE]: <Loading />,
[PAGE_MAP.HOME_PAGE]: <Homepahe />,
[PAGE_MAP.DETAIL_PAGE]: <Detailpage />,
[PAGE_MAP.RANK_PAGE]: <Rankpage />,
[PAGE_MAP.GAME_PAGE]: <GamePage />,
};
......
src/assetList.json
View file @ 7b89dc23
{"preLoadImg":[],"asyncLoadImg":["LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png","gamePage/bg.jpg","gamePage/numberBg.png","gamePage/selectBg.png"]}
\ No newline at end of file
<<<<<<< HEAD
{"preLoadImg":[],"asyncLoadImg":["LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png","gamePage/bg.jpg","gamePage/numberBg.png","gamePage/selectBg.png"]}
=======
{"preLoadImg":[],"asyncLoadImg":["LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png","detailPage/back.png","detailPage/bg.png","detailPage/border.png","detailPage/headline.png","detailPage/l_bg.png","detailPage/line.png","failPop/bg.png","failPop/close.png","failPop/endbtn.png","failPop/goonbtn.png","homePahe/bardown.png","homePahe/baron.png","homePahe/bg.png","homePahe/box1.png","homePahe/box2.png","homePahe/box3.png","homePahe/box4.png","homePahe/close1.png","homePahe/close2.png","homePahe/close3.png","homePahe/close4.png","homePahe/detail.png","homePahe/gameBarbg.png","homePahe/infobg.png","homePahe/open1.png","homePahe/open2.png","homePahe/open3.png","homePahe/open4.png","homePahe/prizebg.png","homePahe/rank.png","homePahe/rule.png","homePahe/show.png","homePahe/startBtn.png","homePahe/title.png","loading/bardown.png","loading/baron.png","loading/bg.png","loading/ip.png","loading/title.png","rankPage/back.png","rankPage/bg.png","rankPage/border.png","rankPage/headnline.png","rankPage/l_bg.png","rankPage/line.png","rankPage/ownbg.png","rulePop/bg.png","rulePop/close.png","successPop/bar.png","successPop/barbg.png","successPop/bg.png","successPop/btn.png","successPop/close.png"]}
>>>>>>> 8e6fe2b438dea54386ff3a9bf337b208de2ce4c8
src/assets/detailPage/bg.png 0 → 100644
View file @ 7b89dc23
This diff is collapsed.
src/assets/homePahe/bg.png 0 → 100644
View file @ 7b89dc23
This diff is collapsed.
src/assets/loading/bg.png 0 → 100644
View file @ 7b89dc23
This diff is collapsed.
src/assets/rankPage/bg.png 0 → 100644
View file @ 7b89dc23
This diff is collapsed.
src/components/barItem/barItem.jsx 0 → 100644
View file @ 7b89dc23
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './barItem.less';
import modalStore from '@src/store/modal';
import store from '@src/store';
import { Button } from '../Button';
@observer
class BarItem extends React.Component {
constructor(props) {
super(props);
}
componentDidUpdate() {
console.log(this.props,"!@!@!@!@!@!@")
}
render() {
const { barInfo } = this.props;
return (
<div className="gamebar">
<span className="bardown"></span>
<span className="baron"></span>
{
barInfo?.map((item, index) => {
return (
<div key={"box" + index} className={"boxitem" + " box" + (index + 1)}>
<span className={(item.receive ? 'open' : 'close') + (index + 1)}></span>
<span className="score">{item.score}分</span>
{
item.receive && <span className="prizebg"></span>
}
<span className="prize">{item.sendCount}青果</span>
</div>
)
})
}
</div>
);
}
}
export default BarItem;
src/components/barItem/barItem.less 0 → 100644
View file @ 7b89dc23
@import "../../res.less";
.gamebar {
width: 571px;
height: 140px;
left: 88px;
top: 361px;
position: absolute;
.bardown {
width: 522px;
height: 49px;
left: 22px;
top: 49px;
position: absolute;
.sparkBg("homePahe/bardown.png");
}
.baron {
width: 486px;
height: 10px;
left: 36px;
top: 69px;
position: absolute;
.sparkBg("homePahe/baron.png");
}
.boxitem {
width: 102px;
height: 138px;
left: 0px;
top: 0px;
position: absolute;
.open1 {
width: 94px;
height: 93px;
left: 0px;
top: 23px;
position: absolute;
.sparkBg("homePahe/open1.png");
}
.close1 {
width: 75px;
height: 75px;
left: 10px;
top: 31px;
position: absolute;
.sparkBg("homePahe/close1.png");
}
.open2 {
width: 94px;
height: 93px;
left: 0px;
top: 23px;
position: absolute;
.sparkBg("homePahe/open2.png");
}
.close2 {
width: 75px;
height: 75px;
left: 10px;
top: 31px;
position: absolute;
.sparkBg("homePahe/close2.png");
}
.open3 {
width: 94px;
height: 93px;
left: 0px;
top: 23px;
position: absolute;
.sparkBg("homePahe/open3.png");
}
.close3 {
width: 75px;
height: 75px;
left: 10px;
top: 31px;
position: absolute;
.sparkBg("homePahe/close3.png");
}
.open4 {
width: 94px;
height: 93px;
left: 0px;
top: 23px;
position: absolute;
.sparkBg("homePahe/open4.png");
}
.close4 {
width: 75px;
height: 75px;
left: 10px;
top: 31px;
position: absolute;
.sparkBg("homePahe/close4.png");
}
.score {
width: 102px;
height: 20px;
left: 0px;
top: 0px;
text-align: center;
position: absolute;
font-size: 21px;
line-height: 20px;
color: rgba(255, 255, 255, 1);
}
.prizebg {
width: 101px;
height: 30px;
left: 1px;
top: 108px;
position: absolute;
.sparkBg("homePahe/prizebg.png");
}
.prize {
width: 102px;
height: 20px;
left: 0px;
top: 114px;
text-align: center;
position: absolute;
font-size: 20px;
line-height: 20px;
color: rgba(255, 255, 255, 1);
}
}
.box1 {
left: 0px;
top: 1px;
position: absolute;
}
.box2 {
left: 158px;
top: 0px;
position: absolute;
}
.box3 {
left: 326px;
top: 1px;
position: absolute;
}
.box4 {
left: 469px;
top: 1px;
position: absolute;
}
}
\ No newline at end of file
src/components/failpop/failpop.jsx 0 → 100644
View file @ 7b89dc23
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './failpop.less';
import modalStore from '@src/store/modal';
import store from '@src/store';
import { Button } from '../Button';
@observer
class Failpop extends React.Component {
constructor(props) {
super(props);
}
closePop() {
modalStore.closePop()
}
async restartGame() {
await store.startGame();
modalStore.closePop()
}
render() {
return (
<div className="failpop modal_center">
<span className="bg"></span>
<Button className="close" onClick={this.closePop}></Button>
<span className="lab">本次我赚了{this.props.popData.score}</span>
<Button className="goonbtn" onClick={this.restartGame}></Button>
<Button className="endbtn" onClick={this.closePop}></Button>
</div>
);
}
}
export default Failpop;
src/components/failpop/failpop.less 0 → 100644
View file @ 7b89dc23
@import "../../res.less";
.failpop {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 651px;
height: 486px;
left: 49px;
top: 515px;
position: absolute;
.sparkBg("failPop/bg.png");
}
.close {
width: 68px;
height: 68px;
left: 342px;
top: 1041px;
position: absolute;
.sparkBg("failPop/close.png");
}
.lab {
width: 651px;
height: 33px;
left: 49px;
top: 712px;
text-align: center;
position: absolute;
font-size: 34px;
line-height: 33px;
color: rgba(255, 255, 255, 1);
}
.goonbtn {
width: 263px;
height: 86px;
left: 372px;
top: 820px;
position: absolute;
.sparkBg("failPop/goonbtn.png");
}
.endbtn {
width: 234px;
height: 81px;
left: 120px;
top: 822px;
position: absolute;
.sparkBg("failPop/endbtn.png");
}
}
src/components/rulepop/rulepop.jsx 0 → 100644
View file @ 7b89dc23
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './rulepop.less';
import store from '@src/store';
import modalStore from '@src/store/modal';
import { Button } from '../Button';
@observer
class Rulepop extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
store.initRule()
}
closePop(){
modalStore.closePop()
}
render() {
return (
<div className="rulepop modal_center">
<Button className="close" onClick={this.closePop}></Button>
<span className="bg"></span>
<span className="ruletxt" dangerouslySetInnerHTML={{ __html: store.ruleInfo }}></span>
</div>
);
}
}
export default Rulepop;
src/components/rulepop/rulepop.less 0 → 100644
View file @ 7b89dc23
@import "../../res.less";
.rulepop {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.close {
width: 68px;
height: 68px;
left: 337px;
top: 1094px;
position: absolute;
.sparkBg("rulePop/close.png");
}
.bg {
width: 651px;
height: 637px;
left: 49px;
top: 421px;
position: absolute;
.sparkBg("rulePop/bg.png");
}
.ruletxt {
width: 516px;
height: 366px;
left: 120px;
top: 598px;
position: absolute;
font-size: 32px;
color: rgba(254, 254, 254, 1);
word-break: break-all;
overflow-y: scroll;
}
}
src/components/successpop/successpop.jsx 0 → 100644
View file @ 7b89dc23
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './successpop.less';
import modalStore from '@src/store/modal';
import { Button } from '../Button';
@observer
class Successpop extends React.Component {
constructor(props) {
super(props);
}
closePop(){
modalStore.closePop("Successpop")
}
render() {
return (
<div className="successpop modal_center">
<Button className="close" onClick={this.closePop}></Button>
<span className="bg"></span>
<div className="barbox">
<span className="barbg"></span>
<span className="bar"></span>
</div>
<Button className="btn" onClick={this.closePop}></Button>
<span className="score"><p>本次我赚了{this.props.popData.score}</p><p>获得{this.props.popData.sendCount}青果</p></span>
</div>
);
}
}
export default Successpop;
src/components/successpop/successpop.less 0 → 100644
View file @ 7b89dc23
@import "../../res.less";
.successpop {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.close {
width: 68px;
height: 68px;
left: 342px;
top: 1152px;
position: absolute;
.sparkBg("successPop/close.png");
}
.bg {
width: 651px;
height: 681px;
left: 49px;
top: 421px;
position: absolute;
.sparkBg("successPop/bg.png");
}
.barbox {
width: 538px;
height: 178px;
left: 103px;
top: 702px;
position: absolute;
.barbg {
width: 538px;
height: 178px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("successPop/barbg.png");
}
.bar {
width: 518px;
height: 133px;
left: 8px;
top: 25px;
position: absolute;
.sparkBg("successPop/bar.png");
}
}
.btn {
width: 320px;
height: 91px;
left: 213px;
top: 924px;
position: absolute;
.sparkBg("successPop/btn.png");
}
.score {
width: 651px;
height: 76px;
left: 49px;
top: 596px;
text-align: center;
position: absolute;
font-size: 34px;
color: rgba(255, 255, 255, 1);
}
}
src/modal/modal.jsx
View file @ 7b89dc23
import React, { Component } from "react";
import './modal.less';
import { observer } from 'mobx-react';
import modalStore from '../store/modal';
import { toJS } from 'mobx';
import GuideModal from "@src/components/guideModal/guideModal";
/**
* 弹窗配置
*/
export const cfg = {
// 新手引导
GuideModal,
};
@observer
class Modal extends Component {
constructor(props) {
super(props);
}
componentDidMount() { }
render() {
const list = toJS(modalStore.popList);
if (!list.length) {
// TODO:此处根据需要自行修改
// document.body.style.overflow='auto';
return <section></section>;
}
let PopUpMulti, popUpMultiData;
if (list.length > 1 && list[list.length - 1].isMulti == true) {
const popObj2 = list[list.length - 1];
PopUpMulti = cfg[popObj2.key];
popUpMultiData = popObj2.data;
}
const popObj = list[0];
const PopUp = cfg[popObj.key];
const popData = popObj.data;
if (PopUp || PopUpMulti) {
document.body.style.overflow='hidden';
}
return <section className="modal-hoc-bg" style={{
zIndex: modalStore.popList.length ? 1000 : -1,
display: modalStore.popList.length ? 'block' : 'none'
}}>
{PopUp && <PopUp popData={popData} />}
{PopUpMulti && <section className="modal-hoc-bg" style={{
zIndex: modalStore.popList.length ? 1000 : -1,
display: modalStore.popList.length ? 'block' : 'none'
}}><PopUpMulti popData={popUpMultiData} />
</section>}
</section>;
}
}
import React, { Component } from "react";
import Failpop from "../components/failpop/failpop";
import Successpop from "../components/successpop/successpop";
import Rulepop from "../components/rulepop/rulepop";
import Rankpage from "../pages/rankpage/rankpage";
import Detailpage from "../pages/detailpage/detailpage";
import GuideModal from "@src/components/guideModal/guideModal";
import './modal.less';
import { observer } from 'mobx-react';
import modalStore from '../store/modal';
import { toJS } from 'mobx';
/**
* 弹窗配置
*/
export const cfg = {
Detailpage: Detailpage,
Rankpage: Rankpage,
Rulepop: Rulepop,
Successpop: Successpop,
Failpop: Failpop,
// 新手引导
GuideModal,
};
@observer
class Modal extends Component {
constructor(props) {
super(props);
}
componentDidMount() {}
render() {
const list = toJS(modalStore.popList);
if (!list.length) {
// TODO:此处根据需要自行修改
// document.body.style.overflow='auto';
return <section></section>;
}
let PopUpMulti, popUpMultiData;
if (list.length > 1 && list[list.length - 1].isMulti == true) {
const popObj2 = list[list.length - 1];
PopUpMulti = cfg[popObj2.key];
popUpMultiData = popObj2.data;
}
const popObj = list[0];
const PopUp = cfg[popObj.key];
const popData = popObj.data;
if (PopUp || PopUpMulti) {
document.body.style.overflow = 'hidden';
}
return <section className="modal-hoc-bg" style={{
zIndex: modalStore.popList.length ? 1000 : -1,
display: modalStore.popList.length ? 'block' : 'none'
}}>
{PopUp && <PopUp popData={popData} />}
{PopUpMulti && <section className="modal-hoc-bg" style={{
zIndex: modalStore.popList.length ? 1000 : -1,
display: modalStore.popList.length ? 'block' : 'none'
}}><PopUpMulti popData={popUpMultiData} />
</section>}
</section>;
}
}
export default Modal;
\ No newline at end of file
src/pages/detailpage/detailpage.jsx 0 → 100644
View file @ 7b89dc23
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './detailpage.less';
import { Button } from '@src/components/Button';
import { _asyncThrottle, dateFormatter } from '@src/utils/utils';
import store from '@src/store';
import { PAGE_MAP } from '@src/utils/constants';
import API from '@src/api';
@observer
class Detailpage extends React.Component {
constructor(props) {
super(props);
this.state = {
logList: [], // 列表数据
isSearching: false // 是否在请求列表中
}
this.pageNum = 1; // 页码
this.pageSize = 10; // 每页条数
this.isLoadedAll = false; // 是否加载完所有数据
}
componentDidMount() {
this.getDetail();
}
// 明细 获取列表数据
getDetail = async () => {
if (this.state.isSearching) return;
if (this.isLoadedAll) return;
this.setState({ isSearching: true })
const params = {
pageNum: this.pageNum, // 页数，默认1
pageSize: this.pageSize, // 查询数量，默认10
}
const { success, data } = await API.getQGDetails(params);
if (success) {
const _list = this.state.logList.concat(data?.list || [])
this.setState({
isSearching: false,
logList: _list,
});
this.isLoadedAll = !data?.haveMore
this.pageNum++;
}
}
// 监听滚动事件
handScroll = (e) => {
if (
e.target.scrollTop + e.target.clientHeight + 10 >=
e.target.scrollHeight
) {
this.getDetail();
}
};
back = _asyncThrottle(() => {
store.changePage(PAGE_MAP.HOME_PAGE)
})
render() {
const { logList } = this.state;
return (
<div className="detailpage" onScroll={this.handScroll}>
<span className="bg"></span>
<Button className="back" onClick={this.back} />
<div className="list">
<span className="listbg"></span>
<div className="l_bg">
{Array.isArray(logList) && logList.length > 0 ? logList.map((item, index) => {
const { changedType, quantity, extra, createTimestamp } = item;
return (
<div className="sample" key={index}>
<span className="name">{extra}</span>
<span className="time">{dateFormatter(createTimestamp, "yyyy-MM-dd")}</span>
<span className="receive">{changedType}{quantity}</span>
{index != logList.length - 1 && <span className="line"></span>}
</div>
)
}) : <span className="nodata">暂无数据</span>}
</div>
</div>
<span className="headline"></span>
</div>
);
}
}
export default Detailpage;
src/pages/detailpage/detailpage.less 0 → 100644
View file @ 7b89dc23
@import "../../res.less";
.detailpage {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("detailPage/bg.png");
}
.back {
width: 94px;
height: 49px;
left: 25px;
top: 50px;
position: absolute;
.sparkBg("detailPage/back.png");
}
.list {
width: 724px;
height: 1351px;
left: 12px;
top: 240px;
position: absolute;
.listbg {
width: 724px;
height: 1351px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("detailPage/border.png");
}
.l_bg {
width: 674px;
height: auto;
left: 38px;
bottom: 52px;
top: 274px;
position: fixed;
overflow-y: auto;
overflow-x: hidden;
.nodata {
width: 674px;
height: 60px;
left: 0px;
top: 50px;
position: absolute;
text-align: center;
font-size: 30px;
line-height: 30px;
color: rgba(255, 255, 255, 1);
}
.sample {
width: 623px;
height: 95px;
left: 25px;
top: 25px;
margin-top: 20px;
position: relative;
.name {
width: 460px;
height: 34px;
left: 3px;
top: 0px;
position: absolute;
font-size: 30px;
line-height: 30px;
color: rgba(255, 255, 255, 1);
.lineClamp1();
}
.time {
width: 360px;
height: 30px;
left: 4px;
top: 47px;
position: absolute;
font-size: 26px;
line-height: 26px;
color: rgba(183, 183, 183, 1);
.lineClamp1();
}
.receive {
// width: 99px;
width: 120px;
height: 34px;
left: 520px;
top: 14px;
position: absolute;
font-size: 30px;
line-height: 30px;
color: rgba(255, 255, 255, 1);
.lineClamp1();
text-align: left;
}
.line {
width: 623px;
height: 4px;
left: 0px;
top: 91px;
position: absolute;
opacity: 0.62;
.sparkBg("detailPage/line.png");
}
}
}
}
.headline {
width: 464px;
height: 140px;
left: 143px;
top: 93px;
position: absolute;
.sparkBg("detailPage/headline.png");
}
}
\ No newline at end of file
src/pages/homepahe/homepahe.jsx 0 → 100644
View file @ 7b89dc23
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './homepahe.less';
import modalStore from '@src/store/modal';
import { Button } from '@src/components/Button';
import store from '@src/store';
import { PAGE_MAP } from '@src/utils/constants';
import { Toast } from '@spark/ui';
import BarItem from '@src/components/barItem/barItem';
@observer
class Homepahe extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
store.getIndexInfo()
}
click_Rule() {
if (!store.checkTime(false)) {
return
}
modalStore.pushPop("Rulepop")
}
click_Rank() {
if (!store.checkTime()) {
return
}
store.changePage(PAGE_MAP.RANK_PAGE)
}
click_Detail() {
if (!store.checkTime(false)) {
return
}
store.changePage(PAGE_MAP.DETAIL_PAGE)
}
click_StartBtn() {
if (!store.checkTime()) {
return
}
// TODO 成长值没有
// if(store.userInfo.growthValue < 100){
// Toast("成长值不足，无法参与游戏")
// }
store.startGame()
}
render() {
return (
<div className="homepahe modal_center">
<span className="bg"></span>
<span className="show"></span>
{
store.homeInfo.historyMaxScore != 0 &&
<div className="infobox">
<span className="infobg"></span>
<span className="lab">我最高赚了{store.homeInfo.historyMaxScore || 0}</span>
</div>
}
<span className="gamebarbg"></span>
<BarItem barInfo={store.homeInfo?.boxInfo} nowScore={store.homeInfo.historyMaxScore}></BarItem>
<Button className="startbtn" onClick={this.click_StartBtn}></Button>
<span className="title"></span>
<Button className="rule" onClick={this.click_Rule}></Button>
<Button className="rank" onClick={this.click_Rank}></Button>
<Button className="detail" onClick={this.click_Detail}></Button>
</div>
);
}
}
export default Homepahe;
src/pages/homepahe/homepahe.less 0 → 100644
View file @ 7b89dc23
@import "../../res.less";
.homepahe {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePahe/bg.png");
}
.show {
width: 482px;
height: 373px;
left: 155px;
top: 598px;
position: absolute;
.sparkBg("homePahe/show.png");
}
.infobox {
width: 734px;
height: 116px;
left: 13px;
top: 956px;
position: absolute;
.infobg {
width: 734px;
height: 116px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("homePahe/infobg.png");
}
.lab {
width: 704px;
height: 25px;
left: 0px;
top: 71px;
text-align: center;
position: absolute;
font-size: 26px;
line-height: 25px;
color: rgba(102, 18, 17, 1);
}
}
.gamebarbg {
width: 640px;
height: 289px;
left: 52px;
top: 310px;
position: absolute;
.sparkBg("homePahe/gameBarbg.png");
}
.startbtn {
width: 451px;
height: 128px;
left: 150px;
top: 1330px;
position: absolute;
.sparkBg("homePahe/startBtn.png");
}
.title {
width: 598px;
height: 206px;
left: 80px;
top: 107px;
position: absolute;
.sparkBg("homePahe/title.png");
}
.rule {
width: 102px;
height: 48px;
left: 499px;
top: 50px;
position: absolute;
.sparkBg("homePahe/rule.png");
}
.rank {
width: 102px;
height: 48px;
left: 621px;
top: 50px;
position: absolute;
.sparkBg("homePahe/rank.png");
}
.detail {
width: 180px;
height: 48px;
left: 25px;
top: 50px;
position: absolute;
.sparkBg("homePahe/detail.png");
}
}
src/pages/loading/loading.jsx 0 → 100644
View file @ 7b89dc23
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import store from "../../store/index";
import './loading.less';
import { preloadAsset } from "@src/utils/preload1.3.js";
import assetList from "@src/assetList.json";
import { PAGE_MAP } from "@src/utils/constants";
@observer
class Loading extends React.Component {
constructor(props) {
super(props);
this.state = {
curPercentage: 0
}
}
curPercentage = 0;
intervalId = 0;
isEvenLoad = true; // 是否匀速加载进度条
componentDidMount() {
this.preloadAssetInit();
}
/**
* 资源预加载
*/
preloadAssetInit = async () => {
const imageList = assetList.preLoadImg;
preloadAsset(
imageList,
3,
this.onLoadingProgress,
).then(() => {
// 预加载资源完成
// 异步加载默认关闭
// setTimeout(() => {
// // 异步加载资源开始
// const asyncImageList = assetList.asyncLoadImg;
// preloadAsset(asyncImageList, 1)
// }, 5000);
});
};
jump = () => {
setTimeout(() => {
store.changePage(PAGE_MAP.HOME_PAGE); // 跳转页面
}, 100);
};
/**
* 资源加载进度回调
* @param {*} progress
*/
onLoadingProgress = (progress) => {
const percentage = Math.floor(progress * 100);
console.log("progress", percentage);
if (this.isEvenLoad) {
this.setEvenProgress(percentage);
} else {
if (percentage == 100) {
this.jump();
}
}
};
/**
* 以1%匀速加载进度
* @param {*} percentage
*/
setEvenProgress = (percentage) => {
this.intervalId && clearInterval(this.intervalId);
let curPercentage = this.curPercentage;
this.intervalId = setInterval(() => {
if (curPercentage >= percentage) {
clearInterval(this.intervalId);
this.jump();
return;
}
curPercentage += 1;
this.curPercentage = curPercentage;
this.setState({
curPercentage,
});
}, 10);
};
render() {
const { curPercentage } = this.state;
return (
<div className="loading modal_center">
<span className="bg"></span>
<span className="title"></span>
<div className="loadbar">
<span className="bardown"></span>
<span className='barBox'>
<span className="baron" style={{
transform: `translateX(${curPercentage - 100}%)`
}}></span>
</span>
<span className="barnum">正在加载……</span>
<span className="ip" style={{left:`${((511*curPercentage/100-37)/100)}rem`}}></span>
</div>
</div>
);
}
}
export default Loading;
src/pages/loading/loading.less 0 → 100644
View file @ 7b89dc23
@import "../../res.less";
.loading {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("loading/bg.png");
}
.title {
width: 643px;
height: 216px;
left: 59px;
top: 160px;
position: absolute;
.sparkBg("loading/title.png");
}
.loadbar {
width: 511px;
height: 117px;
left: 111px;
top: 526px;
position: absolute;
.bardown {
width: 511px;
height: 22px;
left: 0px;
top: 32px;
position: absolute;
.sparkBg("loading/bardown.png");
}
.barBox {
width: 511px;
height: 22px;
left: 0px;
top: 32px;
border-radius: 45px;
overflow: hidden;
position: absolute;
}
.baron {
width: 511px;
height: 22px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("loading/baron.png");
}
.barnum {
width: 179px;
height: 27px;
left: 178px;
top: 90px;
position: absolute;
font-size: 28px;
line-height: 27px;
color: rgba(255, 255, 255, 1);
}
.ip {
width: 74px;
height: 74px;
left: 256px;
top: 0px;
position: absolute;
.sparkBg("loading/ip.png");
}
}
}
src/pages/rankpage/rankpage.jsx 0 → 100644
View file @ 7b89dc23
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './rankpage.less';
import { Button } from '@src/components/Button';
import { _asyncThrottle } from '@src/utils/utils';
import store from '@src/store';
import { PAGE_MAP } from '@src/utils/constants';
import API from '@src/api';
@observer
class Rankpage extends React.Component {
constructor(props) {
super(props);
this.state = {
info: {}
}
}
componentDidMount() {
this.getRank();
}
// 明细
getRank = async () => {
const { success, data } = await API.getRankInfo();
if (success) {
this.setState({
info: data || {}
})
}
}
back = _asyncThrottle(() => {
store.changePage(PAGE_MAP.HOME_PAGE)
})
render() {
const { rankInfo = [], myRank = {} } = this.state?.info;
const hasRankData = rankInfo.length > 0;
return (
<div className="rankpage">
<span className="bg"></span>
<span className="headnline"></span>
<span className="tip">该成绩仅为游戏当日分数</span>
<Button className="back" onClick={this.back} />
<div className="list">
<span className="listbg"></span>
<div className="own">
<span className="ownbg"></span>
<span className="ownrank">
{myRank.index === -1
? '—'
: myRank.index > 100
? '100+'
: myRank.index
}
</span>
<span className="ownname">{myRank.userName || '口味王用户'}</span>
<span className="ownscore">
{myRank.index === -1 ? 0 : (myRank.score || 0)}
</span>
</div>
{hasRankData ? (
<>
<div className="l_bg">
{Array.isArray(rankInfo) && rankInfo.length > 0 &&
rankInfo.map((item) => (
<div className="sample" key={item.index}>
<span className="userrank">
{item.index === -1
? '—'
: item.index > 100
? '100+'
: item.index
}
</span>
<span className="username">{item.userName || '口味王用户'}</span>
<span className="userscore">
{item.index === -1 ? 0 : (item.score || 0)}
</span>
<span className="line"></span>
</div>
))
}
</div>
</>
) : <span className='nodata'>暂无数据</span>}
<span className="rank">排名</span>
<span className="name">用户昵称</span>
<span className="score">获得分数</span>
</div>
</div>
);
}
}
export default Rankpage;
src/pages/rankpage/rankpage.less 0 → 100644
View file @ 7b89dc23
@import "../../res.less";
.rankpage {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.bg {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("rankPage/bg.png");
}
.headnline {
width: 464px;
height: 140px;
left: 143px;
top: 57px;
position: absolute;
.sparkBg("rankPage/headnline.png");
}
.tip {
width: 392px;
height: 33px;
left: 179px;
top: 171px;
position: absolute;
font-size: 34px;
line-height: 33px;
color: rgba(255, 255, 255, 1);
}
.back {
width: 94px;
height: 49px;
left: 25px;
top: 50px;
position: absolute;
.sparkBg("rankPage/back.png");
}
.list {
width: 750px;
height: 1351px;
left: 0px;
top: 240px;
position: absolute;
.listbg {
width: 724px;
height: 1351px;
left: 12px;
top: 0px;
position: absolute;
.sparkBg("rankPage/border.png");
}
.nodata {
width: 724px;
height: 60px;
// left: 12px;
top: 500px;
position: absolute;
text-align: center;
font-size: 30px;
line-height: 30px;
color: rgba(255, 255, 255, 1);
}
.own {
width: 750px;
height: 139px;
left: 0;
top: 121px;
position: absolute;
.ownbg {
width: 750px;
height: 139px;
left: 0px;
top: 0px;
position: absolute;
display: block;
.sparkBg("rankPage/ownbg.png");
}
.ownrank {
width: 100px;
height: 26px;
left: 58px;
top: 45px;
position: absolute;
font-size: 30px;
line-height: 24px;
color: rgba(36, 28, 28, 1);
.lineClamp1();
text-align: center;
}
.ownname {
width: 273px;
height: 34px;
left: 223px;
top: 41px;
position: absolute;
font-size: 30px;
line-height: 32px;
color: rgba(36, 28, 28, 1);
.lineClamp1();
text-align: center;
}
.ownscore {
width: 100px;
height: 26px;
left: 558px;
top: 45px;
position: absolute;
font-size: 30px;
line-height: 24px;
color: rgba(36, 28, 28, 1);
.lineClamp1();
text-align: center;
}
}
.l_bg {
width: 674px;
height: auto;
left: 36px;
top: 465px;
bottom: 52px;
position: fixed;
overflow-y: auto;
overflow-x: hidden;
.sample {
width: 623px;
height: 75px;
left: 28px;
top: 0px;
position: relative;
margin-top: 15px;
.userrank {
width: 100px;
height: 28px;
left: -5px;
top: 16px;
position: absolute;
font-size: 28px;
line-height: 26px;
color: rgba(255, 255, 255, 1);
.lineClamp1();
text-align: center;
}
.username {
width: 273px;
height: 30px;
left: 160px;
top: 15px;
position: absolute;
font-size: 28px;
line-height: 28px;
color: rgba(255, 255, 255, 1);
.lineClamp1();
text-align: center;
}
.userscore {
width: 100px;
height: 32px;
left: 495px;
top: 15px;
position: absolute;
font-size: 28px;
line-height: 30px;
color: rgba(255, 255, 255, 1);
.lineClamp1();
text-align: center;
}
.line {
width: 623px;
height: 4px;
left: 0px;
top: 71px;
position: absolute;
opacity: 0.62;
.sparkBg("rankPage/line.png");
}
}
}
.rank {
width: 66px;
height: 28px;
left: 79px;
top: 68px;
position: absolute;
font-size: 30px;
line-height: 28px;
color: rgba(255, 255, 255, 1);
}
.name {
width: 132px;
height: 28px;
left: 296px;
top: 68px;
position: absolute;
font-size: 30px;
line-height: 28px;
color: rgba(255, 255, 255, 1);
}
.score {
width: 131px;
height: 28px;
left: 546px;
top: 68px;
position: absolute;
font-size: 30px;
line-height: 28px;
color: rgba(255, 255, 255, 1);
}
}
}
\ No newline at end of file
src/store/index.js
View file @ 7b89dc23
......@@ -2,6 +2,7 @@ import { PAGE_MAP } from '@src/utils/constants';
import { makeAutoObservable } from 'mobx';
import API from '../api/index';
import { GetCurrSkinId, getCustomShareId } from "@src/utils/utils";
import { Toast } from '@spark/ui';
const skinId = GetCurrSkinId() || getCustomShareId();
......@@ -43,6 +44,36 @@ const store = makeAutoObservable({
const { data } = await API.getFrontVariable();
this.frontVariable = data || {};
console.log('前端开发配置', data)
},
timeStamp:'',
homeInfo:{},
async getIndexInfo() {
const { success, data } = await API.indexInfo()
if (success && data) {
this.timeStamp = data.currentTimestamp
this.homeInfo = data
}
},
checkTime(checkEnd = true) {
if (store.homeInfo?.actStartTimestamp > store.timeStamp) {
Toast("活动未开始")
return false
}
if (checkEnd && store.homeInfo?.actEndTimestamp < store.timeStamp) {
Toast("活动已结束")
return false
}
return true
},
startInfo:{},
async startGame(){
const { success, data } = await API.startGame()
if(success){
this.startInfo = data
// TODO 游戏页面
store.changePage(PAGE_MAP.GAME_PAGE)
}
}
})
export default store;
src/utils/constants.js
View file @ 7b89dc23
......@@ -17,6 +17,8 @@ export const DEFAULT_NET_ERROR = '网络异常，请稍后再试';
export const PAGE_MAP = {
HOME_PAGE: "homePage",
LOADING_PAGE: "loadingPage",
DETAIL_PAGE: "Detailpage",
RANK_PAGE: "Rankpage",
GAME_PAGE: "gamePage",
};
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