feat(mp): 新增 AvatarCircle/ShortcutButton/TodoAlert 组件 + 商品详情页
- AvatarCircle: 头像圆形组件 - ShortcutButton: 快捷操作按钮 - TodoAlert: 待办提醒组件 - pkg-mall/product: 积分商品详情页
This commit is contained in:
iven
226
apps/miniprogram/src/pages/pkg-mall/product/index.scss
Normal file
226
apps/miniprogram/src/pages/pkg-mall/product/index.scss
Normal file
@@ -0,0 +1,226 @@
|
||||
@import '../../../styles/variables.scss';
|
||||
@import '../../../styles/mixins.scss';
|
||||
|
||||
// 商品详情 — 对齐原型 docs/design/mp-10-mall-pkg.html → 屏幕1
|
||||
|
||||
.product-detail-page {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.product-detail-scroll {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// 加载/空状态
|
||||
.product-detail-loading,
|
||||
.product-detail-empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: var(--tk-gap-2xl) 0;
|
||||
}
|
||||
|
||||
.product-detail-loading-text,
|
||||
.product-detail-empty-text {
|
||||
font-size: var(--tk-font-body);
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
// 商品图区域
|
||||
.product-detail-image {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
&--physical { background: $pri-l; }
|
||||
&--service { background: $acc-l; }
|
||||
&--privilege { background: $wrn-l; }
|
||||
}
|
||||
|
||||
.product-detail-image-char {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: $pri;
|
||||
line-height: 1;
|
||||
opacity: 0.3;
|
||||
|
||||
.product-detail-image--service & { color: $acc; }
|
||||
.product-detail-image--privilege & { color: $wrn; }
|
||||
}
|
||||
|
||||
.product-detail-image-label {
|
||||
font-size: var(--tk-font-cap);
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
// 商品信息卡片
|
||||
.product-detail-info {
|
||||
background: $card;
|
||||
border-radius: 20px 20px 0 0;
|
||||
margin-top: -16px;
|
||||
position: relative;
|
||||
padding: var(--tk-section-gap);
|
||||
}
|
||||
|
||||
.product-detail-name {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: var(--tk-gap-sm);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.product-detail-price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--tk-gap-sm);
|
||||
margin-bottom: var(--tk-section-gap);
|
||||
}
|
||||
|
||||
.product-detail-points {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
font-weight: 700;
|
||||
color: $pri;
|
||||
}
|
||||
|
||||
.product-detail-type-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: var(--tk-font-micro);
|
||||
font-weight: 600;
|
||||
color: $acc;
|
||||
background: $acc-l;
|
||||
}
|
||||
|
||||
.product-detail-desc {
|
||||
font-size: var(--tk-font-cap);
|
||||
color: $tx2;
|
||||
line-height: 1.8;
|
||||
display: block;
|
||||
margin-bottom: var(--tk-section-gap);
|
||||
}
|
||||
|
||||
// 规格信息
|
||||
.product-detail-specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 14px var(--tk-gap-md);
|
||||
background: $bg;
|
||||
border-radius: $r-sm;
|
||||
margin-bottom: var(--tk-section-gap);
|
||||
}
|
||||
|
||||
.product-detail-spec-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: var(--tk-font-cap);
|
||||
}
|
||||
|
||||
.product-detail-spec-label {
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
.product-detail-spec-value {
|
||||
color: $tx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 温馨提示
|
||||
.product-detail-notice {
|
||||
padding: var(--tk-gap-sm);
|
||||
background: $wrn-l;
|
||||
border-radius: $r-sm;
|
||||
border-left: 3px solid $wrn;
|
||||
}
|
||||
|
||||
.product-detail-notice-title {
|
||||
font-size: var(--tk-font-micro);
|
||||
color: $wrn;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-detail-notice-text {
|
||||
font-size: var(--tk-font-micro);
|
||||
color: $tx2;
|
||||
line-height: 1.6;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部操作栏
|
||||
.product-detail-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $card;
|
||||
border-top: 1px solid $bd-l;
|
||||
padding: var(--tk-gap-sm) var(--tk-page-padding);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--tk-gap-sm);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.product-detail-fav {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 1px solid $bd;
|
||||
border-radius: $r-sm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.product-detail-fav-icon {
|
||||
font-size: 20px;
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
.product-detail-exchange-btn {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
background: var(--tk-pri);
|
||||
border-radius: $r;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--tk-shadow-btn);
|
||||
|
||||
&.disabled {
|
||||
background: $bd;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active:not(.disabled) {
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.product-detail-exchange-text {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: var(--tk-font-body);
|
||||
color: $white;
|
||||
font-weight: 700;
|
||||
}
|
||||
160
apps/miniprogram/src/pages/pkg-mall/product/index.tsx
Normal file
160
apps/miniprogram/src/pages/pkg-mall/product/index.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro, { useRouter } from '@tarojs/taro';
|
||||
import { usePageData } from '@/hooks/usePageData';
|
||||
import { getProduct } from '../../../services/points';
|
||||
import type { PointsProduct } from '../../../services/points';
|
||||
import { useElderClass } from '../../../hooks/useElderClass';
|
||||
import PageShell from '@/components/ui/PageShell';
|
||||
import './index.scss';
|
||||
|
||||
const TYPE_CHAR: Record<string, string> = {
|
||||
physical: '物',
|
||||
service: '券',
|
||||
privilege: '权',
|
||||
};
|
||||
|
||||
const TYPE_LABEL: Record<string, string> = {
|
||||
physical: '实物商品',
|
||||
service: '服务体验',
|
||||
privilege: '权益卡',
|
||||
};
|
||||
|
||||
export default function ProductDetail() {
|
||||
const modeClass = useElderClass();
|
||||
const router = useRouter();
|
||||
const productId = router.params.product_id || '';
|
||||
const [product, setProduct] = useState<PointsProduct | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchProduct = useCallback(async () => {
|
||||
if (!productId) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getProduct(productId);
|
||||
setProduct(data);
|
||||
} catch {
|
||||
// 降级：从列表接口查找
|
||||
try {
|
||||
const { listProducts } = await import('../../../services/points');
|
||||
const res = await listProducts({ page: 1, page_size: 100 });
|
||||
const found = res.data.find((p) => p.id === productId);
|
||||
if (found) setProduct(found);
|
||||
} catch {
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' });
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [productId]);
|
||||
|
||||
usePageData(fetchProduct, { throttleMs: 30000 });
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<PageShell className={modeClass}>
|
||||
<View className='product-detail-loading'>
|
||||
<Text className='product-detail-loading-text'>加载中...</Text>
|
||||
</View>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<PageShell className={modeClass}>
|
||||
<View className='product-detail-empty'>
|
||||
<Text className='product-detail-empty-text'>商品不存在</Text>
|
||||
</View>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
|
||||
const productType = product.product_type || 'physical';
|
||||
const typeChar = TYPE_CHAR[productType] || '礼';
|
||||
const typeLabel = TYPE_LABEL[productType] || '商品';
|
||||
const isService = productType === 'service';
|
||||
|
||||
const handleExchange = () => {
|
||||
if (product.stock <= 0) {
|
||||
Taro.showToast({ title: '已兑完', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
Taro.navigateTo({
|
||||
url: `/pages/pkg-mall/exchange/index?product_id=${product.id}`,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<PageShell padding="none" safeBottom={false} scroll={false} className={`product-detail-page ${modeClass}`}>
|
||||
<View className='product-detail-scroll'>
|
||||
{/* 商品图区域 */}
|
||||
<View className={`product-detail-image product-detail-image--${productType}`}>
|
||||
<Text className='product-detail-image-char'>{typeChar}</Text>
|
||||
<Text className='product-detail-image-label'>{product.name}</Text>
|
||||
</View>
|
||||
|
||||
{/* 商品信息卡片 */}
|
||||
<View className='product-detail-info'>
|
||||
<Text className='product-detail-name'>{product.name}</Text>
|
||||
<View className='product-detail-price-row'>
|
||||
<Text className='product-detail-points'>
|
||||
{product.points_cost.toLocaleString()} 积分
|
||||
</Text>
|
||||
<Text className='product-detail-type-tag'>{typeLabel}</Text>
|
||||
</View>
|
||||
|
||||
{product.description && (
|
||||
<Text className='product-detail-desc'>{product.description}</Text>
|
||||
)}
|
||||
|
||||
{/* 规格 */}
|
||||
<View className='product-detail-specs'>
|
||||
<View className='product-detail-spec-row'>
|
||||
<Text className='product-detail-spec-label'>类型</Text>
|
||||
<Text className='product-detail-spec-value'>{typeLabel}</Text>
|
||||
</View>
|
||||
<View className='product-detail-spec-row'>
|
||||
<Text className='product-detail-spec-label'>库存</Text>
|
||||
<Text className='product-detail-spec-value'>
|
||||
{product.stock > 0 ? `${product.stock} 件` : '已兑完'}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='product-detail-spec-row'>
|
||||
<Text className='product-detail-spec-label'>兑换方式</Text>
|
||||
<Text className='product-detail-spec-value'>
|
||||
{isService ? '到院核销' : '后台审核发货'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 温馨提示 */}
|
||||
<View className='product-detail-notice'>
|
||||
<Text className='product-detail-notice-title'>温馨提示</Text>
|
||||
<Text className='product-detail-notice-text'>
|
||||
{isService
|
||||
? '兑换成功后将生成核销码，请凭核销码到前台核销体验服务。'
|
||||
: '兑换后需工作人员审核确认，审核通过后将在 7 个工作日内寄出。'}
|
||||
</Text>
|
||||
<Text className='product-detail-notice-text'>积分一经兑换不可退回。</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 底部操作栏 */}
|
||||
<View className='product-detail-footer'>
|
||||
<View className='product-detail-fav'>
|
||||
<Text className='product-detail-fav-icon'>♡</Text>
|
||||
</View>
|
||||
<View
|
||||
className={`product-detail-exchange-btn ${product.stock <= 0 ? 'disabled' : ''}`}
|
||||
onClick={product.stock <= 0 ? undefined : handleExchange}
|
||||
>
|
||||
<Text className='product-detail-exchange-text'>
|
||||
{product.stock <= 0 ? '已兑完' : '立即兑换'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user