first commit
This commit is contained in:
@@ -0,0 +1,181 @@
|
||||
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useState } from 'react'
|
||||
import './index.scss'
|
||||
import { getProductById } from '../../utils/productConfig'
|
||||
import { addDesign } from '../../utils/store'
|
||||
import ThemeToggle from '../../components/ThemeToggle'
|
||||
import { useThemeContext } from '../../context/ThemeContext'
|
||||
|
||||
const HERO_COLORS = ['#FFE4EC', '#FFF0F5', '#FCE4EC']
|
||||
|
||||
export default function ProductPage() {
|
||||
const { theme } = useThemeContext()
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [quantity, setQuantity] = useState(1)
|
||||
|
||||
const params = Taro.getCurrentInstance().router?.params
|
||||
const productId = params?.id || ''
|
||||
const product = getProductById(productId)
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<View className={`theme-${theme}`}>
|
||||
<View className='product-page'>
|
||||
<View className='page-header dashed-card mt-20'>
|
||||
<Text className='page-title'>商品未找到</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const handleAddToList = () => {
|
||||
setQuantity(1)
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const confirmAdd = () => {
|
||||
addDesign(product, quantity)
|
||||
setShowModal(false)
|
||||
Taro.showToast({ title: `已加入设计清单 x${quantity}`, icon: 'success' })
|
||||
setTimeout(() => Taro.navigateBack(), 1200)
|
||||
}
|
||||
|
||||
const goToDIY = () => {
|
||||
Taro.navigateTo({
|
||||
url: `/pages/diy/index?source=product&productId=${product.id}&quantity=1`
|
||||
})
|
||||
}
|
||||
|
||||
const modQty = (delta: number) => {
|
||||
setQuantity(q => Math.max(1, Math.min(99, q + delta)))
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={`theme-${theme}`}>
|
||||
<View className='product-page'>
|
||||
<ThemeToggle />
|
||||
|
||||
<View className='page-header dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<View className='flex-between'>
|
||||
<Text className='back-btn' onClick={() => Taro.navigateBack()}>←</Text>
|
||||
<Text className='page-title'>商品详情</Text>
|
||||
<View style={{ width: '60px' }} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 轮播 Hero */}
|
||||
<View className='hero-section mt-20'>
|
||||
<Swiper
|
||||
className='hero-swiper'
|
||||
circular
|
||||
autoplay
|
||||
interval={3000}
|
||||
duration={500}
|
||||
indicatorDots
|
||||
indicatorColor='rgba(0,0,0,0.2)'
|
||||
indicatorActiveColor='#ff9a9e'
|
||||
>
|
||||
{product.images && product.images.length > 0 ? (
|
||||
product.images.map((img, idx) => (
|
||||
<SwiperItem key={idx}>
|
||||
<View className='hero-card dashed-card'>
|
||||
<View className='star-badge' />
|
||||
<Image className='hero-image' src={img} mode='aspectFit' />
|
||||
</View>
|
||||
</SwiperItem>
|
||||
))
|
||||
) : (
|
||||
HERO_COLORS.map((color, idx) => (
|
||||
<SwiperItem key={idx}>
|
||||
<View className='hero-card dashed-card' style={{ background: color }}>
|
||||
<View className='star-badge' />
|
||||
<Text className='hero-icon'>{product.icon}</Text>
|
||||
<Text className='hero-name'>{product.name}</Text>
|
||||
</View>
|
||||
</SwiperItem>
|
||||
))
|
||||
)}
|
||||
</Swiper>
|
||||
</View>
|
||||
|
||||
{/* 基本信息 */}
|
||||
<View className='info-section dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<View className='info-row'>
|
||||
<Text className='info-label'>单价</Text>
|
||||
<Text className='info-price'>¥{product.price}</Text>
|
||||
</View>
|
||||
<View className='info-row'>
|
||||
<Text className='info-label'>工期</Text>
|
||||
<Text className='info-value'>{product.leadTime}</Text>
|
||||
</View>
|
||||
<View className='info-row'>
|
||||
<Text className='info-label'>尺寸</Text>
|
||||
<Text className='info-value'>{product.mask.width} × {product.mask.height} px</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 详细介绍 */}
|
||||
<View className='detail-section dashed-card mt-20'>
|
||||
<View className='star-badge' />
|
||||
<Text className='section-title'>商品介绍</Text>
|
||||
<Text className='detail-text'>{product.description}</Text>
|
||||
</View>
|
||||
|
||||
{/* 底部操作栏 */}
|
||||
<View className='action-bar'>
|
||||
<View className='price-summary'>
|
||||
<Text className='summary-label'>起价</Text>
|
||||
<Text className='summary-price'>¥{product.price}</Text>
|
||||
</View>
|
||||
<View className='btn-outline' onClick={handleAddToList}>
|
||||
<Text>加入设计清单</Text>
|
||||
</View>
|
||||
<View className='btn-gradient' onClick={goToDIY}>
|
||||
<Text>立即下单</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 安全区占位（防止内容被 action-bar 遮挡） */}
|
||||
<View className='safe-bottom-placeholder' />
|
||||
|
||||
{/* 数量选择弹窗 */}
|
||||
{showModal && (
|
||||
<View className='modal-overlay'>
|
||||
<View className='modal-card dashed-card'>
|
||||
<View className='star-badge' />
|
||||
<Text className='modal-title'>加入设计清单</Text>
|
||||
<View className='modal-product'>
|
||||
<Text className='modal-icon'>{product.icon}</Text>
|
||||
<Text className='modal-name'>{product.name}</Text>
|
||||
</View>
|
||||
<View className='quantity-row'>
|
||||
<Text className='qty-label'>数量</Text>
|
||||
<View className='qty-control'>
|
||||
<View className='qty-btn' onClick={() => modQty(-1)}>－</View>
|
||||
<Text className='qty-num'>{quantity}</Text>
|
||||
<View className='qty-btn' onClick={() => modQty(1)}>＋</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className='modal-total'>
|
||||
<Text className='total-label'>小计</Text>
|
||||
<Text className='total-price'>¥{(product.price * quantity).toFixed(2)}</Text>
|
||||
</View>
|
||||
<View className='modal-actions'>
|
||||
<View className='btn-outline' onClick={() => setShowModal(false)}>
|
||||
<Text>取消</Text>
|
||||
</View>
|
||||
<View className='btn-gradient' onClick={confirmAdd}>
|
||||
<Text>确定</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user