feat(v3.4.13): partner column, version release cascade, client UX fixes
- HQ stores: partner column uses companyName/name/phone via partnerOptionLabel - Dev plan: version RELEASED auto-marks tasks RELEASED and tickets PUBLISHED with releasedVersionNo - mini-user/h5-shop/h5-partner v3.4.13 UX fixes (store UI, iOS scan OAuth, partner login guard) - Docs: v3.4.13 dev doc + status audit updates Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -20,7 +20,7 @@ export default function ProductCarousel({
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const prefix =
|
||||
variant === 'store' ? 'store-detail-carousel' : variant === 'home' ? 'home-carousel' : 'detail-carousel';
|
||||
const imageMode = variant === 'store' ? 'aspectFit' : 'aspectFill';
|
||||
const imageMode = 'aspectFill';
|
||||
|
||||
function previewAt(index: number) {
|
||||
const urls = slides.filter(Boolean);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { View, Text, Image } from '@tarojs/components';
|
||||
import { View, Text, Image, ScrollView } from '@tarojs/components';
|
||||
import Taro, {
|
||||
useDidShow,
|
||||
useLoad,
|
||||
@@ -156,10 +156,14 @@ export default function StoreDetailPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadError, setLoadError] = useState('');
|
||||
const [headerSolid, setHeaderSolid] = useState(false);
|
||||
const [expandedPackages, setExpandedPackages] = useState<Record<number, boolean>>({});
|
||||
const [activePackageIndex, setActivePackageIndex] = useState(0);
|
||||
const storeRef = useRef<Store | null>(null);
|
||||
storeRef.current = store;
|
||||
|
||||
useEffect(() => {
|
||||
setActivePackageIndex(0);
|
||||
}, [store?.id]);
|
||||
|
||||
usePageScroll(({ scrollTop }) => {
|
||||
setHeaderSolid(scrollTop > 100);
|
||||
});
|
||||
@@ -321,6 +325,8 @@ 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() || '';
|
||||
@@ -402,44 +408,49 @@ export default function StoreDetailPage() {
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{store.packages && store.packages.length > 0 ? (
|
||||
<View className="store-detail-section">
|
||||
{packages.length > 0 && activePackage ? (
|
||||
<View className="store-detail-section store-detail-section--packages">
|
||||
<Text className="store-detail-section-title">门店套餐</Text>
|
||||
{store.packages.map((pkg, index) => {
|
||||
const expanded = !!expandedPackages[index];
|
||||
const bodyText = `${formatRedeemAmountYuan(pkg.price)} 元 · ${pkg.dishes}`;
|
||||
const longBody = bodyText.length > 48 || (pkg.otherNotes?.length ?? 0) > 40;
|
||||
return (
|
||||
<View
|
||||
key={`${pkg.name}-${index}`}
|
||||
className={`store-detail-package-card${expanded || !longBody ? '' : ' store-detail-package-card--collapsed'}`}
|
||||
>
|
||||
{pkg.imageUrl ? (
|
||||
<Image className="store-detail-package-img" src={pkg.imageUrl} mode="aspectFill" />
|
||||
) : null}
|
||||
<View className="store-detail-package-head">
|
||||
<Text className="store-detail-package-name">{pkg.name}</Text>
|
||||
{longBody ? (
|
||||
<Text
|
||||
className="store-detail-package-toggle"
|
||||
onClick={() =>
|
||||
setExpandedPackages((prev) => ({ ...prev, [index]: !prev[index] }))
|
||||
}
|
||||
{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)}
|
||||
>
|
||||
{expanded ? '收起' : '展开'}
|
||||
</Text>
|
||||
) : null}
|
||||
<Text className="store-detail-package-tab-text">{pkg.name}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<Text className="store-detail-package-body">{bodyText}</Text>
|
||||
{pkg.usableTime ? (
|
||||
<Text className="store-detail-package-meta">使用时间:{pkg.usableTime}</Text>
|
||||
</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}
|
||||
{pkg.otherNotes ? (
|
||||
<Text className="store-detail-package-meta">说明:{pkg.otherNotes}</Text>
|
||||
<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}
|
||||
|
||||
|
||||
@@ -343,11 +343,10 @@ export default function StoresPage() {
|
||||
}
|
||||
|
||||
function formatHours(store: Store) {
|
||||
// 列表只展示第一段营业时间,避免挤占一行
|
||||
if (store.openTime && store.closeTime) {
|
||||
return `营业时间: ${store.openTime}-${store.closeTime}`;
|
||||
}
|
||||
return '营业时间: 10:00-22:00';
|
||||
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) {
|
||||
@@ -447,12 +446,10 @@ export default function StoresPage() {
|
||||
{formatDistanceMeters(s.distanceMeters)}
|
||||
</Text>
|
||||
</View>
|
||||
{/* 第2行:状态 + 营业时间(仅第一段) */}
|
||||
{/* 第2行:状态 + 营业时间(含第二段) */}
|
||||
<View className="store-card-row store-card-row--meta">
|
||||
<Text className="store-card-status">{formatStatus(s)}</Text>
|
||||
<Text className="store-card-hours" numberOfLines={1}>
|
||||
{formatHours(s)}
|
||||
</Text>
|
||||
<Text className="store-card-hours">{formatHours(s)}</Text>
|
||||
</View>
|
||||
{/* 第3行:地址 + 去核销 */}
|
||||
<View className="store-card-row store-card-row--foot">
|
||||
|
||||
@@ -10,15 +10,14 @@
|
||||
.store-detail-carousel-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
max-height: 360px;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
background: var(--color-surface-container);
|
||||
}
|
||||
|
||||
.store-detail-carousel {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.store-detail-carousel-item,
|
||||
@@ -28,6 +27,11 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.store-detail-carousel-image {
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.store-detail-carousel-placeholder {
|
||||
background: var(--color-surface-container);
|
||||
}
|
||||
@@ -238,62 +242,102 @@
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.store-detail-package-card {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
.store-detail-section--packages {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.store-detail-package-card--collapsed .store-detail-package-body,
|
||||
.store-detail-package-card--collapsed .store-detail-package-meta {
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.store-detail-package-thumb {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.store-detail-package-panel-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.store-detail-package-body,
|
||||
.store-detail-package-meta {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.store-detail-package-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.store-detail-package-toggle {
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
color: var(--color-heritage-red);
|
||||
}
|
||||
|
||||
.store-detail-package-img {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.store-detail-package-card:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.store-detail-package-name {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary, #1a1a1a);
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.store-detail-package-body {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary, #666);
|
||||
line-height: 1.5;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.store-detail-package-meta {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-tertiary, #999);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@@ -218,15 +218,17 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 第2行:营业状态 + 营业时间(单行) */
|
||||
/* 第2行:营业状态 + 营业时间(可含两段) */
|
||||
.store-card-row--meta {
|
||||
gap: 6px;
|
||||
height: 20px;
|
||||
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;
|
||||
@@ -241,11 +243,8 @@
|
||||
min-width: 0;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
line-height: 16px;
|
||||
color: #999;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 第3行:地址(单行截断)+ 右对齐去核销 */
|
||||
|
||||
Reference in New Issue
Block a user