225 lines
9.4 KiB
TypeScript
225 lines
9.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import PageHeader from '@dukang/shared-ui/PageHeader';
|
|
import AppImage from '@dukang/shared-ui/AppImage';
|
|
import { request } from '../lib/api';
|
|
import { usePartnerSession } from '../contexts/PartnerSessionContext';
|
|
import { isSubAccount } from '../lib/partnerAccess';
|
|
import { storeStatusLabel, storeStatusPillClass, type StoreStatusValue } from '../lib/storeStatus';
|
|
|
|
const STATUS_OPTIONS: StoreStatusValue[] = ['OPEN', 'PAUSED', 'CLOSED'];
|
|
|
|
export default function StoreDetailPage() {
|
|
const { id } = useParams();
|
|
const navigate = useNavigate();
|
|
const { account } = usePartnerSession();
|
|
const subReadonly = isSubAccount(account);
|
|
const [store, setStore] = useState<Record<string, unknown> | null>(null);
|
|
const [loadError, setLoadError] = useState('');
|
|
const [form, setForm] = useState({ name: '', phone: '', address: '', intro: '' });
|
|
const [status, setStatus] = useState<StoreStatusValue>('OPEN');
|
|
const [statusSaving, setStatusSaving] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [toast, setToast] = useState('');
|
|
|
|
function showToast(message: string) {
|
|
setToast(message);
|
|
window.setTimeout(() => setToast(''), 2000);
|
|
}
|
|
|
|
function applyStore(data: Record<string, unknown>) {
|
|
setStore(data);
|
|
setForm({
|
|
name: String(data.name || ''),
|
|
phone: String(data.phone || ''),
|
|
address: String(data.address || ''),
|
|
intro: String(data.intro || ''),
|
|
});
|
|
setStatus(String(data.status || 'OPEN').toUpperCase() as StoreStatusValue);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!id) return;
|
|
setLoadError('');
|
|
request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}`)
|
|
.then(applyStore)
|
|
.catch((e) => {
|
|
setStore(null);
|
|
setLoadError(e instanceof Error ? e.message : '加载失败');
|
|
});
|
|
}, [id]);
|
|
|
|
async function changeStatus(next: StoreStatusValue) {
|
|
if (!id || next === status || statusSaving) return;
|
|
if (status === 'CLOSED') return;
|
|
if (next === 'CLOSED') {
|
|
const ok = window.confirm('关闭后不可恢复营业，确认关闭该门店？');
|
|
if (!ok) return;
|
|
}
|
|
setStatusSaving(true);
|
|
setError('');
|
|
try {
|
|
const updated = await request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}/status`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ status: next }),
|
|
});
|
|
setStatus(next);
|
|
setStore((prev) => (prev ? { ...prev, ...updated, status: next } : prev));
|
|
showToast('状态已更新');
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : '状态更新失败');
|
|
} finally {
|
|
setStatusSaving(false);
|
|
}
|
|
}
|
|
|
|
async function saveBasic() {
|
|
if (!id || saving || status === 'CLOSED') return;
|
|
setSaving(true);
|
|
setError('');
|
|
try {
|
|
const data = await request<Record<string, unknown>>('PARTNER_H5', `/partner/stores/${id}/basic`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({
|
|
name: form.name.trim(),
|
|
phone: form.phone.trim(),
|
|
address: form.address.trim(),
|
|
intro: form.intro.trim(),
|
|
}),
|
|
});
|
|
applyStore(data);
|
|
showToast('已保存');
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : '保存失败');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
if (loadError) {
|
|
return (
|
|
<div className="partner-detail-page">
|
|
<PageHeader title="门店详情" onBack={() => navigate('/stores')} />
|
|
<div className="empty">{loadError}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!store) return <div className="empty">加载中...</div>;
|
|
|
|
const envPhotos = Array.isArray(store.media)
|
|
? (store.media as Array<{ url?: string; bizType?: string }>).filter((m) => m.bizType === 'ENV')
|
|
: [];
|
|
const readOnly = subReadonly || status === 'CLOSED';
|
|
|
|
return (
|
|
<div className="partner-detail-page">
|
|
<PageHeader title="门店详情" onBack={() => navigate('/stores')} />
|
|
|
|
<main style={{ padding: '16px 20px' }}>
|
|
{error && <p className="partner-form-error" role="alert" style={{ marginBottom: 12 }}>{error}</p>}
|
|
|
|
{!subReadonly && (
|
|
<section className="partner-form-card" style={{ margin: '0 0 16px' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
|
<h3 className="label-md text-muted" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>运营状态</h3>
|
|
<span className={`partner-status-pill ${storeStatusPillClass(status)}`}>
|
|
{status === 'OPEN' && <span className="partner-dot partner-dot--green" style={{ width: 8, height: 8, display: 'inline-block', marginRight: 4 }} />}
|
|
{storeStatusLabel(status)}
|
|
</span>
|
|
</div>
|
|
<div className="partner-status-toggle">
|
|
{STATUS_OPTIONS.map((s) => (
|
|
<button
|
|
key={s}
|
|
type="button"
|
|
className={status === s ? 'active' : ''}
|
|
disabled={readOnly || statusSaving}
|
|
onClick={() => void changeStatus(s)}
|
|
>
|
|
{storeStatusLabel(s)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{status === 'CLOSED' && (
|
|
<p className="label-md text-muted" style={{ marginTop: 12 }}>门店已关闭，不可再变更状态或编辑资料</p>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
<section className="partner-form-card" style={{ margin: '0 0 16px' }}>
|
|
<h3 className="headline-md" style={{ borderLeft: '4px solid var(--color-heritage-red)', paddingLeft: 12, marginBottom: 16 }}>基本信息</h3>
|
|
<div className="partner-cover">
|
|
<AppImage
|
|
src={store.coverUrl ? String(store.coverUrl) : null}
|
|
alt={form.name}
|
|
wrapperClassName="app-image--fill"
|
|
/>
|
|
</div>
|
|
<div className="partner-field">
|
|
<label>门店名称</label>
|
|
<input disabled={readOnly} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} style={{ width: '100%', padding: '12px 16px', border: '1px solid rgba(226,190,188,0.5)', borderRadius: 8, fontSize: 16, fontWeight: 500 }} />
|
|
</div>
|
|
<div className="partner-field">
|
|
<label>联系电话</label>
|
|
<div className="partner-field-input">
|
|
<span className="material-symbols-outlined">call</span>
|
|
<input disabled={readOnly} type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
|
|
</div>
|
|
</div>
|
|
<div className="partner-field">
|
|
<label>门店地址</label>
|
|
<textarea disabled={readOnly} rows={2} value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} />
|
|
</div>
|
|
<div className="partner-field">
|
|
<label>门店简介</label>
|
|
<textarea disabled={readOnly} rows={4} placeholder="请输入门店简介（10-500字）" value={form.intro} onChange={(e) => setForm({ ...form, intro: e.target.value })} />
|
|
<div style={{ textAlign: 'right', marginTop: 4 }}>
|
|
<span className="label-md text-muted">{form.intro.length} / 500</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="partner-form-card" style={{ margin: '0 0 16px' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 16 }}>
|
|
<h3 className="headline-md" style={{ borderLeft: '4px solid var(--color-heritage-red)', paddingLeft: 12 }}>店内环境</h3>
|
|
<span className="label-md text-muted">{envPhotos.length ? `已上传 ${envPhotos.length} 张` : '暂无照片'}</span>
|
|
</div>
|
|
{envPhotos.length > 0 ? (
|
|
<div className="partner-photo-grid">
|
|
{envPhotos.map((photo, index) => (
|
|
<div key={index} className="partner-cover" style={{ aspectRatio: '1' }}>
|
|
<AppImage src={photo.url ? String(photo.url) : null} alt={`环境图 ${index + 1}`} wrapperClassName="app-image--fill" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="label-md text-muted">录入门店时上传的环境照片将显示在这里</p>
|
|
)}
|
|
</section>
|
|
|
|
<section className="partner-form-card" style={{ margin: 0, background: 'var(--color-surface-container)' }}>
|
|
<h3 className="headline-md" style={{ borderLeft: '4px solid var(--color-subtle-gray)', paddingLeft: 12, marginBottom: 16 }}>管理信息</h3>
|
|
<div>
|
|
<label className="label-md text-muted">状态</label>
|
|
<p className="body-md" style={{ fontWeight: 500 }}>{storeStatusLabel(status)}</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="partner-save-footer">
|
|
<button type="button" className="partner-save-cancel" onClick={() => navigate('/stores')}>返回</button>
|
|
{!subReadonly && (
|
|
<button type="button" className="partner-save-submit" onClick={() => void saveBasic()} disabled={readOnly || saving}>
|
|
<span className="material-symbols-outlined">save</span>
|
|
{saving ? '保存中…' : '保存修改'}
|
|
</button>
|
|
)}
|
|
</footer>
|
|
|
|
{toast && <div className="partner-toast">{toast}</div>}
|
|
</div>
|
|
);
|
|
}
|