add:新增宠物、进度卡片组件页面

src/components.d.ts

@@ -7,7 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    FeedStep: typeof import('./components/FeedStep.vue')['default']
     TabBar: typeof import('./components/TabBar.vue')['default']
     TitleBar: typeof import('./components/TitleBar.vue')['default']
   }

src/pages.json

@@ -22,6 +22,14 @@
       "path": "pages/pet-manual/index",
       "type": "page"
     },
+    {
+      "path": "pages/feed-plan/components/FeedFlogan",
+      "type": "page"
+    },
+    {
+      "path": "pages/feed-plan/components/FeedStep",
+      "type": "page"
+    },
     {
       "path": "pages/pet-manual/components/CardList",
       "type": "page"

src/pages/feed-plan/components/FeedFlogan.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import feedSlogan from '@/static/image/feed-plan/feed-slogan.png'
+import ToolApi from '@/utils'
+
+const safeBottomMenuHeight = ToolApi.getMenuButtonInfoHeight()
+</script>
+
+<template>
+  <view class="w-screen fixed left-0" :style="{ bottom: `${safeBottomMenuHeight + 70}px` }">
+    <image :src="feedSlogan" class="w-[138px] h-[38px] mx-auto" />
+  </view>
+</template>
+
+<style scoped>
+
+</style>

src/pages/feed-plan/index.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import FeedStep from '@/components/FeedStep.vue'
-import feedSlogan from '@/static/image/feed-plan/feed-slogan.png'
+import FeedFlogan from '@/pages/feed-plan/components/FeedFlogan.vue'
+import FeedStep from '@/pages/feed-plan/components/FeedStep.vue'
 import feedTitle from '@/static/image/feed-plan/feed-title.png'
+import back from '@/static/image/pet-parameters/back.png'
+import cat from '@/static/image/pet-parameters/cat.png'
+import dog from '@/static/image/pet-parameters/dog.png'
 import ToolApi from '@/utils'
 
 interface StepInfo {
@@ -10,17 +13,20 @@ interface StepInfo {
 }
 const titleName = ref<string>('喂养计算器')
 const safeHeight = ToolApi.getSafeHeight()
-const safeBottomMenuHeight = ToolApi.getMenuButtonInfoHeight()
 const stepInfo = ref<StepInfo[]>([
   { step: 1, title: '宠物基础信息' },
   { step: 2, title: '身体状态信息' },
   { step: 3, title: '计算喂养计划' },
 ])
 const controlFormDisplay = ref({
-  display1: true,
+  display1: false,
   display2: false,
-  display3: false,
+  display3: true,
 })
+const animalCard = ref([
+  { image: cat, name: '猫猫' },
+  { image: dog, name: '狗狗' },
+])
 function handleReady() {
   controlFormDisplay.value = {
     display1: false,
@@ -28,11 +34,9 @@ function handleReady() {
     display3: false,
   }
   controlFormDisplay.value.display2 = true
-  const timerId: NodeJS.Timeout
-  timerId = setTimeout(() => {
+  setTimeout(() => {
     controlFormDisplay.value.display2 = false
     controlFormDisplay.value.display3 = true
-    clearTimeout(timerId)
   }, 2000)
 }
 </script>
@@ -48,22 +52,39 @@ function handleReady() {
       <view class="h-[121px] ml-15 mt-14">
         <FeedStep :list="stepInfo" />
       </view>
-
+      <FeedFlogan />
       <view class="flex items-center justify-center">
         <button class="w-[176px] h-[47px] flex items-center justify-center bg-[#4545E5] border-none text-[white] rounded-3xl mt-[87px]" @tap="handleReady">
           准备好了
         </button>
       </view>
-
-      <view class="w-full fixed left-0" :style="{ bottom: `${safeBottomMenuHeight + 70}px` }">
-        <image :src="feedSlogan" class="w-[138px] h-[38px] mx-auto" />
-      </view>
     </view>
     <view v-show="controlFormDisplay.display2" class="flex items-center justify-center w-full h-full">
       <FeedStep :list="stepInfo" :stage="stepInfo[0].step - 1" />
     </view>
     <view v-show="controlFormDisplay.display3">
-      123
+      <view class="m-4 flex items-center">
+        <image :src="back" class="w-[6px] h-[10px]" />
+        <text class="text-[12px] font-pingfangsc ml-1">
+          返回
+        </text>
+        <view class="flex-1 h-[6px] bg-[#E7E7E7] ml-3 rounded relative">
+          <view class="absolute h-[6px] bg-[#0052D9] rounded" style="width: 80%" />
+        </view>
+        <text class="text-[12px] font-pingfangsc ml-3">
+          80%
+        </text>
+      </view>
+      <view class="mt-[69px] w-full flex justify-center items-center text-[20px] font-bold">
+        您的宠物是?
+      </view>
+      <view class="flex w-full justify-center items-center mt-[37px] gap-3">
+        <view v-for="(item, index) in animalCard" :key="index" class="w-[136px] h-[154px] bg-[white] rounded-lg flex justify-center">
+          <image v-if="index === 0" :src="animalCard[0].image" class="w-[76px] h-[69px] mt-[40px]" />
+          <image v-else :src="animalCard[1].image" class="w-[96px] h-[73px] mt-[35px]" />
+        </view>
+      </view>
+      <FeedFlogan />
     </view>
   </view>
 </template>

src/uni-pages.d.ts

@@ -8,6 +8,8 @@ interface NavigateToOptions {
        "/pages/home/index" |
        "/pages/me/index" |
        "/pages/pet-manual/index" |
+       "/pages/feed-plan/components/FeedFlogan" |
+       "/pages/feed-plan/components/FeedStep" |
        "/pages/pet-manual/components/CardList";
 }
 interface RedirectToOptions extends NavigateToOptions {}