首页优化
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { View, Image } from '@tarojs/components'
|
||||
import { Search, Swiper, SwiperItem, Grid, GridItem } from '@antmjs/vantui'
|
||||
import { View, Image, Text } from '@tarojs/components'
|
||||
import {Search, Swiper, SwiperItem, Grid, GridItem, Icon} from '@antmjs/vantui'
|
||||
import { useState, useEffect } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { getHomeData } from '@/api/home'
|
||||
@@ -40,6 +40,7 @@ export default function Index() {
|
||||
const [searchValue, setSearchValue] = useState('')
|
||||
const [carousel, setCarousel] = useState<CarouselItem[]>([])
|
||||
const [gridNav, setGridNav] = useState<GridNavItem[]>([])
|
||||
const [siteTitle, setSiteTitle] = useState<string>('河南省工业大学')
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
// 获取首页数据
|
||||
@@ -56,6 +57,9 @@ export default function Index() {
|
||||
if (res.data.gridNav?.length > 0) {
|
||||
setGridNav(prepareItems(res.data.gridNav))
|
||||
}
|
||||
if (res.data.site_title) {
|
||||
setSiteTitle(res.data.site_title)
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('获取首页数据失败,使用本地兜底数据', err)
|
||||
@@ -74,6 +78,13 @@ export default function Index() {
|
||||
|
||||
{/* 内容层 */}
|
||||
<View className='index-content'>
|
||||
|
||||
<View className='site-name'>
|
||||
<Icon name='location-o' style={{ marginRight: '10px' }} />
|
||||
{siteTitle}
|
||||
</View>
|
||||
|
||||
|
||||
{/* 1. 顶部搜索栏 */}
|
||||
<View className='search-wrapper'>
|
||||
<Search
|
||||
@@ -133,7 +144,55 @@ export default function Index() {
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 4. 底部推荐卡片 */}
|
||||
{/* 4. 活动专区 */}
|
||||
<View className='activity-section'>
|
||||
<View className='activity-header'>
|
||||
<View className='activity-title'>
|
||||
<Text className='title-accent' />
|
||||
活动专区
|
||||
</View>
|
||||
<View className='activity-more'>
|
||||
更多
|
||||
<View className='more-arrow'>›</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='activity-cards'>
|
||||
{/* 满减优惠 */}
|
||||
<View
|
||||
className='activity-card card-fullcut'
|
||||
onClick={() => {
|
||||
// TODO: 活动页面上线后配置跳转链接
|
||||
}}
|
||||
>
|
||||
<View className='deco-circle circle-1' />
|
||||
<View className='deco-circle circle-2' />
|
||||
<View className='activity-card-main'>
|
||||
<View className='activity-icon'>🎫</View>
|
||||
<View className='activity-name'>满减优惠</View>
|
||||
<View className='activity-desc'>满30减5 · 可与券叠加</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 新品首发 */}
|
||||
<View
|
||||
className='activity-card card-newbie'
|
||||
onClick={() => {
|
||||
// TODO: 活动页面上线后配置跳转链接
|
||||
}}
|
||||
>
|
||||
<View className='deco-circle circle-1' />
|
||||
<View className='deco-circle circle-2' />
|
||||
<View className='activity-card-main'>
|
||||
<View className='activity-icon'>✨</View>
|
||||
<View className='activity-name'>新品首发</View>
|
||||
<View className='activity-desc'>每周三上新 · 限时尝鲜价</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 5. 底部推荐卡片 */}
|
||||
<View className='bottom-section'>
|
||||
<View className='section-card card-hot'>
|
||||
<View className='card-icon'>🔥</View>
|
||||
|
||||
Reference in New Issue
Block a user