1.2.0版本
This commit is contained in:
@@ -0,0 +1,279 @@
|
||||
import { View, Text, Image, ScrollView } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react'
|
||||
import './index.scss'
|
||||
import { PRODUCTS } from '../../../utils/productConfig'
|
||||
import { ProductCategory } from '../../../types'
|
||||
|
||||
const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max)
|
||||
const lerp = (a: number, b: number, t: number) => a + (b - a) * t
|
||||
const easeOut = (t: number) => 1 - Math.pow(1 - t, 3)
|
||||
|
||||
export default function ShopDetailPage() {
|
||||
const [winHeight, setWinHeight] = useState(667)
|
||||
const [progress, setProgress] = useState(0)
|
||||
|
||||
const routerParams = Taro.getCurrentInstance().router?.params
|
||||
const productId = routerParams?.id || ''
|
||||
const product: ProductCategory | undefined = PRODUCTS.find(p => p.id === productId)
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const info = Taro.getSystemInfoSync()
|
||||
setWinHeight(info.windowHeight)
|
||||
} catch (e) {
|
||||
// fallback to safe default
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleScroll = useCallback((e: any) => {
|
||||
const st = e.detail?.scrollTop ?? 0
|
||||
const total = winHeight * 1.2
|
||||
const p = clamp(st / total, 0, 1)
|
||||
setProgress(p)
|
||||
}, [winHeight])
|
||||
|
||||
/* Scroll-progress → multi-stage hero & content animations */
|
||||
const heroStyles = useMemo(() => {
|
||||
const p = progress
|
||||
|
||||
// 1. Image crop insets (vh %)
|
||||
let topCrop = 0, bottomCrop = 0
|
||||
if (p <= 0.4) {
|
||||
const t = easeOut(p / 0.4)
|
||||
topCrop = lerp(0, 32, t)
|
||||
bottomCrop = lerp(0, 38, t)
|
||||
} else if (p <= 0.55) {
|
||||
const t = (p - 0.4) / 0.15
|
||||
topCrop = lerp(32, 34, t)
|
||||
bottomCrop = lerp(38, 41, t)
|
||||
} else {
|
||||
topCrop = 34; bottomCrop = 41
|
||||
}
|
||||
|
||||
// 2. Hero translateY
|
||||
let translateY = 0
|
||||
if (p <= 0.4) translateY = 0
|
||||
else if (p <= 0.7) translateY = lerp(0, -75, (p - 0.4) / 0.3)
|
||||
else translateY = -75
|
||||
|
||||
// 3. Hero bottom info opacity (always visible on open, fades after scroll)
|
||||
let heroInfoOpacity = 1
|
||||
if (p <= 0.35) heroInfoOpacity = 1
|
||||
else if (p <= 0.48) heroInfoOpacity = clamp(1 - (p - 0.35) / 0.13, 0, 1)
|
||||
else heroInfoOpacity = 0
|
||||
|
||||
// 4. Transition band opacity
|
||||
let bandOpacity = 0
|
||||
if (p <= 0.55) bandOpacity = 0
|
||||
else if (p <= 0.7) bandOpacity = (p - 0.55) / 0.15
|
||||
else bandOpacity = 1
|
||||
|
||||
// 5. Content reveal
|
||||
let contentOpacity = 1, contentOffset = 0
|
||||
if (p <= 0.05) { contentOpacity = 0; contentOffset = 60 }
|
||||
else if (p <= 0.22) {
|
||||
const t = (p - 0.05) / 0.17
|
||||
contentOpacity = easeOut(t)
|
||||
contentOffset = lerp(60, 0, easeOut(t))
|
||||
}
|
||||
|
||||
// 6. Back button (fade out as hero scrolls)
|
||||
let backBtnOpacity = 1
|
||||
if (p <= 0.15) backBtnOpacity = clamp(1 - p / 0.15, 0, 1)
|
||||
|
||||
return {
|
||||
topCrop,
|
||||
bottomCrop,
|
||||
translateY,
|
||||
heroInfoOpacity,
|
||||
bandOpacity,
|
||||
contentOpacity,
|
||||
contentOffset,
|
||||
backBtnOpacity,
|
||||
visibleHeight: 100 - topCrop - bottomCrop
|
||||
}
|
||||
}, [progress])
|
||||
|
||||
const tone = useMemo(() => product?.tone || [28, 22, 18], [product])
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<View className="shop-detail-page">
|
||||
<Text style={{ color: '#fff', padding: '40rpx' }}>商品不存在</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="shop-detail-page">
|
||||
{/* Fixed Hero */}
|
||||
<View className="shop-hero-fixed">
|
||||
<View
|
||||
className="shop-hero-clip"
|
||||
style={{
|
||||
height: `${winHeight * heroStyles.visibleHeight / 100}px`,
|
||||
overflow: 'hidden',
|
||||
transform: `translateY(${winHeight * heroStyles.translateY / 100}px)`
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
className="shop-hero-img"
|
||||
src={product.images?.[0] || product.iconImg || ''}
|
||||
mode="aspectFill"
|
||||
style={{
|
||||
width: '100%',
|
||||
height: `${winHeight}px`,
|
||||
position: 'absolute',
|
||||
top: `${-winHeight * heroStyles.topCrop / 100}px`,
|
||||
left: 0
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Bottom gradient overlay driven by product tone */}
|
||||
<View
|
||||
className="shop-hero-overlay"
|
||||
style={{
|
||||
background: `linear-gradient(to bottom, rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0) 0%, rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.55) 40%, rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.95) 100%)`
|
||||
}}
|
||||
/>
|
||||
|
||||
<View
|
||||
className="shop-hero-info"
|
||||
style={{ opacity: heroStyles.heroInfoOpacity }}
|
||||
>
|
||||
<Text className="shop-hero-title">{product.name}</Text>
|
||||
<Text className="shop-hero-subtitle">{product.subtitle || product.desc}</Text>
|
||||
<View className="shop-hero-price-row">
|
||||
<Text className="shop-hero-price">¥{product.price}</Text>
|
||||
{product.originalPrice && product.originalPrice > product.price && (
|
||||
<Text className="shop-hero-original">¥{product.originalPrice}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Scrollable content sits above the fixed hero */}
|
||||
<ScrollView
|
||||
key={product.id}
|
||||
className="shop-scroll"
|
||||
scrollY
|
||||
scrollEventThrottle={16}
|
||||
style={{ height: `${winHeight}px` }}
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{/* Transparent spacer pushes content below hero */}
|
||||
<View style={{ height: `${winHeight * 0.65}px` }} />
|
||||
|
||||
<View
|
||||
className="shop-content"
|
||||
style={{ backgroundColor: `rgb(${tone[0]}, ${tone[1]}, ${tone[2]})` }}
|
||||
>
|
||||
{/* Transition band — appears as hero scrolls away */}
|
||||
<View
|
||||
className="shop-band"
|
||||
style={{
|
||||
opacity: heroStyles.bandOpacity,
|
||||
backgroundColor: `rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.88)`,
|
||||
backdropFilter: 'blur(12px)',
|
||||
WebkitBackdropFilter: 'blur(12px)'
|
||||
}}
|
||||
>
|
||||
<Text className="shop-band-title">{product.name}</Text>
|
||||
<Text className="shop-band-subtitle">{product.subtitle || product.desc}</Text>
|
||||
<View className="shop-band-price-row">
|
||||
<Text className="shop-band-price">¥{product.price}</Text>
|
||||
{product.originalPrice && product.originalPrice > product.price && (
|
||||
<Text className="shop-band-original">¥{product.originalPrice}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Main copy blocks */}
|
||||
<View
|
||||
className="shop-detail-body"
|
||||
style={{
|
||||
opacity: heroStyles.contentOpacity,
|
||||
transform: `translateY(${heroStyles.contentOffset}px)`
|
||||
}}
|
||||
>
|
||||
{product.story && (
|
||||
<View className="shop-section">
|
||||
<Text className="shop-section-title">设计理念</Text>
|
||||
<Text className="shop-section-text">{product.story}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="shop-divider" />
|
||||
|
||||
{product.scene && (
|
||||
<View className="shop-section">
|
||||
<Text className="shop-section-title">使用场景</Text>
|
||||
<Text className="shop-section-text">{product.scene}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{product.tags && product.tags.length > 0 && (
|
||||
<View className="shop-section">
|
||||
<View className="shop-tag-row">
|
||||
{product.tags.map(tag => (
|
||||
<View key={tag} className="shop-tag">
|
||||
<Text className="shop-tag-text">{tag}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="shop-divider" />
|
||||
|
||||
{product.specs && product.specs.length > 0 && (
|
||||
<View className="shop-section">
|
||||
<Text className="shop-section-title">规格参数</Text>
|
||||
<View className="shop-spec-table">
|
||||
{product.specs.map(([k, v]) => (
|
||||
<View key={k} className="shop-spec-row">
|
||||
<Text className="shop-spec-key">{k}</Text>
|
||||
<Text className="shop-spec-val">{v}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="shop-bottom-spacer" />
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Back button — glass morphism circle */}
|
||||
<View
|
||||
className="shop-back-btn"
|
||||
onTap={() => Taro.navigateBack()}
|
||||
style={{ opacity: heroStyles.backBtnOpacity }}
|
||||
>
|
||||
<Text className="shop-back-arrow">←</Text>
|
||||
</View>
|
||||
|
||||
{/* Bottom CTA — fixed, glass, links to existing product page */}
|
||||
<View
|
||||
className="shop-cta-bar"
|
||||
style={{ backgroundColor: `rgba(${tone[0]}, ${tone[1]}, ${tone[2]}, 0.92)` }}
|
||||
>
|
||||
<View className="shop-cta-price-col">
|
||||
<Text className="shop-cta-price">¥{product.price}</Text>
|
||||
{product.originalPrice && product.originalPrice > product.price && (
|
||||
<Text className="shop-cta-original">¥{product.originalPrice}</Text>
|
||||
)}
|
||||
</View>
|
||||
<View
|
||||
className="shop-cta-btn"
|
||||
onTap={() => Taro.navigateTo({ url: `/pages/product/index?id=${product.id}` })}
|
||||
>
|
||||
<Text className="shop-cta-btn-text">立即定制</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user