add:新增步骤定时器跳转效果

src/components/FeedStep.vue

@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<{
       <view class="flex items-center justify-center text-[white]" :class="props.stage === index ? 'step_select' : props.stage === -1 ? 'step' : 'step step_left' ">
         {{ item.step }}
       </view>
-      <view class="ml-1 font-pingfangsc tracking-[0.8px]" :class="props.stage === index ? 'step_title_select' : props.stage === -1 ? '' : 'step_title' ">
+      <view class="ml-1 font-pingfangsc tracking-[0.8px]" :class="props.stage === index ? 'step_title_select' : 'step_title' ">
         {{ item.title }}
       </view>
     </view>

src/pages/feed-plan/index.vue

@@ -16,27 +16,54 @@ const stepInfo = ref<StepInfo[]>([
   { step: 2, title: '身体状态信息' },
   { step: 3, title: '计算喂养计划' },
 ])
+const controlFormDisplay = ref({
+  display1: true,
+  display2: false,
+  display3: false,
+})
+function handleReady() {
+  controlFormDisplay.value = {
+    display1: false,
+    display2: false,
+    display3: false,
+  }
+  controlFormDisplay.value.display2 = true
+  const timerId: NodeJS.Timeout
+  timerId = setTimeout(() => {
+    controlFormDisplay.value.display2 = false
+    controlFormDisplay.value.display3 = true
+    clearTimeout(timerId)
+  }, 2000)
+}
 </script>
 
 <template>
   <TitleBar :title-name="titleName" />
   <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
-    <view class="w-[273px] h-[125px] mx-auto mt-[105px]">
-      <image :src="feedTitle" class="w-full h-full" />
-    </view>
+    <view v-show="controlFormDisplay.display1">
+      <view class="w-[273px] h-[125px] mx-auto mt-[105px]">
+        <image :src="feedTitle" class="w-full h-full" />
+      </view>
 
-    <view class="h-[121px] ml-15 mt-14">
-      <FeedStep :list="stepInfo" />
-    </view>
+      <view class="h-[121px] ml-15 mt-14">
+        <FeedStep :list="stepInfo" />
+      </view>
 
-    <view class="mx-auto">
-      <button class="w-[176px] h-[47px] flex items-center justify-center bg-[#4545E5] border-none text-[white] rounded-3xl mt-[87px]">
-        准备好了
-      </button>
-    </view>
+      <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 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>
   </view>
 </template>