feat(v3.4.14): mini-user store UX, brand config, client settings
Store list/detail package flow, configurable WeChat mini brand assets and customer service, shop H5 home refresh. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+585
-293
@@ -1,293 +1,585 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
|
||||
import PullToRefresh from '@dukang/shared-ui/PullToRefresh';
|
||||
|
||||
import { isScanPermissionWarmupError } from '@dukang/weixin-sdk';
|
||||
|
||||
import { useStoreSession } from '../contexts/StoreSessionContext';
|
||||
|
||||
import { request } from '../lib/api';
|
||||
|
||||
import { parseRedeemTokenFromScan } from '../lib/redeem-scan';
|
||||
|
||||
import {
|
||||
|
||||
authorizeShopWechat,
|
||||
|
||||
checkNeedsWechatAuth,
|
||||
|
||||
fetchShopAccount,
|
||||
|
||||
} from '../lib/wechat-auth';
|
||||
|
||||
import { isWechatEnv, weixinSdk } from '../lib/weixin';
|
||||
|
||||
import {
|
||||
|
||||
clearPendingScanAfterAuth,
|
||||
|
||||
getPostAuthScanDelayMs,
|
||||
|
||||
markPendingScanAfterAuth,
|
||||
|
||||
peekPendingScanAfterAuth,
|
||||
|
||||
} from '../lib/shop-scan-auth';
|
||||
|
||||
import WechatScanAuthModal from '../components/WechatScanAuthModal';
|
||||
|
||||
import { useStorePageView } from '../lib/usePageView';
|
||||
|
||||
import { trackStore } from '../lib/analytics';
|
||||
|
||||
|
||||
|
||||
function formatMoney(n: number) {
|
||||
|
||||
return n.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function formatScanError(e: unknown, opts?: { afterAuth?: boolean }): string {
|
||||
|
||||
const msg = e instanceof Error ? e.message : '扫码失败，请重试';
|
||||
|
||||
if (/invalid signature/i.test(msg)) {
|
||||
|
||||
return '微信 JSSDK 签名校验失败：请确认公众号已配置 JS 接口安全域名，并刷新页面后重试';
|
||||
|
||||
}
|
||||
|
||||
if (isScanPermissionWarmupError(msg)) {
|
||||
|
||||
if (opts?.afterAuth) {
|
||||
|
||||
return '微信授权已完成，扫码权限仍在准备中，请再点一次「扫码核销」';
|
||||
|
||||
}
|
||||
|
||||
return '微信权限校验尚未完成，请等待 1～2 秒后再次点击扫码（首次绑定微信时较常见）';
|
||||
|
||||
}
|
||||
|
||||
return msg;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default function HomePage() {
|
||||
|
||||
useStorePageView('store_home_view');
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { ready, authenticated } = useStoreSession();
|
||||
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [dash, setDash] = useState<Record<string, unknown> | null>(null);
|
||||
|
||||
const [scanMsg, setScanMsg] = useState('');
|
||||
|
||||
const [scanning, setScanning] = useState(false);
|
||||
|
||||
const [authModalOpen, setAuthModalOpen] = useState(false);
|
||||
|
||||
const [authLoading, setAuthLoading] = useState(false);
|
||||
|
||||
const [authError, setAuthError] = useState('');
|
||||
|
||||
const pendingScanStartedRef = useRef(false);
|
||||
|
||||
|
||||
|
||||
const loadDashboard = useCallback(() => {
|
||||
|
||||
return request<Record<string, unknown>>('SHOP_H5', '/shop/dashboard')
|
||||
|
||||
.then((d) => {
|
||||
|
||||
setDash(d);
|
||||
|
||||
})
|
||||
|
||||
.catch(() => {});
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
void loadDashboard();
|
||||
|
||||
}, [loadDashboard]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
function onResume() {
|
||||
|
||||
setScanning(false);
|
||||
|
||||
void loadDashboard();
|
||||
|
||||
}
|
||||
|
||||
function onVisibility() {
|
||||
|
||||
if (document.visibilityState === 'visible') onResume();
|
||||
|
||||
}
|
||||
|
||||
document.addEventListener('visibilitychange', onVisibility);
|
||||
|
||||
window.addEventListener('pageshow', onResume);
|
||||
|
||||
window.addEventListener('focus', onResume);
|
||||
|
||||
return () => {
|
||||
|
||||
document.removeEventListener('visibilitychange', onVisibility);
|
||||
|
||||
window.removeEventListener('pageshow', onResume);
|
||||
|
||||
window.removeEventListener('focus', onResume);
|
||||
|
||||
};
|
||||
|
||||
}, [loadDashboard]);
|
||||
|
||||
|
||||
|
||||
const runScan = useCallback(
|
||||
|
||||
async (opts?: { postAuthWarmup?: boolean }) => {
|
||||
|
||||
trackStore('store_redeem_scan_start');
|
||||
|
||||
if (!isWechatEnv()) {
|
||||
|
||||
setScanMsg('请在微信内打开门店端进行扫码核销');
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
setScanning(true);
|
||||
|
||||
if (!opts?.postAuthWarmup) {
|
||||
|
||||
setScanMsg('');
|
||||
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
if (opts?.postAuthWarmup) {
|
||||
|
||||
weixinSdk.reset();
|
||||
|
||||
}
|
||||
|
||||
await weixinSdk.init();
|
||||
|
||||
const raw = await weixinSdk.scanQrCode(
|
||||
|
||||
opts?.postAuthWarmup ? { postAuthWarmup: true } : undefined,
|
||||
|
||||
);
|
||||
|
||||
if (!raw) {
|
||||
|
||||
void loadDashboard();
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
const token = parseRedeemTokenFromScan(raw);
|
||||
|
||||
if (!token) {
|
||||
|
||||
setScanMsg('无法识别核销码，请扫描用户出示的核销二维码');
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
navigate(`/redeem?token=${encodeURIComponent(token)}`);
|
||||
|
||||
} catch (e) {
|
||||
|
||||
setScanMsg(formatScanError(e, { afterAuth: opts?.postAuthWarmup }));
|
||||
|
||||
} finally {
|
||||
|
||||
setScanning(false);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
[loadDashboard, navigate],
|
||||
|
||||
);
|
||||
|
||||
|
||||
|
||||
// OAuth 由 StoreSessionContext 单例处理；此处仅在授权完成后续扫
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (!ready || !authenticated || !isWechatEnv()) return;
|
||||
|
||||
if (searchParams.get('code')) return;
|
||||
|
||||
if (!peekPendingScanAfterAuth() || pendingScanStartedRef.current) return;
|
||||
|
||||
|
||||
|
||||
pendingScanStartedRef.current = true;
|
||||
|
||||
clearPendingScanAfterAuth();
|
||||
|
||||
setAuthModalOpen(false);
|
||||
|
||||
setAuthLoading(false);
|
||||
|
||||
setAuthError('');
|
||||
|
||||
setScanMsg('微信授权成功，正在准备扫码…');
|
||||
|
||||
|
||||
|
||||
const timer = window.setTimeout(() => {
|
||||
|
||||
void runScan({ postAuthWarmup: true });
|
||||
|
||||
}, getPostAuthScanDelayMs());
|
||||
|
||||
|
||||
|
||||
return () => window.clearTimeout(timer);
|
||||
|
||||
}, [ready, authenticated, searchParams, runScan]);
|
||||
|
||||
|
||||
|
||||
async function handleScan() {
|
||||
|
||||
setScanMsg('');
|
||||
|
||||
if (!isWechatEnv()) {
|
||||
|
||||
setScanMsg('请在微信内打开门店端进行扫码核销');
|
||||
|
||||
return;
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
|
||||
import PullToRefresh from '@dukang/shared-ui/PullToRefresh';
|
||||
|
||||
import { isScanPermissionWarmupError } from '@dukang/weixin-sdk';
|
||||
|
||||
import { useStoreSession } from '../contexts/StoreSessionContext';
|
||||
|
||||
import { request } from '../lib/api';
|
||||
|
||||
import { parseRedeemTokenFromScan } from '../lib/redeem-scan';
|
||||
|
||||
import {
|
||||
|
||||
authorizeShopWechat,
|
||||
|
||||
checkNeedsWechatAuth,
|
||||
|
||||
fetchShopAccount,
|
||||
|
||||
} from '../lib/wechat-auth';
|
||||
|
||||
import { isWechatEnv, weixinSdk } from '../lib/weixin';
|
||||
|
||||
import {
|
||||
|
||||
clearPendingScanAfterAuth,
|
||||
|
||||
getPostAuthScanDelayMs,
|
||||
|
||||
markPendingScanAfterAuth,
|
||||
|
||||
peekPendingScanAfterAuth,
|
||||
|
||||
} from '../lib/shop-scan-auth';
|
||||
|
||||
import WechatScanAuthModal from '../components/WechatScanAuthModal';
|
||||
|
||||
import { useStorePageView } from '../lib/usePageView';
|
||||
|
||||
import { trackStore } from '../lib/analytics';
|
||||
|
||||
|
||||
|
||||
function formatMoney(n: number) {
|
||||
|
||||
return n.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function formatScanError(e: unknown, opts?: { afterAuth?: boolean }): string {
|
||||
|
||||
const msg = e instanceof Error ? e.message : '扫码失败，请重试';
|
||||
|
||||
if (/invalid signature/i.test(msg)) {
|
||||
|
||||
return '微信 JSSDK 签名校验失败：请确认公众号已配置 JS 接口安全域名，并刷新页面后重试';
|
||||
|
||||
}
|
||||
|
||||
if (isScanPermissionWarmupError(msg)) {
|
||||
|
||||
if (opts?.afterAuth) {
|
||||
|
||||
return '微信授权已完成，扫码权限仍在准备中，请再点一次「扫码核销」';
|
||||
|
||||
}
|
||||
|
||||
return '微信权限校验尚未完成，请等待 1～2 秒后再次点击扫码（首次绑定微信时较常见）';
|
||||
|
||||
}
|
||||
|
||||
return msg;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default function HomePage() {
|
||||
|
||||
useStorePageView('store_home_view');
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { ready, authenticated } = useStoreSession();
|
||||
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [dash, setDash] = useState<Record<string, unknown> | null>(null);
|
||||
|
||||
const [scanMsg, setScanMsg] = useState('');
|
||||
|
||||
const [scanning, setScanning] = useState(false);
|
||||
|
||||
const [authModalOpen, setAuthModalOpen] = useState(false);
|
||||
|
||||
const [authLoading, setAuthLoading] = useState(false);
|
||||
|
||||
const [authError, setAuthError] = useState('');
|
||||
|
||||
const pendingScanStartedRef = useRef(false);
|
||||
|
||||
|
||||
|
||||
const loadDashboard = useCallback(() => {
|
||||
|
||||
return request<Record<string, unknown>>('SHOP_H5', '/shop/dashboard')
|
||||
|
||||
.then((d) => {
|
||||
|
||||
setDash(d);
|
||||
|
||||
})
|
||||
|
||||
.catch(() => {});
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
void loadDashboard();
|
||||
|
||||
}, [loadDashboard]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
function onResume() {
|
||||
|
||||
setScanning(false);
|
||||
|
||||
void loadDashboard();
|
||||
|
||||
}
|
||||
|
||||
function onVisibility() {
|
||||
|
||||
if (document.visibilityState === 'visible') onResume();
|
||||
|
||||
}
|
||||
|
||||
document.addEventListener('visibilitychange', onVisibility);
|
||||
|
||||
window.addEventListener('pageshow', onResume);
|
||||
|
||||
window.addEventListener('focus', onResume);
|
||||
|
||||
return () => {
|
||||
|
||||
document.removeEventListener('visibilitychange', onVisibility);
|
||||
|
||||
window.removeEventListener('pageshow', onResume);
|
||||
|
||||
window.removeEventListener('focus', onResume);
|
||||
|
||||
};
|
||||
|
||||
}, [loadDashboard]);
|
||||
|
||||
|
||||
|
||||
const runScan = useCallback(
|
||||
|
||||
async (opts?: { postAuthWarmup?: boolean }) => {
|
||||
|
||||
trackStore('store_redeem_scan_start');
|
||||
|
||||
if (!isWechatEnv()) {
|
||||
|
||||
setScanMsg('请在微信内打开门店端进行扫码核销');
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
setScanning(true);
|
||||
|
||||
if (!opts?.postAuthWarmup) {
|
||||
|
||||
setScanMsg('');
|
||||
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
if (opts?.postAuthWarmup) {
|
||||
|
||||
weixinSdk.reset();
|
||||
|
||||
}
|
||||
|
||||
await weixinSdk.init();
|
||||
|
||||
const raw = await weixinSdk.scanQrCode(
|
||||
|
||||
opts?.postAuthWarmup ? { postAuthWarmup: true } : undefined,
|
||||
|
||||
);
|
||||
|
||||
if (!raw) {
|
||||
|
||||
void loadDashboard();
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
const token = parseRedeemTokenFromScan(raw);
|
||||
|
||||
if (!token) {
|
||||
|
||||
setScanMsg('无法识别核销码，请扫描用户出示的核销二维码');
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
navigate(`/redeem?token=${encodeURIComponent(token)}`);
|
||||
|
||||
} catch (e) {
|
||||
|
||||
setScanMsg(formatScanError(e, { afterAuth: opts?.postAuthWarmup }));
|
||||
|
||||
} finally {
|
||||
|
||||
setScanning(false);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
[loadDashboard, navigate],
|
||||
|
||||
);
|
||||
|
||||
|
||||
|
||||
// OAuth 由 StoreSessionContext 单例处理；此处仅在授权完成后续扫
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (!ready || !authenticated || !isWechatEnv()) return;
|
||||
|
||||
if (searchParams.get('code')) return;
|
||||
|
||||
if (!peekPendingScanAfterAuth() || pendingScanStartedRef.current) return;
|
||||
|
||||
|
||||
|
||||
pendingScanStartedRef.current = true;
|
||||
|
||||
clearPendingScanAfterAuth();
|
||||
|
||||
setAuthModalOpen(false);
|
||||
|
||||
setAuthLoading(false);
|
||||
|
||||
setAuthError('');
|
||||
|
||||
setScanMsg('微信授权成功，正在准备扫码…');
|
||||
|
||||
|
||||
|
||||
const timer = window.setTimeout(() => {
|
||||
|
||||
void runScan({ postAuthWarmup: true });
|
||||
|
||||
}, getPostAuthScanDelayMs());
|
||||
|
||||
|
||||
|
||||
return () => window.clearTimeout(timer);
|
||||
|
||||
}, [ready, authenticated, searchParams, runScan]);
|
||||
|
||||
|
||||
|
||||
async function handleScan() {
|
||||
|
||||
setScanMsg('');
|
||||
|
||||
if (!isWechatEnv()) {
|
||||
|
||||
setScanMsg('请在微信内打开门店端进行扫码核销');
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
const profile = await fetchShopAccount();
|
||||
|
||||
if (await checkNeedsWechatAuth(profile)) {
|
||||
|
||||
pendingScanStartedRef.current = false;
|
||||
|
||||
setAuthModalOpen(true);
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
await runScan();
|
||||
|
||||
} catch (e) {
|
||||
|
||||
setScanMsg(e instanceof Error ? e.message : '无法发起扫码');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function startWechatAuth() {
|
||||
|
||||
setAuthLoading(true);
|
||||
|
||||
setAuthError('');
|
||||
|
||||
try {
|
||||
|
||||
pendingScanStartedRef.current = false;
|
||||
|
||||
markPendingScanAfterAuth();
|
||||
|
||||
await authorizeShopWechat();
|
||||
|
||||
} catch (e) {
|
||||
|
||||
clearPendingScanAfterAuth();
|
||||
|
||||
setAuthError(e instanceof Error ? e.message : '微信授权失败');
|
||||
|
||||
setAuthLoading(false);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const store = dash?.store as Record<string, unknown> | undefined;
|
||||
|
||||
const recent = (dash?.recentRecords as Array<Record<string, unknown>>) || [];
|
||||
|
||||
const status = String(store?.status || '');
|
||||
|
||||
const open = status === 'OPEN';
|
||||
|
||||
const hoursParts: string[] = [];
|
||||
|
||||
if (store?.openTime && store?.closeTime) hoursParts.push(`${store.openTime} - ${store.closeTime}`);
|
||||
|
||||
if (store?.openTime2 && store?.closeTime2) hoursParts.push(`${store.openTime2} - ${store.closeTime2}`);
|
||||
|
||||
const hoursText = hoursParts.length ? hoursParts.join('，') : '10:00 - 22:00';
|
||||
|
||||
const statusText =
|
||||
|
||||
status === 'CLOSED' ? '永久关闭' : open ? '当前正在营业中' : '当前临时闭店';
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<PullToRefresh onRefresh={loadDashboard} className="shop-home-page">
|
||||
|
||||
<header className="shop-home-header">
|
||||
|
||||
<h1 className="app-page-title">门店管理中心</h1>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div className="shop-home-content">
|
||||
|
||||
<section className="shop-home-hero">
|
||||
|
||||
<div className="shop-home-hero-store">
|
||||
|
||||
<span className="material-symbols-outlined shop-fill-icon">store</span>
|
||||
|
||||
<h2>{String(store?.name || '门店')}</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="shop-home-stats">
|
||||
|
||||
<div className="shop-home-stat">
|
||||
|
||||
<p className="shop-home-stat-label">今日核销笔数</p>
|
||||
|
||||
<p className="shop-home-stat-value">{Number(dash?.todayCount || 0)}</p>
|
||||
|
||||
<p className="shop-home-stat-sub">
|
||||
|
||||
扫码 {Number(dash?.todayScanCount || 0)} · 手机号 {Number(dash?.todayPhoneCount || 0)}
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="shop-home-stat">
|
||||
|
||||
<p className="shop-home-stat-label">今日到账金额</p>
|
||||
|
||||
<p className="shop-home-stat-value">
|
||||
|
||||
<span style={{ fontSize: 18 }}>¥</span>
|
||||
|
||||
{formatMoney(Number(dash?.todayAmount || 0))}
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section className="shop-home-scan">
|
||||
|
||||
<button
|
||||
|
||||
type="button"
|
||||
|
||||
className="shop-home-scan-btn"
|
||||
|
||||
disabled={scanning}
|
||||
|
||||
onClick={() => void handleScan()}
|
||||
|
||||
>
|
||||
|
||||
<span className="material-symbols-outlined">qr_code_scanner</span>
|
||||
|
||||
</button>
|
||||
|
||||
<p className="shop-home-scan-label">{scanning ? '正在打开相机…' : '扫码核销'}</p>
|
||||
|
||||
{scanMsg && <p className="shop-home-scan-msg" role="alert">{scanMsg}</p>}
|
||||
|
||||
<Link to="/redeem/phone" className="shop-home-phone-link">
|
||||
|
||||
<span className="material-symbols-outlined">smartphone</span>
|
||||
|
||||
手机号核销
|
||||
|
||||
</Link>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section className="shop-home-status">
|
||||
|
||||
<div className="shop-home-status-left">
|
||||
|
||||
<div className={`shop-home-status-icon${open ? '' : ' closed'}`}>
|
||||
|
||||
<span className="material-symbols-outlined shop-fill-icon">schedule</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<p className="shop-home-status-title">营业状态</p>
|
||||
|
||||
<p className="shop-home-status-sub">{statusText}</p>
|
||||
|
||||
<p className="shop-home-status-sub">营业时间: {hoursText}</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<label className="shop-home-switch" onClick={() => navigate('/status')}>
|
||||
|
||||
<input type="checkbox" checked={open && status !== 'CLOSED'} readOnly tabIndex={-1} />
|
||||
|
||||
<span className="shop-home-switch-track" />
|
||||
|
||||
</label>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
|
||||
<div className="shop-home-records-head">
|
||||
|
||||
<h3 className="shop-home-records-title">核销记录</h3>
|
||||
|
||||
<Link to="/records" className="shop-home-records-link">
|
||||
|
||||
查看全部
|
||||
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 16 }}>chevron_right</span>
|
||||
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="shop-home-record-list">
|
||||
|
||||
{recent.length === 0 && (
|
||||
|
||||
<p className="shop-home-status-sub" style={{ textAlign: 'center', padding: '16px 0' }}>暂无核销记录</p>
|
||||
|
||||
)}
|
||||
|
||||
{recent.map((r) => (
|
||||
|
||||
<div key={String(r.id)} className="shop-home-record-item">
|
||||
|
||||
<div>
|
||||
|
||||
<p className="shop-home-record-time">核销时间</p>
|
||||
|
||||
<p className="shop-home-record-value">
|
||||
|
||||
{new Date(String(r.createdAt)).toLocaleString('zh-CN')}
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<p className="shop-home-record-amount">¥{formatMoney(Number(r.amount))}</p>
|
||||
|
||||
</div>
|
||||
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<WechatScanAuthModal
|
||||
|
||||
open={authModalOpen}
|
||||
|
||||
loading={authLoading}
|
||||
|
||||
error={authError}
|
||||
|
||||
onAuthorize={() => void startWechatAuth()}
|
||||
|
||||
onCancel={() => {
|
||||
|
||||
setAuthModalOpen(false);
|
||||
|
||||
setAuthError('');
|
||||
|
||||
clearPendingScanAfterAuth();
|
||||
|
||||
pendingScanStartedRef.current = false;
|
||||
|
||||
}}
|
||||
|
||||
/>
|
||||
|
||||
</PullToRefresh>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import { CUSTOMER_SERVICE_PHONE } from '@dukang/shared-types';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { track } from '../lib/analytics';
|
||||
import { openWecomCustomerService } from '../lib/customer-service';
|
||||
import {
|
||||
getCustomerServicePhone,
|
||||
loadCustomerServicePhone,
|
||||
openWecomCustomerService,
|
||||
} from '../lib/customer-service';
|
||||
|
||||
type ContactCustomerSheetProps = {
|
||||
orderId?: string;
|
||||
@@ -9,7 +13,13 @@ type ContactCustomerSheetProps = {
|
||||
};
|
||||
|
||||
export default function ContactCustomerSheet({ orderId, onClose }: ContactCustomerSheetProps) {
|
||||
const tel = CUSTOMER_SERVICE_PHONE.replace(/-/g, '');
|
||||
const [phone, setPhone] = useState(getCustomerServicePhone);
|
||||
|
||||
useEffect(() => {
|
||||
void loadCustomerServicePhone().then(setPhone);
|
||||
}, []);
|
||||
|
||||
const tel = phone.replace(/-/g, '');
|
||||
|
||||
function openPhone() {
|
||||
track('cs_contact', { type: 'phone', orderId });
|
||||
@@ -41,7 +51,7 @@ export default function ContactCustomerSheet({ orderId, onClose }: ContactCustom
|
||||
</div>
|
||||
<div className="contact-customer-option-body">
|
||||
<p className="contact-customer-option-title">拨打总部客服电话</p>
|
||||
<p className="contact-customer-option-sub">{CUSTOMER_SERVICE_PHONE}</p>
|
||||
<p className="contact-customer-option-sub">{phone}</p>
|
||||
</div>
|
||||
<span className="material-symbols-outlined contact-customer-chevron">chevron_right</span>
|
||||
</button>
|
||||
|
||||
@@ -1,12 +1,31 @@
|
||||
import { CUSTOMER_SERVICE_PHONE, CUSTOMER_SERVICE_WECOM_URL } from '@dukang/shared-types';
|
||||
import { fetchClientConfig } from './pay-wechat';
|
||||
import { isWechatEnv } from './weixin';
|
||||
|
||||
let cachedPhone = CUSTOMER_SERVICE_PHONE;
|
||||
|
||||
/** 企微客服链接：优先 Vite env，否则 shared-types 默认 */
|
||||
export function getCustomerServiceWecomUrl(): string {
|
||||
const fromEnv = import.meta.env.VITE_CS_WECOM_URL?.trim();
|
||||
return fromEnv || CUSTOMER_SERVICE_WECOM_URL;
|
||||
}
|
||||
|
||||
export function getCustomerServicePhone(): string {
|
||||
return cachedPhone;
|
||||
}
|
||||
|
||||
/** 从系统设置拉取客服电话（失败则保持默认常量） */
|
||||
export async function loadCustomerServicePhone(): Promise<string> {
|
||||
try {
|
||||
const cfg = await fetchClientConfig();
|
||||
const phone = cfg.customerServicePhone?.trim();
|
||||
if (phone) cachedPhone = phone;
|
||||
} catch {
|
||||
/* keep fallback */
|
||||
}
|
||||
return cachedPhone;
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开企业微信客服会话（须在微信内；需用户点击手势）。
|
||||
* @returns true 已跳转；false 非微信环境已提示
|
||||
@@ -20,4 +39,5 @@ export function openWecomCustomerService(): boolean {
|
||||
return true;
|
||||
}
|
||||
|
||||
/** @deprecated 请用 getCustomerServicePhone()，保留兼容旧引用 */
|
||||
export { CUSTOMER_SERVICE_PHONE };
|
||||
|
||||
@@ -1,11 +1,22 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import SubPageHeader from '../components/SubPageHeader';
|
||||
import { CUSTOMER_SERVICE_PHONE, openWecomCustomerService } from '../lib/customer-service';
|
||||
import {
|
||||
getCustomerServicePhone,
|
||||
loadCustomerServicePhone,
|
||||
openWecomCustomerService,
|
||||
} from '../lib/customer-service';
|
||||
import { track } from '../lib/analytics';
|
||||
|
||||
export default function CustomerServicePage() {
|
||||
const navigate = useNavigate();
|
||||
const tel = CUSTOMER_SERVICE_PHONE.replace(/-/g, '');
|
||||
const [phone, setPhone] = useState(getCustomerServicePhone);
|
||||
|
||||
useEffect(() => {
|
||||
void loadCustomerServicePhone().then(setPhone);
|
||||
}, []);
|
||||
|
||||
const tel = phone.replace(/-/g, '');
|
||||
|
||||
function openOnline() {
|
||||
track('cs_contact', { type: 'wecom_kf' });
|
||||
@@ -27,7 +38,7 @@ export default function CustomerServicePage() {
|
||||
|
||||
<a className="customer-service-phone-link" href={`tel:${tel}`}>
|
||||
<span className="material-symbols-outlined">call</span>
|
||||
或拨打客服电话 {CUSTOMER_SERVICE_PHONE}
|
||||
或拨打客服电话 {phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@dukang/mini-user",
|
||||
"version": "3.4.13",
|
||||
"version": "3.4.14",
|
||||
"private": true,
|
||||
"description": "杜康好客 · C 端用户微信小程序（Taro）",
|
||||
"scripts": {
|
||||
|
||||
@@ -6,6 +6,7 @@ export default defineAppConfig({
|
||||
'pages/mine/index',
|
||||
'pages/product-detail/index',
|
||||
'pages/store-detail/index',
|
||||
'pages/store-package-detail/index',
|
||||
'pages/order-confirm/index',
|
||||
'pages/order-confirm-pickup/index',
|
||||
'pages/pay/index',
|
||||
|
||||
@@ -6,11 +6,13 @@ import WechatShareBootstrap from './components/WechatShareBootstrap';
|
||||
import { patchTaroH5Hooks } from './lib/patch-taro-h5-hooks';
|
||||
import { handleWechatOrderConfirmShow } from './lib/wechat-order-confirm';
|
||||
import { installClientErrorReporting } from './lib/client-error';
|
||||
import { prefetchShareBrandAssets } from './lib/wechat-share';
|
||||
import './app.css';
|
||||
|
||||
// H5：在首屏 page hooks 执行前，把 Taro.useDidShow 等绑到与 createReactApp 同一份 runtime
|
||||
patchTaroH5Hooks();
|
||||
installClientErrorReporting();
|
||||
prefetchShareBrandAssets();
|
||||
|
||||
function App({ children }: PropsWithChildren) {
|
||||
const handlingRef = useRef(false);
|
||||
|
||||
@@ -7,6 +7,8 @@ type ProductCarouselProps = {
|
||||
alt: string;
|
||||
variant?: 'home' | 'detail' | 'store';
|
||||
previewable?: boolean;
|
||||
/** cover=aspectFill 裁剪铺满；contain=aspectFit 缩放完整显示（门店门头固定区） */
|
||||
imageFit?: 'cover' | 'contain';
|
||||
};
|
||||
|
||||
/** 商品/门店轮播（对齐 h5 ProductCarousel 三变体） */
|
||||
@@ -15,12 +17,14 @@ export default function ProductCarousel({
|
||||
alt,
|
||||
variant = 'detail',
|
||||
previewable = false,
|
||||
imageFit = 'cover',
|
||||
}: ProductCarouselProps) {
|
||||
const slides = images.length > 0 ? images : [''];
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const prefix =
|
||||
variant === 'store' ? 'store-detail-carousel' : variant === 'home' ? 'home-carousel' : 'detail-carousel';
|
||||
const imageMode = 'aspectFill';
|
||||
const isContain = imageFit === 'contain';
|
||||
const wrapClass = `${prefix}-wrap${isContain ? ` ${prefix}-wrap--contain` : ''}`;
|
||||
|
||||
function previewAt(index: number) {
|
||||
const urls = slides.filter(Boolean);
|
||||
@@ -30,7 +34,7 @@ export default function ProductCarousel({
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={`${prefix}-wrap`}>
|
||||
<View className={wrapClass}>
|
||||
<Swiper
|
||||
className={prefix}
|
||||
circular={slides.length > 1}
|
||||
@@ -42,7 +46,7 @@ export default function ProductCarousel({
|
||||
<Image
|
||||
className={`${prefix}-image`}
|
||||
src={src}
|
||||
mode={imageMode}
|
||||
mode={isContain ? 'aspectFit' : 'aspectFill'}
|
||||
alt={alt}
|
||||
onClick={previewable ? () => previewAt(index) : undefined}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
import {
|
||||
BRAND_LOGO_MARK_URL,
|
||||
BRAND_LOGO_URL,
|
||||
BRAND_LOGO_WIDE_URL,
|
||||
CUSTOMER_SERVICE_PHONE,
|
||||
QUALIFICATION_DISCLOSURE_URL,
|
||||
type ClientRuntimeConfig,
|
||||
} from '@dukang/shared-types';
|
||||
import { fetchClientConfig } from './pay-wechat';
|
||||
|
||||
export type BrandAssets = {
|
||||
brandLogoUrl: string;
|
||||
brandLogoWideUrl: string;
|
||||
brandLogoMarkUrl: string;
|
||||
qualificationDisclosureUrl: string;
|
||||
customerServicePhone: string;
|
||||
};
|
||||
|
||||
const FALLBACK: BrandAssets = {
|
||||
brandLogoUrl: BRAND_LOGO_URL,
|
||||
brandLogoWideUrl: BRAND_LOGO_WIDE_URL,
|
||||
brandLogoMarkUrl: BRAND_LOGO_MARK_URL,
|
||||
qualificationDisclosureUrl: QUALIFICATION_DISCLOSURE_URL,
|
||||
customerServicePhone: CUSTOMER_SERVICE_PHONE,
|
||||
};
|
||||
|
||||
let cached: BrandAssets | null = null;
|
||||
let inflight: Promise<BrandAssets> | null = null;
|
||||
|
||||
function fromConfig(config: ClientRuntimeConfig | null | undefined): BrandAssets {
|
||||
return {
|
||||
brandLogoUrl: config?.brandLogoUrl?.trim() || FALLBACK.brandLogoUrl,
|
||||
brandLogoWideUrl: config?.brandLogoWideUrl?.trim() || FALLBACK.brandLogoWideUrl,
|
||||
brandLogoMarkUrl: config?.brandLogoMarkUrl?.trim() || FALLBACK.brandLogoMarkUrl,
|
||||
qualificationDisclosureUrl:
|
||||
config?.qualificationDisclosureUrl?.trim() || FALLBACK.qualificationDisclosureUrl,
|
||||
customerServicePhone: config?.customerServicePhone?.trim() || FALLBACK.customerServicePhone,
|
||||
};
|
||||
}
|
||||
|
||||
/** 同步读取最近一次缓存（未拉取前返回代码默认常量） */
|
||||
export function getBrandAssetsSync(): BrandAssets {
|
||||
return cached ?? FALLBACK;
|
||||
}
|
||||
|
||||
/** 拉取 /common/client-config 中的品牌与客服配置并缓存 */
|
||||
export async function loadBrandAssets(force = false): Promise<BrandAssets> {
|
||||
if (!force && cached) return cached;
|
||||
if (!force && inflight) return inflight;
|
||||
inflight = fetchClientConfig()
|
||||
.then((cfg) => {
|
||||
cached = fromConfig(cfg);
|
||||
return cached;
|
||||
})
|
||||
.catch(() => {
|
||||
cached = FALLBACK;
|
||||
return cached;
|
||||
})
|
||||
.finally(() => {
|
||||
inflight = null;
|
||||
});
|
||||
return inflight;
|
||||
}
|
||||
|
||||
export function applyBrandFromClientConfig(config: ClientRuntimeConfig | null | undefined) {
|
||||
cached = fromConfig(config);
|
||||
return cached;
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import Taro from '@tarojs/taro';
|
||||
import { fetchClientConfig } from './pay-wechat';
|
||||
|
||||
/** 与 package.json version 同步，供服务端 minClientVersion 比对 */
|
||||
export const APP_VERSION = '3.4.13';
|
||||
export const APP_VERSION = '3.4.14';
|
||||
|
||||
export const APP_VERSION_LABEL = `v${APP_VERSION}`;
|
||||
|
||||
|
||||
@@ -1,16 +1,21 @@
|
||||
import Taro from '@tarojs/taro';
|
||||
import { BRAND_LOGO_URL } from '@dukang/shared-types';
|
||||
import type { WechatShareData } from '@dukang/weixin-sdk';
|
||||
import { getWechatShareLink, isWechatBrowser, isMiniProgram } from '@dukang/weixin-sdk';
|
||||
import { toast } from './api';
|
||||
import { getBrandAssetsSync, loadBrandAssets } from './brand-assets';
|
||||
import { isWechatEnv, weixinSdk } from './weixin';
|
||||
|
||||
export const DEFAULT_SHARE_TITLE = '你吃饭，杜康买单';
|
||||
export const DEFAULT_SHARE_TITLE = '你吃饭，我买单';
|
||||
export const DEFAULT_SHARE_DESC = '杜康好客 · 买美酒，享好礼，全城门店可用';
|
||||
export const WECHAT_SHARE_HINT = '请点击右上角 ··· 分享给好友';
|
||||
|
||||
export function getDefaultShareImageUrl(): string {
|
||||
return BRAND_LOGO_URL;
|
||||
return getBrandAssetsSync().brandLogoUrl;
|
||||
}
|
||||
|
||||
/** 预热分享默认图（来自系统设置） */
|
||||
export function prefetchShareBrandAssets() {
|
||||
void loadBrandAssets();
|
||||
}
|
||||
|
||||
export function buildDefaultShareData(
|
||||
|
||||
@@ -1,19 +1,26 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { CUSTOMER_SERVICE_PHONE } from '@dukang/shared-types';
|
||||
import PageShell from '../../components/PageShell';
|
||||
import SubPageHeader from '../../components/SubPageHeader';
|
||||
import ContactCsButton from '../../components/ContactCsButton';
|
||||
import { toast } from '../../lib/api';
|
||||
import { getBrandAssetsSync, loadBrandAssets } from '../../lib/brand-assets';
|
||||
|
||||
const isWeapp = process.env.TARO_ENV === 'weapp';
|
||||
const DIAL_PHONE = CUSTOMER_SERVICE_PHONE.replace(/-/g, '');
|
||||
|
||||
function dialPhone() {
|
||||
Taro.makePhoneCall({ phoneNumber: DIAL_PHONE }).catch(() => toast('无法拨打电话'));
|
||||
function dialPhone(phone: string) {
|
||||
const tel = phone.replace(/-/g, '');
|
||||
Taro.makePhoneCall({ phoneNumber: tel }).catch(() => toast('无法拨打电话'));
|
||||
}
|
||||
|
||||
export default function CustomerServicePage() {
|
||||
const [phone, setPhone] = useState(() => getBrandAssetsSync().customerServicePhone);
|
||||
|
||||
useEffect(() => {
|
||||
void loadBrandAssets().then((b) => setPhone(b.customerServicePhone));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<PageShell variant="sub" className="cs-page">
|
||||
<SubPageHeader title="联系客服" />
|
||||
@@ -30,14 +37,14 @@ export default function CustomerServicePage() {
|
||||
<ContactCsButton className="cs-online-btn" session={{ from: 'customer-service' }} />
|
||||
) : null}
|
||||
|
||||
<View className={isWeapp ? 'cs-phone-link' : 'cs-call-btn'} onClick={dialPhone}>
|
||||
<View className={isWeapp ? 'cs-phone-link' : 'cs-call-btn'} onClick={() => dialPhone(phone)}>
|
||||
<Text>
|
||||
{isWeapp ? `或拨打客服电话 ${CUSTOMER_SERVICE_PHONE}` : '拨打客服电话'}
|
||||
{isWeapp ? `或拨打客服电话 ${phone}` : '拨打客服电话'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{!isWeapp ? (
|
||||
<Text className="cs-phone-display">{CUSTOMER_SERVICE_PHONE}</Text>
|
||||
<Text className="cs-phone-display">{phone}</Text>
|
||||
) : null}
|
||||
</View>
|
||||
</PageShell>
|
||||
|
||||
@@ -10,7 +10,11 @@ import {
|
||||
import PageShell from '../../components/PageShell';
|
||||
import WechatLoginButton from '../../components/WechatLoginButton';
|
||||
import PhoneQuickLoginButton from '../../components/PhoneQuickLoginButton';
|
||||
import { BRAND_LOGO_WIDE_URL } from '@dukang/shared-types';
|
||||
import {
|
||||
applyBrandFromClientConfig,
|
||||
getBrandAssetsSync,
|
||||
loadBrandAssets,
|
||||
} from '../../lib/brand-assets';
|
||||
import { finishLoginNavigate, forceReloadAfterAccountMerge } from '../../lib/auth-nav';
|
||||
import {
|
||||
bindWechatForUser,
|
||||
@@ -98,11 +102,18 @@ export default function LoginPage() {
|
||||
const [wxAuthorize, setWxAuthorize] = useState(true);
|
||||
const [completeMode, setCompleteMode] = useState<'phone' | 'wechat' | null>(null);
|
||||
const [showSmsForm, setShowSmsForm] = useState(!IS_WEAPP);
|
||||
const [logoWideUrl, setLogoWideUrl] = useState(() => getBrandAssetsSync().brandLogoWideUrl);
|
||||
|
||||
useEffect(() => {
|
||||
request<ClientRuntimeConfig>('/common/client-config')
|
||||
.then((config) => setWxAuthorize(isWxAuthorizeEnabled(config)))
|
||||
.catch(() => setWxAuthorize(true));
|
||||
.then((config) => {
|
||||
setWxAuthorize(isWxAuthorizeEnabled(config));
|
||||
setLogoWideUrl(applyBrandFromClientConfig(config).brandLogoWideUrl);
|
||||
})
|
||||
.catch(() => {
|
||||
setWxAuthorize(true);
|
||||
void loadBrandAssets().then((b) => setLogoWideUrl(b.brandLogoWideUrl));
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -394,7 +405,7 @@ export default function LoginPage() {
|
||||
<View className="login-header">
|
||||
<View className="login-logo-wrap">
|
||||
<View className="login-logo">
|
||||
<Image className="login-logo-img" src={BRAND_LOGO_WIDE_URL} mode="aspectFit" />
|
||||
<Image className="login-logo-img" src={logoWideUrl} mode="aspectFit" />
|
||||
</View>
|
||||
<Text className="login-logo-badge">官方</Text>
|
||||
</View>
|
||||
|
||||
@@ -2,8 +2,6 @@ import { useEffect, useMemo, useState } from 'react';
|
||||
import { View, Text, Image, Button, Input, ScrollView } from '@tarojs/components';
|
||||
import Taro, { useDidShow, usePullDownRefresh, useShareAppMessage, useShareTimeline } from '@tarojs/taro';
|
||||
import {
|
||||
BRAND_LOGO_MARK_URL,
|
||||
QUALIFICATION_DISCLOSURE_URL,
|
||||
isWxAuthorizeEnabled,
|
||||
type ClientRuntimeConfig,
|
||||
} from '@dukang/shared-types';
|
||||
@@ -13,6 +11,11 @@ import WechatShareReady from '../../components/WechatShareReady';
|
||||
import UserTabBar, { shouldRenderPageTabBar, syncTabBarSelected } from '../../components/UserTabBar';
|
||||
import { goLogin } from '../../lib/auth-nav';
|
||||
import { bindWechatForUser } from '../../lib/wechat-auth';
|
||||
import {
|
||||
applyBrandFromClientConfig,
|
||||
getBrandAssetsSync,
|
||||
loadBrandAssets,
|
||||
} from '../../lib/brand-assets';
|
||||
import {
|
||||
fetchMiniWechatUserInfo,
|
||||
isDefaultMiniNickname,
|
||||
@@ -70,6 +73,10 @@ export default function MinePage() {
|
||||
const [savingProfile, setSavingProfile] = useState(false);
|
||||
const [profileLoadError, setProfileLoadError] = useState('');
|
||||
const [qualificationOpen, setQualificationOpen] = useState(false);
|
||||
const [brandMarkUrl, setBrandMarkUrl] = useState(() => getBrandAssetsSync().brandLogoMarkUrl);
|
||||
const [qualificationUrl, setQualificationUrl] = useState(
|
||||
() => getBrandAssetsSync().qualificationDisclosureUrl,
|
||||
);
|
||||
|
||||
function resetGuestState() {
|
||||
setProfile(null);
|
||||
@@ -141,8 +148,16 @@ export default function MinePage() {
|
||||
|
||||
useEffect(() => {
|
||||
request<ClientRuntimeConfig>('/common/client-config')
|
||||
.then((config) => setWxAuthorize(isWxAuthorizeEnabled(config)))
|
||||
.catch(() => setWxAuthorize(true));
|
||||
.then((config) => {
|
||||
setWxAuthorize(isWxAuthorizeEnabled(config));
|
||||
const brand = applyBrandFromClientConfig(config);
|
||||
setBrandMarkUrl(brand.brandLogoMarkUrl);
|
||||
setQualificationUrl(brand.qualificationDisclosureUrl);
|
||||
})
|
||||
.catch(() => {
|
||||
setWxAuthorize(true);
|
||||
void loadBrandAssets();
|
||||
});
|
||||
}, []);
|
||||
|
||||
const sharePayload = useMemo(
|
||||
@@ -304,7 +319,7 @@ export default function MinePage() {
|
||||
if (displayAvatarUrl) {
|
||||
return <Image className="mine-avatar-img" src={displayAvatarUrl} mode="aspectFill" />;
|
||||
}
|
||||
return <Image className="mine-avatar-img" src={BRAND_LOGO_MARK_URL} mode="aspectFit" />;
|
||||
return <Image className="mine-avatar-img" src={brandMarkUrl} mode="aspectFit" />;
|
||||
}
|
||||
|
||||
if (!authed) {
|
||||
@@ -317,7 +332,7 @@ export default function MinePage() {
|
||||
<View className="mine-profile">
|
||||
<View className="mine-avatar-wrap mine-avatar-wrap--action" onClick={() => goLogin('/pages/mine/index')}>
|
||||
<View className="mine-avatar mine-avatar--wx-pending">
|
||||
<Image className="mine-avatar-img" src={BRAND_LOGO_MARK_URL} mode="aspectFit" />
|
||||
<Image className="mine-avatar-img" src={brandMarkUrl} mode="aspectFit" />
|
||||
</View>
|
||||
</View>
|
||||
<View>
|
||||
@@ -526,7 +541,7 @@ export default function MinePage() {
|
||||
{previewAvatar ? (
|
||||
<Image className="mine-avatar-img" src={previewAvatar} mode="aspectFill" />
|
||||
) : (
|
||||
<Image className="mine-avatar-img" src={BRAND_LOGO_MARK_URL} mode="aspectFit" />
|
||||
<Image className="mine-avatar-img" src={brandMarkUrl} mode="aspectFit" />
|
||||
)}
|
||||
</View>
|
||||
<Text className="mine-profile-avatar-tip">点击选择头像</Text>
|
||||
@@ -579,7 +594,7 @@ export default function MinePage() {
|
||||
<View className="mine-qualification-body">
|
||||
<Image
|
||||
className="mine-qualification-img"
|
||||
src={QUALIFICATION_DISCLOSURE_URL}
|
||||
src={qualificationUrl}
|
||||
mode="widthFix"
|
||||
/>
|
||||
</View>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { View, Text, Image, ScrollView } from '@tarojs/components';
|
||||
import { View, Text, Image } from '@tarojs/components';
|
||||
import Taro, {
|
||||
useDidShow,
|
||||
useLoad,
|
||||
@@ -156,14 +156,9 @@ export default function StoreDetailPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadError, setLoadError] = useState('');
|
||||
const [headerSolid, setHeaderSolid] = useState(false);
|
||||
const [activePackageIndex, setActivePackageIndex] = useState(0);
|
||||
const storeRef = useRef<Store | null>(null);
|
||||
storeRef.current = store;
|
||||
|
||||
useEffect(() => {
|
||||
setActivePackageIndex(0);
|
||||
}, [store?.id]);
|
||||
|
||||
usePageScroll(({ scrollTop }) => {
|
||||
setHeaderSolid(scrollTop > 100);
|
||||
});
|
||||
@@ -326,13 +321,18 @@ export default function StoreDetailPage() {
|
||||
const envPhotos = envPhotoUrls(store);
|
||||
const heroImages = uniqueUrls([store.coverUrl, ...(store.carouselUrls || [])]);
|
||||
const packages = store.packages ?? [];
|
||||
const activePackage = packages[activePackageIndex] ?? packages[0];
|
||||
|
||||
const intro = store.intro?.trim() || '';
|
||||
const benefitRuleRaw = store.benefitUsageRule?.trim() || '';
|
||||
const benefitRule =
|
||||
benefitRuleRaw && !/^null$/i.test(benefitRuleRaw) ? benefitRuleRaw : '';
|
||||
|
||||
function openPackageDetail(index: number) {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/store-package-detail/index?storeId=${storeId}&index=${index}`,
|
||||
});
|
||||
}
|
||||
|
||||
function previewEnv(index: number) {
|
||||
if (!envPhotos.length) return;
|
||||
Taro.previewImage({
|
||||
@@ -353,7 +353,13 @@ export default function StoreDetailPage() {
|
||||
/>
|
||||
|
||||
<View className="store-detail-hero full-bleed">
|
||||
<ProductCarousel images={heroImages} alt={store.name} variant="store" previewable />
|
||||
<ProductCarousel
|
||||
images={heroImages}
|
||||
alt={store.name}
|
||||
variant="store"
|
||||
previewable
|
||||
imageFit="contain"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="store-detail-info-card">
|
||||
@@ -408,48 +414,19 @@ export default function StoreDetailPage() {
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{packages.length > 0 && activePackage ? (
|
||||
{packages.length > 0 ? (
|
||||
<View className="store-detail-section store-detail-section--packages">
|
||||
<Text className="store-detail-section-title">门店套餐</Text>
|
||||
{packages.length > 1 ? (
|
||||
<ScrollView className="store-detail-package-tabs" scrollX showScrollbar={false} enhanced>
|
||||
<View className="store-detail-package-tabs-inner">
|
||||
{packages.map((pkg, index) => (
|
||||
<View
|
||||
key={`${pkg.name}-${index}`}
|
||||
className={`store-detail-package-tab${
|
||||
index === activePackageIndex ? ' store-detail-package-tab--active' : ''
|
||||
}`}
|
||||
onClick={() => setActivePackageIndex(index)}
|
||||
>
|
||||
<Text className="store-detail-package-tab-text">{pkg.name}</Text>
|
||||
</View>
|
||||
))}
|
||||
<View className="store-detail-package-list">
|
||||
{packages.map((pkg, index) => (
|
||||
<View
|
||||
key={`${pkg.name}-${index}`}
|
||||
className="store-detail-package-list-item"
|
||||
onClick={() => openPackageDetail(index)}
|
||||
>
|
||||
<Text className="store-detail-package-list-title">{pkg.name}</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
) : null}
|
||||
<View className="store-detail-package-panel">
|
||||
{activePackage.imageUrl ? (
|
||||
<Image
|
||||
className="store-detail-package-thumb"
|
||||
src={activePackage.imageUrl}
|
||||
mode="aspectFill"
|
||||
/>
|
||||
) : null}
|
||||
<View className="store-detail-package-panel-body">
|
||||
{packages.length === 1 ? (
|
||||
<Text className="store-detail-package-name">{activePackage.name}</Text>
|
||||
) : null}
|
||||
<Text className="store-detail-package-body">
|
||||
{formatRedeemAmountYuan(activePackage.price)} 元 · {activePackage.dishes}
|
||||
</Text>
|
||||
{activePackage.usableTime ? (
|
||||
<Text className="store-detail-package-meta">使用时间：{activePackage.usableTime}</Text>
|
||||
) : null}
|
||||
{activePackage.otherNotes ? (
|
||||
<Text className="store-detail-package-meta">说明：{activePackage.otherNotes}</Text>
|
||||
) : null}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '套餐详情',
|
||||
});
|
||||
@@ -0,0 +1,175 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { View, Text, Image } from '@tarojs/components';
|
||||
import Taro, { useLoad, useRouter } from '@tarojs/taro';
|
||||
import PageShell from '../../components/PageShell';
|
||||
import PageNavBar from '../../components/PageNavBar';
|
||||
import { request, toast } from '../../lib/api';
|
||||
|
||||
type StorePackage = {
|
||||
name: string;
|
||||
price: string | number;
|
||||
dishes: string;
|
||||
usableTime?: string | null;
|
||||
otherNotes?: string | null;
|
||||
imageUrl?: string | null;
|
||||
};
|
||||
|
||||
type Store = {
|
||||
id: string;
|
||||
name: string;
|
||||
packages?: StorePackage[] | null;
|
||||
};
|
||||
|
||||
function pickStoreId(raw?: string | null) {
|
||||
return String(raw || '')
|
||||
.trim()
|
||||
.replace(/[^\d]/g, '');
|
||||
}
|
||||
|
||||
function parsePackageIndex(raw?: string | null) {
|
||||
const n = Number.parseInt(String(raw ?? ''), 10);
|
||||
return Number.isFinite(n) && n >= 0 ? n : -1;
|
||||
}
|
||||
|
||||
function formatPriceYuan(price: string | number) {
|
||||
const n = typeof price === 'number' ? price : Number(price);
|
||||
if (!Number.isFinite(n)) return '0';
|
||||
if (Math.abs(n - Math.round(n)) < 1e-9) return String(Math.round(n));
|
||||
return n.toFixed(2).replace(/\.?0+$/, '');
|
||||
}
|
||||
|
||||
export default function StorePackageDetailPage() {
|
||||
const router = useRouter();
|
||||
const [storeId, setStoreId] = useState(() => pickStoreId(router.params.storeId));
|
||||
const [storeName, setStoreName] = useState('');
|
||||
const [pkg, setPkg] = useState<StorePackage | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadError, setLoadError] = useState('');
|
||||
|
||||
const loadPackage = useCallback(async (sid: string, index: number) => {
|
||||
if (!sid) {
|
||||
setLoading(false);
|
||||
setLoadError('缺少门店参数');
|
||||
return;
|
||||
}
|
||||
if (index < 0) {
|
||||
setLoading(false);
|
||||
setLoadError('套餐不存在');
|
||||
return;
|
||||
}
|
||||
setLoadError('');
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await request<Store>(`/stores/${sid}`);
|
||||
const packages = data?.packages ?? [];
|
||||
const item = packages[index];
|
||||
if (!data?.id || !item) {
|
||||
setPkg(null);
|
||||
setLoadError('套餐不存在或已下架');
|
||||
toast('套餐不存在或已下架');
|
||||
return;
|
||||
}
|
||||
setStoreName(data.name);
|
||||
setPkg(item);
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : '加载失败';
|
||||
setLoadError(msg);
|
||||
toast(msg);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useLoad((options) => {
|
||||
const sid = pickStoreId(options?.storeId || router.params.storeId);
|
||||
const index = parsePackageIndex(options?.index ?? router.params.index);
|
||||
setStoreId(sid);
|
||||
void loadPackage(sid, index);
|
||||
});
|
||||
|
||||
function goBack() {
|
||||
const pages = Taro.getCurrentPages();
|
||||
if (pages.length > 1) Taro.navigateBack();
|
||||
else if (storeId) {
|
||||
Taro.redirectTo({ url: `/pages/store-detail/index?id=${storeId}` });
|
||||
} else {
|
||||
Taro.switchTab({ url: '/pages/stores/index' });
|
||||
}
|
||||
}
|
||||
|
||||
function previewImage(url: string) {
|
||||
Taro.previewImage({ urls: [url], current: url }).catch(() => toast('无法预览图片'));
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<PageShell variant="scroll" className="store-package-detail-page">
|
||||
<PageNavBar title="套餐详情" solid onBack={goBack} />
|
||||
<View className="page-with-nav-bar u-empty">加载中…</View>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
|
||||
if (!pkg) {
|
||||
return (
|
||||
<PageShell variant="scroll" className="store-package-detail-page">
|
||||
<PageNavBar title="套餐详情" solid onBack={goBack} />
|
||||
<View className="page-with-nav-bar u-empty">{loadError || '套餐不存在'}</View>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
|
||||
const imageUrl = (pkg.imageUrl || '').trim();
|
||||
|
||||
return (
|
||||
<PageShell variant="scroll" className="store-package-detail-page">
|
||||
<PageNavBar title={pkg.name} solid titleVisible onBack={goBack} />
|
||||
|
||||
<View className="store-package-detail-body">
|
||||
<View className="store-package-detail-inner">
|
||||
<View className="store-package-detail-header">
|
||||
<View className="store-package-detail-title-row">
|
||||
<Text className="store-package-detail-title">{pkg.name}</Text>
|
||||
<Text className="store-package-detail-price">¥{formatPriceYuan(pkg.price)}</Text>
|
||||
</View>
|
||||
{storeName ? (
|
||||
<Text className="store-package-detail-store">{storeName}</Text>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
{imageUrl ? (
|
||||
<View
|
||||
className="store-package-detail-photo"
|
||||
onClick={() => previewImage(imageUrl)}
|
||||
>
|
||||
<Image
|
||||
className="store-package-detail-photo-image"
|
||||
src={imageUrl}
|
||||
mode="widthFix"
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<View className="store-package-detail-content">
|
||||
<View className="store-detail-package-field">
|
||||
<Text className="store-detail-package-field-label">菜品</Text>
|
||||
<Text className="store-detail-package-field-value">{pkg.dishes || '—'}</Text>
|
||||
</View>
|
||||
{pkg.usableTime ? (
|
||||
<View className="store-detail-package-field">
|
||||
<Text className="store-detail-package-field-label">使用时间</Text>
|
||||
<Text className="store-detail-package-field-value">{pkg.usableTime}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
{pkg.otherNotes ? (
|
||||
<View className="store-detail-package-field">
|
||||
<Text className="store-detail-package-field-label">其他说明</Text>
|
||||
<Text className="store-detail-package-field-value">{pkg.otherNotes}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { View, Text, Image, Input } from '@tarojs/components';
|
||||
import Taro, { useDidShow, usePullDownRefresh, useShareAppMessage, useShareTimeline } from '@tarojs/taro';
|
||||
import { StoreStatus, STORE_STATUS_LABELS } from '@dukang/shared-types';
|
||||
import PageShell from '../../components/PageShell';
|
||||
import TabMainHeader from '../../components/TabMainHeader';
|
||||
import WechatShareReady from '../../components/WechatShareReady';
|
||||
@@ -342,17 +341,12 @@ export default function StoresPage() {
|
||||
}
|
||||
}
|
||||
|
||||
function formatHours(store: Store) {
|
||||
function hoursLines(store: Store): string[] {
|
||||
const parts: string[] = [];
|
||||
if (store.openTime && store.closeTime) parts.push(`${store.openTime}-${store.closeTime}`);
|
||||
if (store.openTime2 && store.closeTime2) parts.push(`${store.openTime2}-${store.closeTime2}`);
|
||||
return parts.length ? `营业时间: ${parts.join('，')}` : '营业时间: 10:00-22:00';
|
||||
}
|
||||
|
||||
function formatStatus(store: Store) {
|
||||
const status = store.status as StoreStatus | undefined;
|
||||
if (status && STORE_STATUS_LABELS[status]) return STORE_STATUS_LABELS[status];
|
||||
return STORE_STATUS_LABELS[StoreStatus.OPEN];
|
||||
if (!parts.length) parts.push('10:00-22:00');
|
||||
return parts.map((p, i) => (i === 0 ? `营业时间: ${p}` : p));
|
||||
}
|
||||
|
||||
const sharePayload = useMemo(
|
||||
@@ -446,14 +440,17 @@ export default function StoresPage() {
|
||||
{formatDistanceMeters(s.distanceMeters)}
|
||||
</Text>
|
||||
</View>
|
||||
{/* 第2行：状态 + 营业时间（含第二段） */}
|
||||
<View className="store-card-row store-card-row--meta">
|
||||
<Text className="store-card-status">{formatStatus(s)}</Text>
|
||||
<Text className="store-card-hours">{formatHours(s)}</Text>
|
||||
{/* 第2行：营业时间（多段各占一行，居左） */}
|
||||
<View className="store-card-hours">
|
||||
{hoursLines(s).map((line) => (
|
||||
<Text key={line} className="store-card-hours-line">
|
||||
{line}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
{/* 第3行：地址 + 去核销 */}
|
||||
{/* 第3行：地址（最多两行）+ 去核销 */}
|
||||
<View className="store-card-row store-card-row--foot">
|
||||
<Text className="store-card-address" numberOfLines={1}>
|
||||
<Text className="store-card-address" numberOfLines={2}>
|
||||
{s.address || (s.district ? `${s.district}` : '地址待完善')}
|
||||
</Text>
|
||||
<View
|
||||
|
||||
@@ -12,7 +12,22 @@
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
background: var(--color-surface-container);
|
||||
/* background: var(--color-surface-container); */
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* 门店门头：固定 4:3 区域，图片 aspectFit 缩放完整显示（不裁剪） */
|
||||
.store-detail-carousel-wrap--contain .store-detail-carousel-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.store-detail-carousel-wrap--contain .store-detail-carousel-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
.store-detail-carousel {
|
||||
@@ -29,6 +44,7 @@
|
||||
|
||||
.store-detail-carousel-image {
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -59,7 +75,7 @@
|
||||
}
|
||||
|
||||
.store-detail-info-card {
|
||||
margin: -40px var(--space-page) 16px;
|
||||
margin: 0 var(--space-page) 16px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: var(--color-card);
|
||||
@@ -246,100 +262,142 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.store-detail-package-tabs {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.store-detail-package-tabs-inner {
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.store-detail-package-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
max-width: 132px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.store-detail-package-tab--active {
|
||||
background: rgba(166, 29, 36, 0.1);
|
||||
}
|
||||
|
||||
.store-detail-package-tab-text {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: var(--color-text-secondary, #666);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.store-detail-package-tab--active .store-detail-package-tab-text {
|
||||
color: var(--color-heritage-red, #a61d24);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.store-detail-package-panel {
|
||||
.store-detail-package-list {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
background: var(--color-surface-container, #f7f7f7);
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.store-detail-package-thumb {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
.store-detail-package-list-item {
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.store-detail-package-panel-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
.store-detail-package-list-item:first-child {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.store-detail-package-body,
|
||||
.store-detail-package-meta {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
.store-detail-package-list-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.store-detail-package-name {
|
||||
.store-detail-package-list-title {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
color: var(--color-on-surface);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.store-detail-package-list-item:active {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
/* ── 套餐详情页（独立于门店详情） ── */
|
||||
.store-package-detail-page {
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
.store-package-detail-body {
|
||||
/* 避开状态栏+胶囊导航，并额外 12px 顶白 */
|
||||
padding: calc(var(--nav-bar-height, 56px) + 12px) 0 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.store-package-detail-inner {
|
||||
/* 左右留白，内容不贴边 */
|
||||
padding: 8px 16px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.store-package-detail-header {
|
||||
padding: 8px 16px 4px 16px;
|
||||
}
|
||||
|
||||
.store-package-detail-title-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.store-package-detail-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-family: var(--font-headline);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary, #1a1a1a);
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
color: var(--color-ink-black);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.store-detail-package-body {
|
||||
.store-package-detail-price {
|
||||
flex-shrink: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
color: #a61d24;
|
||||
color: var(--color-heritage-red, #a61d24);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.store-package-detail-store {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary, #666);
|
||||
line-height: 1.45;
|
||||
line-height: 1.5;
|
||||
color: var(--color-on-surface-variant);
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.store-detail-package-meta {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-tertiary, #999);
|
||||
margin-top: 4px;
|
||||
.store-package-detail-photo {
|
||||
margin: 14px 0 0;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--color-card);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.store-package-detail-photo-image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.store-package-detail-content {
|
||||
margin-top: 16px;
|
||||
background: var(--color-card);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-card);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.store-detail-package-field-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-on-surface-variant);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.store-detail-package-field-value {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: var(--color-on-surface);
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.store-detail-package-field {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.store-detail-package-field:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.store-detail-package-dispute {
|
||||
|
||||
@@ -144,11 +144,11 @@
|
||||
padding: 4px var(--space-page) 16px;
|
||||
}
|
||||
|
||||
/* 左图右文，卡片等高 */
|
||||
/* 左图右文 */
|
||||
.store-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
@@ -174,10 +174,11 @@
|
||||
.store-card-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 96px;
|
||||
min-height: 96px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -218,39 +219,29 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 第2行：营业状态 + 营业时间（可含两段） */
|
||||
.store-card-row--meta {
|
||||
gap: 6px;
|
||||
min-height: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.store-card-status {
|
||||
flex-shrink: 0;
|
||||
padding: 0 6px;
|
||||
margin-top: 1px;
|
||||
border-radius: 4px;
|
||||
background: rgba(45, 106, 79, 0.12);
|
||||
color: #2d6a4f;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 第2行：营业时间独自居左；多段各占一行 */
|
||||
.store-card-hours {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.store-card-hours-line {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 第3行：地址（单行截断）+ 右对齐去核销 */
|
||||
/* 第3行：地址最多两行截断 + 右对齐去核销；与按钮垂直居中 */
|
||||
.store-card-row--foot {
|
||||
gap: 8px;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.store-card-address {
|
||||
@@ -258,11 +249,18 @@
|
||||
min-width: 0;
|
||||
font-size: 9px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
line-height: 14px;
|
||||
max-height: 28px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.store-card-cta {
|
||||
|
||||
Reference in New Issue
Block a user