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

apps/cat-mini-app/src/pages.json

@@ -17,6 +17,12 @@
 			"style": {
 				"navigationBarTitleText": "注册"
 			}
+		},
+		{
+			"path": "pages/breeders",
+			"style": {
+				"navigationBarTitleText": "种公种母介绍"
+			}
 		}
 	],
 	"globalStyle": {

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

@@ -0,0 +1,141 @@
+<template>
+  <view class="container">
+    <uni-section title="种公种母介绍" type="line"></uni-section>
+    <view v-if="loading" class="loading">加载中...</view>
+    <view v-else>
+      <view v-for="cat in cats" :key="cat.id" class="cat-card">
+        <image v-if="cat.imageIds.length > 0" :src="getImageUrl(cat.imageIds[0])" mode="aspectFit" class="cat-image"></image>
+        <view class="cat-info">
+          <text class="cat-name">{{ cat.name }}</text>
+          <text class="cat-details">年龄: {{ cat.age }}个月</text>
+          <text class="cat-details">性别: {{ cat.gender === 'male' ? '公' : '母' }}</text>
+          <text class="cat-details">等级: {{ cat.grade }}</text>
+          <text v-if="cat.description" class="cat-description">{{ cat.description }}</text>
+        </view>
+      </view>
+      <view v-if="cats.length === 0" class="no-data">暂无数据</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { entities } from '@/lib/nvwa'
+
+interface Cat {
+  id: number
+  name: string
+  age: number
+  gender: 'male' | 'female'
+  grade: 'A' | 'B' | 'C' | 'D'
+  type: string
+  isAvailable: boolean
+  description: string
+  imageIds: number[]
+}
+
+interface AttributeFile {
+  id: number
+  url: string
+}
+
+const cats = ref<Cat[]>([])
+const images = ref<Record<number, string>>({})
+const loading = ref(true)
+
+const getImageUrl = (id: number) => {
+  return images.value[id] || ''
+}
+
+onMounted(async () => {
+  try {
+    const { data: catData, error: catError } = await entities
+      .from('cat')
+      .select('*')
+      .in('type', ['breeding_male', 'breeding_female'])
+
+    if (catData) {
+      cats.value = catData
+      // 获取所有 imageIds
+      const allImageIds = catData.flatMap(cat => cat.imageIds).filter(id => id)
+      if (allImageIds.length > 0) {
+        const { data: imageData } = await entities
+          .from('nvwa_attribute_file')
+          .select('id, url')
+          .in('id', allImageIds)
+        if (imageData) {
+          imageData.forEach(img => {
+            images.value[img.id] = img.url || ''
+          })
+        }
+      }
+    }
+  } catch (error) {
+    console.error('Error loading breeders:', error)
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.container {
+  padding: 20px;
+  background-color: #f8f8f8;
+}
+
+.loading {
+  text-align: center;
+  padding: 20px;
+  color: #666;
+}
+
+.cat-card {
+  background: #fff;
+  border-radius: 15px;
+  margin-bottom: 20px;
+  padding: 15px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.cat-image {
+  width: 100%;
+  height: 200px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+}
+
+.cat-info {
+  padding: 0 5px;
+}
+
+.cat-name {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+  display: block;
+}
+
+.cat-details {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.cat-description {
+  font-size: 14px;
+  color: #999;
+  margin-top: 8px;
+  display: block;
+  line-height: 1.5;
+}
+
+.no-data {
+  text-align: center;
+  padding: 40px;
+  color: #999;
+}
+</style>