Skip to content

T
TianGongKaiWu-20251203
Commit c7524f25 authored by 王勇霞's avatar 王勇霞
Browse files
Options

feat： 页面搭建

parent fd02d0c9
Hide whitespace changes
Inline Side-by-side
Showing with 424 additions and 55 deletions
.husky/pre-commit 0 → 100755
View file @ c7524f25
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
# 在提交前运行代码格式化和ESLint检查
echo "正在运行代码格式化和检查..."
# 运行ESLint修复
if ! npx eslint --fix --ext .js,.jsx,.html --max-warnings 0 $(git diff --staged --name-only --diff-filter=ACM); then
echo "ESLint检查失败，请修复代码中的问题。"
exit 1
fi
# 运行Prettier格式化
if ! npx prettier --write --ignore-unknown $(git diff --staged --name-only --diff-filter=ACM); then
echo "Prettier格式化失败。"
exit 1
fi
# 自动将格式化后的文件添加到暂存区
git add $(git diff --name-only --diff-filter=ACM)
echo "代码格式化和检查完成！"
package.json
View file @ c7524f25
......@@ -9,6 +9,10 @@
"imgminup": "node ./config/scripts/assets/index.js imgmin imgup",
"spark:prebuild": "ncu @spark/pre-build -u && yarn && npx pre-build",
"lint": "eslint --ext .js,jsx,.html src public",
"lint:fix": "eslint --fix --ext .js,jsx,.html src public",
"format": "prettier --write \"src/**/*.{js,jsx,css,less}\" \"public/**/*.{js,jsx,css,less}\"",
"format:check": "prettier --check \"src/**/*.{js,jsx,css,less}\" \"public/**/*.{js,jsx,css,less}\"",
"fix": "npm run lint:fix && npm run format",
"prod": "rimraf ./dist &&cross-env NODE_ENV=production node ./config/webpack.prod.config.js",
"build": "rimraf ./dist &&cross-env NODE_ENV=production node ./config/scripts/assets/generateAssetList.js && node ./config/scripts/assets/index.js imgmin imgup && node ./config/webpack.prod.config.js"
},
......
src/api/index.js
View file @ c7524f25
import { generateAPI } from "./utils.js"
import { generateAPI } from "./utils.js";
const API = generateAPI({
/** 获取活动规则 */
getRule: 'projectRule.query',
/** 获取前端配置项 */
getFrontVariable: 'coop_frontVariable.query',
/** 参与接口 post请求 */
doJoin: {
uri: 'join.do',
method: "post"
},
/** 签到 */
doSign: {
uri: 'checkin_1/doSign.do',
withToken: true, // 携带token
},
/** 获取奖品列表 */
getPrizeList: "records.query",
/** 获取活动规则 */
getRule: "projectRule.query",
/** 获取前端配置项 */
getFrontVariable: "coop_frontVariable.query",
/** 参与接口 post请求 */
doJoin: {
uri: "join.do",
method: "post",
},
/** 签到 */
doSign: {
uri: "checkin_1/doSign.do",
withToken: true, // 携带token
},
// cookie丢失-临时保存cookie
tempSaveCookie: {
......@@ -31,9 +34,8 @@ const API = generateAPI({
uri: "home/buriedPoint.do",
showMsg: false,
},
})
});
// console.log('======', API)
export default API
export default API;
src/app.jsx
View file @ c7524f25
......@@ -14,6 +14,7 @@ MD();
// 此处为spark-cli动态生成
import LoadingDemo from "@src/pages/LoadingDemo/LoadingDemo";
import ActualHome from "@src/pages/ActualHome/index";
import PrizePage from "@src/pages/PrizePage";
import { PAGE_MAP } from "./utils/constants";
/**
......@@ -22,6 +23,7 @@ import { PAGE_MAP } from "./utils/constants";
const pageMap = {
[PAGE_MAP.LOADING_PAGE]: <LoadingDemo />,
[PAGE_MAP.ACTUAL_HOME_PAGE]: <ActualHome />,
[PAGE_MAP.PRIZE_PAGE]: <PrizePage />,
};
@observer
......
src/assetList.json
View file @ c7524f25
{"preLoadImg":[],"asyncLoadImg":["LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png"]}
\ No newline at end of file
{"preLoadImg":[],"asyncLoadImg":["ActualHome/bg.png","ActualHome/financeAchievement.png","ActualHome/newUserGift.png","ActualHome/prize.png","ActualHome/rule.png","ActualHome/sign_bg.png","ActualHome/sign_btn.png","ActualHome/sign_ok.png","ActualHome/sign_task.png","ActualHome/sign_task_title.png","ActualHome/sign_wait.png","Common/close.png","LoadingPage/loadingBg.jpg","LoadingPage/loadingFill.png","LoadingPage/loadingIp.png","Pop/BlackListPop/bg.png","Pop/BlackListPop/btn_actual.png","Pop/BlackListPop/title_actual.png","Pop/RulePop/bg.png"]}
\ No newline at end of file
src/components/BlackListPop/index.jsx 0 → 100644
View file @ c7524f25
import React, { useCallback } from "react"
import './index.less';
import { Button } from "@src/components/Button";
import modalStore from "@src/store/modal";
const BlackListPop = () => {
const closeBtn = useCallback(() => {
modalStore.closePop('blackListPop')
}, [])
return (
<div className="modal_center blacklistpop">
<div className="center_box">
<div className="pop_title"></div>
<Button className="option_btn"></Button>
<div className="close" onClick={closeBtn}></div>
</div>
</div>
)
}
export default BlackListPop
\ No newline at end of file
src/components/BlackListPop/index.less 0 → 100644
View file @ c7524f25
@import "../../res.less";
.blacklistpop {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.center_box {
.w-h-pos-l-t(539px, 310px, 99px, 574px);
.webpBg("Pop/BlackListPop/bg.png")
}
.pop_title {
.w-h-pos-l-t(404px, 88px, 69px, 51px);
.webpBg("Pop/BlackListPop/title_actual.png")
}
.option_btn {
.w-h-pos-l-t(426px, 86px, 57px, 180px);
.webpBg("Pop/BlackListPop/btn_actual.png")
}
.close {
.w-h-pos-l-b(57px, 57px, 246px, -93px);
.webpBg("Common/close.png")
}
}
\ No newline at end of file
src/components/RulePop/index.jsx 0 → 100644
View file @ c7524f25
import React, { useCallback } from "react";
import "./index.less";
import { Button } from "@src/components/Button";
import modalStore from "@src/store/modal";
const RulePop = () => {
const closeBtn = useCallback(() => {
modalStore.closePop("rulePop");
}, []);
return (
<div className="modal_center rulepop">
<div className="center_box">
<div
className="pop_content"
dangerouslySetInnerHTML={{
__html:
"1.活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容 活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容活动规则内容",
}}></div>
<Button className="close" onClick={closeBtn}></Button>
</div>
</div>
);
};
export default RulePop;
src/components/RulePop/index.less 0 → 100644
View file @ c7524f25
@import "../../res.less";
.rulepop {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
.center_box {
.w-h-pos-l-t(650px, 941px, 100px, 50%);
.webpBg("Pop/RulePop/bg.png");
transform: translateY(-70%);
}
.pop_content {
width: 452px;
height: 570px;
position: absolute;
top: 300px;
left: 46px;
word-break: break-all;
overflow-y: auto;
overflow-x: hidden;
}
// .option_btn {
// .w-h-pos-l-t(426px, 86px, 57px, 180px);
// .webpBg("Pop/BlackListPop/btn_actual.png");
// }
.close {
.w-h-pos-l-b(57px, 57px, 246px, -93px);
.webpBg("Common/close.png");
}
}
src/modal/modal.jsx
View file @ c7524f25
......@@ -3,10 +3,17 @@ import './modal.less';
import { observer } from 'mobx-react';
import modalStore from '../store/modal';
import { toJS } from 'mobx';
import BlackListPop from "@src/components/BlackListPop";
import RulePop from "@src/components/RulePop";
/**
* 弹窗配置
*/
export const cfg = {};
export const cfg = {
'blackListPop': BlackListPop,
'rulePop': RulePop
};
@observer
class Modal extends Component {
......@@ -18,7 +25,7 @@ class Modal extends Component {
render() {
const list = toJS(modalStore.popList);
if (!list.length) {
// TODO:此处根据需要自行修改
// document.body.style.overflow='auto';
......@@ -37,8 +44,8 @@ class Modal extends Component {
const popData = popObj.data;
if (PopUp || PopUpMulti) {
document.body.style.overflow='hidden';
}
document.body.style.overflow = 'hidden';
}
return <section className="modal-hoc-bg" style={{
zIndex: modalStore.popList.length ? 1000 : -1,
......
src/pages/ActualHome/index.jsx
View file @ c7524f25
import React from 'react';
import {observer} from 'mobx-react';
import {Button} from '@src/components/Button';
import SignModule from "@src/pages/components/SignModule/index"
import RankModule from "@src/pages/components/RankModule/index"
import BannerModule from "@src/pages/components/BannerModule/index"
import './index.less';
import React from "react";
import { observer } from "mobx-react";
import { Button } from "@src/components/Button";
import SignModule from "@src/pages/components/SignModule/index";
import RankModule from "@src/pages/components/RankModule/index";
import BannerModule from "@src/pages/components/BannerModule/index";
import "./index.less";
import modalStore from "@src/store/modal";
import { _throttle } from "@src/utils/utils";
import store from "@src/store/index";
import { PAGE_MAP } from "@src/utils/constants";
@observer
class ActualHome extends React.Component {
componentDidMount() {
// modalStore.pushPop("rulePop");
}
// 打开规则弹窗
openRule = _throttle(() => {
modalStore.pushPop("rulePop");
});
// 跳转我的奖品
goPrize = _throttle(() => {
store.changePage(PAGE_MAP.PRIZE_PAGE);
});
render() {
return (
<div className="actual-home-page">
{/* 规格&奖品 */}
<Button className='rule-icon'></Button>
<Button className='prize-icon'></Button>
<Button className="rule-icon" onClick={this.openRule}></Button>
<Button className="prize-icon" onClick={this.goPrize}></Button>
{/* 其他icon */}
<Button className='new-user-gift-icon'></Button>
<Button className='finance-achievement-icon'></Button>
<Button className="new-user-gift-icon"></Button>
<Button className="finance-achievement-icon"></Button>
{/* 排行榜 */}
<RankModule/>
<RankModule />
{/* 真实持仓 */}
{/* banner区 */}
<BannerModule/>
<BannerModule />
{/* 签到 */}
<SignModule/>
<SignModule />
</div>
);
}
......
src/pages/ActualHome/index.less
View file @ c7524f25
@import "../../res.less";
.actual-home-page {
width: 100%;
width: 750px;
padding-top: 595px;
min-height: 100vh;
.webpBg("ActualHome/bg.png");
......@@ -10,12 +10,12 @@
}
.rule-icon {
.w-h-pos-r-t(45px, 85px, 0, 130px);
.w-h-pos-l-t(45px, 85px, 707px, 130px);
.webpBg("ActualHome/rule.png");
}
.prize-icon {
.w-h-pos-r-t(45px, 85px, 0, 229px);
.prize-icon {
.w-h-pos-l-t(45px, 85px, 707px, 229px);
.webpBg("ActualHome/prize.png");
}
......@@ -27,4 +27,4 @@
.finance-achievement-icon {
.w-h-pos-l-t(119px, 111px, 611px, 557px);
.webpBg("ActualHome/financeAchievement.png");
}
\ No newline at end of file
}
src/pages/PrizePage/index.jsx 0 → 100644
View file @ c7524f25
"use strict";
import React from "react";
import { observer } from "mobx-react";
import "./index.less";
import { Button } from "@src/components/Button";
import store from "@src/store";
import { PAGE_MAP } from "@src/utils/constants";
import { _throttle, dateFormatter } from "@src/utils/utils";
import API from "@src/api";
@observer
class Prizepage extends React.Component {
constructor(props) {
super(props);
this.state = {
prizeList: [],
};
}
async componentDidMount() {
await this.getPrizeInfo();
}
getPrizeInfo = async () => {
const { success, data } = await API.getPrizeList();
if (success) {
this.setState({
prizeList: data || [],
});
}
};
goToLink = _throttle(async (item) => {
const { id, url } = item;
if (url) {
location.href = url;
} else {
location.href = `/aaw/projectx/takePrize?projectOrderNo=${id}`;
}
});
backHandle = () => {
store.changePage(PAGE_MAP.ACTUAL_HOME_PAGE);
};
render() {
const { prizeList } = this.state;
return (
<div className="prizepage">
<div className="prize_list">
{prizeList.length > 0 ? (
prizeList.map((item, index) => (
<div className="prize_item" key={index}>
<span className="item_bg"></span>
<span className="item_time">{dateFormatter(item.gmtCreate, "yyyy-MM-dd hh:mm:ss")}截止领取</span>
<img className="item_img" src={item.extra?.icon}></img>
<span className="item_name">{item.extra?.name}</span>
{item.extra?.receiveStatus === 1 ? (
<div className="item_received">已领取</div>
) : (
<Button className="item_btn" onClick={() => this.goToLink(item)}></Button>
)}
</div>
))
) : (
<div className="empty">
<span className="empty_img"></span>
<span className="empty_text">暂无奖品记录</span>
</div>
)}
</div>
<Button className="back" onClick={this.backHandle}></Button>
</div>
);
}
}
export default Prizepage;
src/pages/PrizePage/index.less 0 → 100644
View file @ c7524f25
@import "../../res.less";
.prizepage {
width: 750px;
height: 1624px;
left: 0px;
top: 0px;
position: absolute;
background-color: #a00200;
.webpBg("PrizePage/bg.png");
.prize_list {
width: 683px;
height: calc(100vh - 328px);
left: 33px;
top: 198px;
bottom: 0px;
position: fixed;
overflow-y: auto;
padding-right: 20px;
.prize_item {
width: 683px;
height: 148px;
left: 0px;
top: 0px;
position: relative;
margin-bottom: 28px;
.item_bg {
width: 683px;
height: 148px;
left: 0px;
top: 0px;
position: absolute;
}
.item_time {
width: 310px;
height: 24px;
left: 179px;
top: 84px;
position: absolute;
font-size: 24px;
line-height: 24px;
color: rgba(149, 149, 149, 1);
}
.item_img {
width: 120px;
height: 120px;
left: 23px;
top: 14px;
position: absolute;
border-radius: 10px;
}
.item_name {
width: 310px;
height: 28px;
left: 179px;
top: 42px;
position: absolute;
font-size: 27px;
line-height: 28px;
color: rgba(18, 18, 18, 1);
.lineClamp1();
}
.item_btn {
width: 153px;
height: 56px;
left: 490px;
top: 46px;
position: absolute;
.sparkBg("PrizePage/item_btn_bg.png");
font-size: 25px;
line-height: 25px;
color: rgba(255, 255, 255, 1);
.flex_center();
}
.item_received {
width: 153px;
height: 56px;
left: 490px;
top: 46px;
position: absolute;
.sparkBg("PrizePage/item_btn_bg2.png");
}
}
}
.empty {
width: 271px;
left: 188px;
top: 381px;
position: absolute;
.empty_img {
width: 271px;
height: 190px;
left: 0px;
top: 0px;
position: absolute;
.sparkBg("PrizePage/empty_img.png");
}
.empty_text {
width: 100%;
height: 25px;
left: 18px;
top: 249px;
position: absolute;
font-size: 28px;
line-height: 28px;
color: #878686;
text-align: center;
}
}
.back {
width: 18px;
height: 32px;
left: 30px;
top: 53px;
position: absolute;
.sparkBg("PrizePage/back.png");
}
}
src/pages/components/SignModule/index.jsx
View file @ c7524f25
......@@ -10,7 +10,7 @@ const SignModule = () => {
<div className="week-list-box">
{
weekList.map((item, index) => (
<Button className="week-item">
<Button className="week-item" key={index}>
<div className="week-item-text">周{item}</div>
<div className="task-title"></div>
</Button>
......
src/res.less
View file @ c7524f25
......@@ -32,6 +32,13 @@
top: @top;
}
.w-h-pos-l-b(@width, @height, @left, @bottom) {
width: @width;
height: @height;
position: absolute;
left: @left;
bottom: @bottom;
}
.mask(@value) {
mask-image: url("@{RES_PATH}@{value}");
......
src/store/index.js
View file @ c7524f25
import { PAGE_MAP } from '@src/utils/constants';
import { makeAutoObservable } from 'mobx';
import API from '../api/index';
import { GetCurrSkinId, getCustomShareId } from '@src/utils/utils';
import { PAGE_MAP } from "@src/utils/constants";
import { makeAutoObservable } from "mobx";
import API from "../api/index";
import { GetCurrSkinId, getCustomShareId } from "@src/utils/utils";
const skinId = GetCurrSkinId() || getCustomShareId();
const store = makeAutoObservable({
/** 活动规则 */
ruleInfo: '',
ruleInfo: "",
/** 前端开发配置 */
frontVariable: {},
/** 当前页面 */
curPage:
{
// TODO 举例子，自定义页面，因为mng更新原因原数字id会对应一个新的字符串id
5055: 'sharePage',
Did1NDA0NDc: 'sharePage',
myPrize: 'myPrize',
5055: "sharePage",
Did1NDA0NDc: "sharePage",
myPrize: "myPrize",
// TODO 举例子 新宿台奖品页
index: PAGE_MAP.ACTUAL_HOME_PAGE,
}[skinId] || PAGE_MAP.ACTUAL_HOME_PAGE,
}[skinId] || PAGE_MAP.PRIZE_PAGE,
pageData: {},
/** 场景切换 */
changePage(page, data = {}) {
......@@ -35,7 +35,7 @@ const store = makeAutoObservable({
// 获取前端开发配置
const { data } = await API.getFrontVariable();
this.frontVariable = data || {};
console.log('前端开发配置', data);
console.log("前端开发配置", data);
},
});
export default store;
src/utils/constants.js
View file @ c7524f25
......@@ -12,11 +12,12 @@ export const MODAL_INDEX = {
// rank: 1,
};
/** 网络异常默认展示 */
export const DEFAULT_NET_ERROR = '网络异常，请稍后再试';
export const DEFAULT_NET_ERROR = "网络异常，请稍后再试";
export const PAGE_MAP = {
/** 实盘首页 */
ACTUAL_HOME_PAGE: "actualHomePage",
LOADING_PAGE: "loadingPage",
/** 奖品页 */
PRIZE_PAGE: "prizePage",
};
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