|
|
@@ -1,94 +1,66 @@
|
|
|
import React, { useState, useEffect } from 'react'
|
|
|
-import { View, Text, ScrollView, Image } from '@tarojs/components'
|
|
|
+import { View, Text, ScrollView } from '@tarojs/components'
|
|
|
import { TabBarLayout } from '@/layouts/tab-bar-layout'
|
|
|
-import { Carousel } from '@/components/ui/carousel'
|
|
|
-import { Navbar } from '@/components/ui/navbar'
|
|
|
+import TDesignSearch from '@/components/tdesign/search'
|
|
|
+import TDesignSwiper from '@/components/tdesign/swiper'
|
|
|
+import GoodsList, { GoodsData } from '@/components/goods-list'
|
|
|
import './index.css'
|
|
|
|
|
|
-// 商品数据类型定义
|
|
|
-interface GoodsItem {
|
|
|
- id: string
|
|
|
- title: string
|
|
|
- price: number
|
|
|
- image: string
|
|
|
- description?: string
|
|
|
-}
|
|
|
-
|
|
|
-// 轮播图数据类型定义
|
|
|
-interface CarouselItem {
|
|
|
- src: string
|
|
|
- title?: string
|
|
|
- description?: string
|
|
|
- link?: string
|
|
|
-}
|
|
|
-
|
|
|
const HomePage: React.FC = () => {
|
|
|
- const [loading, setLoading] = useState(true)
|
|
|
+ const [pageLoading, setPageLoading] = useState(true)
|
|
|
const [refreshing, setRefreshing] = useState(false)
|
|
|
- const [goodsList, setGoodsList] = useState<GoodsItem[]>([])
|
|
|
+ const [goodsList, setGoodsList] = useState<GoodsData[]>([])
|
|
|
|
|
|
// 模拟轮播图数据
|
|
|
- const carouselItems: CarouselItem[] = [
|
|
|
- {
|
|
|
- src: 'https://via.placeholder.com/750x400/fa4126/ffffff?text=Banner1',
|
|
|
- title: '新品上市',
|
|
|
- description: '精选好物限时优惠'
|
|
|
- },
|
|
|
- {
|
|
|
- src: 'https://via.placeholder.com/750x400/fa550f/ffffff?text=Banner2',
|
|
|
- title: '限时特惠',
|
|
|
- description: '全场满减优惠多多'
|
|
|
- },
|
|
|
- {
|
|
|
- src: 'https://via.placeholder.com/750x400/34c759/ffffff?text=Banner3',
|
|
|
- title: '品质保证',
|
|
|
- description: '正品保障售后无忧'
|
|
|
- }
|
|
|
+ const imgSrcs = [
|
|
|
+ 'https://via.placeholder.com/750x400/fa4126/ffffff?text=Banner1',
|
|
|
+ 'https://via.placeholder.com/750x400/fa550f/ffffff?text=Banner2',
|
|
|
+ 'https://via.placeholder.com/750x400/34c759/ffffff?text=Banner3'
|
|
|
]
|
|
|
|
|
|
// 模拟商品数据
|
|
|
- const mockGoodsList: GoodsItem[] = [
|
|
|
+ const mockGoodsList: GoodsData[] = [
|
|
|
{
|
|
|
id: '1',
|
|
|
- title: '高品质T恤 纯棉舒适 多色可选',
|
|
|
- price: 89.9,
|
|
|
- image: 'https://via.placeholder.com/300x300/fa4126/ffffff?text=T恤',
|
|
|
- description: '纯棉材质，舒适透气'
|
|
|
+ name: '高品质T恤 纯棉舒适 多色可选',
|
|
|
+ price: 8990, // 单位：分
|
|
|
+ cover_image: 'https://via.placeholder.com/300x300/fa4126/ffffff?text=T恤',
|
|
|
+ tags: ['热销', '新品']
|
|
|
},
|
|
|
{
|
|
|
id: '2',
|
|
|
- title: '时尚牛仔裤 修身版型 百搭款式',
|
|
|
- price: 159.9,
|
|
|
- image: 'https://via.placeholder.com/300x300/fa550f/ffffff?text=牛仔裤',
|
|
|
- description: '修身版型，时尚百搭'
|
|
|
+ name: '时尚牛仔裤 修身版型 百搭款式',
|
|
|
+ price: 15990,
|
|
|
+ cover_image: 'https://via.placeholder.com/300x300/fa550f/ffffff?text=牛仔裤',
|
|
|
+ tags: ['热销']
|
|
|
},
|
|
|
{
|
|
|
id: '3',
|
|
|
- title: '运动鞋 轻便舒适 防滑耐磨',
|
|
|
- price: 299.9,
|
|
|
- image: 'https://via.placeholder.com/300x300/34c759/ffffff?text=运动鞋',
|
|
|
- description: '轻便舒适，防滑耐磨'
|
|
|
+ name: '运动鞋 轻便舒适 防滑耐磨',
|
|
|
+ price: 29990,
|
|
|
+ cover_image: 'https://via.placeholder.com/300x300/34c759/ffffff?text=运动鞋',
|
|
|
+ tags: ['新品']
|
|
|
},
|
|
|
{
|
|
|
id: '4',
|
|
|
- title: '智能手表 多功能运动健康监测',
|
|
|
- price: 599.9,
|
|
|
- image: 'https://via.placeholder.com/300x300/007AFF/ffffff?text=智能手表',
|
|
|
- description: '多功能运动健康监测'
|
|
|
+ name: '智能手表 多功能运动健康监测',
|
|
|
+ price: 59990,
|
|
|
+ cover_image: 'https://via.placeholder.com/300x300/007AFF/ffffff?text=智能手表',
|
|
|
+ tags: ['热销', '新品']
|
|
|
},
|
|
|
{
|
|
|
id: '5',
|
|
|
- title: '无线耳机 降噪蓝牙 长续航',
|
|
|
- price: 399.9,
|
|
|
- image: 'https://via.placeholder.com/300x300/8E44AD/ffffff?text=无线耳机',
|
|
|
- description: '降噪蓝牙，长续航'
|
|
|
+ name: '无线耳机 降噪蓝牙 长续航',
|
|
|
+ price: 39990,
|
|
|
+ cover_image: 'https://via.placeholder.com/300x300/8E44AD/ffffff?text=无线耳机',
|
|
|
+ tags: ['热销']
|
|
|
},
|
|
|
{
|
|
|
id: '6',
|
|
|
- title: '保温杯 304不锈钢 长效保温',
|
|
|
- price: 129.9,
|
|
|
- image: 'https://via.placeholder.com/300x300/E74C3C/ffffff?text=保温杯',
|
|
|
- description: '304不锈钢，长效保温'
|
|
|
+ name: '保温杯 304不锈钢 长效保温',
|
|
|
+ price: 12990,
|
|
|
+ cover_image: 'https://via.placeholder.com/300x300/E74C3C/ffffff?text=保温杯',
|
|
|
+ tags: ['新品']
|
|
|
}
|
|
|
]
|
|
|
|
|
|
@@ -96,7 +68,7 @@ const HomePage: React.FC = () => {
|
|
|
useEffect(() => {
|
|
|
const timer = setTimeout(() => {
|
|
|
setGoodsList(mockGoodsList)
|
|
|
- setLoading(false)
|
|
|
+ setPageLoading(false)
|
|
|
}, 1000)
|
|
|
|
|
|
return () => clearTimeout(timer)
|
|
|
@@ -110,96 +82,69 @@ const HomePage: React.FC = () => {
|
|
|
}, 1000)
|
|
|
}
|
|
|
|
|
|
+ // 商品点击
|
|
|
+ const handleGoodsClick = (goods: GoodsData, index: number) => {
|
|
|
+ console.log('点击商品:', goods, index)
|
|
|
+ }
|
|
|
+
|
|
|
// 添加购物车
|
|
|
- const handleAddToCart = (goods: GoodsItem) => {
|
|
|
- console.log('添加到购物车:', goods)
|
|
|
- // 这里可以添加实际的购物车逻辑
|
|
|
+ const handleAddCart = (goods: GoodsData, index: number) => {
|
|
|
+ console.log('添加到购物车:', goods, index)
|
|
|
}
|
|
|
|
|
|
- // 轮播图点击
|
|
|
- const handleCarouselClick = (item: CarouselItem, index: number) => {
|
|
|
- console.log('点击轮播图:', item, index)
|
|
|
+ // 商品图片点击
|
|
|
+ const handleThumbClick = (goods: GoodsData, index: number) => {
|
|
|
+ console.log('点击商品图片:', goods, index)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索框点击
|
|
|
+ const handleSearchClick = () => {
|
|
|
+ console.log('点击搜索框')
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<TabBarLayout activeKey="home">
|
|
|
- <Navbar
|
|
|
- title="首页"
|
|
|
- rightIcon="i-heroicons-bell-20-solid"
|
|
|
- onClickRight={() => console.log('点击通知')}
|
|
|
- leftIcon=""
|
|
|
- />
|
|
|
-
|
|
|
- <ScrollView
|
|
|
- className="homepage-container"
|
|
|
- scrollY
|
|
|
- refresherEnabled
|
|
|
- refresherTriggered={refreshing}
|
|
|
- onRefresherRefresh={handleRefresh}
|
|
|
- >
|
|
|
- {/* 搜索栏 */}
|
|
|
- <View className="search-container">
|
|
|
- <View className="search-box disabled">
|
|
|
- <View className="search-icon i-heroicons-magnifying-glass-20-solid" />
|
|
|
- <Text className="search-placeholder">搜索商品...</Text>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
-
|
|
|
- {/* 轮播图 */}
|
|
|
- <View className="carousel-section">
|
|
|
- <Carousel
|
|
|
- items={carouselItems}
|
|
|
- autoplay={true}
|
|
|
- interval={3000}
|
|
|
- showIndicators={true}
|
|
|
- indicatorPosition="bottom"
|
|
|
- circular={true}
|
|
|
- imageMode="aspectFill"
|
|
|
- height={320}
|
|
|
- rounded="lg"
|
|
|
- onItemClick={handleCarouselClick}
|
|
|
- className="carousel-container"
|
|
|
- />
|
|
|
+ {pageLoading ? (
|
|
|
+ <View style={{ textAlign: 'center', color: '#b9b9b9' }}>
|
|
|
+ <Text>加载中...</Text>
|
|
|
</View>
|
|
|
-
|
|
|
- {/* 商品列表 */}
|
|
|
- <View className="goods-section">
|
|
|
- {loading ? (
|
|
|
- <View className="loading-container">
|
|
|
- <Text className="loading-text">加载中...</Text>
|
|
|
+ ) : (
|
|
|
+ <View>
|
|
|
+ {/* 页面头部 - 搜索栏和轮播图 */}
|
|
|
+ <View className="home-page-header">
|
|
|
+ {/* 搜索栏 */}
|
|
|
+ <View className="search" onClick={handleSearchClick}>
|
|
|
+ <TDesignSearch
|
|
|
+ placeholder="搜索商品..."
|
|
|
+ disabled={true}
|
|
|
+ shape="round"
|
|
|
+ />
|
|
|
</View>
|
|
|
- ) : (
|
|
|
- <View className="goods-grid">
|
|
|
- {goodsList.map(goods => (
|
|
|
- <View key={goods.id} className="goods-card">
|
|
|
- <Image
|
|
|
- src={goods.image}
|
|
|
- className="goods-image"
|
|
|
- mode="aspectFill"
|
|
|
- />
|
|
|
- <View className="goods-info">
|
|
|
- <Text className="goods-title">{goods.title}</Text>
|
|
|
- <Text className="goods-price">¥{goods.price.toFixed(2)}</Text>
|
|
|
- <View
|
|
|
- className="add-cart-btn"
|
|
|
- onClick={() => handleAddToCart(goods)}
|
|
|
- >
|
|
|
- <Text>加入购物车</Text>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- ))}
|
|
|
+
|
|
|
+ {/* 轮播图 */}
|
|
|
+ <View className="swiper-wrap">
|
|
|
+ {imgSrcs.length > 0 && (
|
|
|
+ <TDesignSwiper
|
|
|
+ images={imgSrcs}
|
|
|
+ autoplay={true}
|
|
|
+ interval={5000}
|
|
|
+ indicatorDots={true}
|
|
|
+ />
|
|
|
+ )}
|
|
|
</View>
|
|
|
- )}
|
|
|
- </View>
|
|
|
+ </View>
|
|
|
|
|
|
- {/* 下拉刷新指示器 */}
|
|
|
- {refreshing && (
|
|
|
- <View className="refresh-indicator">
|
|
|
- <Text>刷新中...</Text>
|
|
|
+ {/* 页面内容 - 商品列表 */}
|
|
|
+ <View className="home-page-container">
|
|
|
+ <GoodsList
|
|
|
+ goodsList={goodsList}
|
|
|
+ onClick={handleGoodsClick}
|
|
|
+ onAddCart={handleAddCart}
|
|
|
+ onThumbClick={handleThumbClick}
|
|
|
+ />
|
|
|
</View>
|
|
|
- )}
|
|
|
- </ScrollView>
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
</TabBarLayout>
|
|
|
)
|
|
|
}
|
yourname