87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { View, Text, Image, ShareElement, ScrollView, GridView } from '@tarojs/components'
|
|
import Taro from '@tarojs/taro'
|
|
import { useEffect } from 'react'
|
|
import { useThemeContext } from '../../context/ThemeContext'
|
|
import { useSafeArea } from '../../hooks/useSafeArea'
|
|
import { useStatusBar } from '../../hooks/useStatusBar'
|
|
import { registerSharedElementRoute } from '../../utils/sharedElementRoute'
|
|
import CustomTabBar from '../../custom-tab-bar'
|
|
import './index.scss'
|
|
import { PRODUCTS } from '../../utils/productConfig'
|
|
|
|
export default function ShopPage() {
|
|
const { resolvedTheme } = useThemeContext()
|
|
const safe = useSafeArea()
|
|
useStatusBar(resolvedTheme)
|
|
|
|
useEffect(() => {
|
|
registerSharedElementRoute()
|
|
}, [])
|
|
|
|
const openDetail = (productId: string) => {
|
|
// The initial app page may be WebView, so ensure registration here too.
|
|
registerSharedElementRoute()
|
|
Taro.navigateTo({
|
|
url: `/pages/shop/detail/index?id=${productId}`,
|
|
// @ts-ignore - routeType is a Skyline custom route option
|
|
routeType: 'sharedElementRoute'
|
|
} as any)
|
|
}
|
|
|
|
return (
|
|
<View className={`shop-page theme-${resolvedTheme}`}>
|
|
<ScrollView type="custom" scrollY className="shop-scroll">
|
|
<View className="shop-header" style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
|
|
<Text className="shop-header-title">智绘精选</Text>
|
|
<Text className="shop-header-sub">激光微雕定制好物</Text>
|
|
</View>
|
|
|
|
<GridView
|
|
type="aligned"
|
|
crossAxisCount={2}
|
|
mainAxisGap={10}
|
|
crossAxisGap={10}
|
|
padding={[0, 12, 12, 12]}
|
|
className="shop-grid"
|
|
>
|
|
{PRODUCTS.map(product => (
|
|
<View
|
|
key={product.id}
|
|
className="shop-card"
|
|
onTap={() => openDetail(product.id)}
|
|
>
|
|
<View className="shop-card-img-wrap">
|
|
<ShareElement
|
|
mapkey={`product-${product.id}`}
|
|
duration={300}
|
|
className='shop-card-share'
|
|
>
|
|
<Image
|
|
className="shop-card-img"
|
|
src={product.images?.[0] || product.iconImg || ''}
|
|
mode="aspectFill"
|
|
/>
|
|
</ShareElement>
|
|
</View>
|
|
<View
|
|
className="shop-card-info"
|
|
style={{
|
|
backgroundColor: `rgba(${product.tone?.[0] || 28}, ${product.tone?.[1] || 22}, ${product.tone?.[2] || 18}, 0.92)`
|
|
}}
|
|
>
|
|
<Text className="shop-card-name">{product.name}</Text>
|
|
<Text className="shop-card-price">¥{product.price}</Text>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</GridView>
|
|
|
|
{/* TabBar spacer */}
|
|
<View style={{ height: '160px' }} />
|
|
</ScrollView>
|
|
|
|
<CustomTabBar />
|
|
</View>
|
|
)
|
|
}
|