application [cat-mini-app] view page [pages/home] development

apps/cat-mini-app/src/pages/home.vue

@@ -1,14 +1,121 @@
 <template>
-  <view class="flex flex-col items-center justify-center space-y-4">
-    Index123
+  <view class="min-h-screen bg-gradient-to-b from-orange-100 to-pink-100">
+    <!-- 顶部欢迎区域 -->
+    <view class="flex flex-col items-center pt-8 pb-6 px-4">
+      <view class="text-3xl font-bold text-orange-600 mb-2">🐱</view>
+      <text class="text-2xl font-bold text-orange-800">欢迎来到猫舍</text>
+      <text class="text-gray-600 mt-1">我们致力于为猫咪提供温馨的家</text>
+    </view>
+
+    <!-- 猫舍信息卡片 -->
+    <view v-if="shelter" class="mx-4 mb-6">
+      <view class="bg-white rounded-2xl shadow-lg p-6">
+        <!-- 猫舍名称 -->
+        <view class="flex items-center mb-4">
+          <view class="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center mr-3">
+            <text class="text-white text-xl">🏠</text>
+          </view>
+          <view>
+            <text class="text-xl font-bold text-gray-800">{{ shelter.name }}</text>
+            <text class="text-gray-500 block">猫舍介绍</text>
+          </view>
+        </view>
+
+        <!-- 描述 -->
+        <view class="mb-4" v-if="shelter.description">
+          <text class="text-gray-700 leading-relaxed">{{ shelter.description }}</text>
+        </view>
+
+        <!-- 地址和电话 -->
+        <view class="space-y-3">
+          <view class="flex items-center" v-if="shelter.address">
+            <text class="text-orange-500 mr-2">📍</text>
+            <text class="text-gray-700">{{ shelter.address }}</text>
+          </view>
+          <view class="flex items-center" v-if="shelter.phone">
+            <text class="text-orange-500 mr-2">📞</text>
+            <text class="text-gray-700">{{ shelter.phone }}</text>
+          </view>
+        </view>
+
+        <!-- 图片轮播 -->
+        <view v-if="images.length > 0" class="mt-6">
+          <swiper
+            class="h-48 rounded-xl overflow-hidden"
+            :indicator-dots="true"
+            :autoplay="true"
+            :interval="3000"
+            indicator-color="#ffedd5"
+            indicator-active-color="#ea580c"
+          >
+            <swiper-item v-for="(image, index) in images" :key="index">
+              <image
+                :src="image.url"
+                class="w-full h-full object-cover"
+                mode="aspectFill"
+              />
+            </swiper-item>
+          </swiper>
+        </view>
+      </view>
+    </view>
+
+    <!-- 加载中 -->
+    <view v-else class="flex-1 flex items-center justify-center">
+      <view class="flex flex-col items-center">
+        <view class="w-8 h-8 border-4 border-orange-200 border-t-orange-500 rounded-full animate-spin mb-3"></view>
+        <text class="text-gray-600">正在加载猫舍信息...</text>
+      </view>
+    </view>
+
+    <!-- 底部导航提示 -->
+    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
+      <view class="flex justify-around">
+        <view class="flex flex-col items-center text-orange-500">
+          <text class="text-lg">🏠</text>
+          <text class="text-xs mt-1">首页</text>
+        </view>
+        <view class="flex flex-col items-center text-gray-400">
+          <text class="text-lg">🐱</text>
+          <text class="text-xs mt-1">猫咪</text>
+        </view>
+        <view class="flex flex-col items-center text-gray-400">
+          <text class="text-lg">🛒</text>
+          <text class="text-xs mt-1">商城</text>
+        </view>
+        <view class="flex flex-col items-center text-gray-400">
+          <text class="text-lg">👤</text>
+          <text class="text-xs mt-1">我的</text>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { auth } from '@/lib/nvwa'
 import { AUTH_REQUIRED } from '@/lib/config'
 import redirectToLogin from '@/custom/redirect-to-login'
+import { entities } from '@/lib/nvwa'
+
+interface Shelter {
+  id: number
+  name: string
+  description?: string
+  address?: string
+  phone?: string
+  imageIds: number[]
+}
+
+interface AttributeFile {
+  id: number
+  url: string
+}
+
+const shelter = ref<Shelter | null>(null)
+const images = ref<AttributeFile[]>([])
 
 onLoad(async () => {
   // 如果需要认证，检查登录状态
@@ -31,7 +138,56 @@ onLoad(async () => {
     const userProfile = await auth.currentUser()
     console.log("current user profile", userProfile)
   }
+
+  // 加载猫舍信息
+  await loadShelterInfo()
 })
 
+const loadShelterInfo = async () => {
+  try {
+    // 获取猫舍信息（假设只有一个猫舍，取第一个）
+    const { data: shelterData, error: shelterError } = await entities
+      .from('shelter')
+      .select('*')
+      .limit(1)
+
+    if (shelterError) {
+      console.error('获取猫舍信息失败:', shelterError)
+      return
+    }
+
+    if (shelterData && shelterData.length > 0) {
+      shelter.value = shelterData[0]
+
+      // 如果有图片ID，获取图片信息
+      if (shelter.value.imageIds && shelter.value.imageIds.length > 0) {
+        const { data: imageData, error: imageError } = await entities
+          .from('nvwa_attribute_file')
+          .select('id, url')
+          .in('id', shelter.value.imageIds)
+
+        if (imageError) {
+          console.error('获取图片信息失败:', imageError)
+        } else if (imageData) {
+          images.value = imageData
+        }
+      }
+    }
+  } catch (error) {
+    console.error('加载猫舍信息时发生错误:', error)
+  }
+}
 </script>
+
+<style>
+/* 自定义动画 */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+</style>
 <style></style>