|
|
@@ -1,12 +1,126 @@
|
|
|
-import React from 'react'
|
|
|
-import { View, Text } from '@tarojs/components'
|
|
|
+import React, { useState, useEffect } from 'react'
|
|
|
+import { View, Text, ScrollView, Image } from '@tarojs/components'
|
|
|
import { TabBarLayout } from '@/layouts/tab-bar-layout'
|
|
|
-import { Input } from '@/components/ui/input'
|
|
|
-import { Label } from '@/components/ui/label'
|
|
|
+import { Carousel } from '@/components/ui/carousel'
|
|
|
import { Navbar } from '@/components/ui/navbar'
|
|
|
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 [refreshing, setRefreshing] = useState(false)
|
|
|
+ const [goodsList, setGoodsList] = useState<GoodsItem[]>([])
|
|
|
+
|
|
|
+ // 模拟轮播图数据
|
|
|
+ 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 mockGoodsList: GoodsItem[] = [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ title: '高品质T恤 纯棉舒适 多色可选',
|
|
|
+ price: 89.9,
|
|
|
+ image: 'https://via.placeholder.com/300x300/fa4126/ffffff?text=T恤',
|
|
|
+ description: '纯棉材质，舒适透气'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ title: '时尚牛仔裤 修身版型 百搭款式',
|
|
|
+ price: 159.9,
|
|
|
+ image: 'https://via.placeholder.com/300x300/fa550f/ffffff?text=牛仔裤',
|
|
|
+ description: '修身版型，时尚百搭'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ title: '运动鞋 轻便舒适 防滑耐磨',
|
|
|
+ price: 299.9,
|
|
|
+ image: 'https://via.placeholder.com/300x300/34c759/ffffff?text=运动鞋',
|
|
|
+ description: '轻便舒适，防滑耐磨'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ title: '智能手表 多功能运动健康监测',
|
|
|
+ price: 599.9,
|
|
|
+ image: 'https://via.placeholder.com/300x300/007AFF/ffffff?text=智能手表',
|
|
|
+ description: '多功能运动健康监测'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '5',
|
|
|
+ title: '无线耳机 降噪蓝牙 长续航',
|
|
|
+ price: 399.9,
|
|
|
+ image: 'https://via.placeholder.com/300x300/8E44AD/ffffff?text=无线耳机',
|
|
|
+ description: '降噪蓝牙，长续航'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '6',
|
|
|
+ title: '保温杯 304不锈钢 长效保温',
|
|
|
+ price: 129.9,
|
|
|
+ image: 'https://via.placeholder.com/300x300/E74C3C/ffffff?text=保温杯',
|
|
|
+ description: '304不锈钢，长效保温'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ // 模拟数据加载
|
|
|
+ useEffect(() => {
|
|
|
+ const timer = setTimeout(() => {
|
|
|
+ setGoodsList(mockGoodsList)
|
|
|
+ setLoading(false)
|
|
|
+ }, 1000)
|
|
|
+
|
|
|
+ return () => clearTimeout(timer)
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ // 下拉刷新
|
|
|
+ const handleRefresh = () => {
|
|
|
+ setRefreshing(true)
|
|
|
+ setTimeout(() => {
|
|
|
+ setRefreshing(false)
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加购物车
|
|
|
+ const handleAddToCart = (goods: GoodsItem) => {
|
|
|
+ console.log('添加到购物车:', goods)
|
|
|
+ // 这里可以添加实际的购物车逻辑
|
|
|
+ }
|
|
|
+
|
|
|
+ // 轮播图点击
|
|
|
+ const handleCarouselClick = (item: CarouselItem, index: number) => {
|
|
|
+ console.log('点击轮播图:', item, index)
|
|
|
+ }
|
|
|
+
|
|
|
return (
|
|
|
<TabBarLayout activeKey="home">
|
|
|
<Navbar
|
|
|
@@ -15,16 +129,77 @@ const HomePage: React.FC = () => {
|
|
|
onClickRight={() => console.log('点击通知')}
|
|
|
leftIcon=""
|
|
|
/>
|
|
|
- <View className="px-4 py-4">
|
|
|
- <Text className="text-2xl font-bold text-gray-900">欢迎使用</Text>
|
|
|
- <View className="mt-4">
|
|
|
- <Text className="text-gray-600">这是一个简洁优雅的小程序首页</Text>
|
|
|
- <View className="mt-6">
|
|
|
- <Label className="mb-2">搜索</Label>
|
|
|
- <Input placeholder="搜索内容..." />
|
|
|
+
|
|
|
+ <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>
|
|
|
+
|
|
|
+ {/* 轮播图 */}
|
|
|
+ <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"
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {/* 商品列表 */}
|
|
|
+ <View className="goods-section">
|
|
|
+ {loading ? (
|
|
|
+ <View className="loading-container">
|
|
|
+ <Text className="loading-text">加载中...</Text>
|
|
|
+ </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>
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {/* 下拉刷新指示器 */}
|
|
|
+ {refreshing && (
|
|
|
+ <View className="refresh-indicator">
|
|
|
+ <Text>刷新中...</Text>
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
+ </ScrollView>
|
|
|
</TabBarLayout>
|
|
|
)
|
|
|
}
|
yourname