Skip to content

E
eppfax-h5-react
Commit 88be08b2 by HoMeTown
Options

feat: 抽奖中奖的弹窗

parent fd808a22
Showing with 173 additions and 34 deletions
src/pages/Home/components/HomeContent.tsx
...@@ -40,6 +40,7 @@ const HomeContent: React.FC = () => { ...@@ -40,6 +40,7 @@ const HomeContent: React.FC = () => {
const selectedBranch = branchList[activeBranchIdx]; const selectedBranch = branchList[activeBranchIdx];
if (activeProductIdx === 0) { if (activeProductIdx === 0) {
setShowBranchListPopup(false)
OrderHelper.submitOrder({ OrderHelper.submitOrder({
branchName: selectedBranch.branchName, branchName: selectedBranch.branchName,
branchCode: selectedBranch.branchCode, branchCode: selectedBranch.branchCode,
......
src/pages/Home/index.tsx
...@@ -24,7 +24,7 @@ const Home: React.FC = () => { ...@@ -24,7 +24,7 @@ const Home: React.FC = () => {
}; };
authenticateAndFetchOrders(); authenticateAndFetchOrders();
}, [params, navigate]); }, []);
return ( return (
<div className={styles.wrap}> <div className={styles.wrap}>
......
src/pages/Lottery/index.module.scss
...@@ -198,4 +198,64 @@ ...@@ -198,4 +198,64 @@
} }
} }
} }
.winningLotteryWrap {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.winningLotteryInner {
position: relative;
width: 240px;
height: 324px;
.winningLotteryTitle {
width: 100%;
text-align: center;
font-size: 15px;
color: #003932;
line-height: 22px;
position: absolute;
top: 84px;
left: 0;
z-index: 2;
> span {
font-weight: bold;
}
}
.winningLotteryTime {
width: 100%;
text-align: center;
font-size: 12px;
color: #298281;
line-height: 18px;
position: absolute;
left: 0;
bottom: 76px;
z-index: 2;
}
> img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.winningLotteryClose {
width: 50px;
height: 50px;
position: absolute;
right: 0;
top: 0;
}
.winningLotteryConfirm {
width: 160px;
height: 50px;
position: absolute;
left: 40px;
bottom: 8px;
}
}
}
} }
\ No newline at end of file
src/pages/Lottery/index.tsx
...@@ -6,11 +6,14 @@ import lotteryButtonBgImg from '@/assets/images/lotteryButtonBg.png' ...@@ -6,11 +6,14 @@ 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 { Popup } from '@nutui/nutui-react'; import winningLotteryImg from '@/assets/images/winningLottery.png'
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)
interface LotteryConfig { interface LotteryConfig {
prizeCount: number; prizeCount: number;
drawCount: number; drawCount: number;
...@@ -66,6 +69,7 @@ const Lottery: React.FC = () => { ...@@ -66,6 +69,7 @@ const Lottery: React.FC = () => {
// 在动画结束后解锁 // 在动画结束后解锁
setTimeout(() => { setTimeout(() => {
setLotteryConfig(prev => ({ ...prev, running: false })); setLotteryConfig(prev => ({ ...prev, running: false }));
setVisible(true)
}, newConfig.duration); }, newConfig.duration);
return newConfig; return newConfig;
...@@ -86,6 +90,7 @@ const Lottery: React.FC = () => { ...@@ -86,6 +90,7 @@ const Lottery: React.FC = () => {
<div className={styles.lotteryRuleItem}><span></span> 每季度每个客户号仅可参与其中一项。</div> <div className={styles.lotteryRuleItem}><span></span> 每季度每个客户号仅可参与其中一项。</div>
</div> </div>
{/*我的奖品*/}
<Popup <Popup
closeable closeable
visible={ showMyPrizePopup } visible={ showMyPrizePopup }
...@@ -107,6 +112,22 @@ const Lottery: React.FC = () => { ...@@ -107,6 +112,22 @@ const Lottery: React.FC = () => {
</div> </div>
</div> </div>
</Popup> </Popup>
{/*我的奖品*/}
{/*中奖弹窗*/}
<Overlay visible={visible} closeOnOverlayClick={false}>
<div className={styles.winningLotteryWrap}>
<div className={styles.winningLotteryInner}>
<div className={styles.winningLotteryTitle}>您获得 <span>5.55元微信立减金</span></div>
<img src={winningLotteryImg} alt=""/>
<div className={styles.winningLotteryTime}>请于2023.11.30 23:59:59前完成领取</div>
<div className={styles.winningLotteryClose} onClick={() => setVisible(false)}></div>
<div className={styles.winningLotteryConfirm} onClick={() => setVisible(false)}></div>
</div>
</div>
</Overlay>
{/*中奖弹窗*/}
</div> </div>
) )
} }
......
src/utils/auth.ts
import apis from '@/apis' import apis from '@/apis'
import SessionStorageUtil from '@/utils/session' import LocalStorageUtil from '@/utils/local'
class AuthUtil { class AuthUtil {
static async auth(params: URLSearchParams): Promise<boolean> { static async auth (params: URLSearchParams): Promise<boolean> {
if (process.env.REACT_APP_ENV === 'development') { return await new Promise((resolve) => {
SessionStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80'); if (process.env.REACT_APP_ENV === 'development') {
return true; LocalStorageUtil.setItem('__TOKEN__', '6d29e9d470e24cf9af48bd5881b97f80')
} else { resolve(true)
const token = SessionStorageUtil.getItem('__TOKEN__'); } else {
if (!token) { const token = LocalStorageUtil.getItem('__TOKEN__')
if (!params.get('code')) { if (!token) {
try { if (!params.get('code')) {
const res = await apis.common.getLoginUrl(); apis.common.getLoginUrl().then(res => {
if (res.ok) { if (res.ok) {
window.location.replace(res.data); window.location.replace(res.data)
} }
} catch (error) { })
throw error } else {
} apis.common.login({
} else {
try {
const res = await 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 => {
if (res.ok) { if (res.ok) {
SessionStorageUtil.setItem('__TOKEN__', res.data.token); LocalStorageUtil.setItem('__TOKEN__', res.data.token)
} }
} catch (error) { resolve(true)
throw error })
} }
} else {
resolve(true)
} }
} }
return 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 SessionStorageUtil from '@/utils/session' 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";
...@@ -9,15 +9,17 @@ const axiosInstance: AxiosInstance = axios.create({ ...@@ -9,15 +9,17 @@ const axiosInstance: AxiosInstance = axios.create({
}); });
const requestInterceptor = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => { const requestInterceptor = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
config.headers.token = SessionStorageUtil.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__')}`,
});
setTimeout(() => { setTimeout(() => {
SessionStorageUtil.clear(); LocalStorageUtil.clear();
window.location.replace('/'); window.location.replace('/');
}, 2000); }, 2000);
} }
......
src/utils/local.ts 0 → 100644
class LocalStorageUtil {
/**
* 存储数据到localStorage
* @param key 键名
* @param value 值，将被自动转换为字符串
*/
static setItem <T>(key: string, value: T): void {
const stringValue = JSON.stringify(value)
localStorage.setItem(key, stringValue)
}
/**
* 从localStorage获取数据
* @param key 键名
* @returns 返回解析后的值，如果不存在则返回null
*/
static getItem<T>(key: string): T | null {
const item = localStorage.getItem(key)
if (item === null) {
return null
}
try {
return JSON.parse(item) as T
} catch (e) {
console.error('Error parsing localStorage item', e)
return null
}
}
/**
* 从localStorage中删除特定数据
* @param key 键名
*/
static removeItem (key: string): void {
localStorage.removeItem(key)
}
/**
* 更新localStorage中的数据
* @param key 键名
* @param value 新的值，将被自动转换为字符串
*/
static updateItem <T>(key: string, value: T): void {
this.setItem(key, value)
}
/**
* 清除所有localStorage数据
*/
static clear (): void {
localStorage.clear()
}
}
export default LocalStorageUtil
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