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/api/home.ts
+24 -12
View File
@@ -10,33 +10,34 @@ export interface ApiImage {
id: number
}
/** 轮播图项 */
export interface CarouselItem {
/** 首页可点击链接项（轮播图 / 宫格导航共用） */
export interface HomeLinkItem {
id: number
title: string
image: ApiImage
link: string
status: number // 0: 启用
sort: number
link_type: number // 0: 跳转 link 链接; 1: 跳转分类页
category_id: number // link_type = 1 时携带的分类 ID
}
/** 宫格导航项 */
export interface GridNavItem {
id: number
title: string
image: ApiImage
link: string
status: number // 0: 启用
sort: number
/** 首页活动项（结构与 HomeLinkItem 相同，额外多一个描述字段） */
export interface HomeActivityItem extends HomeLinkItem {
description: string
}
/** 首页数据 */
export interface HomeData {
carousel: CarouselItem[]
gridNav: GridNavItem[]
carousel: HomeLinkItem[]
gridNav: HomeLinkItem[]
activity: HomeActivityItem[]
site_title: string
}
/** 分类链接项（结构与 HomeLinkItem 相同，但不含 link_type / category_id，均为纯链接） */
export type CategoryLinkItem = Omit<HomeLinkItem, 'link_type' | 'category_id'>
// ==================== API ====================
/**
@@ -48,3 +49,14 @@ export async function getHomeData(): Promise<ResponseStructure<HomeData>> {
method: 'GET',
})
}
/**
* 获取指定分类下的链接列表（无需登录）
* @param categoryId - 分类 ID
*/
export async function getCategoryLinks(categoryId: number): Promise<ResponseStructure<CategoryLinkItem[]>> {
return createRequest<CategoryLinkItem[]>({
url: `/api/category/${categoryId}`,
method: 'GET',
})
}
src/app.config.ts
+1
View File
@@ -1,6 +1,7 @@
export default defineAppConfig({
pages: [
'pages/index/index',
'pages/category/index',
],
window: {
backgroundTextStyle: 'light',
src/app.ts
+1
View File
@@ -13,6 +13,7 @@ class App extends Component {
// this.props.children 是将要会渲染的页面
render () {
// @ts-ignore
return this.props.children
}
}
src/pages/category/index.config.ts
+5
View File
@@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '校园美食',
navigationBarBackgroundColor: '#ff6b35',
navigationBarTextStyle: 'white',
})
src/pages/category/index.less
+43
View File
@@ -0,0 +1,43 @@
.category {
min-height: 100vh;
background: #f7f8fa;
padding-top: 16px;
// 加载 / 空状态
.category-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120px 0;
color: #999;
.state-text {
font-size: 26px;
color: #999;
}
}
// 宫格链接（与首页宫格导航样式一致）
.grid-wrapper {
margin: 16px 32px 20px;
background: rgb(255 255 255);
border-radius: 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
padding-bottom: 24px;
.van-grid-item__content {
padding-top: 24px;
padding-bottom: 0;
}
.van-icon--image {
width: 60px !important;
height: 60px !important;
}
.van-grid-item__text {
font-size: 22px;
}
}
}
src/pages/category/index.tsx
+71
View File
@@ -0,0 +1,71 @@
import { View, Text } from '@tarojs/components'
import { Grid, GridItem, Loading } from '@antmjs/vantui'
import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { getCategoryLinks } from '@/api/home'
import type { CategoryLinkItem } from '@/api/home'
import { navigateToLink } from '@/utils/navigate'
import './index.less'
export default function Category() {
const router = Taro.useRouter()
const categoryId = router.params.category_id || ''
const [links, setLinks] = useState<CategoryLinkItem[]>([])
const [loading, setLoading] = useState(true)
// 收到分类 ID 后请求该分类下的所有链接
useEffect(() => {
async function fetchCategoryLinks() {
try {
const res = await getCategoryLinks(Number(categoryId))
if (res.success && res.data) {
setLinks(
res.data
.filter((item) => item.status === 0)
.sort((a, b) => a.sort - b.sort)
)
}
} catch (err) {
console.warn('获取分类链接失败', err)
} finally {
setLoading(false)
}
}
if (categoryId) {
fetchCategoryLinks()
} else {
setLoading(false)
}
}, [categoryId])
return (
<View className='category'>
{/* 加载中 */}
{loading ? (
<View className='category-state'>
<Loading type='spinner'>加载中...</Loading>
</View>
) : links.length > 0 ? (
// 宫格链接（与首页宫格导航样式一致）
<View className='grid-wrapper'>
<Grid columnNum={5} border={false} gutter={12} iconSize={48}>
{links.map((item) => (
<GridItem
key={item.id}
icon={item.image.preview_url}
text={item.title}
onClick={() => navigateToLink(item.link)}
/>
))}
</Grid>
</View>
) : (
// 空状态
<View className='category-state'>
<Text className='state-text'>暂无链接</Text>
</View>
)}
</View>
)
}
src/pages/index/index.less
+76 -44
View File
@@ -127,6 +127,11 @@
.activity-cards {
display: flex;
gap: 20px;
// 只有一条活动时占满整行
&.single .activity-card {
flex: 1 1 100%;
}
}
.activity-card {
@@ -184,6 +189,12 @@
border-radius: 16px;
background: rgba(255, 255, 255, 0.25);
margin-bottom: 14px;
overflow: hidden;
.activity-icon-img {
width: 100%;
height: 100%;
}
}
.activity-name {
@@ -219,58 +230,79 @@
}
// ========== 5. 底部推荐卡片 ==========
.bottom-section {
padding: 0 32px;
// section-card 通用样式（活动专区 + 底部推荐共用）
.section-card {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.9);
border-radius: 18px;
padding: 24px 28px;
margin-bottom: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease;
.section-card {
&:active {
transform: scale(0.98);
}
.card-icon {
font-size: 48px;
width: 72px;
height: 72px;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.9);
justify-content: center;
border-radius: 18px;
padding: 24px 28px;
margin-bottom: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease;
margin-right: 20px;
flex-shrink: 0;
overflow: hidden;
&:active {
transform: scale(0.98);
}
.card-icon {
font-size: 48px;
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
margin-right: 20px;
flex-shrink: 0;
}
.card-info {
flex: 1;
.card-title {
font-size: 30px;
font-weight: 600;
color: #333;
margin-bottom: 6px;
}
.card-desc {
font-size: 24px;
color: #999;
}
}
.card-arrow {
font-size: 40px;
color: #ccc;
flex-shrink: 0;
.card-icon-img {
width: 100%;
height: 100%;
}
}
.card-info {
flex: 1;
.card-title {
font-size: 30px;
font-weight: 600;
color: #333;
margin-bottom: 6px;
}
.card-desc {
font-size: 24px;
color: #999;
}
}
.card-arrow {
font-size: 40px;
color: #ccc;
flex-shrink: 0;
}
}
// 活动专区 section-card 图标底色（循环使用）
.card-ic-0 .card-icon {
background: #fff0ed;
}
.card-ic-1 .card-icon {
background: #fff7e6;
}
.card-ic-2 .card-icon {
background: #e6f7ff;
}
.card-ic-3 .card-icon {
background: #f0edff;
}
.bottom-section {
padding: 0 32px;
// 每张卡片图标不同底色
.card-hot .card-icon {
background: #fff0ed;
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. 底部推荐卡片 */}
src/utils/navigate.ts
+18
View File
@@ -0,0 +1,18 @@
import Taro from '@tarojs/taro'
/**
* 跳转链接：外部 http(s) 链接直接打开，内部链接 navigateTo 打开，
* navigateTo 失败时降级为 switchTab（兼容 tabBar 页面）
*/
export function navigateToLink(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)
})
})
}
}