52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { View, Text, Button } from '@tarojs/components'
|
|
import Taro, { useLoad } from '@tarojs/taro'
|
|
import { useState } from 'react'
|
|
import { getARServiceDetail } from '../../api'
|
|
import './detail.scss'
|
|
|
|
export default function ARDetail() {
|
|
const [detail, setDetail] = useState<any>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useLoad((options) => {
|
|
if (options.id) fetchDetail(options.id)
|
|
})
|
|
|
|
const fetchDetail = async (id: string) => {
|
|
try {
|
|
const res: any = await getARServiceDetail(Number(id))
|
|
setDetail(res)
|
|
} catch (err) {
|
|
console.error(err)
|
|
Taro.showToast({ title: '加载失败', icon: 'none' })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleLaunch = () => {
|
|
Taro.showModal({
|
|
title: '提示',
|
|
content: '请使用摄像头扫描空间以启动 AR 体验 (演示模式)',
|
|
showCancel: false
|
|
})
|
|
}
|
|
|
|
if (loading) return <View className='page-container'><Text style={{color:'#fff'}}>Loading...</Text></View>
|
|
if (!detail) return <View className='page-container'><Text style={{color:'#fff'}}>Not Found</Text></View>
|
|
|
|
return (
|
|
<View className='page-container'>
|
|
<Text className='title'>{detail.title}</Text>
|
|
<Text className='desc'>{detail.description}</Text>
|
|
|
|
<View className='ar-placeholder'>
|
|
<Text className='icon'>📷</Text>
|
|
<Text className='text'>AR 场景加载区域</Text>
|
|
</View>
|
|
|
|
<Button className='btn-launch' onClick={handleLaunch}>进入沉浸模式</Button>
|
|
</View>
|
|
)
|
|
}
|