add:新增用户表单信息

src/model/pet-manual.ts

@@ -45,3 +45,8 @@ export interface FeedFormQuestions {
   question: PetCard[]
   formType: number
 }
+export interface UserList {
+  image: string
+  username: string
+  type: string[]
+}

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

@@ -9,7 +9,9 @@ const props = withDefaults(defineProps<{
   title: '',
   formType: 1,
 })
-const emits = defineEmits(['next'])
+const emits = defineEmits<{
+  next: [PetCard]
+}>()
 function handleChooseAnswer(answer: PetCard) {
   emits('next', answer)
 }

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

@@ -1,26 +1,37 @@
 <script setup lang="ts">
-import type { FeedFormQuestions, PetCard, StepInfo } from '@/model/pet-manual'
+import type { FeedFormQuestions, PetCard, StepInfo, UserList } from '@/model/pet-manual'
 import FeedSlogan from '@/pages/feed-plan/components/FeedFlogan.vue'
 import FeedForm from '@/pages/feed-plan/components/FeedForm.vue'
 import ProgressBar from '@/pages/feed-plan/components/ProgressBar.vue'
+import avator from '@/static/image/pet-parameters/avator.png'
+import right from '@/static/image/pet-parameters/right.png'
 
 const props = defineProps<{
   list: FeedFormQuestions[]
   stepInfo: StepInfo[]
+  userList: UserList
+}>()
+const emits = defineEmits<{
+  back: [void]
+  step: [number]
 }>()
-const emits = defineEmits(['back', 'step'])
 const step = ref(0)
