删除门店的多银行账户列表
This commit is contained in:
@@ -13,7 +13,6 @@ import StatusPage from './pages/StatusPage';
|
||||
import MinePage from './pages/MinePage';
|
||||
import StaffPage from './pages/StaffPage';
|
||||
import WithdrawPage from './pages/WithdrawPage';
|
||||
import BankAccountsPage from './pages/BankAccountsPage';
|
||||
import PackagesPage from './pages/PackagesPage';
|
||||
|
||||
export default function App() {
|
||||
@@ -26,7 +25,6 @@ export default function App() {
|
||||
<Route path="/select-store" element={<SelectStorePage />} />
|
||||
<Route path="/staff" element={<StaffPage />} />
|
||||
<Route path="/withdraw" element={<WithdrawPage />} />
|
||||
<Route path="/bank-accounts" element={<BankAccountsPage />} />
|
||||
<Route path="/packages" element={<PackagesPage />} />
|
||||
<Route path="/redeem" element={<RedeemConfirmPage />} />
|
||||
<Route path="/redeem/phone" element={<PhoneRedeemPage />} />
|
||||
|
||||
@@ -1,252 +0,0 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import type { StoreBankAccountDto } from '@dukang/shared-types';
|
||||
import { request } from '../lib/api';
|
||||
import { useStoreSession } from '../contexts/StoreSessionContext';
|
||||
import { useStorePageView } from '../lib/usePageView';
|
||||
|
||||
type FormState = {
|
||||
id?: string;
|
||||
bankAccountName: string;
|
||||
bankAccountNo: string;
|
||||
bankBranch: string;
|
||||
};
|
||||
|
||||
const EMPTY_FORM: FormState = { bankAccountName: '', bankAccountNo: '', bankBranch: '' };
|
||||
|
||||
export default function BankAccountsPage() {
|
||||
useStorePageView('store_bank_accounts_view');
|
||||
const navigate = useNavigate();
|
||||
const { store } = useStoreSession();
|
||||
const isPrimary = !!store?.isPrimary;
|
||||
const [items, setItems] = useState<StoreBankAccountDto[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [msg, setMsg] = useState('');
|
||||
const [form, setForm] = useState<FormState>(EMPTY_FORM);
|
||||
const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof FormState, string>>>({});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const res = await request<StoreBankAccountDto[]>('SHOP_H5', '/shop/store/bank-accounts');
|
||||
setItems(res ?? []);
|
||||
} catch (e) {
|
||||
setMsg(e instanceof Error ? e.message : '加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
function startCreate() {
|
||||
setForm(EMPTY_FORM);
|
||||
setFieldErrors({});
|
||||
}
|
||||
|
||||
function startEdit(item: StoreBankAccountDto) {
|
||||
setForm({
|
||||
id: item.id,
|
||||
bankAccountName: item.bankAccountName,
|
||||
bankAccountNo: item.bankAccountNo,
|
||||
bankBranch: item.bankBranch ?? '',
|
||||
});
|
||||
setFieldErrors({});
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
const name = form.bankAccountName.trim();
|
||||
const no = form.bankAccountNo.replace(/\s+/g, '');
|
||||
const branch = form.bankBranch.trim();
|
||||
const next: Partial<Record<keyof FormState, string>> = {};
|
||||
if (!name) next.bankAccountName = '请填写收款人';
|
||||
if (!/^\d{8,32}$/.test(no)) next.bankAccountNo = '请填写 8～32 位数字账号';
|
||||
setFieldErrors(next);
|
||||
if (Object.keys(next).length) return;
|
||||
|
||||
setSubmitting(true);
|
||||
setMsg('');
|
||||
try {
|
||||
const body = JSON.stringify({ bankAccountName: name, bankAccountNo: no, bankBranch: branch });
|
||||
if (form.id) {
|
||||
await request('SHOP_H5', `/shop/store/bank-accounts/${form.id}`, {
|
||||
method: 'PUT',
|
||||
body,
|
||||
});
|
||||
} else {
|
||||
await request('SHOP_H5', '/shop/store/bank-accounts', { method: 'POST', body });
|
||||
}
|
||||
setForm(EMPTY_FORM);
|
||||
await load();
|
||||
} catch (e) {
|
||||
setMsg(e instanceof Error ? e.message : '保存失败');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function setDefault(id: string) {
|
||||
setMsg('');
|
||||
try {
|
||||
await request('SHOP_H5', `/shop/store/bank-accounts/${id}/default`, { method: 'POST' });
|
||||
await load();
|
||||
} catch (e) {
|
||||
setMsg(e instanceof Error ? e.message : '设置失败');
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
setMsg('');
|
||||
try {
|
||||
await request('SHOP_H5', `/shop/store/bank-accounts/${id}`, { method: 'DELETE' });
|
||||
await load();
|
||||
} catch (e) {
|
||||
setMsg(e instanceof Error ? e.message : '删除失败');
|
||||
}
|
||||
}
|
||||
|
||||
const editing = !!form.id;
|
||||
|
||||
return (
|
||||
<div className="shop-records-page">
|
||||
<header className="shop-records-header" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<button
|
||||
type="button"
|
||||
className="shop-withdraw-back"
|
||||
onClick={() => navigate(-1)}
|
||||
aria-label="返回"
|
||||
>
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 22 }}>arrow_back</span>
|
||||
</button>
|
||||
<h1 className="app-page-title" style={{ margin: 0 }}>收款账户</h1>
|
||||
</header>
|
||||
|
||||
<div className="shop-records-main">
|
||||
<p
|
||||
className="shop-records-summary-note"
|
||||
style={{ marginBottom: 12 }}
|
||||
>
|
||||
用于总部打款，可维护多个账户；标记「默认」的账户用于提现打款，切换即时生效、无需重启。
|
||||
</p>
|
||||
|
||||
{loading ? (
|
||||
<p className="shop-records-empty">加载中…</p>
|
||||
) : items.length === 0 ? (
|
||||
<p className="shop-records-empty">暂无收款账户{isPrimary ? '，请新增' : ''}</p>
|
||||
) : (
|
||||
<div className="shop-records-list">
|
||||
{items.map((it) => (
|
||||
<article key={it.id} className="shop-record-card">
|
||||
<div className="shop-record-card-top">
|
||||
<div>
|
||||
<div className="shop-record-order">
|
||||
<span className="shop-record-time" style={{ margin: 0 }}>收款人</span>
|
||||
<span>{it.bankAccountName}</span>
|
||||
{it.isDefault ? (
|
||||
<span className="shop-record-badge paid">默认</span>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="shop-record-time">账号: {it.bankAccountNo}</p>
|
||||
{it.bankBranch ? <p className="shop-record-time">开户行: {it.bankBranch}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
{isPrimary ? (
|
||||
<div className="shop-record-footer" style={{ display: 'flex', gap: 12 }}>
|
||||
<button type="button" className="shop-records-chip" onClick={() => startEdit(it)}>
|
||||
编辑
|
||||
</button>
|
||||
{!it.isDefault ? (
|
||||
<button type="button" className="shop-records-chip" onClick={() => void setDefault(it.id)}>
|
||||
设为默认
|
||||
</button>
|
||||
) : null}
|
||||
{!it.isDefault ? (
|
||||
<button type="button" className="shop-records-chip" onClick={() => void remove(it.id)}>
|
||||
删除
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isPrimary ? (
|
||||
<section className="shop-records-summary" style={{ marginTop: 16 }}>
|
||||
<h3 className="shop-records-list-title">
|
||||
{editing ? '编辑账户' : '新增账户'}
|
||||
</h3>
|
||||
<div className="shop-mine-info-card">
|
||||
<label className="shop-record-amount-label">
|
||||
收款人 <span style={{ color: 'red' }}>*</span>
|
||||
</label>
|
||||
<input
|
||||
className="shop-withdraw-input"
|
||||
value={form.bankAccountName}
|
||||
maxLength={64}
|
||||
placeholder="户名 / 收款人姓名"
|
||||
onChange={(e) => setForm({ ...form, bankAccountName: e.target.value })}
|
||||
/>
|
||||
{fieldErrors.bankAccountName ? (
|
||||
<p className="shop-withdraw-msg" role="alert">{fieldErrors.bankAccountName}</p>
|
||||
) : null}
|
||||
|
||||
<label className="shop-record-amount-label" style={{ marginTop: 12 }}>
|
||||
银行账号 <span style={{ color: 'red' }}>*</span>
|
||||
</label>
|
||||
<input
|
||||
className="shop-withdraw-input"
|
||||
inputMode="numeric"
|
||||
value={form.bankAccountNo}
|
||||
maxLength={32}
|
||||
placeholder="请输入银行账号"
|
||||
onChange={(e) => setForm({ ...form, bankAccountNo: e.target.value.replace(/[^\d]/g, '') })}
|
||||
/>
|
||||
{fieldErrors.bankAccountNo ? (
|
||||
<p className="shop-withdraw-msg" role="alert">{fieldErrors.bankAccountNo}</p>
|
||||
) : null}
|
||||
|
||||
<label className="shop-record-amount-label" style={{ marginTop: 12 }}>
|
||||
开户行名称
|
||||
</label>
|
||||
<input
|
||||
className="shop-withdraw-input"
|
||||
value={form.bankBranch}
|
||||
maxLength={128}
|
||||
placeholder="如 中国工商银行郑州分行"
|
||||
onChange={(e) => setForm({ ...form, bankBranch: e.target.value })}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
|
||||
<button
|
||||
type="button"
|
||||
className="shop-withdraw-btn"
|
||||
disabled={submitting}
|
||||
onClick={() => void submit()}
|
||||
>
|
||||
{submitting ? '保存中…' : '保存'}
|
||||
</button>
|
||||
{editing ? (
|
||||
<button
|
||||
type="button"
|
||||
className="shop-records-chip"
|
||||
onClick={startCreate}
|
||||
>
|
||||
取消编辑
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<p className="shop-records-empty">仅主账号可维护收款账户</p>
|
||||
)}
|
||||
|
||||
{msg ? <p className="shop-withdraw-msg">{msg}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -153,12 +153,6 @@ export default function MinePage() {
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 20 }}>account_balance_wallet</span>
|
||||
结算提现
|
||||
</button>
|
||||
{profile?.isPrimary ? (
|
||||
<button type="button" className="shop-mine-action" onClick={() => navigate('/bank-accounts')}>
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 20 }}>account_balance</span>
|
||||
收款账户
|
||||
</button>
|
||||
) : null}
|
||||
{profile?.isPrimary ? (
|
||||
<button type="button" className="shop-mine-action" onClick={() => navigate('/packages')}>
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 20 }}>restaurant_menu</span>
|
||||
|
||||
Reference in New Issue
Block a user