@@ -0,0 +1,360 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { View, Text, Input, Switch, Image } from '@tarojs/components';
|
||||
import '../../styles/invoice.css';
|
||||
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro';
|
||||
import PageShell from '../../components/PageShell';
|
||||
import SubPageHeader from '../../components/SubPageHeader';
|
||||
import { request, toast } from '../../lib/api';
|
||||
import { usePageView } from '../../lib/usePageView';
|
||||
import {
|
||||
INVOICE_TITLE_TYPE_LABELS,
|
||||
type InvoiceTitleType,
|
||||
type UpsertInvoiceTitleRequest,
|
||||
type UserInvoiceTitleDto,
|
||||
} from '@dukang/shared-types';
|
||||
import iconEdit from '../../assets/icons/编辑.png';
|
||||
import iconDefault from '../../assets/icons/默认.png';
|
||||
import iconDelete from '../../assets/icons/删除.png';
|
||||
|
||||
const isH5 = process.env.TARO_ENV === 'h5';
|
||||
|
||||
const ACTION_ICONS = {
|
||||
edit: iconEdit,
|
||||
star: iconDefault,
|
||||
trash: iconDelete,
|
||||
} as const;
|
||||
|
||||
type EditDraft = UpsertInvoiceTitleRequest & { id?: string };
|
||||
|
||||
function TitleActionIcon({
|
||||
kind,
|
||||
label,
|
||||
onClick,
|
||||
}: {
|
||||
kind: keyof typeof ACTION_ICONS;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<View
|
||||
className="invoice-title-icon-btn"
|
||||
hoverClass="invoice-title-icon-btn--hover"
|
||||
aria-label={label}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Image className="invoice-title-icon-img" src={ACTION_ICONS[kind]} mode="aspectFit" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const EMPTY_DRAFT: EditDraft = {
|
||||
titleType: 'PERSONAL',
|
||||
titleName: '',
|
||||
taxNo: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
addressPhone: '',
|
||||
bankAccount: '',
|
||||
isDefault: false,
|
||||
};
|
||||
|
||||
export default function InvoiceTitlesPage() {
|
||||
usePageView('user_invoice_titles_view');
|
||||
const [titles, setTitles] = useState<UserInvoiceTitleDto[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
const [draft, setDraft] = useState<EditDraft>(EMPTY_DRAFT);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
return request<UserInvoiceTitleDto[]>('/trade/invoice-titles')
|
||||
.then((data) => setTitles(Array.isArray(data) ? data : []))
|
||||
.catch((e) => {
|
||||
toast(e instanceof Error ? e.message : '加载失败');
|
||||
setTitles([]);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
useDidShow(() => {
|
||||
void load();
|
||||
});
|
||||
|
||||
usePullDownRefresh(() => {
|
||||
void load().finally(() => Taro.stopPullDownRefresh());
|
||||
});
|
||||
|
||||
function openCreate() {
|
||||
setDraft({ ...EMPTY_DRAFT });
|
||||
setSheetOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(t: UserInvoiceTitleDto) {
|
||||
setDraft({
|
||||
id: t.id,
|
||||
titleType: t.titleType,
|
||||
titleName: t.titleName,
|
||||
taxNo: t.taxNo ?? '',
|
||||
email: t.email ?? '',
|
||||
phone: t.phone ?? '',
|
||||
addressPhone: t.addressPhone ?? '',
|
||||
bankAccount: t.bankAccount ?? '',
|
||||
isDefault: t.isDefault,
|
||||
});
|
||||
setSheetOpen(true);
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (saving) return;
|
||||
const titleName = draft.titleName.trim();
|
||||
if (!titleName) {
|
||||
toast('请填写发票抬头名称');
|
||||
return;
|
||||
}
|
||||
if (draft.titleType === 'ENTERPRISE' && !draft.taxNo?.trim()) {
|
||||
toast('企业抬头须填写税号');
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload: UpsertInvoiceTitleRequest = {
|
||||
titleType: draft.titleType,
|
||||
titleName,
|
||||
taxNo: draft.taxNo?.trim() || null,
|
||||
email: draft.email?.trim() || null,
|
||||
phone: draft.phone?.trim() || null,
|
||||
addressPhone: draft.addressPhone?.trim() || null,
|
||||
bankAccount: draft.bankAccount?.trim() || null,
|
||||
isDefault: !!draft.isDefault,
|
||||
};
|
||||
if (draft.id) {
|
||||
await request(`/trade/invoice-titles/${draft.id}`, {
|
||||
method: 'PUT',
|
||||
data: payload,
|
||||
});
|
||||
toast('已更新', 'success');
|
||||
} else {
|
||||
await request('/trade/invoice-titles', { method: 'POST', data: payload });
|
||||
toast('已添加', 'success');
|
||||
}
|
||||
setSheetOpen(false);
|
||||
await load();
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : '保存失败');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function setDefault(t: UserInvoiceTitleDto) {
|
||||
try {
|
||||
await request(`/trade/invoice-titles/${t.id}`, {
|
||||
method: 'PUT',
|
||||
data: {
|
||||
titleType: t.titleType,
|
||||
titleName: t.titleName,
|
||||
taxNo: t.taxNo,
|
||||
email: t.email,
|
||||
phone: t.phone,
|
||||
addressPhone: t.addressPhone,
|
||||
bankAccount: t.bankAccount,
|
||||
isDefault: true,
|
||||
},
|
||||
});
|
||||
toast('已设为默认', 'success');
|
||||
await load();
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : '设置失败');
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
const ok = await Taro.showModal({ title: '提示', content: '确认删除该发票抬头？' });
|
||||
if (!ok.confirm) return;
|
||||
try {
|
||||
await request(`/trade/invoice-titles/${id}`, { method: 'DELETE' });
|
||||
toast('已删除', 'success');
|
||||
await load();
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : '删除失败');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PageShell variant="sub" className="invoice-titles-page">
|
||||
{isH5 ? (
|
||||
<SubPageHeader
|
||||
title="发票抬头"
|
||||
onBack={() => Taro.navigateBack().catch(() => Taro.switchTab({ url: '/pages/mine/index' }))}
|
||||
/>
|
||||
) : null}
|
||||
<View className="invoice-titles-body">
|
||||
{loading ? <View className="u-empty">加载中…</View> : null}
|
||||
{!loading && titles.length === 0 ? (
|
||||
<View className="u-empty">暂无发票抬头，点击右上角添加</View>
|
||||
) : null}
|
||||
{!loading &&
|
||||
titles.map((t) => (
|
||||
<View key={t.id} className="invoice-title-card">
|
||||
<View className="invoice-title-card-head">
|
||||
<Text className="invoice-title-name">{t.titleName}</Text>
|
||||
<Text className="invoice-title-type">
|
||||
{INVOICE_TITLE_TYPE_LABELS[t.titleType] ?? t.titleType}
|
||||
</Text>
|
||||
{t.isDefault ? <Text className="invoice-title-default">默认</Text> : null}
|
||||
</View>
|
||||
{t.taxNo ? <Text className="invoice-title-line">税号：{t.taxNo}</Text> : null}
|
||||
{t.email ? <Text className="invoice-title-line">邮箱：{t.email}</Text> : null}
|
||||
{t.phone ? <Text className="invoice-title-line">电话：{t.phone}</Text> : null}
|
||||
{t.addressPhone ? (
|
||||
<Text className="invoice-title-line">地址电话：{t.addressPhone}</Text>
|
||||
) : null}
|
||||
{t.bankAccount ? (
|
||||
<Text className="invoice-title-line">开户行账号：{t.bankAccount}</Text>
|
||||
) : null}
|
||||
<View className="invoice-title-actions">
|
||||
<TitleActionIcon kind="edit" label="编辑" onClick={() => openEdit(t)} />
|
||||
{!t.isDefault ? (
|
||||
<TitleActionIcon kind="star" label="设为默认" onClick={() => void setDefault(t)} />
|
||||
) : null}
|
||||
<TitleActionIcon kind="trash" label="删除" onClick={() => void remove(t.id)} />
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className="invoice-titles-fab" onClick={openCreate}>
|
||||
<Text>+ 添加抬头</Text>
|
||||
</View>
|
||||
|
||||
{sheetOpen ? (
|
||||
<View className="invoice-title-sheet-mask">
|
||||
<View className="invoice-title-sheet-mask-backdrop" onClick={() => !saving && setSheetOpen(false)} />
|
||||
<View className="invoice-title-sheet">
|
||||
<Text className="invoice-title-sheet-title">
|
||||
{draft.id ? '编辑发票抬头' : '添加发票抬头'}
|
||||
</Text>
|
||||
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">抬头类型</Text>
|
||||
<View className="invoice-title-type-row">
|
||||
{(['PERSONAL', 'ENTERPRISE'] as InvoiceTitleType[]).map((tp) => (
|
||||
<Text
|
||||
key={tp}
|
||||
className={`invoice-title-type-chip${
|
||||
draft.titleType === tp ? ' active' : ''
|
||||
}`}
|
||||
onClick={() => setDraft({ ...draft, titleType: tp })}
|
||||
>
|
||||
{INVOICE_TITLE_TYPE_LABELS[tp]}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">抬头名称</Text>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={128}
|
||||
placeholder="个人姓名或企业名称"
|
||||
value={draft.titleName}
|
||||
onInput={(e) => setDraft({ ...draft, titleName: e.detail.value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{draft.titleType === 'ENTERPRISE' ? (
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">税号</Text>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={32}
|
||||
placeholder="企业税号"
|
||||
value={draft.taxNo || ''}
|
||||
onInput={(e) => setDraft({ ...draft, taxNo: e.detail.value })}
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">接收邮箱</Text>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={128}
|
||||
placeholder="电子发票将发送至此邮箱"
|
||||
value={draft.email || ''}
|
||||
onInput={(e) => setDraft({ ...draft, email: e.detail.value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">联系电话</Text>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
type="number"
|
||||
maxlength={20}
|
||||
placeholder="选填"
|
||||
value={draft.phone || ''}
|
||||
onInput={(e) => setDraft({ ...draft, phone: e.detail.value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{draft.titleType === 'ENTERPRISE' ? (
|
||||
<>
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">地址电话</Text>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={256}
|
||||
placeholder="专用发票需要，选填"
|
||||
value={draft.addressPhone || ''}
|
||||
onInput={(e) => setDraft({ ...draft, addressPhone: e.detail.value })}
|
||||
/>
|
||||
</View>
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">开户行账号</Text>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={256}
|
||||
placeholder="专用发票需要，选填"
|
||||
value={draft.bankAccount || ''}
|
||||
onInput={(e) => setDraft({ ...draft, bankAccount: e.detail.value })}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<View className="invoice-title-default-row">
|
||||
<Text className="invoice-title-label">设为默认抬头</Text>
|
||||
<Switch
|
||||
checked={!!draft.isDefault}
|
||||
color="#A61D24"
|
||||
onChange={(e) => setDraft({ ...draft, isDefault: !!e.detail.value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="invoice-title-sheet-actions">
|
||||
<Text
|
||||
className="invoice-title-sheet-cancel"
|
||||
onClick={() => !saving && setSheetOpen(false)}
|
||||
>
|
||||
取消
|
||||
</Text>
|
||||
<Text
|
||||
className={`invoice-title-sheet-save${saving ? ' is-disabled' : ''}`}
|
||||
onClick={() => { if (!saving) void save(); }}
|
||||
>
|
||||
{saving ? '保存中…' : '保存'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user