@@ -7,9 +7,9 @@ import SubPageHeader from '../../components/SubPageHeader';
|
||||
import { request, toast } from '../../lib/api';
|
||||
import { usePageView } from '../../lib/usePageView';
|
||||
import {
|
||||
INVOICE_KIND_LABELS,
|
||||
INVOICE_CATEGORY_LABELS,
|
||||
INVOICE_TITLE_TYPE_LABELS,
|
||||
type InvoiceKind,
|
||||
type InvoiceCategory,
|
||||
type UserInvoiceTitleDto,
|
||||
} from '@dukang/shared-types';
|
||||
|
||||
@@ -42,7 +42,8 @@ export default function InvoiceApplyPage() {
|
||||
|
||||
const [titles, setTitles] = useState<UserInvoiceTitleDto[]>([]);
|
||||
const [selectedId, setSelectedId] = useState('');
|
||||
const [invoiceKind, setInvoiceKind] = useState<InvoiceKind>('NORMAL');
|
||||
const [invoiceCategory, setInvoiceCategory] = useState<InvoiceCategory>('LIQUOR');
|
||||
const [remark, setRemark] = useState('');
|
||||
const [emailOverride, setEmailOverride] = useState('');
|
||||
const [phoneOverride, setPhoneOverride] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -103,19 +104,17 @@ export default function InvoiceApplyPage() {
|
||||
toast('请填写联系电话');
|
||||
return;
|
||||
}
|
||||
if (invoiceKind === 'SPECIAL' && selected.titleType !== 'ENTERPRISE') {
|
||||
toast('专用发票仅支持企业抬头');
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await request(`/trade/orders/${orderId}/invoices`, {
|
||||
method: 'POST',
|
||||
data: {
|
||||
titleId: selectedId,
|
||||
invoiceKind,
|
||||
invoiceKind: 'NORMAL',
|
||||
invoiceCategory,
|
||||
email,
|
||||
phone,
|
||||
remark: remark.trim() || undefined,
|
||||
},
|
||||
});
|
||||
toast('发票申请已提交', 'success');
|
||||
@@ -192,20 +191,26 @@ export default function InvoiceApplyPage() {
|
||||
) : null}
|
||||
|
||||
{canApply ? (
|
||||
<View className="invoice-title-field" style={{ marginBottom: 16 }}>
|
||||
<Text className="invoice-title-label">发票类型</Text>
|
||||
<View className="invoice-title-type-row">
|
||||
{(['NORMAL', 'SPECIAL'] as InvoiceKind[]).map((k) => (
|
||||
<Text
|
||||
key={k}
|
||||
className={`invoice-title-type-chip${invoiceKind === k ? ' active' : ''}`}
|
||||
onClick={() => setInvoiceKind(k)}
|
||||
>
|
||||
{INVOICE_KIND_LABELS[k]}
|
||||
</Text>
|
||||
))}
|
||||
<>
|
||||
<View className="invoice-title-field" style={{ marginBottom: 16 }}>
|
||||
<Text className="invoice-title-label">发票类型</Text>
|
||||
<Text className="invoice-kind-static">增值税普通发票</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="invoice-title-field" style={{ marginBottom: 16 }}>
|
||||
<Text className="invoice-title-label">类型</Text>
|
||||
<View className="invoice-title-type-row">
|
||||
{(['LIQUOR', 'CATERING'] as InvoiceCategory[]).map((k) => (
|
||||
<Text
|
||||
key={k}
|
||||
className={`invoice-title-type-chip${invoiceCategory === k ? ' active' : ''}`}
|
||||
onClick={() => setInvoiceCategory(k)}
|
||||
>
|
||||
{INVOICE_CATEGORY_LABELS[k]}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{canApply ? (
|
||||
@@ -258,7 +263,11 @@ export default function InvoiceApplyPage() {
|
||||
|
||||
{canApply && selected && !selected.email ? (
|
||||
<View className="invoice-title-field" style={{ marginTop: 16 }}>
|
||||
<Text className="invoice-title-label">接收邮箱</Text>
|
||||
<Text className="invoice-title-label">
|
||||
<Text className="invoice-title-star">*</Text>
|
||||
接收邮箱
|
||||
<Text className="invoice-title-label-hint">必填</Text>
|
||||
</Text>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
placeholder="电子发票将发送至此邮箱"
|
||||
@@ -279,6 +288,19 @@ export default function InvoiceApplyPage() {
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{canApply ? (
|
||||
<View className="invoice-title-field" style={{ marginTop: 16 }}>
|
||||
<Text className="invoice-title-label">备注</Text>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={200}
|
||||
placeholder="选填,将显示在发票申请备注中"
|
||||
value={remark}
|
||||
onInput={(e) => setRemark(e.detail.value)}
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
{canApply && titles.length > 0 ? (
|
||||
|
||||
@@ -26,6 +26,24 @@ const ACTION_ICONS = {
|
||||
|
||||
type EditDraft = UpsertInvoiceTitleRequest & { id?: string };
|
||||
|
||||
function FieldLabel({
|
||||
children,
|
||||
required,
|
||||
hint,
|
||||
}: {
|
||||
children: string;
|
||||
required?: boolean;
|
||||
hint?: string;
|
||||
}) {
|
||||
return (
|
||||
<Text className="invoice-title-label">
|
||||
{required ? <Text className="invoice-title-star">*</Text> : null}
|
||||
{children}
|
||||
{hint ? <Text className="invoice-title-label-hint">{hint}</Text> : null}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
function TitleActionIcon({
|
||||
kind,
|
||||
label,
|
||||
@@ -120,6 +138,15 @@ export default function InvoiceTitlesPage() {
|
||||
toast('企业抬头须填写税号');
|
||||
return;
|
||||
}
|
||||
const email = draft.email?.trim() || '';
|
||||
if (!email) {
|
||||
toast('请填写接收邮箱(必填)');
|
||||
return;
|
||||
}
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
toast('邮箱格式不正确');
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload: UpsertInvoiceTitleRequest = {
|
||||
@@ -152,6 +179,10 @@ export default function InvoiceTitlesPage() {
|
||||
}
|
||||
|
||||
async function setDefault(t: UserInvoiceTitleDto) {
|
||||
if (!t.email?.trim()) {
|
||||
toast('请先补全接收邮箱后再设为默认');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await request(`/trade/invoice-titles/${t.id}`, {
|
||||
method: 'PUT',
|
||||
@@ -241,7 +272,7 @@ export default function InvoiceTitlesPage() {
|
||||
</Text>
|
||||
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">抬头类型</Text>
|
||||
<FieldLabel required>抬头类型</FieldLabel>
|
||||
<View className="invoice-title-type-row">
|
||||
{(['PERSONAL', 'ENTERPRISE'] as InvoiceTitleType[]).map((tp) => (
|
||||
<Text
|
||||
@@ -258,7 +289,7 @@ export default function InvoiceTitlesPage() {
|
||||
</View>
|
||||
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">抬头名称</Text>
|
||||
<FieldLabel required>抬头名称</FieldLabel>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={128}
|
||||
@@ -270,7 +301,7 @@ export default function InvoiceTitlesPage() {
|
||||
|
||||
{draft.titleType === 'ENTERPRISE' ? (
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">税号</Text>
|
||||
<FieldLabel required>税号</FieldLabel>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={32}
|
||||
@@ -282,11 +313,13 @@ export default function InvoiceTitlesPage() {
|
||||
) : null}
|
||||
|
||||
<View className="invoice-title-field">
|
||||
<Text className="invoice-title-label">接收邮箱</Text>
|
||||
<FieldLabel required hint="必填,电子发票将发送至此">
|
||||
接收邮箱
|
||||
</FieldLabel>
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={128}
|
||||
placeholder="电子发票将发送至此邮箱"
|
||||
placeholder="请填写邮箱(必填)"
|
||||
value={draft.email || ''}
|
||||
onInput={(e) => setDraft({ ...draft, email: e.detail.value })}
|
||||
/>
|
||||
@@ -311,7 +344,7 @@ export default function InvoiceTitlesPage() {
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={256}
|
||||
placeholder="专用发票需要,选填"
|
||||
placeholder="选填"
|
||||
value={draft.addressPhone || ''}
|
||||
onInput={(e) => setDraft({ ...draft, addressPhone: e.detail.value })}
|
||||
/>
|
||||
@@ -321,7 +354,7 @@ export default function InvoiceTitlesPage() {
|
||||
<Input
|
||||
className="invoice-title-input"
|
||||
maxlength={256}
|
||||
placeholder="专用发票需要,选填"
|
||||
placeholder="选填"
|
||||
value={draft.bankAccount || ''}
|
||||
onInput={(e) => setDraft({ ...draft, bankAccount: e.detail.value })}
|
||||
/>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import { View, Text, Image } from '@tarojs/components';
|
||||
import '../../styles/order.css';
|
||||
import Taro, { useDidShow, useRouter } from '@tarojs/taro';
|
||||
import PageShell from '../../components/PageShell';
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
saveWechatLoginResult,
|
||||
} from '../../lib/pay-wechat';
|
||||
import { applyWechatLoginResult } from '../../lib/wechat-auth';
|
||||
import { getBrandAssetsSync, loadBrandAssets } from '../../lib/brand-assets';
|
||||
import { isWechatEnv } from '../../lib/weixin';
|
||||
import { goLogin } from '../../lib/auth-nav';
|
||||
import { request, toast } from '../../lib/api';
|
||||
@@ -25,12 +26,12 @@ export default function PayPage() {
|
||||
const orderId = router.params.orderId ?? '';
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [authLoading, setAuthLoading] = useState(false);
|
||||
const [mockMode, setMockMode] = useState(true);
|
||||
const [needsWechatAuth, setNeedsWechatAuth] = useState(false);
|
||||
const [msg, setMsg] = useState('');
|
||||
const [orderNo, setOrderNo] = useState('');
|
||||
const [payAmount, setPayAmount] = useState('—');
|
||||
const [deliveryType, setDeliveryType] = useState('');
|
||||
const [brandMarkUrl, setBrandMarkUrl] = useState(() => getBrandAssetsSync().brandLogoMarkUrl);
|
||||
|
||||
const returnPath = orderId
|
||||
? `/pages/pay/index?orderId=${orderId}`
|
||||
@@ -39,7 +40,6 @@ export default function PayPage() {
|
||||
const refreshPayReadiness = useCallback(async () => {
|
||||
try {
|
||||
const [config, profile] = await Promise.all([fetchClientConfig(), fetchUserProfile()]);
|
||||
setMockMode(config.mockPay);
|
||||
setNeedsWechatAuth(needsWechatAuthForPay(config, profile));
|
||||
return profile;
|
||||
} catch {
|
||||
@@ -51,6 +51,10 @@ export default function PayPage() {
|
||||
void refreshPayReadiness();
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
void loadBrandAssets().then((brand) => setBrandMarkUrl(brand.brandLogoMarkUrl));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!orderId) return;
|
||||
if (process.env.TARO_ENV === 'weapp') {
|
||||
@@ -174,7 +178,7 @@ export default function PayPage() {
|
||||
<View className="sub-page-body">
|
||||
<View className="pay-status">
|
||||
<View className="pay-status-icon">
|
||||
<Text>¥</Text>
|
||||
<Image className="pay-status-brand" src={brandMarkUrl} mode="aspectFit" />
|
||||
</View>
|
||||
<Text className="pay-status-title">
|
||||
{needsWechatAuth ? '需完成微信授权' : '待支付'}
|
||||
@@ -204,12 +208,6 @@ export default function PayPage() {
|
||||
<Text className="order-row-label">支付方式</Text>
|
||||
<Text className="order-row-value">微信支付</Text>
|
||||
</View>
|
||||
<View className="order-row">
|
||||
<Text className="order-row-label">说明</Text>
|
||||
<Text className="order-row-value">
|
||||
{mockMode ? 'Mock 模式由服务端直接标记已付款' : '将调起微信收银台'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
{msg ? (
|
||||
<Text className="pay-wechat-auth-msg" style={{ marginTop: 12 }}>
|
||||
|
||||
@@ -153,6 +153,30 @@
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.invoice-title-star {
|
||||
color: #c62828;
|
||||
margin-right: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.invoice-title-label-hint {
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
color: #c62828;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.invoice-kind-static {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
color: var(--color-on-surface, #1a1a1a);
|
||||
line-height: 44px;
|
||||
padding: 0 12px;
|
||||
background: var(--color-surface, #fafafa);
|
||||
border: 1px solid var(--color-outline, #ddd);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.invoice-title-input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
|
||||
@@ -498,6 +498,12 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pay-status-brand {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.pay-status-title {
|
||||
|
||||
Reference in New Issue
Block a user