feat(assoc): v4.0.1 合伙人关联码、分佣账单与 H5 用户管理
订单佣金只认关联用户；合伙人备注写入独立表；H5 增加用户管理与首页统计。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,267 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import PullToRefresh from '@dukang/shared-ui/PullToRefresh';
|
||||
import type {
|
||||
PartnerAssocSummary,
|
||||
PartnerAssocUserItem,
|
||||
PartnerAssocUserSort,
|
||||
} from '@dukang/shared-types';
|
||||
import { request } from '../lib/api';
|
||||
import { toastError, toastSuccess } from '../lib/toast';
|
||||
import { isWechatEnv } from '../lib/weixin';
|
||||
import { usePartnerPageView } from '../lib/usePageView';
|
||||
|
||||
type ListRes = { items: PartnerAssocUserItem[]; total: number };
|
||||
|
||||
const SORTS: { key: PartnerAssocUserSort; label: string }[] = [
|
||||
{ key: 'boundAt', label: '关联时间' },
|
||||
{ key: 'createdAt', label: '注册时间' },
|
||||
{ key: 'orderCount', label: '订单数' },
|
||||
];
|
||||
|
||||
function formatUserLabel(u: PartnerAssocUserItem) {
|
||||
const name = u.nickname?.trim() || u.userNo || '—';
|
||||
const remark = u.partnerRemark?.trim();
|
||||
return remark ? `${name}（${remark}）` : name;
|
||||
}
|
||||
|
||||
function fmtTime(iso?: string | null) {
|
||||
if (!iso) return '—';
|
||||
return iso.slice(0, 16).replace('T', ' ');
|
||||
}
|
||||
|
||||
export default function UsersManagePage() {
|
||||
usePartnerPageView('partner_users_manage_view');
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [summary, setSummary] = useState<PartnerAssocSummary | null>(null);
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
const [items, setItems] = useState<PartnerAssocUserItem[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [keyword, setKeyword] = useState('');
|
||||
const [appliedKeyword, setAppliedKeyword] = useState('');
|
||||
const [sort, setSort] = useState<PartnerAssocUserSort>('boundAt');
|
||||
const [editing, setEditing] = useState<PartnerAssocUserItem | null>(null);
|
||||
const [remarkDraft, setRemarkDraft] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = '用户管理';
|
||||
}, []);
|
||||
|
||||
useEffect(() => () => {
|
||||
if (previewUrl) URL.revokeObjectURL(previewUrl);
|
||||
}, [previewUrl]);
|
||||
|
||||
const loadSummary = useCallback(async () => {
|
||||
const data = await request<PartnerAssocSummary>('PARTNER_H5', '/partner/assoc');
|
||||
setSummary(data);
|
||||
}, []);
|
||||
|
||||
const loadUsers = useCallback(async () => {
|
||||
const qs = new URLSearchParams({ page: '1', pageSize: '50', sort });
|
||||
const q = appliedKeyword.trim();
|
||||
if (q) qs.set('keyword', q);
|
||||
const res = await request<ListRes>('PARTNER_H5', `/partner/assoc/users?${qs}`);
|
||||
setItems(res.items ?? []);
|
||||
setTotal(res.total ?? 0);
|
||||
}, [appliedKeyword, sort]);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await Promise.all([loadSummary(), loadUsers()]);
|
||||
} catch (e) {
|
||||
toastError(e instanceof Error ? e.message : '加载失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [loadSummary, loadUsers]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
useEffect(() => {
|
||||
const t = window.setTimeout(() => setAppliedKeyword(keyword.trim()), 400);
|
||||
return () => window.clearTimeout(t);
|
||||
}, [keyword]);
|
||||
|
||||
useEffect(() => {
|
||||
const uid = searchParams.get('userId');
|
||||
if (uid) navigate(`/users/${uid}/orders`, { replace: true });
|
||||
}, [searchParams, navigate]);
|
||||
|
||||
async function downloadQr() {
|
||||
const token = localStorage.getItem('accessToken');
|
||||
try {
|
||||
const res = await fetch('/api/v1/partner/assoc/qrcode', {
|
||||
headers: {
|
||||
Authorization: token ? `Bearer ${token}` : '',
|
||||
'X-Client-App': 'PARTNER_H5',
|
||||
},
|
||||
});
|
||||
if (!res.ok) throw new Error('下载失败');
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
if (isWechatEnv()) {
|
||||
setPreviewUrl(url);
|
||||
toastSuccess('请长按图片保存到相册');
|
||||
return;
|
||||
}
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `partner-assoc-${summary?.partnerId || 'qr'}.png`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
toastSuccess('已开始下载');
|
||||
} catch (e) {
|
||||
if (summary?.qrcodeUrl) {
|
||||
setPreviewUrl(summary.qrcodeUrl);
|
||||
toastSuccess('请长按图片保存到相册');
|
||||
return;
|
||||
}
|
||||
toastError(e instanceof Error ? e.message : '下载失败');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveRemark() {
|
||||
if (!editing) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await request(`PARTNER_H5`, `/partner/assoc/users/${editing.id}/remark`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ remark: remarkDraft }),
|
||||
});
|
||||
toastSuccess(remarkDraft.trim() ? '备注已保存' : '已清除备注');
|
||||
setEditing(null);
|
||||
await loadUsers();
|
||||
} catch (e) {
|
||||
toastError(e instanceof Error ? e.message : '保存失败');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PullToRefresh onRefresh={load} className="page partner-users-page">
|
||||
<div style={{ padding: '16px 20px 24px' }}>
|
||||
<h1 className="headline-lg" style={{ marginBottom: 16 }}>用户管理</h1>
|
||||
|
||||
<section className="partner-bill-card" style={{ marginBottom: 20, textAlign: 'center', padding: 20 }}>
|
||||
<p className="body-md text-muted" style={{ marginBottom: 12 }}>
|
||||
用户扫码后首次锁定，后续购酒计入关联订单
|
||||
</p>
|
||||
{summary?.qrcodeUrl ? (
|
||||
<img
|
||||
src={previewUrl || summary.qrcodeUrl}
|
||||
alt="关联码"
|
||||
style={{ width: 200, height: 200, background: '#fff' }}
|
||||
/>
|
||||
) : (
|
||||
<p className="body-md text-muted">{loading ? '加载中…' : '关联码尚未生成'}</p>
|
||||
)}
|
||||
<p className="label-md text-muted" style={{ marginTop: 8 }}>
|
||||
已关联 {summary?.userCount ?? total} 人
|
||||
</p>
|
||||
<button type="button" className="partner-btn-primary" style={{ marginTop: 16 }} onClick={() => void downloadQr()}>
|
||||
下载二维码
|
||||
</button>
|
||||
{previewUrl && isWechatEnv() && (
|
||||
<p className="label-md text-muted" style={{ marginTop: 8 }}>微信内请长按上方图片保存</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<h2 className="headline-md" style={{ marginBottom: 12 }}>已关联用户</h2>
|
||||
<div className="partner-search">
|
||||
<span className="material-symbols-outlined">search</span>
|
||||
<input
|
||||
value={keyword}
|
||||
placeholder="搜索昵称 / 手机 / 备注 / 编号"
|
||||
onChange={(e) => setKeyword(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') void loadUsers();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="partner-filter-row" style={{ marginBottom: 12, paddingLeft: 0, paddingRight: 0 }}>
|
||||
{SORTS.map((s) => (
|
||||
<button
|
||||
key={s.key}
|
||||
type="button"
|
||||
className={`partner-filter-tab${sort === s.key ? ' active' : ''}`}
|
||||
onClick={() => setSort(s.key)}
|
||||
>
|
||||
{s.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="label-md text-muted" style={{ marginBottom: 12 }}>
|
||||
{loading ? '加载中…' : `共 ${total} 人`}
|
||||
</p>
|
||||
{!loading && items.length === 0 && <div className="empty">暂无关联用户</div>}
|
||||
{items.map((u) => (
|
||||
<div key={u.id} className="partner-store-card" style={{ marginBottom: 12 }}>
|
||||
<div className="partner-store-card-header" style={{ marginBottom: 8 }}>
|
||||
<div>
|
||||
<p className="body-md">{formatUserLabel(u)}</p>
|
||||
<p className="label-md text-muted">{u.phone || '未绑定手机'}</p>
|
||||
<p className="label-md text-muted">注册 {fmtTime(u.createdAt)}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="label-md text-primary"
|
||||
style={{ background: 'none', border: 0, padding: 0 }}
|
||||
onClick={() => navigate(`/users/${u.id}/orders`)}
|
||||
>
|
||||
{u.orderCount} 单
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="label-md text-primary"
|
||||
style={{ background: 'none', border: 0, padding: 0 }}
|
||||
onClick={() => {
|
||||
setEditing(u);
|
||||
setRemarkDraft(u.partnerRemark ?? '');
|
||||
}}
|
||||
>
|
||||
{u.partnerRemark ? '改备注' : '添加备注'}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{editing && (
|
||||
<div className="partner-remark-mask" onClick={() => setEditing(null)}>
|
||||
<div className="partner-remark-sheet" onClick={(e) => e.stopPropagation()}>
|
||||
<p className="headline-md" style={{ marginBottom: 8 }}>用户备注</p>
|
||||
<p className="label-md text-muted" style={{ marginBottom: 12 }}>仅自己可见，总部看不到</p>
|
||||
<textarea
|
||||
value={remarkDraft}
|
||||
maxLength={128}
|
||||
rows={3}
|
||||
placeholder="最多 128 字"
|
||||
style={{ width: '100%', padding: 12, borderRadius: 8, border: '1px solid #eee' }}
|
||||
onChange={(e) => setRemarkDraft(e.target.value)}
|
||||
/>
|
||||
<div className="partner-ship-actions">
|
||||
<button type="button" className="partner-btn-secondary" onClick={() => setEditing(null)}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="partner-btn-primary"
|
||||
disabled={saving}
|
||||
onClick={() => void saveRemark()}
|
||||
>
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</PullToRefresh>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user