jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

门店开通流程

Browse Source
This commit is contained in:
jacy-dukang
2026-07-03 14:53:21 +08:00
parent c7dc6a2274
commit f2175b83f7
24 changed files with 1451 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/h5-partner/package.json
+2
View File
@@ -11,6 +11,8 @@
"dependencies": {
"@dukang/shared-ui": "workspace:*",
"@dukang/shared-types": "workspace:*",
"@dukang/weixin-sdk": "workspace:*",
"element-china-area-data": "^6.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.0"
apps/h5-partner/src/components/ChinaRegionPicker.tsx
+178
View File
@@ -0,0 +1,178 @@
import { createPortal } from 'react-dom';
import { useEffect, useMemo, useState } from 'react';
import { codeToText } from 'element-china-area-data';
import { CHINA_REGION_OPTIONS, formatRegionLabel, parseRegionCodes } from '../lib/china-region';
type RegionNode = {
value: string;
label: string;
children?: RegionNode[];
};
type ChinaRegionPickerProps = {
value?: string[];
onChange?: (codes: string[]) => void;
disabled?: boolean;
};
const STEP_LABELS = ['选择省份', '选择城市', '选择区县'] as const;
function lockBodyScroll(lock: boolean) {
if (typeof document === 'undefined') return;
const body = document.body;
if (lock) {
const scrollY = window.scrollY;
body.dataset.dukangScrollY = String(scrollY);
body.style.position = 'fixed';
body.style.top = `-${scrollY}px`;
body.style.left = '0';
body.style.right = '0';
body.style.overflow = 'hidden';
} else {
const scrollY = Number(body.dataset.dukangScrollY ?? '0');
body.style.position = '';
body.style.top = '';
body.style.left = '';
body.style.right = '';
body.style.overflow = '';
delete body.dataset.dukangScrollY;
window.scrollTo(0, scrollY);
}
}
export default function ChinaRegionPicker({ value = [], onChange, disabled }: ChinaRegionPickerProps) {
const [open, setOpen] = useState(false);
const [draft, setDraft] = useState<string[]>(value);
const [step, setStep] = useState(0);
const options = CHINA_REGION_OPTIONS as RegionNode[];
const parsed = parseRegionCodes(value);
const display = parsed ? formatRegionLabel(parsed) : '请选择省 / 市 / 区县';
const provinces = options;
const cities = useMemo(() => {
const p = provinces.find((item) => item.value === draft[0]);
return p?.children ?? [];
}, [draft, provinces]);
const districts = useMemo(() => {
const c = cities.find((item) => item.value === draft[1]);
return c?.children ?? [];
}, [draft, cities]);
const listItems = step === 0 ? provinces : step === 1 ? cities : districts;
const activeCode = draft[step];
useEffect(() => {
if (!open) return;
lockBodyScroll(true);
return () => lockBodyScroll(false);
}, [open]);
function openPicker() {
if (disabled) return;
const next = value.length === 3 ? [...value] : [];
setDraft(next);
setStep(next.length >= 3 ? 2 : next.length);
setOpen(true);
}
function closePicker() {
setOpen(false);
}
function selectItem(code: string) {
const next = [...draft.slice(0, step), code];
setDraft(next);
if (step < 2) {
setStep(step + 1);
return;
}
onChange?.(next);
closePicker();
}
function confirm() {
if (draft.length < 3) return;
onChange?.(draft);
closePicker();
}
const modal = open ? (
<div className="partner-region-overlay" role="presentation" onClick={closePicker}>
<div
className="partner-region-sheet"
role="dialog"
aria-modal
onClick={(e) => e.stopPropagation()}
onTouchMove={(e) => e.stopPropagation()}
>
<div className="partner-region-sheet-header">
<button type="button" className="partner-region-sheet-btn" onClick={closePicker}>取消</button>
<span className="headline-md">选择地区</span>
<button
type="button"
className="partner-region-sheet-btn partner-region-sheet-btn--primary"
disabled={draft.length < 3}
onClick={confirm}
>
确定
</button>
</div>
<div className="partner-region-steps">
{STEP_LABELS.map((label, index) => (
<button
key={label}
type="button"
className={`partner-region-step${step === index ? ' partner-region-step--active' : ''}${draft[index] ? ' partner-region-step--done' : ''}`}
disabled={index === 1 && !draft[0] || index === 2 && !draft[1]}
onClick={() => {
if (index === 1 && !draft[0]) return;
if (index === 2 && !draft[1]) return;
setStep(index);
}}
>
<span className="partner-region-step-index">{index + 1}</span>
<span>{label}</span>
</button>
))}
</div>
{draft[0] && (
<p className="partner-region-breadcrumb label-md text-muted">
{codeToText[draft[0]]}
{draft[1] ? ` / ${codeToText[draft[1]]}` : ''}
{draft[2] ? ` / ${codeToText[draft[2]]}` : ''}
</p>
)}
<div className="partner-region-list" role="listbox">
{listItems.map((item) => (
<button
key={item.value}
type="button"
role="option"
aria-selected={activeCode === item.value}
className={`partner-region-item${activeCode === item.value ? ' partner-region-item--active' : ''}`}
onClick={() => selectItem(item.value)}
>
{item.label}
</button>
))}
</div>
</div>
</div>
) : null;
return (
<>
<button type="button" className="partner-field-input partner-region-trigger" onClick={openPicker} disabled={disabled}>
<span className="material-symbols-outlined">location_on</span>
<span className={parsed ? '' : 'text-muted'}>{display}</span>
<span className="material-symbols-outlined partner-region-chevron">expand_more</span>
</button>
{typeof document !== 'undefined' ? createPortal(modal, document.body) : null}
</>
);
}
apps/h5-partner/src/components/OssUploadField.tsx
+136
View File
@@ -0,0 +1,136 @@
import { useId, useRef, useState } from 'react';
import { uploadFileToOss, type OssMediaType } from '../lib/upload';
import { isWechatEnv, weixinSdk } from '../lib/weixin';
type OssUploadFieldProps = {
value?: string;
onChange?: (url: string) => void;
bizType: string;
mediaType?: OssMediaType;
accept?: string;
wide?: boolean;
compact?: boolean;
label?: string;
};
const DEFAULT_MAX_MB = 10;
export default function OssUploadField({
value,
onChange,
bizType,
mediaType = 'IMAGE',
accept,
wide,
compact,
label,
}: OssUploadFieldProps) {
const inputId = useId();
const inputRef = useRef<HTMLInputElement>(null);
const [uploading, setUploading] = useState(false);
const [error, setError] = useState('');
const resolvedAccept =
accept ?? (mediaType === 'VIDEO' ? 'video/*' : mediaType === 'FILE' ? 'image/*,.pdf' : 'image/*');
const useWechatPicker = isWechatEnv() && mediaType !== 'VIDEO';
async function uploadSelectedFile(file: File) {
if (file.size > DEFAULT_MAX_MB * 1024 * 1024) {
setError(`文件不能超过 ${DEFAULT_MAX_MB}MB`);
return;
}
setUploading(true);
setError('');
try {
const result = await uploadFileToOss(file, { bizType, mediaType });
onChange?.(result.url);
} catch (e) {
setError(e instanceof Error ? e.message : '上传失败');
} finally {
setUploading(false);
if (inputRef.current) inputRef.current.value = '';
}
}
async function pickFile() {
if (uploading) return;
setError('');
if (useWechatPicker) {
try {
const files = await weixinSdk.chooseImages({
count: 1,
sourceType: ['album', 'camera'],
});
if (files?.[0]) {
await uploadSelectedFile(files[0]);
return;
}
} catch (e) {
const msg = e instanceof Error ? e.message : '无法打开相册';
if (!/cancel/i.test(msg)) setError(msg);
return;
}
}
inputRef.current?.click();
}
const isImage = mediaType === 'IMAGE' && value;
const isFile = mediaType === 'FILE' && value;
const triggerProps = {
type: 'button' as const,
disabled: uploading,
onClick: () => void pickFile(),
};
return (
<div className="partner-oss-upload">
<input
id={inputId}
ref={inputRef}
type="file"
accept={resolvedAccept}
className="partner-oss-upload-input"
disabled={uploading}
onChange={(e) => {
const file = e.target.files?.[0];
if (file) void uploadSelectedFile(file);
}}
/>
{isImage ? (
<button {...triggerProps} className={`partner-upload-preview${wide ? ' partner-upload-preview--wide' : ''}`}>
<img src={value} alt={label ?? '已上传'} />
<span className="partner-upload-preview-mask">
<span className="material-symbols-outlined">{uploading ? 'hourglass_top' : 'edit'}</span>
<span>{uploading ? '上传中…' : '更换'}</span>
</span>
</button>
) : isFile ? (
<button {...triggerProps} className="partner-upload-file">
<div className="partner-bills-icon" style={{ background: '#ffb3ae' }}>
<span className="material-symbols-outlined text-primary">description</span>
</div>
<div style={{ textAlign: 'left', flex: 1 }}>
<span className="text-primary" style={{ fontWeight: 700, display: 'block' }}>已上传合同</span>
<span className="label-md text-muted">{uploading ? '上传中…' : '点击更换'}</span>
</div>
</button>
) : (
<button
{...triggerProps}
className={`partner-upload-dashed${wide ? ' partner-upload-dashed--wide' : ''}${compact ? ' partner-upload-dashed--compact' : ''}`}
>
<span className="material-symbols-outlined text-primary" style={{ fontSize: compact ? 28 : 36 }}>
{uploading ? 'hourglass_top' : 'add_a_photo'}
</span>
<span className="text-primary" style={{ fontWeight: 500 }}>
{uploading ? '上传中…' : (label ?? (useWechatPicker ? '从相册选择' : '点击上传'))}
</span>
</button>
)}
{error && <p className="partner-form-error" role="alert">{error}</p>}
</div>
);
}
apps/h5-partner/src/lib/china-region.ts
+59
View File
@@ -0,0 +1,59 @@
import { codeToText, regionData } from 'element-china-area-data';
export { regionData as CHINA_REGION_OPTIONS };
export type OpenCityRef = {
id: string;
name: string;
code: string;
partnerId?: string | null;
};
export type ParsedChinaRegion = {
province: string;
city: string;
district: string;
provinceCode: string;
cityCode: string;
districtCode: string;
};
export function districtCodeToCityCode(districtCode: string): string {
if (districtCode.length < 6) return districtCode;
return `${districtCode.slice(0, 4)}00`;
}
export function parseRegionCodes(codes?: string[]): ParsedChinaRegion | null {
if (!codes || codes.length < 3) return null;
const [provinceCode, cityCode, districtCode] = codes;
const province = codeToText[provinceCode];
const city = codeToText[cityCode];
const district = codeToText[districtCode];
if (!province || !city || !district) return null;
return { province, city, district, provinceCode, cityCode, districtCode };
}
export function formatRegionLabel(region: ParsedChinaRegion): string {
return `${region.province} / ${region.city} / ${region.district}`;
}
export function matchOpenCityId(cities: OpenCityRef[], districtCode: string): string | undefined {
const cityCode = districtCodeToCityCode(districtCode);
return (
cities.find((c) => c.code === cityCode)?.id
?? cities.find((c) => c.code === districtCode)?.id
?? cities.find((c) => districtCode.startsWith(c.code.slice(0, 4)))?.id
);
}
export function resolveRegionBinding(codes: string[], cities: OpenCityRef[]) {
const region = parseRegionCodes(codes);
if (!region) return null;
const cityId = matchOpenCityId(cities, region.districtCode);
const matchedCity = cityId ? cities.find((c) => c.id === cityId) : undefined;
return {
region,
cityId,
matchedCity,
cityCode: districtCodeToCityCode(region.districtCode),
};
}
apps/h5-partner/src/lib/storeDraft.ts
+49 -7
View File
@@ -1,9 +1,18 @@
export type StoreDraftForm = {
regionCodes: string[];
cityId: string;
province: string;
city: string;
district: string;
name: string;
phone: string;
district: string;
address: string;
intro: string;
accountPhone: string;
accountName: string;
coverUrl: string;
envPhotoUrls: string[];
contractUrl: string;
bankAccountName: string;
bankAccountNo: string;
bankBranch: string;
@@ -14,27 +23,55 @@ export type StoreDraft = {
form: StoreDraftForm;
};
export const STORE_DRAFT_KEY = 'partner_store_draft_v1';
export const STORE_DRAFT_KEY = 'partner_store_draft_v2';
export const defaultStoreForm = (): StoreDraftForm => ({
regionCodes: [],
cityId: '',
province: '',
city: '',
district: '',
name: '',
phone: '',
district: '金水区',
address: '',
intro: '',
accountPhone: '',
accountName: '',
coverUrl: '',
envPhotoUrls: ['', '', ''],
contractUrl: '',
bankAccountName: '',
bankAccountNo: '',
bankBranch: '',
});
function normalizeStringArray(raw: unknown, length: number): string[] {
if (!Array.isArray(raw)) return Array.from({ length }, () => '');
const items = raw.map((item) => String(item ?? ''));
while (items.length < length) items.push('');
return items.slice(0, length);
}
function normalizeForm(raw: Record<string, unknown>): StoreDraftForm {
const base = defaultStoreForm();
const regionCodes = Array.isArray(raw.regionCodes)
? raw.regionCodes.map((code) => String(code))
: base.regionCodes;
return {
regionCodes,
cityId: String(raw.cityId ?? base.cityId),
province: String(raw.province ?? base.province),
city: String(raw.city ?? base.city),
district: String(raw.district ?? base.district),
name: String(raw.name ?? base.name),
phone: String(raw.phone ?? base.phone),
district: String(raw.district ?? base.district),
address: String(raw.address ?? base.address),
intro: String(raw.intro ?? base.intro),
accountPhone: String(raw.accountPhone ?? base.accountPhone),
accountName: String(raw.accountName ?? base.accountName),
coverUrl: String(raw.coverUrl ?? base.coverUrl),
envPhotoUrls: normalizeStringArray(raw.envPhotoUrls, 3),
contractUrl: String(raw.contractUrl ?? base.contractUrl),
bankAccountName: String(raw.bankAccountName ?? base.bankAccountName),
bankAccountNo: String(raw.bankAccountNo ?? base.bankAccountNo),
bankBranch: String(raw.bankBranch ?? base.bankBranch),
@@ -69,11 +106,14 @@ export function clearStoreDraft() {
const PHONE_RE = /^1\d{10}$/;
const BANK_RE = /^\d{16,19}$/;
export function validateStoreStep1(form: StoreDraftForm): string | null {
export function validateStoreStep1(
form: Pick<StoreDraftForm, 'regionCodes' | 'cityId' | 'name' | 'phone' | 'address' | 'intro'>,
): string | null {
if (!form.regionCodes || form.regionCodes.length < 3) return '请选择省 / 市 / 区县';
if (!form.cityId) return '所选地区未匹配到开城城市，请联系总部配置开城区划';
if (!form.name.trim()) return '请填写门店名称';
if (!form.phone.trim()) return '请填写联系电话';
if (!PHONE_RE.test(form.phone.trim())) return '联系电话须为11位手机号';
if (!form.district.trim()) return '请填写区县';
if (!form.address.trim()) return '请填写详细地址';
if (form.intro.trim()) {
const len = form.intro.trim().length;
@@ -82,7 +122,9 @@ export function validateStoreStep1(form: StoreDraftForm): string | null {
return null;
}
export function validateStoreStep3(form: StoreDraftForm): string | null {
export function validateStoreStep3(
form: Pick<StoreDraftForm, 'bankAccountName' | 'bankAccountNo' | 'bankBranch'>,
): string | null {
if (!form.bankAccountName.trim()) return '请填写户主姓名';
if (!form.bankAccountNo.trim()) return '请填写银行卡号';
if (!BANK_RE.test(form.bankAccountNo.replace(/\s/g, ''))) return '银行卡号须为 16~19 位数字';
apps/h5-partner/src/lib/storeStatus.ts
+16
View File
@@ -0,0 +1,16 @@
export type StoreStatusValue = 'OPEN' | 'PAUSED' | 'CLOSED';
export function storeStatusLabel(status: string): string {
const s = String(status).toUpperCase();
if (s === 'OPEN') return '营业中';
if (s === 'PAUSED') return '暂时闭店';
if (s === 'CLOSED') return '关闭';
return status;
}
export function storeStatusPillClass(status: string): string {
const s = String(status).toUpperCase();
if (s === 'OPEN') return 'partner-status-pill--open';
if (s === 'PAUSED') return 'partner-status-pill--paused';
return 'partner-status-pill--closed';
}
apps/h5-partner/src/lib/upload.ts
+57
View File
@@ -0,0 +1,57 @@
import { apiBase, request } from './api';
export type OssMediaType = 'IMAGE' | 'VIDEO' | 'FILE';
export type UploadFileResult = {
url: string;
ossKey: string;
bucket: string;
mock: boolean;
};
/** 经 API 服务端转存 OSS，避免浏览器直传跨域 */
export async function uploadFileToOss(
file: File,
options: { bizType: string; mediaType?: OssMediaType },
): Promise<UploadFileResult> {
const mediaType = options.mediaType ?? (file.type.startsWith('video/') ? 'VIDEO' : 'IMAGE');
const formData = new FormData();
formData.append('file', file);
formData.append('bizType', options.bizType);
formData.append('mediaType', mediaType);
const token = localStorage.getItem('accessToken');
const headers: Record<string, string> = { 'X-Client-App': 'PARTNER_H5' };
if (token) headers.Authorization = `Bearer ${token}`;
const res = await fetch(`${apiBase}/common/resources/upload`, {
method: 'POST',
headers,
body: formData,
});
const json = await res.json();
if (json.code === 401) {
localStorage.removeItem('accessToken');
throw new Error('未登录');
}
if (json.code !== 0) throw new Error(json.message || '上传失败');
const data = json.data as UploadFileResult;
return {
url: data.url,
ossKey: data.ossKey,
bucket: data.bucket,
mock: data.mock,
};
}
export type OpenCityOption = {
id: string;
name: string;
code: string;
province: string;
};
export async function fetchPartnerCities(): Promise<OpenCityOption[]> {
return request<OpenCityOption[]>('PARTNER_H5', '/partner/stores/cities');
}
apps/h5-partner/src/lib/weixin.ts
+9
View File
@@ -0,0 +1,9 @@
import { createWeixinSdk, isWechatEnv } from '@dukang/weixin-sdk';
export const weixinSdk = createWeixinSdk({
apiBase: '/api/v1',
clientApp: 'PARTNER_H5',
getAccessToken: () => localStorage.getItem('accessToken'),
});
export { isWechatEnv };
apps/h5-partner/src/pages/HomePage.tsx
+3 -38
View File
@@ -1,27 +1,13 @@
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { isLoggedIn, request } from '../lib/api';
import { LEADERBOARD_MOCK } from '../lib/leaderboard';
import { storeStatusLabel } from '../lib/storeStatus';
function fmtMoney(n: number) {
return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
function auditStatus(store: Record<string, unknown>) {
const audits = store.audits as Array<{ status?: string }> | undefined;
return String(audits?.[0]?.status ?? '').toUpperCase();
}
function storeStatusLabel(store: Record<string, unknown>) {
const audit = auditStatus(store);
if (audit === 'PENDING') return '待审核';
const s = String(store.status).toUpperCase();
if (s === 'OPEN') return '营业中';
if (s === 'PAUSED') return '暂时闭店';
if (s === 'CLOSED') return '已关闭';
return s;
}
export default function HomePage() {
const navigate = useNavigate();
const [dash, setDash] = useState<Record<string, unknown> | null>(null);
@@ -37,10 +23,6 @@ export default function HomePage() {
const orderCount = Number(dash?.orderCount || 0);
const activeStores = stores.filter((s) => String(s.status).toUpperCase() === 'OPEN').length;
const abnormalStores = Math.max(0, storeCount - activeStores);
const pendingStores = useMemo(
() => stores.filter((s) => auditStatus(s) === 'PENDING'),
[stores],
);
const revenue = orderCount * 128.45;
const profit = revenue * 0.25;
const pendingShip = Math.ceil(orderCount * 0.04);
@@ -173,25 +155,8 @@ export default function HomePage() {
<span className="headline-lg" style={{ fontSize: 24 }}>{monthNew}</span>
</div>
</div>
<div>
<p className="label-md text-muted" style={{ marginBottom: 4 }}>待审核门店</p>
<p className="headline-lg" style={{ fontSize: 24 }}>{pendingStores.length}</p>
</div>
</div>
{pendingStores.length > 0 && (
<div className="partner-pending-stores">
<p className="label-md text-muted" style={{ marginBottom: 8 }}>待审核门店名称</p>
<ul className="partner-store-name-list partner-store-name-list--compact">
{pendingStores.map((s) => (
<li key={String(s.id)}>
<span className="headline-md">{String(s.name || '未命名门店')}</span>
</li>
))}
</ul>
</div>
)}
{displayStores.length > 0 && (
<ul className="partner-store-name-list">
<li className="partner-store-name-list-header">
@@ -201,7 +166,7 @@ export default function HomePage() {
{displayStores.slice(0, 5).map((s) => (
<li key={String(s.id)}>
<span className="headline-md">{String(s.name || '未命名门店')}</span>
<span className="label-md text-muted">{storeStatusLabel(s)}</span>
<span className="label-md text-muted">{storeStatusLabel(String(s.status))}</span>
</li>
))}
</ul>
apps/h5-partner/src/pages/StoreCreatePage.tsx
+139 -51
View File
@@ -1,7 +1,11 @@
import { useEffect, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import PageHeader from '@dukang/shared-ui/PageHeader';
import ChinaRegionPicker from '../components/ChinaRegionPicker';
import OssUploadField from '../components/OssUploadField';
import { request } from '../lib/api';
import { resolveRegionBinding } from '../lib/china-region';
import { fetchPartnerCities, type OpenCityOption } from '../lib/upload';
import {
clearStoreDraft,
defaultStoreForm,
@@ -20,6 +24,9 @@ export default function StoreCreatePage() {
const saved = loadStoreDraft();
const [form, setForm] = useState<StoreDraftForm>(saved?.form ?? defaultStoreForm());
const [error, setError] = useState('');
const [submitting, setSubmitting] = useState(false);
const [cities, setCities] = useState<OpenCityOption[]>([]);
const [citiesError, setCitiesError] = useState('');
const stepFromUrl = Number(params.get('step') || 0);
const step = stepFromUrl >= 1 && stepFromUrl <= 3 ? stepFromUrl : (saved?.step ?? 1);
@@ -34,11 +41,45 @@ export default function StoreCreatePage() {
saveStoreDraft({ step, form });
}, [step, form]);
useEffect(() => {
void fetchPartnerCities()
.then((items) => {
setCities(items);
if (!items.length) setCitiesError('暂无开城城市，请联系总部在后台配置');
})
.catch((e) => setCitiesError(e instanceof Error ? e.message : '加载开城城市失败'));
}, []);
const regionBindingHint = useMemo(() => {
if (!form.regionCodes.length) return null;
const binding = resolveRegionBinding(form.regionCodes, cities);
if (!binding) return null;
if (binding.cityId && binding.matchedCity) {
return `已匹配开城城市：${binding.matchedCity.name}`;
}
return '所选地区暂未开城，请联系总部配置对应区划';
}, [form.regionCodes, cities]);
function patchForm(patch: Partial<StoreDraftForm>) {
setForm((prev) => ({ ...prev, ...patch }));
setError('');
}
function bindRegionSelection(codes: string[]) {
const binding = resolveRegionBinding(codes, cities);
if (!binding) {
patchForm({ regionCodes: codes, cityId: '', province: '', city: '', district: '' });
return;
}
patchForm({
regionCodes: codes,
cityId: binding.cityId ?? '',
province: binding.region.province,
city: binding.region.city,
district: binding.region.district,
});
}
function goStep(n: number) {
setParams({ step: String(n) });
setError('');
@@ -58,21 +99,38 @@ export default function StoreCreatePage() {
const step1Msg = validateStoreStep1(form);
if (step1Msg) { setError(step1Msg); return; }
await request('PARTNER_H5', '/partner/stores', {
method: 'POST',
body: JSON.stringify({
name: form.name.trim(),
phone: form.phone.trim(),
district: form.district.trim(),
address: form.address.trim(),
intro: form.intro.trim() || undefined,
bankAccountName: form.bankAccountName.trim(),
bankAccountNo: form.bankAccountNo.replace(/\s/g, ''),
bankBranch: form.bankBranch.trim(),
}),
});
clearStoreDraft();
navigate('/stores');
setSubmitting(true);
setError('');
try {
const envPhotoUrls = form.envPhotoUrls.map((u) => u.trim()).filter(Boolean);
const result = await request<{ store: { id: string } }>('PARTNER_H5', '/partner/stores', {
method: 'POST',
body: JSON.stringify({
cityId: form.cityId,
province: form.province,
city: form.city,
name: form.name.trim(),
phone: form.phone.trim(),
district: form.district.trim(),
address: form.address.trim(),
intro: form.intro.trim() || undefined,
coverUrl: form.coverUrl.trim() || undefined,
envPhotoUrls: envPhotoUrls.length ? envPhotoUrls : undefined,
contractUrl: form.contractUrl.trim() || undefined,
bankAccountName: form.bankAccountName.trim(),
bankAccountNo: form.bankAccountNo.replace(/\s/g, ''),
bankBranch: form.bankBranch.trim(),
accountPhone: form.accountPhone.trim() || undefined,
accountName: form.accountName.trim() || undefined,
}),
});
clearStoreDraft();
navigate(`/stores/${result.store.id}`);
} catch (e) {
setError(e instanceof Error ? e.message : '提交失败');
} finally {
setSubmitting(false);
}
}
const progress = step === 1 ? 0 : step === 2 ? 50 : 100;
@@ -102,8 +160,8 @@ export default function StoreCreatePage() {
</div>
</nav>
{error && (
<p className="partner-form-error" role="alert">{error}</p>
{(error || citiesError) && (
<p className="partner-form-error" role="alert">{error || citiesError}</p>
)}
{step === 1 && (
@@ -113,6 +171,15 @@ export default function StoreCreatePage() {
<div className="partner-section-bar" />
<h2 className="headline-md">门店基本信息</h2>
</div>
<div className="partner-field">
<label>所在地区 <span className="text-primary">*</span></label>
<ChinaRegionPicker value={form.regionCodes} onChange={bindRegionSelection} />
{regionBindingHint && (
<p className={`label-md${form.cityId ? ' text-muted' : ' text-primary'}`} style={{ marginTop: 8 }}>
{regionBindingHint}
</p>
)}
</div>
<div className="partner-field">
<label>门店名称 <span className="text-primary">*</span></label>
<div className="partner-field-input">
@@ -127,13 +194,6 @@ export default function StoreCreatePage() {
<input type="tel" placeholder="请输入联系电话" value={form.phone} onChange={(e) => patchForm({ phone: e.target.value })} />
</div>
</div>
<div className="partner-field">
<label>区县 <span className="text-primary">*</span></label>
<div className="partner-field-input">
<span className="material-symbols-outlined">location_on</span>
<input placeholder="请选择区县" value={form.district} onChange={(e) => patchForm({ district: e.target.value })} />
</div>
</div>
<div className="partner-field">
<label>详细地址 <span className="text-primary">*</span></label>
<textarea rows={2} placeholder="请输入详细门牌号" value={form.address} onChange={(e) => patchForm({ address: e.target.value })} />
@@ -145,6 +205,20 @@ export default function StoreCreatePage() {
<span className="label-md text-muted">{form.intro.length} / 500</span>
</div>
</div>
<div className="partner-field">
<label>店长手机</label>
<div className="partner-field-input">
<span className="material-symbols-outlined">smartphone</span>
<input type="tel" placeholder="默认同门店电话" value={form.accountPhone} onChange={(e) => patchForm({ accountPhone: e.target.value })} />
</div>
</div>
<div className="partner-field">
<label>店长姓名</label>
<div className="partner-field-input">
<span className="material-symbols-outlined">person</span>
<input placeholder="默认同门店名" value={form.accountName} onChange={(e) => patchForm({ accountName: e.target.value })} />
</div>
</div>
</section>
<div className="partner-info-banner">
<div className="partner-bills-icon">
@@ -170,45 +244,57 @@ export default function StoreCreatePage() {
</div>
<section className="partner-form-card">
<h3 className="headline-md">门头照 *</h3>
<p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>至少1张，需包含完整招牌</p>
<button type="button" className="partner-upload-dashed partner-upload-dashed--wide">
<span className="material-symbols-outlined text-primary" style={{ fontSize: 36 }}>add_a_photo</span>
<span className="text-primary" style={{ fontWeight: 500 }}>点击或拖拽上传</span>
</button>
<h3 className="headline-md">门头照</h3>
<p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>建议至少 1 张，需包含完整招牌</p>
<OssUploadField
wide
bizType="STORE_TITLE"
mediaType="IMAGE"
value={form.coverUrl}
onChange={(coverUrl) => patchForm({ coverUrl })}
label="点击或拖拽上传"
/>
</section>
<section className="partner-form-card">
<h3 className="headline-md">环境照片 *</h3>
<p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>至少3张，展示店内整洁环境</p>
<h3 className="headline-md">环境照片</h3>
<p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>建议至少 3 张，展示店内整洁环境</p>
<div className="partner-upload-grid">
{[0, 1, 2].map((i) => (
<button key={i} type="button" className="partner-upload-dashed">
<span className="material-symbols-outlined text-primary">add_a_photo</span>
<span>添加照片</span>
</button>
{form.envPhotoUrls.map((url, index) => (
<OssUploadField
key={index}
compact
bizType="STORE_ENV"
mediaType="IMAGE"
value={url}
label="添加照片"
onChange={(nextUrl) => {
const envPhotoUrls = [...form.envPhotoUrls];
envPhotoUrls[index] = nextUrl;
patchForm({ envPhotoUrls });
}}
/>
))}
</div>
</section>
<section className="partner-form-card">
<h3 className="headline-md">签约合同 *</h3>
<h3 className="headline-md">签约合同</h3>
<p className="label-md text-muted" style={{ margin: '4px 0 12px' }}>拍照上传签约协议首页与盖章页</p>
<button type="button" className="partner-upload-dashed" style={{ flexDirection: 'row', height: 96 }}>
<div className="partner-bills-icon" style={{ background: '#ffb3ae' }}>
<span className="material-symbols-outlined text-primary">description</span>
</div>
<div style={{ textAlign: 'left' }}>
<span className="text-primary" style={{ fontWeight: 700, display: 'block' }}>上传合同副本</span>
<span className="label-md text-muted">支持 JPG, PNG, PDF</span>
</div>
</button>
<OssUploadField
bizType="STORE_CONTRACT"
mediaType="FILE"
accept="image/*,.pdf"
value={form.contractUrl}
onChange={(contractUrl) => patchForm({ contractUrl })}
label="上传合同副本"
/>
</section>
<div className="partner-info-banner" style={{ background: 'rgba(254,214,91,0.2)', borderColor: 'rgba(254,214,91,0.5)' }}>
<span className="material-symbols-outlined text-secondary" style={{ fontSize: 18 }}>info</span>
<p className="label-md" style={{ lineHeight: 1.5, color: 'var(--color-on-secondary-container)' }}>
温馨提示：preV1 占位上传，可直接下一步。
照片与合同将上传至 OSS 存储；与总部后台一致，选填项可跳过直接下一步。
</p>
</div>
</>
@@ -245,7 +331,7 @@ export default function StoreCreatePage() {
<footer className="partner-sticky-footer">
{step > 1 && (
<button type="button" className="partner-btn-outline" onClick={() => goStep(step - 1)}>上一步</button>
<button type="button" className="partner-btn-outline" onClick={() => goStep(step - 1)} disabled={submitting}>上一步</button>
)}
{step < 3 ? (
<button type="button" className="partner-btn-primary" onClick={handleNext}>
@@ -253,7 +339,9 @@ export default function StoreCreatePage() {
<span className="material-symbols-outlined" style={{ fontSize: 20 }}>navigate_next</span>
</button>
) : (
<button type="button" className="partner-btn-primary" onClick={submit}>提交审核</button>
<button type="button" className="partner-btn-primary" onClick={() => void submit()} disabled={submitting}>
{submitting ? '提交中…' : '提交'}
</button>
)}
</footer>
</div>
apps/h5-partner/src/pages/StoreDetailPage.tsx
+126 -37
View File
@@ -3,59 +3,143 @@ 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 { 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 [store, setStore] = useState<Record<string, unknown> | null>(null);
const [loadError, setLoadError] = useState('');
const [form, setForm] = useState({ name: '', phone: '', address: '', intro: '' });
const [status, setStatus] = useState('OPEN');
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) {
request('PARTNER_H5', `/stores/${id}`).then((data) => {
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());
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]);
function save() {
setToast('preV1：保存成功（演示）');
setTimeout(() => setToast(''), 2000);
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 statusLabel = status === 'OPEN' ? '营业中' : status === 'PAUSED' ? '暂停服务' : '已下线';
const envPhotos = Array.isArray(store.media)
? (store.media as Array<{ url?: string; bizType?: string }>).filter((m) => m.bizType === 'ENV')
: [];
const readOnly = 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>}
<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 partner-status-pill--open">
<span className="partner-dot partner-dot--green" style={{ width: 8, height: 8, display: 'inline-block', marginRight: 4 }} />
{statusLabel}
<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">
{(['OPEN', 'PAUSED', 'CLOSED'] as const).map((s) => (
<button key={s} type="button" className={status === s ? 'active' : ''} onClick={() => setStatus(s)}>
{s === 'OPEN' ? '营业中' : s === 'PAUSED' ? '暂停服务' : '已下线'}
{STATUS_OPTIONS.map((s) => (
<button
key={s}
type="button"
className={status === s ? 'active' : ''}
disabled={readOnly || statusSaving}
onClick={() => void changeStatus(s)}
>
{storeStatusLabel(s)}
</button>
))}
</div>
{readOnly && (
<p className="label-md text-muted" style={{ marginTop: 12 }}>门店已关闭，不可再变更状态或编辑资料</p>
)}
</section>
<section className="partner-form-card" style={{ margin: '0 0 16px' }}>
@@ -69,22 +153,22 @@ export default function StoreDetailPage() {
</div>
<div className="partner-field">
<label>门店名称</label>
<input 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 }} />
<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 type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
<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 rows={2} value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} />
<textarea disabled={readOnly} rows={2} value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} />
</div>
<div className="partner-field">
<label>门店简介</label>
<textarea rows={4} placeholder="请输入门店简介（10-500字）" value={form.intro} onChange={(e) => setForm({ ...form, intro: e.target.value })} />
<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>
@@ -94,14 +178,19 @@ export default function StoreDetailPage() {
<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">最多12张</span>
</div>
<div className="partner-photo-grid">
<button type="button" className="partner-photo-add">
<span className="material-symbols-outlined">add</span>
<span className="label-md">添加照片</span>
</button>
<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)' }}>
@@ -109,7 +198,7 @@ export default function StoreDetailPage() {
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
<div>
<label className="label-md text-muted">状态</label>
<p className="body-md" style={{ fontWeight: 500 }}>{String(store.status)}</p>
<p className="body-md" style={{ fontWeight: 500 }}>{storeStatusLabel(status)}</p>
</div>
<div>
<label className="label-md text-muted">门店ID</label>
@@ -120,10 +209,10 @@ export default function StoreDetailPage() {
</main>
<footer className="partner-save-footer">
<button type="button" className="partner-save-cancel" onClick={() => navigate('/stores')}>取消</button>
<button type="button" className="partner-save-submit" onClick={save}>
<button type="button" className="partner-save-cancel" onClick={() => navigate('/stores')}>返回</button>
<button type="button" className="partner-save-submit" onClick={() => void saveBasic()} disabled={readOnly || saving}>
<span className="material-symbols-outlined">save</span>
保存修改
{saving ? '保存中…' : '保存修改'}
</button>
</footer>
apps/h5-partner/src/pages/StoreListPage.tsx
+73 -33
View File
@@ -1,42 +1,33 @@
import { useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { isLoggedIn, request } from '../lib/api';
import { storeStatusLabel, storeStatusPillClass, type StoreStatusValue } from '../lib/storeStatus';
type StatusFilter = 'ALL' | 'OPEN' | 'PAUSED' | 'CLOSED';
function statusPill(status: string) {
const s = String(status).toUpperCase();
if (s === 'OPEN') return { cls: 'partner-status-pill--open', label: '营业中' };
if (s === 'PAUSED') return { cls: 'partner-status-pill--paused', label: '暂时闭店' };
return { cls: 'partner-status-pill--closed', label: '已关闭' };
}
type StatusFilter = 'ALL' | StoreStatusValue;
const FILTERS: { key: StatusFilter; label: string }[] = [
{ key: 'ALL', label: '全部' },
{ key: 'OPEN', label: '营业中' },
{ key: 'PAUSED', label: '暂时闭店' },
{ key: 'CLOSED', label: '已关闭' },
{ key: 'CLOSED', label: '关闭' },
];
function auditLabel(store: Record<string, unknown>) {
const audits = store.audits as Array<{ status?: string }> | undefined;
const s = String(audits?.[0]?.status ?? '').toUpperCase();
if (s === 'PENDING') return { cls: 'partner-status-pill--paused', label: '待审核' };
if (s === 'REJECTED') return { cls: 'partner-status-pill--closed', label: '已驳回' };
if (s === 'APPROVED') return { cls: 'partner-status-pill--open', label: '已通过' };
return null;
}
export default function StoreListPage() {
const navigate = useNavigate();
const [stores, setStores] = useState<Array<Record<string, unknown>>>([]);
const [q, setQ] = useState('');
const [filter, setFilter] = useState<StatusFilter>('ALL');
const [updatingId, setUpdatingId] = useState<string | null>(null);
const [error, setError] = useState('');
const loadStores = useCallback(() => {
return request<Array<Record<string, unknown>>>('PARTNER_H5', '/partner/stores').then(setStores);
}, []);
useEffect(() => {
if (!isLoggedIn()) { navigate('/login'); return; }
request<Array<Record<string, unknown>>>('PARTNER_H5', '/partner/stores').then(setStores);
}, [navigate]);
void loadStores();
}, [navigate, loadStores]);
const filtered = useMemo(() => stores.filter((s) => {
const matchQ = !q || String(s.name).includes(q) || String(s.address).includes(q);
@@ -44,6 +35,26 @@ export default function StoreListPage() {
return matchQ && matchStatus;
}), [stores, q, filter]);
async function updateStatus(storeId: string, next: StoreStatusValue) {
if (next === 'CLOSED') {
const ok = window.confirm('关闭后不可恢复营业，确认关闭该门店？');
if (!ok) return;
}
setUpdatingId(storeId);
setError('');
try {
await request('PARTNER_H5', `/partner/stores/${storeId}/status`, {
method: 'PUT',
body: JSON.stringify({ status: next }),
});
await loadStores();
} catch (e) {
setError(e instanceof Error ? e.message : '状态更新失败');
} finally {
setUpdatingId(null);
}
}
return (
<div className="page partner-store-page">
<header className="header app-page-header">
@@ -55,6 +66,8 @@ export default function StoreListPage() {
<p className="text-muted body-md">管理您的合作门店及其运营状态</p>
</div>
{error && <p className="partner-form-error" role="alert" style={{ margin: '0 20px 12px' }}>{error}</p>}
<div className="partner-sticky-filter">
<div className="partner-search">
<span className="material-symbols-outlined">search</span>
@@ -79,29 +92,56 @@ export default function StoreListPage() {
{filtered.length === 0 && <div className="empty">暂无门店</div>}
{filtered.map((s) => {
const pill = statusPill(String(s.status));
const audit = auditLabel(s);
const dim = String(s.status).toUpperCase() === 'CLOSED';
const storeId = String(s.id);
const currentStatus = String(s.status).toUpperCase() as StoreStatusValue;
const dim = currentStatus === 'CLOSED';
const storeName = String(s.name || '未命名门店');
const busy = updatingId === storeId;
return (
<div key={String(s.id)} className={`partner-store-card${dim ? ' partner-store-card--dim' : ''}`}>
<Link to={`/stores/${s.id}`} style={{ color: 'inherit', textDecoration: 'none' }}>
<div key={storeId} className={`partner-store-card${dim ? ' partner-store-card--dim' : ''}`}>
<Link to={`/stores/${storeId}`} className="partner-store-card-hit" style={{ color: 'inherit', textDecoration: 'none' }}>
<div className="partner-store-card-header">
<div>
<p className="label-md text-muted" style={{ marginBottom: 2 }}>门店名称</p>
<h3 className="headline-md">{storeName}</h3>
<p className="label-md text-muted" style={{ marginTop: 4 }}>{String(s.address || s.district || '')}</p>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
<span className={`partner-status-pill ${pill.cls}`}>{pill.label}</span>
{audit && <span className={`partner-status-pill ${audit.cls}`}>{audit.label}</span>}
</div>
<span className={`partner-status-pill ${storeStatusPillClass(currentStatus)}`}>
{storeStatusLabel(currentStatus)}
</span>
</div>
</Link>
<div className="partner-store-card-actions">
<button type="button" className="btn btn-outline" style={{ fontSize: 12, padding: '8px 12px' }}>暂时闭店</button>
<button type="button" className="btn btn-outline" style={{ fontSize: 12, padding: '8px 12px', borderColor: 'var(--color-subtle-gray)', color: 'var(--color-subtle-gray)' }}>正式关闭</button>
<Link to={`/stores/${s.id}`} className="partner-menu-icon" style={{ width: 40, height: 40, borderRadius: 8, textDecoration: 'none' }}>
<button
type="button"
className="btn btn-outline"
style={{ fontSize: 12, padding: '8px 12px' }}
disabled={busy || currentStatus === 'CLOSED' || currentStatus === 'PAUSED'}
onClick={() => void updateStatus(storeId, 'PAUSED')}
>
暂时闭店
</button>
<button
type="button"
className="btn btn-outline"
style={{ fontSize: 12, padding: '8px 12px', borderColor: 'var(--color-subtle-gray)', color: 'var(--color-subtle-gray)' }}
disabled={busy || currentStatus === 'CLOSED'}
onClick={() => void updateStatus(storeId, 'CLOSED')}
>
关闭
</button>
{currentStatus === 'PAUSED' && (
<button
type="button"
className="btn btn-outline"
style={{ fontSize: 12, padding: '8px 12px' }}
disabled={busy}
onClick={() => void updateStatus(storeId, 'OPEN')}
>
恢复营业
</button>
)}
<Link to={`/stores/${storeId}`} className="partner-menu-icon" style={{ width: 40, height: 40, borderRadius: 8, textDecoration: 'none' }}>
<span className="material-symbols-outlined" style={{ fontSize: 20 }}>edit</span>
</Link>
</div>
apps/h5-partner/src/styles.css
+263 -2
View File
@@ -926,6 +926,230 @@ html, body, #root {
font-size: 10px;
}
.partner-upload-dashed--compact {
padding: 12px;
font-size: 10px;
aspect-ratio: 1;
}
.partner-oss-upload-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.partner-upload-preview {
position: relative;
display: block;
width: 100%;
border: none;
padding: 0;
background: transparent;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
}
.partner-upload-preview--wide {
aspect-ratio: 16 / 9;
}
.partner-upload-preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.partner-upload-preview-mask {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: rgba(0, 0, 0, 0.35);
color: #fff;
opacity: 0;
transition: opacity 0.2s ease;
}
.partner-upload-preview:hover .partner-upload-preview-mask,
.partner-upload-preview:focus-within .partner-upload-preview-mask {
opacity: 1;
}
.partner-upload-file {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 96px;
padding: 16px;
border-radius: 12px;
background-color: var(--color-surface-container-low);
border: 1px solid rgba(166, 29, 36, 0.2);
cursor: pointer;
text-align: left;
}
.partner-region-trigger {
width: 100%;
justify-content: flex-start;
text-align: left;
}
.partner-region-chevron {
margin-left: auto;
}
.partner-region-overlay {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.partner-region-sheet {
width: 100%;
max-width: 480px;
max-height: min(78vh, 640px);
background: var(--color-surface);
border-radius: 16px 16px 0 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.partner-region-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--color-outline-variant);
flex-shrink: 0;
}
.partner-region-sheet-btn {
border: none;
background: transparent;
color: var(--color-on-surface-variant);
font-size: 14px;
padding: 8px;
min-width: 48px;
}
.partner-region-sheet-btn--primary {
color: var(--color-primary);
font-weight: 600;
}
.partner-region-sheet-btn--primary:disabled {
opacity: 0.4;
}
.partner-region-steps {
display: flex;
gap: 8px;
padding: 12px 16px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-shrink: 0;
}
.partner-region-step {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--color-outline-variant);
border-radius: 999px;
padding: 6px 12px;
background: var(--color-surface-container-low);
color: var(--color-on-surface-variant);
font-size: 12px;
white-space: nowrap;
}
.partner-region-step--active {
border-color: var(--color-primary);
color: var(--color-primary);
background: rgba(166, 29, 36, 0.08);
}
.partner-region-step--done {
color: var(--color-on-surface);
}
.partner-region-step-index {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-surface-container-highest);
font-size: 11px;
font-weight: 700;
}
.partner-region-step--active .partner-region-step-index {
background: var(--color-primary);
color: #fff;
}
.partner-region-breadcrumb {
padding: 8px 16px 0;
flex-shrink: 0;
}
.partner-region-list {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
}
.partner-region-columns {
display: none;
}
.partner-region-column {
overflow-y: auto;
border-right: 1px solid var(--color-outline-variant);
}
.partner-region-column:last-child {
border-right: none;
}
.partner-region-item {
display: block;
width: 100%;
border: none;
background: transparent;
text-align: left;
padding: 14px 16px;
font-size: 15px;
color: var(--color-on-surface);
}
.partner-region-item--active {
color: var(--color-primary);
background: rgba(166, 29, 36, 0.08);
font-weight: 600;
}
.partner-sticky-footer {
position: fixed;
bottom: 0;
@@ -1053,7 +1277,39 @@ html, body, #root {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
gap: 12px;
}
.partner-store-card-hit {
display: block;
width: 100%;
color: inherit;
text-decoration: none;
}
.partner-audit-result {
margin: 48px var(--space-page) 0;
padding: 32px 24px;
text-align: center;
background: var(--color-card);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
}
.partner-audit-result-icon {
width: 72px;
height: 72px;
margin: 0 auto 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(42, 110, 187, 0.12);
color: var(--color-status-blue);
}
.partner-audit-result-icon .material-symbols-outlined {
font-size: 36px;
}
.partner-status-pill {
@@ -1074,6 +1330,11 @@ html, body, #root {
color: var(--color-secondary);
}
.partner-status-pill--auditing {
background: rgba(42, 110, 187, 0.12);
color: var(--color-status-blue);
}
.partner-status-pill--closed {
background: var(--color-surface-container);
color: var(--color-subtle-gray);
@@ -1217,7 +1478,7 @@ html, body, #root {
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
z-index: 200;
z-index: 10001;
}
/* ── Orders ── */