Skip to content

E
eppfax-h5-react
Commit 4933c6d2 by HoMeTown
Options

feat: eslint config

parent 5b9c2099
Showing with 251 additions and 195 deletions
.eslintignore 0 → 100644
node_modules
dist
\ No newline at end of file
.eslintrc.js 0 → 100644
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended'
], //使用推荐的React代码检测规范
plugins: ['@typescript-eslint'],
env:{
browser: true,
node: true,
},
settings: { //自动发现React的版本，从而进行规范react代码
"react": {
"pragma": "React",
"version": "detect"
}
},
parserOptions: { //指定ESLint可以解析JSX语法
"ecmaVersion": 2019,
"sourceType": 'module',
"ecmaFeatures":{
jsx:true
}
},
rules: {
// 自定义的React规范
"react/react-in-jsx-scope": "off"
}
}
\ No newline at end of file
README.md
...@@ -37,3 +37,8 @@ deploy test ...@@ -37,3 +37,8 @@ deploy test
```bash ```bash
pnpm run deploy:test pnpm run deploy:test
``` ```
lint code
```bash
pnpm lint
```
\ No newline at end of file
package.json
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"build:dev": "rsbuild build --config rsbuild/build/build.dev.ts", "build:dev": "rsbuild build --config rsbuild/build/build.dev.ts",
"build:prod": "rsbuild build --config rsbuild/build/build.prod.ts", "build:prod": "rsbuild build --config rsbuild/build/build.prod.ts",
"deploy:test": "pnpm build:test && sh ./scripts/deploy.test.sh", "deploy:test": "pnpm build:test && sh ./scripts/deploy.test.sh",
"lint": "eslint src --fix --ext .ts,.tsx",
"build": "rsbuild build", "build": "rsbuild build",
"preview": "rsbuild preview" "preview": "rsbuild preview"
}, },
...@@ -28,7 +29,16 @@ ...@@ -28,7 +29,16 @@
"@types/lodash": "^4.14.202", "@types/lodash": "^4.14.202",
"@types/react": "^18", "@types/react": "^18",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"@typescript-eslint/eslint-plugin": "^6.13.1",
"@typescript-eslint/parser": "^6.13.1",
"eslint": "^8.54.0",
"eslint-plugin-react": "^7.33.2",
"postcss-px-to-viewport": "^1.1.1", "postcss-px-to-viewport": "^1.1.1",
"typescript": "^5.3.0" "typescript": "^5.3.2"
},
"husky": {
"hooks": {
"pre-commit": "pnpm lint"
}
} }
} }
rsbuild/build/build.base.ts
import { type RsbuildConfig as BaseRsbuildConfig } from '@rsbuild/shared'; import { type RsbuildConfig as BaseRsbuildConfig } from '@rsbuild/shared';
import { pluginReact } from '@rsbuild/plugin-react'; import { pluginReact } from '@rsbuild/plugin-react';
import { pluginImageCompress } from '@rsbuild/plugin-image-compress';
import { CSS_MODULES_LOCAL_IDENT_NAME, HTML_TEMPLATE_CONFIG } from '../config' import { CSS_MODULES_LOCAL_IDENT_NAME, HTML_TEMPLATE_CONFIG } from '../config'
import { postcssPxToViewportCreator } from '../plugins' import { postcssPxToViewportCreator } from '../plugins'
......
rsbuild/build/build.dev.ts
...@@ -6,7 +6,7 @@ import {ENV_CONFIG, ENV_DEV} from "../config"; ...@@ -6,7 +6,7 @@ import {ENV_CONFIG, ENV_DEV} from "../config";
function defineConfigCreator(): BaseRsbuildConfig { function defineConfigCreator(): BaseRsbuildConfig {
const devEnvConfig = ENV_CONFIG[ENV_DEV]; const devEnvConfig = ENV_CONFIG[ENV_DEV];
for (let prodEnvConfigKey in devEnvConfig) { for (const prodEnvConfigKey in devEnvConfig) {
process.env[prodEnvConfigKey] = devEnvConfig[prodEnvConfigKey as keyof typeof devEnvConfig] process.env[prodEnvConfigKey] = devEnvConfig[prodEnvConfigKey as keyof typeof devEnvConfig]
} }
......
rsbuild/build/build.prod.ts
...@@ -6,7 +6,7 @@ import {ENV_CONFIG, ENV_PROD} from "../config"; ...@@ -6,7 +6,7 @@ import {ENV_CONFIG, ENV_PROD} from "../config";
function defineConfigCreator(): BaseRsbuildConfig { function defineConfigCreator(): BaseRsbuildConfig {
const prodEnvConfig = ENV_CONFIG[ENV_PROD]; const prodEnvConfig = ENV_CONFIG[ENV_PROD];
for (let prodEnvConfigKey in prodEnvConfig) { for (const prodEnvConfigKey in prodEnvConfig) {
process.env[prodEnvConfigKey] = prodEnvConfig[prodEnvConfigKey as keyof typeof prodEnvConfig] process.env[prodEnvConfigKey] = prodEnvConfig[prodEnvConfigKey as keyof typeof prodEnvConfig]
} }
......
rsbuild/build/build.test.ts
...@@ -6,7 +6,7 @@ import {ENV_CONFIG, ENV_TEST} from "../config"; ...@@ -6,7 +6,7 @@ import {ENV_CONFIG, ENV_TEST} from "../config";
function defineConfigCreator(): BaseRsbuildConfig { function defineConfigCreator(): BaseRsbuildConfig {
const testEnvConfig = ENV_CONFIG[ENV_TEST]; const testEnvConfig = ENV_CONFIG[ENV_TEST];
for (let prodEnvConfigKey in testEnvConfig) { for (const prodEnvConfigKey in testEnvConfig) {
process.env[prodEnvConfigKey] = testEnvConfig[prodEnvConfigKey as keyof typeof testEnvConfig] process.env[prodEnvConfigKey] = testEnvConfig[prodEnvConfigKey as keyof typeof testEnvConfig]
} }
......
src/App.tsx
import styles from './App.module.scss' import styles from './App.module.scss'
import testImg from '@/assets/images/notGetStatus.png' import testImg from '@/assets/images/notGetStatus.png'
import {useNavigate} from "react-router-dom"; import { useNavigate } from 'react-router-dom'
const App = () => { const App = () => {
const navigate = useNavigate() const navigate = useNavigate()
function handleClick() { const handleClick = () => {
navigate("/testdemo?id=1234", { navigate('/testdemo?id=1234', {
state: { state: {
id: 1234567 id: 1234567
} }
...@@ -18,7 +18,7 @@ const App = () => { ...@@ -18,7 +18,7 @@ const App = () => {
<img className={styles.testBoxImg} src={testImg} alt=""/> <img className={styles.testBoxImg} src={testImg} alt=""/>
</div> </div>
</div> </div>
); )
}; }
export default App; export default App
src/apis/common.ts
import axiosInstance from '@/utils/axios' import axiosInstance from '@/utils/axios'
/** /**
* 获取登录地址 * 获取登录地址
*/ */
export const getLoginUrl = async (): Promise<BackendResponse<any>> => { export const getLoginUrl = async (): Promise<BackendResponse<string>> => {
const response = await axiosInstance.get<BackendResponse<LoginResponseData>>('/api/login/get_login_url'); try {
const response = await axiosInstance.get<BackendResponse<string>>('/api/login/get_login_url')
return response.data return response.data
} catch (error) {
throw error
}
} }
interface LoginRequestData { interface LoginRequestData {
code: string; code: string
state: string; state: string
amp: string; amp: string
} }
interface LoginResponseData { interface LoginResponseData {
token: string; token: string
} }
/** /**
...@@ -26,56 +27,51 @@ interface LoginResponseData { ...@@ -26,56 +27,51 @@ interface LoginResponseData {
* @param requestData * @param requestData
*/ */
export const login = async (requestData: LoginRequestData): Promise<BackendResponse<LoginResponseData>> => { export const login = async (requestData: LoginRequestData): Promise<BackendResponse<LoginResponseData>> => {
const response = await axiosInstance.post<BackendResponse<LoginResponseData>>('/api/login/authorize', requestData); try {
return response.data; const response = await axiosInstance.post<BackendResponse<LoginResponseData>>('/api/login/authorize', requestData)
return response.data
} catch (error) {
throw error
}
} }
interface QueryUserOrderResponse { interface QueryUserOrderResponse {
orderId: string; orderId: string
lotteryOrderId: string; lotteryOrderId: string
} }
export const queryUserOrder = async (): Promise<BackendResponse<QueryUserOrderResponse>> => { export const queryUserOrder = async (): Promise<BackendResponse<QueryUserOrderResponse>> => {
try {
const response = await axiosInstance.get<BackendResponse<QueryUserOrderResponse>>('/api/order/getUserOrder') const response = await axiosInstance.get<BackendResponse<QueryUserOrderResponse>>('/api/order/getUserOrder')
return response.data return response.data
} } catch (error) {
throw error
}
/**
* 查询产品列表
*/
export const queryProductList = async (): Promise<BackendResponse<any>> => {
const response = await axiosInstance.get<BackendResponse<any>>('/api/product/query_list');
return response.data
}
/**
* 获取首页配置信息
*/
export const queryHomeConfig = async (): Promise<BackendResponse<any>> => {
const response = await axiosInstance.get<BackendResponse<any>>('/api/common/config/query_home_config');
return response.data
} }
export interface QueryBranchListResponseData { export interface QueryBranchListResponseData {
branchCode: string; branchCode: string
branchName: string; branchName: string
showOrder: 1; showOrder: 1
} }
/** /**
* 获取网点列表 * 获取网点列表
*/ */
export const queryBranchList = async (): Promise<BackendResponse<QueryBranchListResponseData[]>> => { export const queryBranchList = async (): Promise<BackendResponse<QueryBranchListResponseData[]>> => {
const response = await axiosInstance.get<BackendResponse<QueryBranchListResponseData[]>>('/api/branch/query_list'); try {
const response = await axiosInstance.get<BackendResponse<QueryBranchListResponseData[]>>('/api/branch/query_list')
return response.data return response.data
} catch (error) {
throw error
}
} }
export interface CreateOrderRequestData { export interface CreateOrderRequestData {
branchName: string; branchName: string
branchCode: string; branchCode: string
productCode: string; productCode: string
number: number; number: number
} }
/** /**
...@@ -83,8 +79,12 @@ export interface CreateOrderRequestData { ...@@ -83,8 +79,12 @@ export interface CreateOrderRequestData {
* @param requestData * @param requestData
*/ */
export const createOrder = async (requestData: CreateOrderRequestData): Promise<BackendResponse<string>> => { export const createOrder = async (requestData: CreateOrderRequestData): Promise<BackendResponse<string>> => {
const response = await axiosInstance.post<BackendResponse<string>>('/api/order/create_order', requestData); try {
const response = await axiosInstance.post<BackendResponse<string>>('/api/order/create_order', requestData)
return response.data return response.data
}catch (error) {
throw error;
}
} }
interface GetPayUrlRequestData { interface GetPayUrlRequestData {
...@@ -96,34 +96,43 @@ interface GetPayUrlRequestData { ...@@ -96,34 +96,43 @@ interface GetPayUrlRequestData {
* @param requestData * @param requestData
*/ */
export const queryPayUrl = async (requestData: GetPayUrlRequestData): Promise<BackendResponse<string>> => { export const queryPayUrl = async (requestData: GetPayUrlRequestData): Promise<BackendResponse<string>> => {
const response = await axiosInstance.post<BackendResponse<string>>('/api/pay', requestData); try {
const response = await axiosInstance.post<BackendResponse<string>>('/api/pay', requestData)
return response.data return response.data
} catch (error) {
throw error;
}
} }
/** /**
* 查询支付配置 * 查询支付配置
*/ */
export const queryPayConfig = async (): Promise<BackendResponse<any>> => { export const queryPayConfig = async <T>(): Promise<BackendResponse<T>> => {
const response = await axiosInstance.get<BackendResponse<any>>('/api/pay/pay_config'); try {
return response.data const response = await axiosInstance.get<BackendResponse<T>>('/api/pay/pay_config');
return response.data;
} catch (error) {
throw error;
}
} }
interface QueryOrderInfoResponseOrderDetail { interface QueryOrderInfoResponseOrderDetail {
branchCode: string; branchCode: string
branchName: string; branchName: string
mobile: string; mobile: string
orderAmount: string; orderAmount: string
payStatus: string; payStatus: string
payTime: string; payTime: string
} }
interface QueryOrderInfoResponseProductDetailInfo { interface QueryOrderInfoResponseProductDetailInfo {
productCode: string; productCode: string
productName: string; productName: string
} }
export interface QueryOrderInfoResponse { export interface QueryOrderInfoResponse {
orderDetail: QueryOrderInfoResponseOrderDetail; orderDetail: QueryOrderInfoResponseOrderDetail
productDetailInfo: QueryOrderInfoResponseProductDetailInfo productDetailInfo: QueryOrderInfoResponseProductDetailInfo
} }
...@@ -131,7 +140,11 @@ export interface QueryOrderInfoResponse { ...@@ -131,7 +140,11 @@ export interface QueryOrderInfoResponse {
* 查询订单详情 * 查询订单详情
* @param orderId * @param orderId
*/ */
export const queryOrderInfo = async (orderId: string):Promise<BackendResponse<any>> => { export const queryOrderInfo = async (orderId: string): Promise<BackendResponse<QueryOrderInfoResponse>> => {
const response = await axiosInstance.get<BackendResponse<any>>(`/api/order/detail/${orderId}`) try {
const response = await axiosInstance.get<BackendResponse<QueryOrderInfoResponse>>(`/api/order/detail/${orderId}`)
return response.data return response.data
} catch (error) {
throw error
}
} }
src/env.d.ts
/// <reference types="@rsbuild/core/types" /> /// <reference types="@rsbuild/core/types" />
interface Window { interface Window <T>{
AlipayJSBridge: Record<string, any> AlipayJSBridge: Record<string, T>
} }
src/index.tsx
import React from 'react'; import React from 'react'
import ReactDOM from 'react-dom/client'; 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 Home from '@/pages/Home'
import Lottery from "@/pages/Lottery"; import Lottery from '@/pages/Lottery'
import OrderDetail from "@/pages/OrderDetail"; import OrderDetail from '@/pages/OrderDetail'
import './styles/reset.css'; import './styles/reset.css'
import './styles/nut-var.css'; import './styles/nut-var.css'
import '@nutui/nutui-react/dist/style.css' import '@nutui/nutui-react/dist/style.css'
const root = ReactDOM.createRoot(document.getElementById('root')!); const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<BrowserRouter> <BrowserRouter>
...@@ -18,5 +18,5 @@ root.render( ...@@ -18,5 +18,5 @@ root.render(
<Route path = '/orderDetail' element={<OrderDetail />}></Route> <Route path = '/orderDetail' element={<OrderDetail />}></Route>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
</React.StrictMode>, </React.StrictMode>
); )
src/pages/Home/components/HomeBg.tsx
import React from "react"; import React from 'react'
import styles from "@/pages/Home/index.module.scss"; import styles from '@/pages/Home/index.module.scss'
import homeTopBannerImg from "@/assets/images/homeTopBanner.png"; import homeTopBannerImg from '@/assets/images/homeTopBanner.png'
import homeBotBannerImg from "@/assets/images/homeBotBanner.png"; import homeBotBannerImg from '@/assets/images/homeBotBanner.png'
const HomeBg: React.FC = () => { const HomeBg: React.FC = () => {
return ( return (
......
src/pages/Home/components/HomeContent.tsx
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from 'react'
import homeProductBanner1Img from "@/assets/images/homeProductBanner1.png"; import homeProductBanner1Img from '@/assets/images/homeProductBanner1.png'
import homeProductBanner2Img from "@/assets/images/homeProductBanner2.png"; import homeProductBanner2Img from '@/assets/images/homeProductBanner2.png'
import styles from "@/pages/Home/index.module.scss"; import styles from '@/pages/Home/index.module.scss'
import HomeProductItem from "@/pages/Home/components/HomeProductItem"; import HomeProductItem from '@/pages/Home/components/HomeProductItem'
import { Overlay, Popup, Toast } from "@nutui/nutui-react"; import { Overlay, Popup, Toast } from '@nutui/nutui-react'
import homeRulesOverlayCloseImg from "@/assets/images/homeRulesOverlayClose.png"; import homeRulesOverlayCloseImg from '@/assets/images/homeRulesOverlayClose.png'
import HomeRuleContent from "@/pages/Home/components/HomeRuleContent"; import HomeRuleContent from '@/pages/Home/components/HomeRuleContent'
import apis from "@/apis"; import apis from '@/apis'
import {type QueryBranchListResponseData} from '@/apis/common' import { type QueryBranchListResponseData } from '@/apis/common'
import OrderHelper from "@/pages/Home/helper/order"; import OrderHelper from '@/pages/Home/helper/order'
const HomeContent: React.FC = () => { const HomeContent: React.FC = () => {
const [productList] = useState([ const [productList] = useState([
{ bannerImg: homeProductBanner1Img, title: '厅堂实物 1元购', buttonTextColor: '#F41E71', productCode: '4'}, { bannerImg: homeProductBanner1Img, title: '厅堂实物 1元购', buttonTextColor: '#F41E71', productCode: '4' },
{ bannerImg: homeProductBanner2Img, title: '微信立减金等你来拿', buttonTextColor: '#1FA189', productCode: '5'}, { bannerImg: homeProductBanner2Img, title: '微信立减金等你来拿', buttonTextColor: '#1FA189', productCode: '5' }
]) ])
const [branchList, setBranchList] = useState<QueryBranchListResponseData[]>([]) const [branchList, setBranchList] = useState<QueryBranchListResponseData[]>([])
...@@ -28,18 +28,17 @@ const HomeContent: React.FC = () => { ...@@ -28,18 +28,17 @@ const HomeContent: React.FC = () => {
const [toasted, setToasted] = useState(false) const [toasted, setToasted] = useState(false)
function handleClickProduct(idx: number) { function handleClickProduct (idx: number) {
if(toasted) { if (toasted) {
setActiveProductIdx(idx) setActiveProductIdx(idx)
setShowBranchListPopup(true) setShowBranchListPopup(true)
} else { } else {
Toast.show('请在网点工作人员指导下购买，每人仅有一次活动参与机会'); Toast.show('请在网点工作人员指导下购买，每人仅有一次活动参与机会')
setToasted(true) setToasted(true)
} }
} }
function handleConfirm() { function handleConfirm () {
OrderHelper.submitOrder({ OrderHelper.submitOrder({
branchName: branchList[activeBranchIdx].branchName, branchName: branchList[activeBranchIdx].branchName,
branchCode: branchList[activeBranchIdx].branchCode, branchCode: branchList[activeBranchIdx].branchCode,
...@@ -50,7 +49,7 @@ const HomeContent: React.FC = () => { ...@@ -50,7 +49,7 @@ const HomeContent: React.FC = () => {
useEffect(() => { useEffect(() => {
apis.common.queryBranchList().then(res => { apis.common.queryBranchList().then(res => {
if(res.ok) { if (res.ok) {
setBranchList(res.data) setBranchList(res.data)
} }
}) })
...@@ -72,7 +71,7 @@ const HomeContent: React.FC = () => { ...@@ -72,7 +71,7 @@ const HomeContent: React.FC = () => {
})} })}
<div className={styles.productTips}>活动最终解释权归本行所有</div> <div className={styles.productTips}>活动最终解释权归本行所有</div>
{/*网点列表*/} {/* 网点列表 */}
<Popup <Popup
visible={ showBranchListPopup } visible={ showBranchListPopup }
position="bottom" position="bottom"
...@@ -82,8 +81,8 @@ const HomeContent: React.FC = () => { ...@@ -82,8 +81,8 @@ const HomeContent: React.FC = () => {
<div className={styles.branchListPopupWrap}> <div className={styles.branchListPopupWrap}>
<div className={styles.branchListPopupHeader}> <div className={styles.branchListPopupHeader}>
<div className={styles.branchListPopupHeaderCancel} onClick={() => { <div className={styles.branchListPopupHeaderCancel} onClick={() => {
setShowBranchListPopup(false); setShowBranchListPopup(false)
setActiveBranchIdx(-1); setActiveBranchIdx(-1)
}}>取消</div> }}>取消</div>
<div className={styles.branchListPopupHeaderTitle}>选择营业网点</div> <div className={styles.branchListPopupHeaderTitle}>选择营业网点</div>
<div className={styles.branchListPopupHeaderConfirm} onClick={handleConfirm}>确定</div> <div className={styles.branchListPopupHeaderConfirm} onClick={handleConfirm}>确定</div>
...@@ -93,7 +92,7 @@ const HomeContent: React.FC = () => { ...@@ -93,7 +92,7 @@ const HomeContent: React.FC = () => {
return ( return (
<div <div
className={styles.branchListItem} className={styles.branchListItem}
onClick={() => setActiveBranchIdx(index)} onClick={() => { setActiveBranchIdx(index) }}
key={item.branchCode} key={item.branchCode}
style={{ style={{
color: activeBranchIdx === index ? '#e64545' : '', color: activeBranchIdx === index ? '#e64545' : '',
...@@ -107,24 +106,23 @@ const HomeContent: React.FC = () => { ...@@ -107,24 +106,23 @@ const HomeContent: React.FC = () => {
</div> </div>
</div> </div>
</Popup> </Popup>
{/*网点列表*/} {/* 网点列表 */}
{/*活动规则*/} {/* 活动规则 */}
<div className={styles.contentRulesButton} onClick={() => setRulesOverlayVisible(true)}>活动规则</div> <div className={styles.contentRulesButton} onClick={() => { setRulesOverlayVisible(true) }}>活动规则</div>
<Overlay <Overlay
visible={rulesOverlayVisible} visible={rulesOverlayVisible}
closeOnOverlayClick={false} closeOnOverlayClick={false}
onClick={() => setRulesOverlayVisible(false)} onClick={() => { setRulesOverlayVisible(false) }}
> >
<div className={styles.rulesOverlayWrap}> <div className={styles.rulesOverlayWrap}>
<div className={styles.rulesOverlayContent}> <div className={styles.rulesOverlayContent}>
<img className={styles.rulesOverlayCloseImg} src={homeRulesOverlayCloseImg} onClick={() => setRulesOverlayVisible(false)} alt=""/> <img className={styles.rulesOverlayCloseImg} src={homeRulesOverlayCloseImg} onClick={() => { setRulesOverlayVisible(false) }} alt=""/>
<HomeRuleContent /> <HomeRuleContent />
</div> </div>
</div> </div>
</Overlay> </Overlay>
{/*活动规则*/} {/* 活动规则 */}
</div> </div>
) )
......
src/pages/Home/components/HomeProductItem.tsx
import React from "react"; import React from 'react'
import styles from "@/pages/Home/index.module.scss"; import styles from '@/pages/Home/index.module.scss'
interface HomeProductItemProps { interface HomeProductItemProps {
/** /**
* 背景图 * 背景图
*/ */
bannerImg: string; bannerImg: string
/** /**
* 标题 * 标题
*/ */
title: string; title: string
/** /**
* 按钮文字 * 按钮文字
*/ */
buttonText?: string; buttonText?: string
/** /**
* 按钮文字颜色 * 按钮文字颜色
*/ */
buttonTextColor: string; buttonTextColor: string
/** /**
* 点击 * 点击
*/ */
...@@ -34,7 +34,7 @@ const HomeProductItem: React.FC<HomeProductItemProps> = (props) => { ...@@ -34,7 +34,7 @@ const HomeProductItem: React.FC<HomeProductItemProps> = (props) => {
<div className={styles.productItem}> <div className={styles.productItem}>
<img className={styles.productItemBg} src={props.bannerImg} alt={props.title}/> <img className={styles.productItemBg} src={props.bannerImg} alt={props.title}/>
<h3 className={styles.productItemTitle}>{ props.title }</h3> <h3 className={styles.productItemTitle}>{ props.title }</h3>
<div className={styles.productItemButton} style={buttonStyle} onClick={() => props.onButtonClick(props.idx)}>{ props.buttonText || '立即购买' }</div> <div className={styles.productItemButton} style={buttonStyle} onClick={() => { props.onButtonClick(props.idx) }}>{ props.buttonText || '立即购买' }</div>
</div> </div>
) )
} }
......
src/pages/Home/components/HomeRuleContent.tsx
import React from "react"; import React from 'react'
import styles from "@/pages/Home/index.module.scss"; import styles from '@/pages/Home/index.module.scss'
const HomeRuleContent: React.FC = () => { const HomeRuleContent: React.FC = () => {
return ( return (
......
src/pages/Home/helper/order.ts
import apis from "@/apis"; import apis from '@/apis'
import {type CreateOrderRequestData, queryUserOrder} from '@/apis/common' import { type CreateOrderRequestData } from '@/apis/common'
import SessionStorageUtil from "@/utils/session"; import { type NavigateFunction } from 'react-router-dom'
import { type NavigateFunction } from "react-router-dom";
class OrderHelper { class OrderHelper {
/** /**
...@@ -12,30 +11,30 @@ class OrderHelper { ...@@ -12,30 +11,30 @@ class OrderHelper {
* 4. 唤起app支付 * 4. 唤起app支付
* @param params CreateOrderRequestData * @param params CreateOrderRequestData
*/ */
static async submitOrder(params: CreateOrderRequestData) { static async submitOrder (params: CreateOrderRequestData) {
const createOrderRes = await apis.common.createOrder(params) const createOrderRes = await apis.common.createOrder(params)
const queryPayUrlRes = await apis.common.queryPayUrl({orderId: createOrderRes.data}) const queryPayUrlRes = await apis.common.queryPayUrl({ orderId: createOrderRes.data })
const tokenId = queryPayUrlRes.data.split('=')[1] const tokenId = queryPayUrlRes.data.split('=')[1]
const queryPayConfigRes = await apis.common.queryPayConfig() const queryPayConfigRes = await apis.common.queryPayConfig<Record<'param', Record<string, string>>>()
const data = queryPayConfigRes.data const data = queryPayConfigRes.data
data.param.tokenId = tokenId data.param.tokenId = tokenId
window.AlipayJSBridge.call("startApp", data, function (result: string) { window.AlipayJSBridge.call('startApp', data, function (result: string) {
console.log(result, "支付结果"); console.log(result, '支付结果')
}); })
} }
/** /**
* 获取用户的订单 * 获取用户的订单
*/ */
static async queryUserOrder(navigate: NavigateFunction) { static async queryUserOrder (navigate: NavigateFunction) {
const res = await apis.common.queryUserOrder() const res = await apis.common.queryUserOrder()
if(res.ok) { if (res.ok) {
if(res.data?.lotteryOrderId) { if (res.data?.lotteryOrderId) {
navigate(`/lottery?lotteryOrderId=${res.data.lotteryOrderId}`, { navigate(`/lottery?lotteryOrderId=${res.data.lotteryOrderId}`, {
replace: true replace: true
}) })
} }
if(res.data?.orderId) { if (res.data?.orderId) {
navigate(`/orderDetail?orderId=${res.data.orderId}`, { navigate(`/orderDetail?orderId=${res.data.orderId}`, {
replace: true replace: true
}) })
......
src/pages/Home/index.tsx
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from 'react'
import styles from './index.module.scss' 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 HomeBg from '@/pages/Home/components/HomeBg'
import HomeContent from "@/pages/Home/components/HomeContent"; import HomeContent from '@/pages/Home/components/HomeContent'
import AuthUtil from "@/utils/auth"; import AuthUtil from '@/utils/auth'
import OrderHelper from "@/pages/Home/helper/order"; import OrderHelper from '@/pages/Home/helper/order'
const Home: React.FC = () => { const Home: React.FC = () => {
const [params] = useSearchParams() const [params] = useSearchParams()
const navigate = useNavigate() const navigate = useNavigate()
const [isAuthed, setIsAuthed] = useState(false) const [isAuthed, setIsAuthed] = useState(false)
useEffect( () => { useEffect(() => {
AuthUtil.auth(params) AuthUtil.auth(params)
.then(res => { .then(res => {
OrderHelper.queryUserOrder(navigate).then(_ => { OrderHelper.queryUserOrder(navigate).then(() => {
setIsAuthed(res) setIsAuthed(res)
}) })
}) })
}, []); }, [])
return ( return (
<div className={styles.wrap}> <div className={styles.wrap}>
......
src/pages/Lottery/index.tsx
import React from "react"; import React from 'react'
const Lottery: React.FC = () => { const Lottery: React.FC = () => {
return ( return (
......
src/pages/OrderDetail/index.tsx
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from 'react'
import {useSearchParams} from "react-router-dom"; import { useSearchParams } from 'react-router-dom'
import apis from "@/apis"; import apis from '@/apis'
import { type QueryOrderInfoResponse } from '@/apis/common' import { type QueryOrderInfoResponse } from '@/apis/common'
import styles from './index.module.scss' 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 OrderDetail: React.FC = () => {
const [params] = useSearchParams() const [params] = useSearchParams()
...@@ -14,7 +14,7 @@ const OrderDetail: React.FC = () => { ...@@ -14,7 +14,7 @@ const OrderDetail: React.FC = () => {
console.log(params.get('orderId')) console.log(params.get('orderId'))
apis.common.queryOrderInfo(params.get('orderId') || '').then(res => { apis.common.queryOrderInfo(params.get('orderId') || '').then(res => {
console.log(res.data) console.log(res.data)
if(res.ok) { if (res.ok) {
setOrderInfo(res.data) setOrderInfo(res.data)
setChecked(true) setChecked(true)
} }
......
src/typings/axios.d.ts
interface BackendResponse<T> { interface BackendResponse<T> {
code: number; code: number
msg: string; msg: string
ok: boolean; ok: boolean
data: T; data: T
} }
src/utils/auth.ts
import { type NavigateFunction} from "react-router-dom";
import apis from '@/apis' import apis from '@/apis'
import SessionStorageUtil from "@/utils/session"; import SessionStorageUtil from '@/utils/session'
class AuthUtil { class AuthUtil {
static auth(params: URLSearchParams): Promise<boolean> { static async auth (params: URLSearchParams): Promise<boolean> {
return new Promise((resolve, reject) => { return await new Promise((resolve) => {
if(process.env.REACT_APP_ENV === 'development') { if (process.env.REACT_APP_ENV === 'development') {
SessionStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80') SessionStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80')
resolve(true) resolve(true)
} else { } else {
const token = SessionStorageUtil.getItem('__TOKEN__') const token = SessionStorageUtil.getItem('__TOKEN__')
if(!token) { if (!token) {
if(!params.get('code')) { if (!params.get('code')) {
apis.common.getLoginUrl().then(res => { apis.common.getLoginUrl().then(res => {
if(res.ok) { if (res.ok) {
window.location.replace(res.data) window.location.replace(res.data)
} }
}) })
...@@ -21,9 +20,9 @@ class AuthUtil { ...@@ -21,9 +20,9 @@ class AuthUtil {
apis.common.login({ apis.common.login({
code: params.get('code') || '', code: params.get('code') || '',
state: params.get('state') || '', state: params.get('state') || '',
amp: params.get('amp') || '', amp: params.get('amp') || ''
}).then(res => { }).then(res => {
if(res.ok) { if (res.ok) {
SessionStorageUtil.setItem('__TOKEN__', res.data.token) SessionStorageUtil.setItem('__TOKEN__', res.data.token)
} }
resolve(true) resolve(true)
......
src/utils/axios.ts
import axios, { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse } from "axios"; import axios, { type AxiosInstance, type InternalAxiosRequestConfig, type AxiosResponse } from 'axios'
import SessionStorageUtil from "@/utils/session"; import SessionStorageUtil from '@/utils/session'
import { Toast } from "@nutui/nutui-react"; import { Toast } from '@nutui/nutui-react'
const axiosInstance: AxiosInstance = axios.create({ const axiosInstance: AxiosInstance = axios.create({
baseURL: process.env.REACT_APP_API_URL, baseURL: process.env.REACT_APP_API_URL,
timeout: 30000, timeout: 30000
}) })
axiosInstance.interceptors.request.use( axiosInstance.interceptors.request.use(
(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => { (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
config.headers.token = SessionStorageUtil.getItem('__TOKEN__'); config.headers.token = SessionStorageUtil.getItem('__TOKEN__')
return config; return config
}, },
(error) => { async (error) => {
return Promise.reject(error); return await Promise.reject(error)
} }
); )
axiosInstance.interceptors.response.use( axiosInstance.interceptors.response.use(
(response: AxiosResponse ): AxiosResponse => { (response: AxiosResponse): AxiosResponse => {
// 处理登录失效 // 处理登录失效
if(response.data.code === 9999) { if (response.data.code === 9999) {
Toast.show('登录失效') Toast.show('登录失效')
setTimeout(() => { setTimeout(() => {
SessionStorageUtil.clear() SessionStorageUtil.clear()
window.location.replace('/') window.location.replace('/')
}, 2000) }, 2000)
} }
return response; return response
}, },
(error) => { async (error) => {
return Promise.reject(error); return await Promise.reject(error)
} }
); )
export default axiosInstance; export default axiosInstance
\ No newline at end of file
src/utils/session.ts
...@@ -4,9 +4,9 @@ class SessionStorageUtil { ...@@ -4,9 +4,9 @@ class SessionStorageUtil {
* @param key 键名 * @param key 键名
* @param value 值，将被自动转换为字符串 * @param value 值，将被自动转换为字符串
*/ */
static setItem(key: string, value: any): void { static setItem <T>(key: string, value: T): void {
const stringValue = JSON.stringify(value); const stringValue = JSON.stringify(value)
sessionStorage.setItem(key, stringValue); sessionStorage.setItem(key, stringValue)
} }
/** /**
...@@ -15,15 +15,15 @@ class SessionStorageUtil { ...@@ -15,15 +15,15 @@ class SessionStorageUtil {
* @returns 返回解析后的值，如果不存在则返回null * @returns 返回解析后的值，如果不存在则返回null
*/ */
static getItem<T>(key: string): T | null { static getItem<T>(key: string): T | null {
const item = sessionStorage.getItem(key); const item = sessionStorage.getItem(key)
if (item === null) { if (item === null) {
return null; return null
} }
try { try {
return JSON.parse(item) as T; return JSON.parse(item) as T
} catch (e) { } catch (e) {
console.error("Error parsing sessionStorage item", e); console.error('Error parsing sessionStorage item', e)
return null; return null
} }
} }
...@@ -31,8 +31,8 @@ class SessionStorageUtil { ...@@ -31,8 +31,8 @@ class SessionStorageUtil {
* 从sessionStorage中删除特定数据 * 从sessionStorage中删除特定数据
* @param key 键名 * @param key 键名
*/ */
static removeItem(key: string): void { static removeItem (key: string): void {
sessionStorage.removeItem(key); sessionStorage.removeItem(key)
} }
/** /**
...@@ -40,15 +40,15 @@ class SessionStorageUtil { ...@@ -40,15 +40,15 @@ class SessionStorageUtil {
* @param key 键名 * @param key 键名
* @param value 新的值，将被自动转换为字符串 * @param value 新的值，将被自动转换为字符串
*/ */
static updateItem(key: string, value: any): void { static updateItem <T>(key: string, value: T): void {
this.setItem(key, value); this.setItem(key, value)
} }
/** /**
* 清除所有sessionStorage数据 * 清除所有sessionStorage数据
*/ */
static clear(): void { static clear (): void {
sessionStorage.clear(); sessionStorage.clear()
} }
} }
......
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