mi

miniprogram/src/pages/ar/detail.tsx

@@ -0,0 +1,51 @@
+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>
+  )
+}