feat: multi-module iteration
This commit is contained in:
@@ -0,0 +1,171 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useStoreSession } from '../contexts/StoreSessionContext';
|
||||
import { request } from '../lib/api';
|
||||
|
||||
function formatShopHours(store: Record<string, unknown> | null) {
|
||||
const parts: string[] = [];
|
||||
const openTime = store?.openTime ? String(store.openTime) : '';
|
||||
const closeTime = store?.closeTime ? String(store.closeTime) : '';
|
||||
const openTime2 = store?.openTime2 ? String(store.openTime2) : '';
|
||||
const closeTime2 = store?.closeTime2 ? String(store.closeTime2) : '';
|
||||
if (openTime && closeTime) parts.push(`${openTime} - ${closeTime}`);
|
||||
if (openTime2 && closeTime2) parts.push(`${openTime2} - ${closeTime2}`);
|
||||
return parts.length ? parts.join('，') : '09:30 - 22:00';
|
||||
}
|
||||
|
||||
export default function StatusPage() {
|
||||
const navigate = useNavigate();
|
||||
const { resetSession } = useStoreSession();
|
||||
const [open, setOpen] = useState(true);
|
||||
const [permanentlyClosed, setPermanentlyClosed] = useState(false);
|
||||
const [store, setStore] = useState<Record<string, unknown> | null>(null);
|
||||
const [lastUpdate, setLastUpdate] = useState('');
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [pendingOpen, setPendingOpen] = useState<boolean | null>(null);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
request('SHOP_H5', '/shop/dashboard').then((d) => {
|
||||
const s = d.store as Record<string, unknown>;
|
||||
setStore(s);
|
||||
const status = String(s?.status || '');
|
||||
setPermanentlyClosed(status === 'CLOSED');
|
||||
setOpen(status === 'OPEN');
|
||||
if (s?.updatedAt) {
|
||||
setLastUpdate(new Date(String(s.updatedAt)).toLocaleString('zh-CN'));
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
function requestToggle(next: boolean) {
|
||||
if (permanentlyClosed) return;
|
||||
if (next === open) return;
|
||||
setPendingOpen(next);
|
||||
setShowModal(true);
|
||||
}
|
||||
|
||||
async function confirmToggle() {
|
||||
if (pendingOpen === null || permanentlyClosed) return;
|
||||
const next = pendingOpen ? 'OPEN' : 'PAUSED';
|
||||
try {
|
||||
setError('');
|
||||
await request('SHOP_H5', '/shop/store/status', {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ status: next }),
|
||||
});
|
||||
setOpen(pendingOpen);
|
||||
setLastUpdate(new Date().toLocaleString('zh-CN'));
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : '状态切换失败');
|
||||
} finally {
|
||||
setShowModal(false);
|
||||
setPendingOpen(null);
|
||||
}
|
||||
}
|
||||
|
||||
const hoursText = formatShopHours(store);
|
||||
const statusLabel = permanentlyClosed ? '永久关闭' : open ? '营业中' : '临时闭店';
|
||||
|
||||
return (
|
||||
<div className="shop-status-page">
|
||||
<header className="shop-status-header app-page-header">
|
||||
<button type="button" className="app-page-header-action shop-redeem-back" onClick={() => navigate(-1)} aria-label="返回">
|
||||
<span className="material-symbols-outlined">arrow_back</span>
|
||||
</button>
|
||||
<h1 className="app-page-title">门店管理</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="shop-status-logout app-page-header-action app-page-header-action--end"
|
||||
onClick={() => { resetSession(); navigate('/login'); }}
|
||||
>
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 20 }}>logout</span>
|
||||
退出登录
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="shop-status-content">
|
||||
<section className="shop-status-card">
|
||||
<div className="shop-status-icon-wrap">
|
||||
<div className={`shop-status-icon-outer${open && !permanentlyClosed ? ' open' : ' closed'}`}>
|
||||
<div className={`shop-status-icon-inner${open && !permanentlyClosed ? ' open' : ' closed'}`}>
|
||||
<span className="material-symbols-outlined">storefront</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="shop-status-check">
|
||||
<span
|
||||
className="material-symbols-outlined shop-fill-icon"
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: open && !permanentlyClosed ? 'var(--color-success-green)' : 'var(--color-subtle-gray)',
|
||||
}}
|
||||
>
|
||||
{open && !permanentlyClosed ? 'check_circle' : 'cancel'}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className={`shop-status-label${open && !permanentlyClosed ? ' open' : ' closed'}`}>
|
||||
{statusLabel}
|
||||
</h2>
|
||||
|
||||
{permanentlyClosed ? (
|
||||
<p className="shop-status-switch-caption" style={{ marginTop: 12 }}>
|
||||
总部已永久关闭本店，门店端无法自行恢复营业
|
||||
</p>
|
||||
) : (
|
||||
<label className={`shop-status-switch${open ? ' open' : ' closed'}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={open}
|
||||
onChange={(e) => requestToggle(e.target.checked)}
|
||||
aria-label={open ? '切换为临时闭店' : '切换为营业中'}
|
||||
/>
|
||||
<span className="shop-status-switch-track" />
|
||||
<span className="shop-status-switch-caption">
|
||||
{open ? '点击可临时闭店' : '点击恢复营业'}
|
||||
</span>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<p className="shop-status-hours-label">营业时间</p>
|
||||
<p className="shop-status-hours">{hoursText}</p>
|
||||
{lastUpdate && <p className="shop-status-updated">最后修改于 {lastUpdate}</p>}
|
||||
{error ? <p className="shop-status-updated" style={{ color: 'var(--color-error, #c62828)' }}>{error}</p> : null}
|
||||
</section>
|
||||
|
||||
<div className={`shop-status-hint${open && !permanentlyClosed ? ' open' : ' closed'}`}>
|
||||
<span className="material-symbols-outlined">info</span>
|
||||
<p>
|
||||
{permanentlyClosed
|
||||
? '门店已永久关闭。如需重新营业，请联系总部或合伙人处理。'
|
||||
: open
|
||||
? '当前处于营业状态，用户可在您的门店核销餐券。'
|
||||
: '当前处于临时闭店状态，用户将无法看到您的门店或进行核销。'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showModal && (
|
||||
<div className="shop-status-modal" role="dialog" aria-modal="true">
|
||||
<div className="shop-status-modal-card">
|
||||
<h4 className="shop-status-modal-title">确认切换状态？</h4>
|
||||
<p className="shop-status-modal-desc">
|
||||
{pendingOpen
|
||||
? '切换至“营业中”后，用户可正常选择本店核销餐券。'
|
||||
: '切换至“临时闭店”后，用户将无法选择本店核销餐券。'}
|
||||
</p>
|
||||
<div className="shop-status-modal-actions">
|
||||
<button type="button" className="shop-status-modal-cancel" onClick={() => { setShowModal(false); setPendingOpen(null); }}>
|
||||
取消
|
||||
</button>
|
||||
<button type="button" className="shop-status-modal-confirm" onClick={confirmToggle}>
|
||||
确认切换
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user