136 lines
4.7 KiB
TypeScript
136 lines
4.7 KiB
TypeScript
import { View, Text, Image, Button } from '@tarojs/components'
|
||
import Taro, { useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
|
||
import { useState } from 'react'
|
||
import { getServices } from '../../api'
|
||
import './index.scss'
|
||
|
||
export default function ServicesIndex() {
|
||
const [services, setServices] = useState<any[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
|
||
useLoad(() => {
|
||
fetchServices()
|
||
})
|
||
|
||
const fetchServices = async () => {
|
||
try {
|
||
const res: any = await getServices()
|
||
// Adapt API response if needed (res.data vs res)
|
||
setServices(res.results || res)
|
||
} catch (err) {
|
||
console.error(err)
|
||
Taro.showToast({ title: '加载失败', icon: 'none' })
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
useShareAppMessage(() => {
|
||
return {
|
||
title: 'AI 全栈解决方案',
|
||
path: '/pages/services/index'
|
||
}
|
||
})
|
||
|
||
useShareTimeline(() => {
|
||
return {
|
||
title: 'AI 全栈解决方案'
|
||
}
|
||
})
|
||
|
||
const goDetail = (id: number) => {
|
||
Taro.navigateTo({ url: `/pages/services/detail?id=${id}` })
|
||
}
|
||
|
||
if (loading) return <View className='page-container'><Text style={{color:'#fff'}}>Loading...</Text></View>
|
||
|
||
return (
|
||
<View className='page-container'>
|
||
<View className='header'>
|
||
<Text className='title'>AI 全栈<Text className='highlight'>解决方案</Text></Text>
|
||
<Text className='subtitle'>从数据处理到模型部署，我们为您提供一站式 AI 基础设施服务。</Text>
|
||
|
||
<View className='vc-promo-container'>
|
||
<View className='vc-info-card' onClick={() => Taro.navigateTo({ url: '/pages/courses/index' })}>
|
||
<View className='info-icon'>💡</View>
|
||
<View className='info-content'>
|
||
<Text className='info-title'>AI + VC 课程</Text>
|
||
<Text className='info-desc'>深度解析 AI 如何赋能创投，掌握技术变现的核心逻辑</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<Button
|
||
className='nav-btn'
|
||
onClick={() => Taro.navigateTo({ url: '/pages/courses/index' })}
|
||
>
|
||
探索 VC 课程
|
||
<Text className='arrow'>→</Text>
|
||
</Button>
|
||
</View>
|
||
</View>
|
||
|
||
<View className='service-grid'>
|
||
{services.map((item) => (
|
||
<View
|
||
key={item.id}
|
||
className='service-card'
|
||
style={{
|
||
border: `1px solid ${item.color}33`,
|
||
boxShadow: `0 0 20px ${item.color}11`
|
||
}}
|
||
onClick={() => goDetail(item.id)}
|
||
>
|
||
<View className='hud-corner tl' style={{ borderColor: item.color }} />
|
||
<View className='hud-corner br' style={{ borderColor: item.color }} />
|
||
|
||
<View className='card-header'>
|
||
<View className='icon-box' style={{ background: `${item.color}22` }}>
|
||
{item.icon_url ? (
|
||
<Image src={item.icon_url} className='icon-img' mode='aspectFit' />
|
||
) : (
|
||
<View className='icon-placeholder' style={{ background: item.color }} />
|
||
)}
|
||
</View>
|
||
<Text className='title'>{item.title}</Text>
|
||
</View>
|
||
|
||
<Text className='description'>{item.description}</Text>
|
||
|
||
<View className='features'>
|
||
{item.features && item.features.split('\n').map((feat: string, i: number) => (
|
||
<View key={i} className='feature-item' style={{ color: item.color }}>
|
||
<View className='dot' style={{ background: item.color }} />
|
||
<Text>{feat}</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
|
||
<Button className='btn-more'>了解更多 {'>'}</Button>
|
||
</View>
|
||
))}
|
||
</View>
|
||
|
||
<View className='process-section'>
|
||
<Text className='section-title'>服务流程</Text>
|
||
<View className='process-steps'>
|
||
{[
|
||
{ title: '需求分析', desc: '深度沟通需求', id: 1 },
|
||
{ title: '数据准备', desc: '高效数据处理', id: 2 },
|
||
{ title: '模型训练', desc: '高性能算力', id: 3 },
|
||
{ title: '测试验证', desc: '多维精度测试', id: 4 },
|
||
{ title: '私有化部署', desc: '全栈落地部署', id: 5 }
|
||
].map((step) => (
|
||
<View key={step.id} className='step-item'>
|
||
<View className='step-icon'><Text>{step.id}</Text></View>
|
||
<View className='step-content-wrapper'>
|
||
<Text className='step-title'>{step.title}</Text>
|
||
<Text className='step-desc'>{step.desc}</Text>
|
||
</View>
|
||
</View>
|
||
))}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|