Skip to content

E
eppfax-h5-react
Commit 5e74d300 by HoMeTown
Options

feat: 格式化代码

parent dd32cdd2
Showing with 200 additions and 199 deletions
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();
const handleClick = () => { const handleClick = () => {
navigate('/testdemo?id=1234', { navigate("/testdemo?id=1234", {
state: { state: {
id: 1234567 id: 1234567
} }
}) });
} };
return ( return (
<div className="content"> <div className="content">
<div className={styles.testBox}> <div className={styles.testBox}>
...@@ -19,7 +19,8 @@ const App = () => { ...@@ -19,7 +19,8 @@ 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/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>
<Routes> <Routes>
<Route path='/' element={<Home/>}></Route> <Route path="/" element={<Home/>}></Route>
<Route path='/lottery' element={<Lottery/>}></Route> <Route path="/lottery" element={<Lottery/>}></Route>
<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 (
...@@ -9,6 +9,6 @@ const HomeBg: React.FC = () => { ...@@ -9,6 +9,6 @@ const HomeBg: React.FC = () => {
<img className={styles.topBannerImg} src={homeTopBannerImg} alt=""/> <img className={styles.topBannerImg} src={homeTopBannerImg} alt=""/>
<img className={styles.botBannerImg} src={homeBotBannerImg} alt=""/> <img className={styles.botBannerImg} src={homeBotBannerImg} alt=""/>
</div> </div>
) );
} };
export default HomeBg export default HomeBg;
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";
import {useNavigate} from "react-router-dom"; import {useNavigate} from "react-router-dom";
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[]>([]);
...@@ -30,7 +30,7 @@ const HomeContent: React.FC = () => { ...@@ -30,7 +30,7 @@ const HomeContent: React.FC = () => {
setActiveProductIdx(idx); setActiveProductIdx(idx);
setShowBranchListPopup(true); setShowBranchListPopup(true);
} else { } else {
Toast.show('请在网点工作人员指导下购买，每人仅有一次活动参与机会'); Toast.show("请在网点工作人员指导下购买，每人仅有一次活动参与机会");
setToasted(true); setToasted(true);
} }
} }
...@@ -40,7 +40,7 @@ const HomeContent: React.FC = () => { ...@@ -40,7 +40,7 @@ const HomeContent: React.FC = () => {
const selectedBranch = branchList[activeBranchIdx]; const selectedBranch = branchList[activeBranchIdx];
if (activeProductIdx === 0) { if (activeProductIdx === 0) {
setShowBranchListPopup(false) setShowBranchListPopup(false);
OrderHelper.submitOrder({ OrderHelper.submitOrder({
branchName: selectedBranch.branchName, branchName: selectedBranch.branchName,
branchCode: selectedBranch.branchCode, branchCode: selectedBranch.branchCode,
...@@ -59,7 +59,7 @@ const HomeContent: React.FC = () => { ...@@ -59,7 +59,7 @@ const HomeContent: React.FC = () => {
setBranchList(res.data); setBranchList(res.data);
} }
}).catch(() => { }).catch(() => {
Toast.show(`查询网点列表失败`) Toast.show(`查询网点列表失败`);
}); });
return () => { return () => {
...@@ -79,7 +79,7 @@ const HomeContent: React.FC = () => { ...@@ -79,7 +79,7 @@ const HomeContent: React.FC = () => {
idx={index} idx={index}
onButtonClick={handleClickProduct} onButtonClick={handleClickProduct}
/> />
) );
})} })}
<div className={styles.productTips}>活动最终解释权归本行所有</div> <div className={styles.productTips}>活动最终解释权归本行所有</div>
...@@ -89,14 +89,14 @@ const HomeContent: React.FC = () => { ...@@ -89,14 +89,14 @@ const HomeContent: React.FC = () => {
position="bottom" position="bottom"
round round
onClose={() => { onClose={() => {
setShowBranchListPopup(false) setShowBranchListPopup(false);
} }
}> }>
<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>
...@@ -108,17 +108,17 @@ const HomeContent: React.FC = () => { ...@@ -108,17 +108,17 @@ const HomeContent: React.FC = () => {
<div <div
className={styles.branchListItem} className={styles.branchListItem}
onClick={() => { onClick={() => {
setActiveBranchIdx(index) setActiveBranchIdx(index);
}} }}
key={item.branchCode} key={item.branchCode}
style={{ style={{
color: activeBranchIdx === index ? '#e64545' : '', color: activeBranchIdx === index ? "#e64545" : "",
background: activeBranchIdx === index ? '#f7f7f7' : '' background: activeBranchIdx === index ? "#f7f7f7" : ""
}} }}
> >
{item.branchName} {item.branchName}
</div> </div>
) );
})} })}
</div> </div>
</div> </div>
...@@ -127,20 +127,20 @@ const HomeContent: React.FC = () => { ...@@ -127,20 +127,20 @@ const HomeContent: React.FC = () => {
{/* 活动规则 */} {/* 活动规则 */}
<div className={styles.contentRulesButton} onClick={() => { <div className={styles.contentRulesButton} onClick={() => {
setRulesOverlayVisible(true) setRulesOverlayVisible(true);
}}>活动规则 }}>活动规则
</div> </div>
<Overlay <Overlay
visible={rulesOverlayVisible} visible={rulesOverlayVisible}
closeOnOverlayClick={false} closeOnOverlayClick={false}
onClick={() => { onClick={() => {
setRulesOverlayVisible(false) 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={() => { <img className={styles.rulesOverlayCloseImg} src={homeRulesOverlayCloseImg} onClick={() => {
setRulesOverlayVisible(false) setRulesOverlayVisible(false);
}} alt=""/> }} alt=""/>
<HomeRuleContent/> <HomeRuleContent/>
</div> </div>
...@@ -149,7 +149,7 @@ const HomeContent: React.FC = () => { ...@@ -149,7 +149,7 @@ const HomeContent: React.FC = () => {
{/* 活动规则 */} {/* 活动规则 */}
</div> </div>
) );
} };
export default HomeContent export default HomeContent;
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;
/** /**
* 点击 * 点击
*/ */
onButtonClick: (idx: number) => void onButtonClick: (idx: number) => void;
/** /**
* 索引 * 索引
*/ */
idx: number idx: number;
} }
const HomeProductItem: React.FC<HomeProductItemProps> = (props) => { const HomeProductItem: React.FC<HomeProductItemProps> = (props) => {
const buttonStyle = {color: props.buttonTextColor} const buttonStyle = {color: props.buttonTextColor};
return ( return (
<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={() => { <div className={styles.productItemButton} style={buttonStyle} onClick={() => {
props.onButtonClick(props.idx) props.onButtonClick(props.idx);
}}>{props.buttonText || '立即购买'}</div> }}>{props.buttonText || "立即购买"}</div>
</div> </div>
) );
} };
export default HomeProductItem export default HomeProductItem;
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 (
...@@ -21,6 +21,6 @@ const HomeRuleContent: React.FC = () => { ...@@ -21,6 +21,6 @@ const HomeRuleContent: React.FC = () => {
4.凡参加本次活动者，即视为同意接受本次活动相关规则，活动期间用户不得使用不正当手段破坏活动规则、违背活动公平原则，否则有权取消活动参与资格。 4.凡参加本次活动者，即视为同意接受本次活动相关规则，活动期间用户不得使用不正当手段破坏活动规则、违背活动公平原则，否则有权取消活动参与资格。
</p> </p>
</div> </div>
) );
} };
export default HomeRuleContent export default HomeRuleContent;
src/pages/Home/helper/order.ts
import apis from '@/apis' import apis from "@/apis";
import {type CreateOrderRequestData} from '@/apis/common' import {type CreateOrderRequestData} from "@/apis/common";
import {type NavigateFunction} from 'react-router-dom' import {type NavigateFunction} from "react-router-dom";
import {Toast} from "@nutui/nutui-react"; import {Toast} from "@nutui/nutui-react";
class OrderHelper { class OrderHelper {
...@@ -16,37 +16,37 @@ class OrderHelper { ...@@ -16,37 +16,37 @@ class OrderHelper {
try { try {
const createOrderRes = await apis.common.createOrder(params); const createOrderRes = await apis.common.createOrder(params);
if (!createOrderRes.data) { if (!createOrderRes.data) {
Toast.show('创建订单失败') Toast.show("创建订单失败");
return return;
} }
const queryPayUrlRes = await apis.common.queryPayUrl({orderId: createOrderRes.data}); const queryPayUrlRes = await apis.common.queryPayUrl({orderId: createOrderRes.data});
if (!queryPayUrlRes.data) { if (!queryPayUrlRes.data) {
Toast.show('支付链接获取失败') Toast.show("支付链接获取失败");
return 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) { if (!tokenId) {
Toast.show('TOKEN 未找到') Toast.show("TOKEN 未找到");
return return;
} }
const queryPayConfigRes = await apis.common.queryPayConfig<Record<'param', Record<string, string>>>(); const queryPayConfigRes = await apis.common.queryPayConfig<Record<"param", Record<string, string>>>();
if (!queryPayConfigRes.data) { if (!queryPayConfigRes.data) {
Toast.show('支付配置信息查询失败') Toast.show("支付配置信息查询失败");
return return;
} }
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, "支付结果");
}); });
} catch (error) { } catch (error) {
Toast.show('提交订单失败') Toast.show("提交订单失败");
} }
} }
...@@ -58,8 +58,8 @@ class OrderHelper { ...@@ -58,8 +58,8 @@ class OrderHelper {
try { try {
const res = await apis.common.queryUserOrder(); const res = await apis.common.queryUserOrder();
if (!res.ok) { if (!res.ok) {
Toast.show('查询用户订单信息失败') Toast.show("查询用户订单信息失败");
return return;
} }
const data = res.data; const data = res.data;
...@@ -73,10 +73,10 @@ class OrderHelper { ...@@ -73,10 +73,10 @@ class OrderHelper {
}); });
} }
} catch (error) { } catch (error) {
Toast.show('查询用户订单信息失败') Toast.show("查询用户订单信息失败");
} }
} }
} }
export default OrderHelper export default OrderHelper;
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";
import {Toast} from "@nutui/nutui-react"; import {Toast} from "@nutui/nutui-react";
const Home: React.FC = () => { const Home: React.FC = () => {
...@@ -19,7 +19,7 @@ const Home: React.FC = () => { ...@@ -19,7 +19,7 @@ const Home: React.FC = () => {
await OrderHelper.queryUserOrder(navigate); await OrderHelper.queryUserOrder(navigate);
setIsAuthed(authResult); setIsAuthed(authResult);
} catch (error) { } catch (error) {
Toast.show(`${error}`) Toast.show(`${error}`);
} }
}; };
......
src/pages/Lottery/index.tsx
import React, {useState} from 'react' import React, {useState} from "react";
import styles from './index.module.scss' import styles from "./index.module.scss";
import lotteryWrapBgImg from '@/assets/images/lotteryWrapBg.png' import lotteryWrapBgImg from "@/assets/images/lotteryWrapBg.png";
import lotteryPrizeImg from '@/assets/images/lotteryPrize.png' import lotteryPrizeImg from "@/assets/images/lotteryPrize.png";
import lotteryButtonBgImg from '@/assets/images/lotteryButtonBg.png' import lotteryButtonBgImg from "@/assets/images/lotteryButtonBg.png";
import lotteryRuleTitleBgImg from '@/assets/images/lotteryRuleTitleBg.png' import lotteryRuleTitleBgImg from "@/assets/images/lotteryRuleTitleBg.png";
import myPrizeHighLightImg from '@/assets/images/myPrizeHighLight.png' import myPrizeHighLightImg from "@/assets/images/myPrizeHighLight.png";
import myPrizeUnclaimedImg from '@/assets/images/myPrizeUnclaimed.png' import myPrizeUnclaimedImg from "@/assets/images/myPrizeUnclaimed.png";
import winningLotteryImg from '@/assets/images/winningLottery.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 Lottery: React.FC = () => {
const [showMyPrizePopup, setShowMyPrizePopup] = useState(false); const [showMyPrizePopup, setShowMyPrizePopup] = useState(false);
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false);
interface LotteryConfig { interface LotteryConfig {
prizeCount: number; prizeCount: number;
...@@ -32,17 +32,17 @@ const Lottery: React.FC = () => { ...@@ -32,17 +32,17 @@ const Lottery: React.FC = () => {
round: 5, // 旋转圈数 round: 5, // 旋转圈数
duration: 3000, // 动画持续时间 duration: 3000, // 动画持续时间
running: false // 锁定抽奖状态 running: false // 锁定抽奖状态
}) });
const [lotteryStyle, setLotteryStyle] = useState({ const [lotteryStyle, setLotteryStyle] = useState({
transform: '', transform: "",
transition: '', transition: "",
WebkitTransform: '', WebkitTransform: "",
WebkitTransition: '' WebkitTransition: ""
}) });
function onClickLotteryButton() { function onClickLotteryButton() {
console.log(lotteryConfig, 'lotteryConfig') console.log(lotteryConfig, "lotteryConfig");
setLotteryConfig(prevConfig => { setLotteryConfig(prevConfig => {
// 如果正在运行，则不进行任何操作 // 如果正在运行，则不进行任何操作
if (prevConfig.running) return prevConfig; if (prevConfig.running) return prevConfig;
...@@ -69,7 +69,7 @@ const Lottery: React.FC = () => { ...@@ -69,7 +69,7 @@ const Lottery: React.FC = () => {
// 在动画结束后解锁 // 在动画结束后解锁
setTimeout(() => { setTimeout(() => {
setLotteryConfig(prev => ({...prev, running: false})); setLotteryConfig(prev => ({...prev, running: false}));
setVisible(true) setVisible(true);
}, newConfig.duration); }, newConfig.duration);
return newConfig; return newConfig;
...@@ -96,11 +96,11 @@ const Lottery: React.FC = () => { ...@@ -96,11 +96,11 @@ const Lottery: React.FC = () => {
<Popup <Popup
closeable closeable
visible={showMyPrizePopup} visible={showMyPrizePopup}
style={{height: '454px'}} style={{height: "454px"}}
position="bottom" position="bottom"
round round
onClose={() => { onClose={() => {
setShowMyPrizePopup(false) setShowMyPrizePopup(false);
}} }}
> >
<div className={styles.myPrizePopupWrap}> <div className={styles.myPrizePopupWrap}>
...@@ -133,8 +133,8 @@ const Lottery: React.FC = () => { ...@@ -133,8 +133,8 @@ const Lottery: React.FC = () => {
</Overlay> </Overlay>
{/*中奖弹窗*/} {/*中奖弹窗*/}
</div> </div>
) );
} };
const MyPrizeItem: React.FC = () => { const MyPrizeItem: React.FC = () => {
return ( return (
...@@ -152,7 +152,7 @@ const MyPrizeItem: React.FC = () => { ...@@ -152,7 +152,7 @@ const MyPrizeItem: React.FC = () => {
</div> </div>
<div className={styles.myPrizeItemButton}>去领取</div> <div className={styles.myPrizeItemButton}>去领取</div>
</div> </div>
) );
} };
export default Lottery export default Lottery;
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();
const [orderInfo, setOrderInfo] = useState<QueryOrderInfoResponse>() const [orderInfo, setOrderInfo] = useState<QueryOrderInfoResponse>();
const [checked, setChecked] = useState(false) const [checked, setChecked] = useState(false);
useEffect(() => { useEffect(() => {
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);
} }
}) });
}, []) }, []);
return ( return (
<div className={styles.wrap}> <div className={styles.wrap}>
...@@ -60,7 +60,7 @@ const OrderDetail: React.FC = () => { ...@@ -60,7 +60,7 @@ const OrderDetail: React.FC = () => {
</Skeleton> </Skeleton>
</div> </div>
</div> </div>
) );
} };
export default OrderDetail export default OrderDetail;
src/utils/auth.ts
import apis from '@/apis' import apis from "@/apis";
import LocalStorageUtil from '@/utils/local' import LocalStorageUtil from "@/utils/local";
class AuthUtil { class AuthUtil {
static async auth(params: URLSearchParams): Promise<boolean> { static async auth(params: URLSearchParams): Promise<boolean> {
return await new Promise((resolve) => { return await new Promise((resolve) => {
if (process.env.REACT_APP_ENV === 'development') { if (process.env.REACT_APP_ENV === "development") {
LocalStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80') LocalStorageUtil.setItem("__TOKEN__", "6d29e9d470e24cf9af48bd5881b97f80");
resolve(true) resolve(true);
} else { } else {
const token = LocalStorageUtil.getItem('__TOKEN__') const token = LocalStorageUtil.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);
} }
}) });
} else { } else {
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) {
LocalStorageUtil.setItem('__TOKEN__', res.data.token) LocalStorageUtil.setItem("__TOKEN__", res.data.token);
} }
resolve(true) resolve(true);
}) });
} }
} else { } else {
resolve(true) resolve(true);
} }
} }
}) });
} }
} }
export default AuthUtil 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 LocalStorageUtil from "@/utils/local";
import {Toast} from '@nutui/nutui-react' import {Toast} from "@nutui/nutui-react";
import {LOGIN_EXPIRED_CODE} from "@/constants"; import {LOGIN_EXPIRED_CODE} from "@/constants";
const axiosInstance: AxiosInstance = axios.create({ const axiosInstance: AxiosInstance = axios.create({
...@@ -9,18 +9,18 @@ const axiosInstance: AxiosInstance = axios.create({ ...@@ -9,18 +9,18 @@ const axiosInstance: AxiosInstance = axios.create({
}); });
const requestInterceptor = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => { const requestInterceptor = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
config.headers.token = LocalStorageUtil.getItem('__TOKEN__'); config.headers.token = LocalStorageUtil.getItem("__TOKEN__");
return config; return config;
}; };
const responseInterceptor = (response: AxiosResponse): AxiosResponse => { const responseInterceptor = (response: AxiosResponse): AxiosResponse => {
if (response.data.code === LOGIN_EXPIRED_CODE) { if (response.data.code === LOGIN_EXPIRED_CODE) {
Toast.show({ Toast.show({
content: `登录失效: ${response.data.code} ${LocalStorageUtil.getItem('__TOKEN__')}`, content: `登录失效: ${response.data.code} ${LocalStorageUtil.getItem("__TOKEN__")}`,
}); });
setTimeout(() => { setTimeout(() => {
LocalStorageUtil.clear(); LocalStorageUtil.clear();
window.location.replace('/'); window.location.replace("/");
}, 2000); }, 2000);
} }
return response; return response;
......
src/utils/local.ts
...@@ -5,8 +5,8 @@ class LocalStorageUtil { ...@@ -5,8 +5,8 @@ class LocalStorageUtil {
* @param value 值，将被自动转换为字符串 * @param value 值，将被自动转换为字符串
*/ */
static setItem<T>(key: string, value: T): void { static setItem<T>(key: string, value: T): void {
const stringValue = JSON.stringify(value) const stringValue = JSON.stringify(value);
localStorage.setItem(key, stringValue) localStorage.setItem(key, stringValue);
} }
/** /**
...@@ -15,15 +15,15 @@ class LocalStorageUtil { ...@@ -15,15 +15,15 @@ class LocalStorageUtil {
* @returns 返回解析后的值，如果不存在则返回null * @returns 返回解析后的值，如果不存在则返回null
*/ */
static getItem<T>(key: string): T | null { static getItem<T>(key: string): T | null {
const item = localStorage.getItem(key) const item = localStorage.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 localStorage item', e) console.error("Error parsing localStorage item", e);
return null return null;
} }
} }
...@@ -32,7 +32,7 @@ class LocalStorageUtil { ...@@ -32,7 +32,7 @@ class LocalStorageUtil {
* @param key 键名 * @param key 键名
*/ */
static removeItem(key: string): void { static removeItem(key: string): void {
localStorage.removeItem(key) localStorage.removeItem(key);
} }
/** /**
...@@ -41,15 +41,15 @@ class LocalStorageUtil { ...@@ -41,15 +41,15 @@ class LocalStorageUtil {
* @param value 新的值，将被自动转换为字符串 * @param value 新的值，将被自动转换为字符串
*/ */
static updateItem<T>(key: string, value: T): void { static updateItem<T>(key: string, value: T): void {
this.setItem(key, value) this.setItem(key, value);
} }
/** /**
* 清除所有localStorage数据 * 清除所有localStorage数据
*/ */
static clear(): void { static clear(): void {
localStorage.clear() localStorage.clear();
} }
} }
export default LocalStorageUtil export default LocalStorageUtil;
src/utils/session.ts
...@@ -5,8 +5,8 @@ class SessionStorageUtil { ...@@ -5,8 +5,8 @@ class SessionStorageUtil {
* @param value 值，将被自动转换为字符串 * @param value 值，将被自动转换为字符串
*/ */
static setItem<T>(key: string, value: T): 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;
} }
} }
...@@ -32,7 +32,7 @@ class SessionStorageUtil { ...@@ -32,7 +32,7 @@ class SessionStorageUtil {
* @param key 键名 * @param key 键名
*/ */
static removeItem(key: string): void { static removeItem(key: string): void {
sessionStorage.removeItem(key) sessionStorage.removeItem(key);
} }
/** /**
...@@ -41,15 +41,15 @@ class SessionStorageUtil { ...@@ -41,15 +41,15 @@ class SessionStorageUtil {
* @param value 新的值，将被自动转换为字符串 * @param value 新的值，将被自动转换为字符串
*/ */
static updateItem<T>(key: string, value: T): 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();
} }
} }
export default SessionStorageUtil 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