feat: multi-module iteration
This commit is contained in:
@@ -0,0 +1,237 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
import SubPageHeader from '../components/SubPageHeader';
|
||||
import RegionPicker from '../components/RegionPicker';
|
||||
import { request } from '../lib/api';
|
||||
import { buildAddressListUrl, readCheckoutContext } from '../lib/navigation';
|
||||
import { DEFAULT_REGION, formatRegion } from '../lib/region-data';
|
||||
import { normalizePhoneInput, validateMobilePhone } from '../lib/phone';
|
||||
import { usePageView } from '../lib/usePageView';
|
||||
|
||||
type AddressForm = {
|
||||
receiverName: string;
|
||||
phone: string;
|
||||
province: string;
|
||||
city: string;
|
||||
district: string;
|
||||
detail: string;
|
||||
isDefault: boolean;
|
||||
};
|
||||
|
||||
export default function AddressEditPage() {
|
||||
const { id } = useParams();
|
||||
const [params] = useSearchParams();
|
||||
const isEdit = Boolean(id);
|
||||
usePageView('address_edit', { mode: isEdit ? 'edit' : 'create' });
|
||||
const navigate = useNavigate();
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [form, setForm] = useState<AddressForm>({
|
||||
receiverName: '',
|
||||
phone: '',
|
||||
province: DEFAULT_REGION.province,
|
||||
city: params.get('city') || DEFAULT_REGION.city,
|
||||
district: DEFAULT_REGION.district,
|
||||
detail: '',
|
||||
isDefault: true,
|
||||
});
|
||||
|
||||
const checkoutCtx = readCheckoutContext(params);
|
||||
|
||||
function goBackToList() {
|
||||
navigate(buildAddressListUrl(checkoutCtx));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
request<Array<Record<string, unknown>>>('USER_H5', '/user/addresses').then((list) => {
|
||||
const found = list.find((a) => String(a.id) === id);
|
||||
if (found) {
|
||||
setForm({
|
||||
receiverName: String(found.receiverName),
|
||||
phone: String(found.phone),
|
||||
province: String(found.province),
|
||||
city: String(found.city),
|
||||
district: String(found.district),
|
||||
detail: String(found.detail),
|
||||
isDefault: found.isDefault === 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
const regionText = formatRegion(form.province, form.city, form.district);
|
||||
|
||||
function validateForm(): string | null {
|
||||
if (!form.receiverName.trim()) return '请输入收货人姓名';
|
||||
const phoneCheck = validateMobilePhone(form.phone);
|
||||
if (!phoneCheck.ok) return phoneCheck.message ?? '请输入正确的手机号码';
|
||||
if (!form.province || !form.city || !form.district) return '请选择所在地区';
|
||||
if (!form.detail.trim()) return '请输入详细地址';
|
||||
return null;
|
||||
}
|
||||
|
||||
async function save() {
|
||||
const validationError = validateForm();
|
||||
if (validationError) {
|
||||
setError(validationError);
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setError('');
|
||||
try {
|
||||
if (isEdit && id) {
|
||||
await request('USER_H5', `/user/addresses/${id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
} else {
|
||||
await request('USER_H5', '/user/addresses', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
}
|
||||
navigate(buildAddressListUrl(checkoutCtx));
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : '保存失败');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="address-edit-page">
|
||||
<SubPageHeader
|
||||
title={isEdit ? '编辑收货地址' : '添加收货地址'}
|
||||
onBack={goBackToList}
|
||||
/>
|
||||
|
||||
<main className="address-edit-main sub-page-body">
|
||||
<section className="address-edit-card">
|
||||
<div className="address-edit-field">
|
||||
<label className="address-edit-label">收货人姓名</label>
|
||||
<div className="address-edit-line">
|
||||
<input
|
||||
type="text"
|
||||
className="address-edit-input"
|
||||
placeholder="请输入姓名"
|
||||
value={form.receiverName}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, receiverName: e.target.value });
|
||||
setError('');
|
||||
}}
|
||||
/>
|
||||
<span className="material-symbols-outlined address-edit-field-icon">person</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="address-edit-field">
|
||||
<label className="address-edit-label">手机号码</label>
|
||||
<div className="address-edit-line">
|
||||
<span className="address-edit-prefix">+86</span>
|
||||
<input
|
||||
type="tel"
|
||||
className="address-edit-input"
|
||||
placeholder="请输入手机号"
|
||||
maxLength={11}
|
||||
inputMode="numeric"
|
||||
value={form.phone}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, phone: normalizePhoneInput(e.target.value) });
|
||||
setError('');
|
||||
}}
|
||||
/>
|
||||
<span className="material-symbols-outlined address-edit-field-icon">smartphone</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" className="address-edit-field address-edit-region" onClick={() => setPickerOpen(true)}>
|
||||
<div className="address-edit-line address-edit-line--picker address-edit-line--region">
|
||||
<span className={regionText ? 'address-edit-region-value' : 'address-edit-region-placeholder'}>
|
||||
{regionText || '省份、城市、区县'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="address-edit-field address-edit-field--last">
|
||||
<label className="address-edit-label">详细地址</label>
|
||||
<div className="address-edit-textarea-wrap">
|
||||
<textarea
|
||||
className="address-edit-textarea"
|
||||
placeholder="街道、门牌号、小区名称等"
|
||||
rows={3}
|
||||
value={form.detail}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, detail: e.target.value });
|
||||
setError('');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="address-edit-card address-edit-default">
|
||||
<div className="address-edit-default-info">
|
||||
<div className="address-edit-default-icon">
|
||||
<span className="material-symbols-outlined fill-icon">stars</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="address-edit-default-title">设为默认地址</h3>
|
||||
<p className="address-edit-default-desc">每次下单时将优先使用此地址</p>
|
||||
</div>
|
||||
</div>
|
||||
<label className="address-edit-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.isDefault}
|
||||
onChange={(e) => setForm({ ...form, isDefault: e.target.checked })}
|
||||
/>
|
||||
<span className="address-edit-toggle-track" />
|
||||
<span className="address-edit-toggle-thumb" />
|
||||
</label>
|
||||
</section>
|
||||
|
||||
{error && <p className="address-edit-error">{error}</p>}
|
||||
|
||||
<div className="address-edit-security">
|
||||
<span className="material-symbols-outlined">location_on</span>
|
||||
<span>已通过杜康云安全加密处理</span>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<nav className="address-edit-footer">
|
||||
<button type="button" className="address-edit-cancel-btn" onClick={goBackToList}>
|
||||
<span className="material-symbols-outlined">close</span>
|
||||
<span>取消</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="address-edit-save-btn"
|
||||
disabled={saving}
|
||||
onClick={save}
|
||||
>
|
||||
<span className="material-symbols-outlined">publish</span>
|
||||
<span>{saving ? '保存中...' : '保存并发布'}</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<RegionPicker
|
||||
open={pickerOpen}
|
||||
value={{ province: form.province, city: form.city, district: form.district }}
|
||||
onClose={() => setPickerOpen(false)}
|
||||
onConfirm={(region) => {
|
||||
setForm((f) => ({
|
||||
...f,
|
||||
province: region.province,
|
||||
city: region.city,
|
||||
district: region.district,
|
||||
}));
|
||||
setPickerOpen(false);
|
||||
setError('');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user