feat: 回显喂养计划

src/api/feeding-plan.ts

@@ -4,3 +4,7 @@ import httpClient from '@/api/httpClient'
 export async function createFeedingPlan(createFeedingPlanRequest: CreateFeedingPlanRequest) {
   return httpClient.post<FeedingPlan>('/feeding-plans', createFeedingPlanRequest)
 }
+
+export async function getFeedingPlan(id: string) {
+  return httpClient.get<FeedingPlan>(`/feeding-plans/${id}`)
+}

src/model/pet.ts

@@ -1,4 +1,5 @@
 import type { BaseModel, TraceableModel } from '@/model/base'
+import type { FeedingPlanProduct } from '@/model/feeding-plan'
 
 export interface Pet extends TraceableModel {
   birthday: string
@@ -12,6 +13,7 @@ export interface Pet extends TraceableModel {
   photo: string
   type: PetType
   weight: number
+  feedingPlan: FeedingPlan
 }
 
 export interface CreatePetRequest extends Omit<Pet, keyof TraceableModel> {
@@ -57,6 +59,7 @@ export enum FeedingGoal {
 export interface FeedingPlan extends BaseModel {
   feedingGoal: FeedingGoal
   targetWeight: number
+  feedingPlanProducts: FeedingPlanProduct[]
 }
 
 export interface CreateFeedingPlanRequest extends Omit<FeedingPlan, keyof BaseModel> {

src/pages/feed-plan/index.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import { getFeedingPlan } from '@/api/feeding-plan'
 import { getOwnPets } from '@/api/pet'
-import { type Pet, PetType } from '@/model/pet'
+import { type FeedingPlan, type Pet, PetType } from '@/model/pet'
+import { watch } from 'vue'
 
 const pets = ref<Pet[]>([])
 async function fetchPets() {
   pets.value = await getOwnPets()
 }
 
+const feedingPlan = ref<FeedingPlan | null>(null)
+
 const currentIndex = ref(0)
 const currentPet = computed(() => pets.value[currentIndex.value])
 
@@ -20,7 +24,16 @@ const petTags = computed(() => {
   ]
 })
 
-function selectPet(index: number) {
+watch(currentPet, async () => {
+  if (currentPet.value && currentPet.value.feedingPlan) {
+    feedingPlan.value = await getFeedingPlan(currentPet.value.feedingPlan.id)
+  }
+  else {
+    feedingPlan.value = null
+  }
+})
+
+async function selectPet(index: number) {
   currentIndex.value = index
 }
 
@@ -61,78 +74,17 @@ onMounted(fetchPets)
       </view>
       <image class="w-[20px] h-[20px]" src="@/static/icons/edit.svg" />
     </view>
-    <view class="w-full  relative rounded-3 overflow-hidden shadow-cell-group bg-[#fff]">
-      <view class="w-[111px] h-[44px] bg-[#1a1a1a] absolute right-0 top-0">
-        <view class="text-[#999] text-xs absolute right-4 leading-[34px]">
-          编辑计划
-        </view>
-      </view>
-      <image class="w-[343px] h-[179px] absolute right-0 top-0 " src="@/static/image/shape-bg.png" />
-      <view class="pl-4 relative flex gap-1 h-[44px] items-center text-xs">
-        <view>喂养计划</view>
-        <view class="text-[#D9D9D9]">
-          FEEDING PLAN
-        </view>
-      </view>
-      <view class="py-4 pl-2 pr-8 w-full flex gap-3 relative items-center border-b-[1px] border-[#E7E7E7] last-of-type:border-0">
-        <image src="@/static/image/product-default.png" class="w-[80px] h-[80px]" />
-        <view class="flex-1 flex flex-col justify-between h-[80px] py-2">
-          <view class="font-semibold">
-            MINI主食包
-          </view>
-          <view class="flex gap-2">
-            <view class="px-2 py-0.5 bg-[#f3f3f3] rounded-0.75">
-              湿粮
-            </view>
-            <view class="px-2 py-0.5 bg-[#f3f3f3] rounded-0.75">
-              湿粮
-            </view>
-          </view>
-        </view>
-        <view class="text-right">
-          <view class="text-xs font-semibold">
-            每日
-          </view>
-          <view class="text-xl font-bold mb-4">
-            500<text class="text-xs font-medium">
-              g
-            </text>
-          </view>
-          <view class="text-[9px] text-[#CDCDCD]">
-            1200Kcal
-          </view>
+    <SectionCard v-if="feedingPlan" title="喂养计划" subtitle="FEEDING PLAN" operation-title="编辑计划">
+      <ProductReadonlyItem v-for="item in feedingPlan.feedingPlanProducts" :key="item.product.id" :data="item" />
+    </SectionCard>
+    <SectionCard v-else title="喂养计划" subtitle="FEEDING PLAN" operation-title="无计划">
+      <view class="w-full h-[120px] flex flex-col items-center justify-center gap-1.5">
+        <image src="@/static/icons/plus-circle-2.svg" class="w-[47px] h-[47px]" />
+        <view class="text-xs text-disabled">
+          添加您的喂养计划
         </view>
       </view>
-      <view class="py-4 pl-2 pr-8 w-full flex gap-3 relative items-center  border-b-[1px] border-[#E7E7E7] last-of-type:border-0">
-        <image src="@/static/image/product-default.png" class="w-[80px] h-[80px]" />
-        <view class="flex-1 flex flex-col justify-between h-[80px] py-2">
-          <view class="font-semibold">
-            MINI主食包
-          </view>
-          <view class="flex gap-2">
-            <view class="px-2 py-0.5 bg-[#f3f3f3] rounded-0.75">
-              湿粮
-            </view>
-            <view class="px-2 py-0.5 bg-[#f3f3f3] rounded-0.75">
-              湿粮
-            </view>
-          </view>
-        </view>
-        <view class="text-right">
-          <view class="text-xs font-semibold">
-            每日
-          </view>
-          <view class="text-xl font-bold mb-4">
-            500<text class="text-xs font-medium">
-              g
-            </text>
-          </view>
-          <view class="text-[9px] text-[#CDCDCD]">
-            1200Kcal
-          </view>
-        </view>
-      </view>
-    </view>
+    </SectionCard>
   </view>
 </template>