Skip to content

E
eppfax-h5-react
Commit dd32cdd2 by HoMeTown
Options

feat: 优化代码

parent bb7d1abd
Showing with 221 additions and 213 deletions
src/App.tsx
import styles from './App.module.scss'
import testImg from '@/assets/images/notGetStatus.png'
import { useNavigate } from 'react-router-dom'
import {useNavigate} from 'react-router-dom'
const App = () => {
const navigate = useNavigate()
const handleClick = () => {
navigate('/testdemo?id=1234', {
state: {
id: 1234567
}
})
}
return (
<div className="content">
<div className={styles.testBox}>
<span className={styles.testBoxText}>hello, 你好 {process.env.REACT_APP_ENV}</span>
<button onClick={handleClick}>点击跳转</button>
<img className={styles.testBoxImg} src={testImg} alt=""/>
const navigate = useNavigate()
const handleClick = () => {
navigate('/testdemo?id=1234', {
state: {
id: 1234567
}
})
}
return (
<div className="content">
<div className={styles.testBox}>
<span className={styles.testBoxText}>hello, 你好 {process.env.REACT_APP_ENV}</span>
<button onClick={handleClick}>点击跳转</button>
<img className={styles.testBoxImg} src={testImg} alt=""/>
</div>
</div>
</div>
)
)
}
export default App
src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Home from '@/pages/Home'
import Lottery from '@/pages/Lottery'
import OrderDetail from '@/pages/OrderDetail'
......@@ -10,13 +10,13 @@ import '@nutui/nutui-react/dist/style.css'
const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path = '/' element={<Home />}></Route>
<Route path = '/lottery' element={<Lottery />}></Route>
<Route path = '/orderDetail' element={<OrderDetail />}></Route>
</Routes>
</BrowserRouter>
</React.StrictMode>
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path='/' element={<Home/>}></Route>
<Route path='/lottery' element={<Lottery/>}></Route>
<Route path='/orderDetail' element={<OrderDetail/>}></Route>
</Routes>
</BrowserRouter>
</React.StrictMode>
)
src/pages/Home/components/HomeBg.tsx
......@@ -4,11 +4,11 @@ import homeTopBannerImg from '@/assets/images/homeTopBanner.png'
import homeBotBannerImg from '@/assets/images/homeBotBanner.png'
const HomeBg: React.FC = () => {
return (
return (
<div className={styles.bgWrap}>
<img className={styles.topBannerImg} src={homeTopBannerImg} alt=""/>
<img className={styles.botBannerImg} src={homeBotBannerImg} alt=""/>
</div>
)
)
}
export default HomeBg
src/pages/Home/components/HomeProductItem.tsx
......@@ -2,41 +2,43 @@ import React from 'react'
import styles from '@/pages/Home/index.module.scss'
interface HomeProductItemProps {
/**
/**
* 背景图
*/
bannerImg: string
/**
bannerImg: string
/**
* 标题
*/
title: string
/**
title: string
/**
* 按钮文字
*/
buttonText?: string
/**
buttonText?: string
/**
* 按钮文字颜色
*/
buttonTextColor: string
/**
buttonTextColor: string
/**
* 点击
*/
onButtonClick: (idx: number) => void
/**
onButtonClick: (idx: number) => void
/**
* 索引
*/
idx: number
idx: number
}
const HomeProductItem: React.FC<HomeProductItemProps> = (props) => {
const buttonStyle = { color: props.buttonTextColor }
return (
const buttonStyle = {color: props.buttonTextColor}
return (
<div className={styles.productItem}>
<img className={styles.productItemBg} src={props.bannerImg} alt={props.title}/>
<h3 className={styles.productItemTitle}>{ props.title }</h3>
<div className={styles.productItemButton} style={buttonStyle} onClick={() => { props.onButtonClick(props.idx) }}>{ props.buttonText || '立即购买' }</div>
<h3 className={styles.productItemTitle}>{props.title}</h3>
<div className={styles.productItemButton} style={buttonStyle} onClick={() => {
props.onButtonClick(props.idx)
}}>{props.buttonText || '立即购买'}</div>
</div>
)
)
}
export default HomeProductItem
src/pages/Home/components/HomeRuleContent.tsx
......@@ -2,7 +2,7 @@ import React from 'react'
import styles from '@/pages/Home/index.module.scss'
const HomeRuleContent: React.FC = () => {
return (
return (
<div className={styles.rulesOverlayContentInner}>
<h2>活动规则</h2>
<h3>闸北支行一元购，新年钜惠等你来拿</h3>
......@@ -13,14 +13,14 @@ const HomeRuleContent: React.FC = () => {
<h4>活动规则：</h4>
<p>
1.打开掌银，扫描网点厅堂二维码进入活动页面，在网点工作人员的指导下购买新客礼，每人在活动期限内限参与1次活动。
<br />
<br/>
2.同一证件号、同一手机号、同一设备均视为同一客户。
<br />
<br/>
3.成功支付后请出示订单详情页，于网点大堂当场核销礼品。
<br />
<br/>
4.凡参加本次活动者，即视为同意接受本次活动相关规则，活动期间用户不得使用不正当手段破坏活动规则、违背活动公平原则，否则有权取消活动参与资格。
</p>
</div>
)
)
}
export default HomeRuleContent
src/pages/Home/helper/order.ts
import apis from '@/apis'
import { type CreateOrderRequestData } from '@/apis/common'
import { type NavigateFunction } from 'react-router-dom'
import {type CreateOrderRequestData} from '@/apis/common'
import {type NavigateFunction} from 'react-router-dom'
import {Toast} from "@nutui/nutui-react";
class OrderHelper {
/**
/**
* 提交订单：
* 1. 创建订单
* 2. 查询支付地址
......@@ -12,70 +12,70 @@ class OrderHelper {
* 4. 唤起app支付
* @param params CreateOrderRequestData
*/
static async submitOrder(params: CreateOrderRequestData) {
try {
const createOrderRes = await apis.common.createOrder(params);
if (!createOrderRes.data) {
Toast.show('创建订单失败')
return
}
static async submitOrder(params: CreateOrderRequestData) {
try {
const createOrderRes = await apis.common.createOrder(params);
if (!createOrderRes.data) {
Toast.show('创建订单失败')
return
}
const queryPayUrlRes = await apis.common.queryPayUrl({ orderId: createOrderRes.data });
if (!queryPayUrlRes.data) {
Toast.show('支付链接获取失败')
return
}
const queryPayUrlRes = await apis.common.queryPayUrl({orderId: createOrderRes.data});
if (!queryPayUrlRes.data) {
Toast.show('支付链接获取失败')
return
}
const tokenId = new URLSearchParams(new URL(queryPayUrlRes.data).search).get('TOKEN');
const tokenId = new URLSearchParams(new URL(queryPayUrlRes.data).search).get('TOKEN');
if (!tokenId) {
Toast.show('TOKEN 未找到')
return
}
if (!tokenId) {
Toast.show('TOKEN 未找到')
return
}
const queryPayConfigRes = await apis.common.queryPayConfig<Record<'param', Record<string, string>>>();
if (!queryPayConfigRes.data) {
Toast.show('支付配置信息查询失败')
return
}
const queryPayConfigRes = await apis.common.queryPayConfig<Record<'param', Record<string, string>>>();
if (!queryPayConfigRes.data) {
Toast.show('支付配置信息查询失败')
return
}
const data = queryPayConfigRes.data;
data.param.tokenId = tokenId;
const data = queryPayConfigRes.data;
data.param.tokenId = tokenId;
window.AlipayJSBridge.call('startApp', data, function (result: string) {
console.log(result, '支付结果');
});
} catch (error) {
Toast.show('提交订单失败')
window.AlipayJSBridge.call('startApp', data, function (result: string) {
console.log(result, '支付结果');
});
} catch (error) {
Toast.show('提交订单失败')
}
}
}
/**
/**
* 获取用户的订单
*/
static async queryUserOrder(navigate: NavigateFunction) {
try {
const res = await apis.common.queryUserOrder();
if (!res.ok) {
Toast.show('查询用户订单信息失败')
return
}
static async queryUserOrder(navigate: NavigateFunction) {
try {
const res = await apis.common.queryUserOrder();
if (!res.ok) {
Toast.show('查询用户订单信息失败')
return
}
const data = res.data;
if (data?.lotteryOrderId) {
navigate(`/lottery?lotteryOrderId=${data.lotteryOrderId}`, {
replace: true
});
} else if (data?.orderId) {
navigate(`/orderDetail?orderId=${data.orderId}`, {
replace: true
});
}
} catch (error) {
Toast.show('查询用户订单信息失败')
const data = res.data;
if (data?.lotteryOrderId) {
navigate(`/lottery?lotteryOrderId=${data.lotteryOrderId}`, {
replace: true
});
} else if (data?.orderId) {
navigate(`/orderDetail?orderId=${data.orderId}`, {
replace: true
});
}
} catch (error) {
Toast.show('查询用户订单信息失败')
}
}
}
}
......
src/pages/Home/index.tsx
import React, { useEffect, useState } from 'react'
import React, {useEffect, useState} from 'react'
import styles from './index.module.scss'
import { useNavigate, useSearchParams } from 'react-router-dom'
import {useNavigate, useSearchParams} from 'react-router-dom'
import HomeBg from '@/pages/Home/components/HomeBg'
import HomeContent from '@/pages/Home/components/HomeContent'
import AuthUtil from '@/utils/auth'
......@@ -30,8 +30,8 @@ const Home: React.FC = () => {
<div className={styles.wrap}>
{isAuthed && (
<>
<HomeBg />
<HomeContent />
<HomeBg/>
<HomeContent/>
</>
)}
</div>
......
src/pages/Lottery/index.tsx
......@@ -7,7 +7,7 @@ import lotteryRuleTitleBgImg from '@/assets/images/lotteryRuleTitleBg.png'
import myPrizeHighLightImg from '@/assets/images/myPrizeHighLight.png'
import myPrizeUnclaimedImg from '@/assets/images/myPrizeUnclaimed.png'
import winningLotteryImg from '@/assets/images/winningLottery.png'
import { Popup, Overlay } from '@nutui/nutui-react';
import {Popup, Overlay} from '@nutui/nutui-react';
const Lottery: React.FC = () => {
const [showMyPrizePopup, setShowMyPrizePopup] = useState(false);
......@@ -42,7 +42,7 @@ const Lottery: React.FC = () => {
})
function onClickLotteryButton() {
console.log(lotteryConfig,'lotteryConfig')
console.log(lotteryConfig, 'lotteryConfig')
setLotteryConfig(prevConfig => {
// 如果正在运行，则不进行任何操作
if (prevConfig.running) return prevConfig;
......@@ -68,7 +68,7 @@ const Lottery: React.FC = () => {
// 在动画结束后解锁
setTimeout(() => {
setLotteryConfig(prev => ({ ...prev, running: false }));
setLotteryConfig(prev => ({...prev, running: false}));
setVisible(true)
}, newConfig.duration);
......@@ -81,34 +81,38 @@ const Lottery: React.FC = () => {
<div className={styles.lotteryWrap}>
<img className={styles.lotteryWrapBgImg} src={lotteryWrapBgImg} alt=""/>
<img style={lotteryStyle} className={styles.lotteryPrizeBgImg} src={lotteryPrizeImg} alt=""/>
<img className={styles.lotteryButtonBgImg} onClick={onClickLotteryButton} src={lotteryButtonBgImg} alt=""/>
<img className={styles.lotteryButtonBgImg} onClick={onClickLotteryButton} src={lotteryButtonBgImg}
alt=""/>
<div className={styles.lotteryMyPrizeButton} onClick={() => setShowMyPrizePopup(true)}>我的奖品</div>
</div>
<img className={styles.lotteryRuleTitleBg} src={lotteryRuleTitleBgImg} alt=""/>
<div className={styles.lotteryRuleContent}>
<div className={styles.lotteryRuleItem}><span></span> 该活动仅供掌银新客选择（线下礼品、线上微信立减金抽奖二选一），</div>
<div className={styles.lotteryRuleItem}><span></span> 该活动仅供掌银新客选择（线下礼品、线上微信立减金抽奖二选一），
</div>
<div className={styles.lotteryRuleItem}><span></span> 每季度每个客户号仅可参与其中一项。</div>
</div>
{/*我的奖品*/}
<Popup
closeable
visible={ showMyPrizePopup }
style={{ height: '454px' }}
visible={showMyPrizePopup}
style={{height: '454px'}}
position="bottom"
round
onClose={ () => { setShowMyPrizePopup(false) } }
onClose={() => {
setShowMyPrizePopup(false)
}}
>
<div className={styles.myPrizePopupWrap}>
<div className={styles.myPrizePopupTitle}>我的奖品</div>
<div className={styles.myPrizePopupContent}>
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem />
<MyPrizeItem/>
<MyPrizeItem/>
<MyPrizeItem/>
<MyPrizeItem/>
<MyPrizeItem/>
<MyPrizeItem/>
<MyPrizeItem/>
</div>
</div>
</Popup>
......@@ -129,7 +133,7 @@ const Lottery: React.FC = () => {
</Overlay>
{/*中奖弹窗*/}
</div>
)
)
}
const MyPrizeItem: React.FC = () => {
......
src/pages/OrderDetail/index.tsx
import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import React, {useEffect, useState} from 'react'
import {useSearchParams} from 'react-router-dom'
import apis from '@/apis'
import { type QueryOrderInfoResponse } from '@/apis/common'
import {type QueryOrderInfoResponse} from '@/apis/common'
import styles from './index.module.scss'
import { Divider, Skeleton } from '@nutui/nutui-react'
import {Divider, Skeleton} from '@nutui/nutui-react'
const OrderDetail: React.FC = () => {
const [params] = useSearchParams()
const [orderInfo, setOrderInfo] = useState<QueryOrderInfoResponse>()
const [checked, setChecked] = useState(false)
const [params] = useSearchParams()
const [orderInfo, setOrderInfo] = useState<QueryOrderInfoResponse>()
const [checked, setChecked] = useState(false)
useEffect(() => {
console.log(params.get('orderId'))
apis.common.queryOrderInfo(params.get('orderId') || '').then(res => {
console.log(res.data)
if (res.ok) {
setOrderInfo(res.data)
setChecked(true)
}
})
}, [])
useEffect(() => {
console.log(params.get('orderId'))
apis.common.queryOrderInfo(params.get('orderId') || '').then(res => {
console.log(res.data)
if (res.ok) {
setOrderInfo(res.data)
setChecked(true)
}
})
}, [])
return (
return (
<div className={styles.wrap}>
<div className={styles.contentWrap}>
<Skeleton rows={2} title animated visible={checked}>
......@@ -32,7 +32,8 @@ const OrderDetail: React.FC = () => {
</div>
<div className={styles.contentItem}>
<span className={styles.contentItemLabel}>支付金额：</span>
<span className={styles.contentItemAmount}>￥<span>{orderInfo?.orderDetail.orderAmount}</span></span>
<span
className={styles.contentItemAmount}>￥<span>{orderInfo?.orderDetail.orderAmount}</span></span>
</div>
</Skeleton>
</div>
......@@ -47,7 +48,7 @@ const OrderDetail: React.FC = () => {
<span className={styles.contentItemLabel}>所属网点：</span>
<span className={styles.contentItemValue}>{orderInfo?.orderDetail.branchName}</span>
</div>
<Divider />
<Divider/>
<div className={styles.contentItem}>
<span className={styles.contentItemLabel}>支付时间：</span>
<span className={styles.contentItemValue}>{orderInfo?.orderDetail.payTime}</span>
......@@ -59,7 +60,7 @@ const OrderDetail: React.FC = () => {
</Skeleton>
</div>
</div>
)
)
}
export default OrderDetail
src/utils/auth.ts
......@@ -2,38 +2,38 @@ import apis from '@/apis'
import LocalStorageUtil from '@/utils/local'
class AuthUtil {
static async auth (params: URLSearchParams): Promise<boolean> {
return await new Promise((resolve) => {
if (process.env.REACT_APP_ENV === 'development') {
LocalStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80')
resolve(true)
} else {
const token = LocalStorageUtil.getItem('__TOKEN__')
if (!token) {
if (!params.get('code')) {
apis.common.getLoginUrl().then(res => {
if (res.ok) {
window.location.replace(res.data)
}
})
} else {
apis.common.login({
code: params.get('code') || '',
state: params.get('state') || '',
amp: params.get('amp') || ''
}).then(res => {
if (res.ok) {
LocalStorageUtil.setItem('__TOKEN__', res.data.token)
}
resolve(true)
})
}
} else {
resolve(true)
}
}
})
}
static async auth(params: URLSearchParams): Promise<boolean> {
return await new Promise((resolve) => {
if (process.env.REACT_APP_ENV === 'development') {
LocalStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80')
resolve(true)
} else {
const token = LocalStorageUtil.getItem('__TOKEN__')
if (!token) {
if (!params.get('code')) {
apis.common.getLoginUrl().then(res => {
if (res.ok) {
window.location.replace(res.data)
}
})
} else {
apis.common.login({
code: params.get('code') || '',
state: params.get('state') || '',
amp: params.get('amp') || ''
}).then(res => {
if (res.ok) {
LocalStorageUtil.setItem('__TOKEN__', res.data.token)
}
resolve(true)
})
}
} else {
resolve(true)
}
}
})
}
}
export default AuthUtil
src/utils/axios.ts
import axios, { type AxiosInstance, type InternalAxiosRequestConfig, type AxiosResponse, type AxiosError } from 'axios'
import axios, {type AxiosInstance, type InternalAxiosRequestConfig, type AxiosResponse, type AxiosError} from 'axios'
import LocalStorageUtil from '@/utils/local'
import { Toast } from '@nutui/nutui-react'
import {Toast} from '@nutui/nutui-react'
import {LOGIN_EXPIRED_CODE} from "@/constants";
const axiosInstance: AxiosInstance = axios.create({
......
src/utils/local.ts
......@@ -4,7 +4,7 @@ class LocalStorageUtil {
* @param key 键名
* @param value 值，将被自动转换为字符串
*/
static setItem <T>(key: string, value: T): void {
static setItem<T>(key: string, value: T): void {
const stringValue = JSON.stringify(value)
localStorage.setItem(key, stringValue)
}
......@@ -31,7 +31,7 @@ class LocalStorageUtil {
* 从localStorage中删除特定数据
* @param key 键名
*/
static removeItem (key: string): void {
static removeItem(key: string): void {
localStorage.removeItem(key)
}
......@@ -40,14 +40,14 @@ class LocalStorageUtil {
* @param key 键名
* @param value 新的值，将被自动转换为字符串
*/
static updateItem <T>(key: string, value: T): void {
static updateItem<T>(key: string, value: T): void {
this.setItem(key, value)
}
/**
* 清除所有localStorage数据
*/
static clear (): void {
static clear(): void {
localStorage.clear()
}
}
......
src/utils/session.ts
class SessionStorageUtil {
/**
/**
* 存储数据到sessionStorage
* @param key 键名
* @param value 值，将被自动转换为字符串
*/
static setItem <T>(key: string, value: T): void {
const stringValue = JSON.stringify(value)
sessionStorage.setItem(key, stringValue)
}
static setItem<T>(key: string, value: T): void {
const stringValue = JSON.stringify(value)
sessionStorage.setItem(key, stringValue)
}
/**
/**
* 从sessionStorage获取数据
* @param key 键名
* @returns 返回解析后的值，如果不存在则返回null
*/
static getItem<T>(key: string): T | null {
const item = sessionStorage.getItem(key)
if (item === null) {
return null
}
try {
return JSON.parse(item) as T
} catch (e) {
console.error('Error parsing sessionStorage item', e)
return null
static getItem<T>(key: string): T | null {
const item = sessionStorage.getItem(key)
if (item === null) {
return null
}
try {
return JSON.parse(item) as T
} catch (e) {
console.error('Error parsing sessionStorage item', e)
return null
}
}
}
/**
/**
* 从sessionStorage中删除特定数据
* @param key 键名
*/
static removeItem (key: string): void {
sessionStorage.removeItem(key)
}
static removeItem(key: string): void {
sessionStorage.removeItem(key)
}
/**
/**
* 更新sessionStorage中的数据
* @param key 键名
* @param value 新的值，将被自动转换为字符串
*/
static updateItem <T>(key: string, value: T): void {
this.setItem(key, value)
}
static updateItem<T>(key: string, value: T): void {
this.setItem(key, value)
}
/**
/**
* 清除所有sessionStorage数据
*/
static clear (): void {
sessionStorage.clear()
}
static clear(): void {
sessionStorage.clear()
}
}
export default SessionStorageUtil
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