+const addPage = ref(1)
+const isUserPage = ref(false)
 const progressNumber = computed<number>(() => {
-  return Math.ceil((step.value + 1) / props.list.length * 100)
+  return Math.ceil((step.value + 1) / (props.list.length + addPage.value) * 100)
 })
 const feedSloganBottom = computed<number>(() => {
-  return props.list[step.value].formType === 3 ? 40 : 70
+  return props.list[step.value]?.formType === 3 ? 40 : 70
 })
 const feedProgressTitle = computed<string>(() => {
   return step.value === 0 ? '返回' : '上一题'
 })
 
 function handlePrevious() {
+  if (step.value === props.list.length - 1 + addPage.value) {
+    isUserPage.value = false
+  }
   if (step.value > 0) {
     step.value -= 1
   }
@@ -33,7 +44,11 @@ function handleAnswer(answer: PetCard) {
   if (step.value === 2 || step.value === 7) {
     emits('step', step.value)
   }
-  if (step.value < props.list.length - 1) {
+  if (step.value === props.list.length - 1) {
+    console.log(123)
+    isUserPage.value = true
+  }
+  if (step.value < props.list.length - 1 + addPage.value) {
     step.value += 1
     console.log(step.value, 'step')
   }
@@ -42,11 +57,52 @@ function handleAnswer(answer: PetCard) {
 
 <template>
   <ProgressBar :progress="progressNumber" :title-name="feedProgressTitle" @previous="handlePrevious" />
-  <FeedForm :form-type="props.list[step].formType" :answer-list="props.list[step].question" :title="props.list[step].title" @next="handleAnswer" />
+  <FeedForm v-if="!isUserPage" :form-type="props.list[step].formType" :answer-list="props.list[step].question" :title="props.list[step].title" @next="handleAnswer" />
   <FeedSlogan :bottom="feedSloganBottom" />
+  <view v-if="isUserPage">
+    <view class="w-[calc(100% - 32px)] h-[96px] bg-[white] rounded-3 mt-[31px] p-[16px] mx-[16px] flex flex-col justify-center">
+      <view class="flex gap-4">
+        <image :src="avator" class="w-[64px] h-[64px] rounded-full" />
+        <view class="mt-[5px] ">
+          <text class="font-bold text-[16px] ">
+            {{ props.userList.username }}
+          </text>
+          <view class="mt-[8px] flex gap-2">
+            <view v-for="(item, index) in props.userList.type" :key="index" class="text-[12px] text-[#999] bg-[#F3F3F3] rounded-[3px] py-[2px] px-[8px]">
+              {{ item }}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="w-[calc(100% - 32px)] mx-[16px] h-[56px] bg-[white] rounded-t-3 mt-4 flex items-center card_border_bottom p-4 justify-between">
+      <view>喂养目标</view>
+      <view class="flex justify-center items-center">
+        <text class="mr-3">
+          增肥
+        </text>
+        <image :src="right" class="w-[24px] h-[24px]" />
+      </view>
+    </view>
+    <view class="w-[calc(100% - 32px)] mx-[16px] h-[56px] bg-[white] rounded-b-3 flex items-center p-4 justify-between">
+      <view>目标体重</view>
+      <view class="flex justify-center items-center">
+        <text class="mr-3">
+          6kg
+        </text>
+        <image :src="right" class="w-[24px] h-[24px]" />
+      </view>
+    </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-[210px]">
+        下一步
+      </button>
+    </view>
+  </view>
 </template>
 
 <style scoped>
-
+.card_border_bottom{
+  border-bottom: 1px solid #E5E5E5;
+}
 </style>
-+

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

@@ -7,7 +7,9 @@ import feedTitle from '@/static/image/feed-plan/feed-title.png'
 const props = defineProps<{
   stepInfo: StepInfo[]
 }>()
-const emits = defineEmits(['ready'])
+const emits = defineEmits<{
+  ready: [void]
+}>()
 function handleReady() {
   emits('ready')
 }

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

@@ -9,7 +9,9 @@ const props = withDefaults(defineProps<{
   progress: 0,
 })
 
-const emits = defineEmits(['previous'])
+const emits = defineEmits<{
+  previous: [void]
+}>()
 
 function handleBack() {
   emits('previous')

src/pages/feed-plan/index.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { FeedFormQuestions } from '@/model/pet-manual'
+import type { FeedFormQuestions, UserList } from '@/model/pet-manual'
 import FeedQuestionnaire from '@/pages/feed-plan/components/FeedQuestionnaire.vue'
 import FeedStart from '@/pages/feed-plan/components/FeedStart.vue'
 import FeedStep from '@/pages/feed-plan/components/FeedStep.vue'
+import avator from '@/static/image/pet-parameters/avator.png'
 import cat from '@/static/image/pet-parameters/cat.png'
 import dog from '@/static/image/pet-parameters/dog.png'
 import emaciatedCat from '@/static/image/pet-parameters/form/emaciated_cat.png'
@@ -40,6 +41,11 @@ const feedFormQuestions = ref<FeedFormQuestions[]>([
   { title: '猫咪是否在哺乳?', question: [{ name: '哺乳中' }, { name: '未哺乳' }], formType: 2 },
   { title: '请选择猫咪的体型', question: [{ image: emaciatedCat, name: '极度消廋' }, { image: skinnyCat, name: '非常廋' }, { image: thinCat, name: '消瘦' }, { image: underWeightCat, name: '体重偏低' }, { image: idealWightCat, name: '理想体重' }, { image: overWeightCat, name: '体重偏重' }], formType: 3 },
 ])
+const userList = ref<UserList>({
+  image: avator,
+  username: '子龙',
+  type: ['年龄', '品种', '体重'],
+})
 function reset() {
   stage.value = 0
   controlFormDisplay.value = {
@@ -67,10 +73,9 @@ function handleStep(step: number) {
     controlFormDisplay.value.display2 = true
   }
   else if (step === 7) {
-    reset()
+    handleReady()
     stage.value = 2
     controlFormDisplay.value.display2 = true
-    controlFormDisplay.value.display3 = false
   }
 }
 </script>
@@ -85,7 +90,7 @@ function handleStep(step: number) {
       <FeedStep :list="stepInfo" :stage="stage" />
     </view>
     <view v-show="controlFormDisplay.display3">
-      <FeedQuestionnaire :list="feedFormQuestions" :step-info="stepInfo" @back="handleBackFeedStart" @step="handleStep" />
+      <FeedQuestionnaire :list="feedFormQuestions" :step-info="stepInfo" :user-list="userList" @back="handleBackFeedStart" @step="handleStep" />
     </view>
   </view>
 </template>