xinadmin/school2-taro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

活动专区

Browse Source
This commit is contained in:
liu
2026-08-09 11:24:20 +08:00
parent 8906cf6abb
commit 0980252b7f
9 changed files with 330 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.tsx
+91 -44
View File
@@ -3,7 +3,8 @@ 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'
import type { CarouselItem, GridNavItem } from '@/api/home'
import type { HomeLinkItem, HomeActivityItem } from '@/api/home'
import { navigateToLink } from '@/utils/navigate'
import './index.less'
// 背景图
@@ -21,25 +22,23 @@ function prepareItems<T extends { status: number; sort: number }>(items: T[]): T
}
/** 处理导航跳转 */
function handleNavigate(link: string): void {
if (!link) return
if(link.startsWith('http')) {
window.location.href = link
} else {
Taro.navigateTo({ url: link }).catch(() => {
Taro.switchTab({ url: link }).catch(() => {
console.warn('导航失败:', link)
})
})
function handleNavigate(item: HomeLinkItem): void {
// link_type = 1：跳转分类页，携带分类 ID
if (item.link_type === 1) {
Taro.navigateTo({ url: `/pages/category/index?category_id=${item.category_id ?? ''}` })
return
}
// link_type = 0：直接跳转 link 链接
navigateToLink(item.link)
}
// ==================== 页面组件 ====================
export default function Index() {
const [searchValue, setSearchValue] = useState('')
const [carousel, setCarousel] = useState<CarouselItem[]>([])
const [gridNav, setGridNav] = useState<GridNavItem[]>([])
const [carousel, setCarousel] = useState<HomeLinkItem[]>([])
const [gridNav, setGridNav] = useState<HomeLinkItem[]>([])
const [activity, setActivity] = useState<HomeActivityItem[]>([])
const [siteTitle, setSiteTitle] = useState<string>('河南省工业大学')
const [loading, setLoading] = useState(true)
@@ -57,6 +56,10 @@ export default function Index() {
if (res.data.gridNav?.length > 0) {
setGridNav(prepareItems(res.data.gridNav))
}
// 活动专区：API 有数据则用，否则兜底静态内容
if (res.data.activity?.length > 0) {
setActivity(prepareItems(res.data.activity))
}
if (res.data.site_title) {
setSiteTitle(res.data.site_title)
}
@@ -116,7 +119,7 @@ export default function Index() {
className='swiper-img'
src={item.image.preview_url}
mode='aspectFill'
onClick={() => handleNavigate(item.link)}
onClick={() => handleNavigate(item)}
/>
</SwiperItem>
))}
@@ -135,7 +138,7 @@ export default function Index() {
key={item.id}
icon={item.image.preview_url}
text={item.title}
onClick={() => handleNavigate(item.link)}
onClick={() => handleNavigate(item)}
/>
))}
</Grid>
@@ -157,39 +160,83 @@ export default function Index() {
</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>
{activity.length > 0 ? (
<>
{/* 前两个：activity-card 渐变卡片 */}
<View className={`activity-cards ${activity.length === 1 ? 'single' : ''}`}>
{activity.slice(0, 2).map((item, index) => (
<View
key={item.id}
className={`activity-card ${index === 0 ? 'card-fullcut' : 'card-newbie'}`}
onClick={() => handleNavigate(item)}
>
<View className='deco-circle circle-1' />
<View className='deco-circle circle-2' />
<View className='activity-card-main'>
<View className='activity-icon'>
<Image className='activity-icon-img' src={item.image.preview_url} mode='aspectFill' />
</View>
<View className='activity-name'>{item.title}</View>
<View className='activity-desc'>{item.description}</View>
</View>
</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>
{/* 其余：section-card 样式 */}
{activity.slice(2).map((item, index) => (
<View
key={item.id}
className={`section-card card-ic-${index % 4}`}
onClick={() => handleNavigate(item)}
>
<View className='card-icon'>
<Image className='card-icon-img' src={item.image.preview_url} mode='aspectFill' />
</View>
<View className='card-info'>
<View className='card-title'>{item.title}</View>
<View className='card-desc'>{item.description}</View>
</View>
<View className='card-arrow'>›</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>
)}
</View>
{/* 5. 底部推荐卡片 */}