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 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}>
<span className={styles.testBoxText}>hello, 你好 {process.env.REACT_APP_ENV}</span> <span className={styles.testBoxText}>hello, 你好 {process.env.REACT_APP_ENV}</span>
<button onClick={handleClick}>点击跳转</button> <button onClick={handleClick}>点击跳转</button>
<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'
...@@ -10,13 +10,13 @@ import '@nutui/nutui-react/dist/style.css' ...@@ -10,13 +10,13 @@ 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
...@@ -4,11 +4,11 @@ import homeTopBannerImg from '@/assets/images/homeTopBanner.png' ...@@ -4,11 +4,11 @@ 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 (
<div className={styles.bgWrap}> <div className={styles.bgWrap}>
<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/HomeProductItem.tsx
...@@ -2,41 +2,43 @@ import React from 'react' ...@@ -2,41 +2,43 @@ 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={() => { props.onButtonClick(props.idx) }}>{ props.buttonText || '立即购买' }</div> <div className={styles.productItemButton} style={buttonStyle} onClick={() => {
props.onButtonClick(props.idx)
}}>{props.buttonText || '立即购买'}</div>
</div> </div>
) )
} }
export default HomeProductItem export default HomeProductItem
src/pages/Home/components/HomeRuleContent.tsx
...@@ -2,7 +2,7 @@ import React from 'react' ...@@ -2,7 +2,7 @@ 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 (
<div className={styles.rulesOverlayContentInner}> <div className={styles.rulesOverlayContentInner}>
<h2>活动规则</h2> <h2>活动规则</h2>
<h3>闸北支行一元购，新年钜惠等你来拿</h3> <h3>闸北支行一元购，新年钜惠等你来拿</h3>
...@@ -13,14 +13,14 @@ const HomeRuleContent: React.FC = () => { ...@@ -13,14 +13,14 @@ const HomeRuleContent: React.FC = () => {
<h4>活动规则：</h4> <h4>活动规则：</h4>
<p> <p>
1.打开掌银，扫描网点厅堂二维码进入活动页面，在网点工作人员的指导下购买新客礼，每人在活动期限内限参与1次活动。 1.打开掌银，扫描网点厅堂二维码进入活动页面，在网点工作人员的指导下购买新客礼，每人在活动期限内限参与1次活动。
<br /> <br/>
2.同一证件号、同一手机号、同一设备均视为同一客户。 2.同一证件号、同一手机号、同一设备均视为同一客户。
<br /> <br/>
3.成功支付后请出示订单详情页，于网点大堂当场核销礼品。 3.成功支付后请出示订单详情页，于网点大堂当场核销礼品。
<br /> <br/>
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 {
/** /**
* 提交订单： * 提交订单：
* 1. 创建订单 * 1. 创建订单
* 2. 查询支付地址 * 2. 查询支付地址
...@@ -12,70 +12,70 @@ class OrderHelper { ...@@ -12,70 +12,70 @@ class OrderHelper {
* 4. 唤起app支付 * 4. 唤起app支付
* @param params CreateOrderRequestData * @param params CreateOrderRequestData
*/ */
static async submitOrder(params: CreateOrderRequestData) { static async submitOrder(params: CreateOrderRequestData) {
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('提交订单失败')
}
} }
}
/** /**
* 获取用户的订单 * 获取用户的订单
*/ */
static async queryUserOrder(navigate: NavigateFunction) { static async queryUserOrder(navigate: NavigateFunction) {
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;
if (data?.lotteryOrderId) { if (data?.lotteryOrderId) {
navigate(`/lottery?lotteryOrderId=${data.lotteryOrderId}`, { navigate(`/lottery?lotteryOrderId=${data.lotteryOrderId}`, {
replace: true replace: true
}); });
} else if (data?.orderId) { } else if (data?.orderId) {
navigate(`/orderDetail?orderId=${data.orderId}`, { navigate(`/orderDetail?orderId=${data.orderId}`, {
replace: true replace: true
}); });
} }
} catch (error) { } catch (error) {
Toast.show('查询用户订单信息失败') 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 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'
...@@ -30,8 +30,8 @@ const Home: React.FC = () => { ...@@ -30,8 +30,8 @@ const Home: React.FC = () => {
<div className={styles.wrap}> <div className={styles.wrap}>
{isAuthed && ( {isAuthed && (
<> <>
<HomeBg /> <HomeBg/>
<HomeContent /> <HomeContent/>
</> </>
)} )}
</div> </div>
......
src/pages/Lottery/index.tsx
...@@ -7,7 +7,7 @@ import lotteryRuleTitleBgImg from '@/assets/images/lotteryRuleTitleBg.png' ...@@ -7,7 +7,7 @@ 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);
...@@ -42,7 +42,7 @@ const Lottery: React.FC = () => { ...@@ -42,7 +42,7 @@ const Lottery: React.FC = () => {
}) })
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;
...@@ -68,7 +68,7 @@ const Lottery: React.FC = () => { ...@@ -68,7 +68,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);
...@@ -81,34 +81,38 @@ const Lottery: React.FC = () => { ...@@ -81,34 +81,38 @@ const Lottery: React.FC = () => {
<div className={styles.lotteryWrap}> <div className={styles.lotteryWrap}>
<img className={styles.lotteryWrapBgImg} src={lotteryWrapBgImg} alt=""/> <img className={styles.lotteryWrapBgImg} src={lotteryWrapBgImg} alt=""/>
<img style={lotteryStyle} className={styles.lotteryPrizeBgImg} src={lotteryPrizeImg} 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 className={styles.lotteryMyPrizeButton} onClick={() => setShowMyPrizePopup(true)}>我的奖品</div>
</div> </div>
<img className={styles.lotteryRuleTitleBg} src={lotteryRuleTitleBgImg} alt=""/> <img className={styles.lotteryRuleTitleBg} src={lotteryRuleTitleBgImg} alt=""/>
<div className={styles.lotteryRuleContent}> <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 className={styles.lotteryRuleItem}><span></span> 每季度每个客户号仅可参与其中一项。</div>
</div> </div>
{/*我的奖品*/} {/*我的奖品*/}
<Popup <Popup
closeable closeable
visible={ showMyPrizePopup } visible={showMyPrizePopup}
style={{ height: '454px' }} style={{height: '454px'}}
position="bottom" position="bottom"
round round
onClose={ () => { setShowMyPrizePopup(false) } } onClose={() => {
setShowMyPrizePopup(false)
}}
> >
<div className={styles.myPrizePopupWrap}> <div className={styles.myPrizePopupWrap}>
<div className={styles.myPrizePopupTitle}>我的奖品</div> <div className={styles.myPrizePopupTitle}>我的奖品</div>
<div className={styles.myPrizePopupContent}> <div className={styles.myPrizePopupContent}>
<MyPrizeItem /> <MyPrizeItem/>
<MyPrizeItem /> <MyPrizeItem/>
<MyPrizeItem /> <MyPrizeItem/>
<MyPrizeItem /> <MyPrizeItem/>
<MyPrizeItem /> <MyPrizeItem/>
<MyPrizeItem /> <MyPrizeItem/>
<MyPrizeItem /> <MyPrizeItem/>
</div> </div>
</div> </div>
</Popup> </Popup>
...@@ -129,7 +133,7 @@ const Lottery: React.FC = () => { ...@@ -129,7 +133,7 @@ const Lottery: React.FC = () => {
</Overlay> </Overlay>
{/*中奖弹窗*/} {/*中奖弹窗*/}
</div> </div>
) )
} }
const MyPrizeItem: React.FC = () => { const MyPrizeItem: React.FC = () => {
......
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}>
<div className={styles.contentWrap}> <div className={styles.contentWrap}>
<Skeleton rows={2} title animated visible={checked}> <Skeleton rows={2} title animated visible={checked}>
...@@ -32,7 +32,8 @@ const OrderDetail: React.FC = () => { ...@@ -32,7 +32,8 @@ const OrderDetail: React.FC = () => {
</div> </div>
<div className={styles.contentItem}> <div className={styles.contentItem}>
<span className={styles.contentItemLabel}>支付金额：</span> <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> </div>
</Skeleton> </Skeleton>
</div> </div>
...@@ -47,7 +48,7 @@ const OrderDetail: React.FC = () => { ...@@ -47,7 +48,7 @@ const OrderDetail: React.FC = () => {
<span className={styles.contentItemLabel}>所属网点：</span> <span className={styles.contentItemLabel}>所属网点：</span>
<span className={styles.contentItemValue}>{orderInfo?.orderDetail.branchName}</span> <span className={styles.contentItemValue}>{orderInfo?.orderDetail.branchName}</span>
</div> </div>
<Divider /> <Divider/>
<div className={styles.contentItem}> <div className={styles.contentItem}>
<span className={styles.contentItemLabel}>支付时间：</span> <span className={styles.contentItemLabel}>支付时间：</span>
<span className={styles.contentItemValue}>{orderInfo?.orderDetail.payTime}</span> <span className={styles.contentItemValue}>{orderInfo?.orderDetail.payTime}</span>
...@@ -59,7 +60,7 @@ const OrderDetail: React.FC = () => { ...@@ -59,7 +60,7 @@ const OrderDetail: React.FC = () => {
</Skeleton> </Skeleton>
</div> </div>
</div> </div>
) )
} }
export default OrderDetail export default OrderDetail
src/utils/auth.ts
...@@ -2,38 +2,38 @@ import apis from '@/apis' ...@@ -2,38 +2,38 @@ 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({
......
src/utils/local.ts
...@@ -4,7 +4,7 @@ class LocalStorageUtil { ...@@ -4,7 +4,7 @@ class LocalStorageUtil {
* @param key 键名 * @param key 键名
* @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)
} }
...@@ -31,7 +31,7 @@ class LocalStorageUtil { ...@@ -31,7 +31,7 @@ class LocalStorageUtil {
* 从localStorage中删除特定数据 * 从localStorage中删除特定数据
* @param key 键名 * @param key 键名
*/ */
static removeItem (key: string): void { static removeItem(key: string): void {
localStorage.removeItem(key) localStorage.removeItem(key)
} }
...@@ -40,14 +40,14 @@ class LocalStorageUtil { ...@@ -40,14 +40,14 @@ class LocalStorageUtil {
* @param key 键名 * @param key 键名
* @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()
} }
} }
......
src/utils/session.ts
class SessionStorageUtil { class SessionStorageUtil {
/** /**
* 存储数据到sessionStorage * 存储数据到sessionStorage
* @param key 键名 * @param key 键名
* @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)
} }
/** /**
* 从sessionStorage获取数据 * 从sessionStorage获取数据
* @param key 键名 * @param key 键名
* @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
}
} }
}
/** /**
* 从sessionStorage中删除特定数据 * 从sessionStorage中删除特定数据
* @param key 键名 * @param key 键名
*/ */
static removeItem (key: string): void { static removeItem(key: string): void {
sessionStorage.removeItem(key) sessionStorage.removeItem(key)
} }
/** /**
* 更新sessionStorage中的数据 * 更新sessionStorage中的数据
* @param key 键名 * @param key 键名
* @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