frontend-uniapp/src/pages/feed-questionnaire/index.vue

<script setup lang="ts">
import type { FeedFormQuestions, UserList } from '@/model/pet-manual'
import FeedQuestionnaire from '@/components/FeedQuestionnaire.vue'
import FeedStart from '@/components/FeedStart.vue'
import FeedStep from '@/components/FeedStep.vue'
import { PetBodyType } from '@/model/pet'
import extremelyObese from '@/static/image/body-type/extremely-obese.svg'
import extremelyThin from '@/static/image/body-type/extremely-thin.svg'
import ideal from '@/static/image/body-type/ideal.svg'
import obese from '@/static/image/body-type/obese.svg'
import overWeight from '@/static/image/body-type/overweight.svg'
import thin from '@/static/image/body-type/thin.svg'
import underWeight from '@/static/image/body-type/underweight.svg'
import veryThin from '@/static/image/body-type/very-thin.svg'
import avatar from '@/static/image/pet-parameters/avatar.png'
import ToolApi from '@/utils'

interface StepInfo {
  step: number
  title: string
}
const titleName = ref<string>('喂养计算器')
const safeHeight = ToolApi.getSafeHeight()
const stage = ref<number>(0)
const stepInfo = ref<StepInfo[]>([
  { step: 1, title: '身体状态信息' },
  { step: 2, title: '计算喂养计划' },
  { step: 3, title: '完成统计' },
])
const controlFormDisplay = ref({
  display1: true,
  display2: false,
  display3: false,
})
const feedFormQuestions = ref<FeedFormQuestions[]>(
  [
    { title: '猫咪是否活跃?', question: [{ name: '活跃', key: 'isActive', value: true }, { name: '不活跃', key: 'isActive', value: false }], formType: 2 },
    { title: '猫咪是否绝育?', question: [{ name: '绝育', key: 'isSterilization', value: true }, { name: '未绝育', key: 'isSterilization', value: false }], formType: 2 },
    { title: '猫咪是否怀孕?', question: [{ name: '怀孕', key: 'isPregnant', value: true }, { name: '未怀孕', key: 'isPregnant', value: false }], formType: 2 },
    { title: '猫咪是否在哺乳?', question: [{ name: '哺乳中', key: 'isLactation', value: true }, { name: '未哺乳', key: 'isLactation', value: false }], formType: 2 },
    { title: '请选择猫咪的体型', question:
          [{ image: extremelyThin, name: '极度消廋', key: 'bodyType', value: PetBodyType.EXTREMELY_THIN }, { image: veryThin, name: '非常廋', key: 'bodyType', value: PetBodyType.VERY_THIN }, { image: thin, name: '消瘦', key: 'bodyType', value: PetBodyType.THIN }, { image: underWeight, name: '体重偏低', key: 'bodyType', value: PetBodyType.UNDERWEIGHT }, { image: ideal, name: '理想体重', key: 'bodyType', value: PetBodyType.IDEAL }, { image: overWeight, name: '体重偏重', key: 'bodyType', value: PetBodyType.OVERWEIGHT }, { image: obese, name: '肥胖', key: 'bodyType', value: PetBodyType.OBESE }, { image: extremelyObese, name: '极度肥胖', key: 'bodyType', value: PetBodyType.EXTREMELY_OBESE }], formType: 3 },
  ],
)
const userList = ref<UserList>({
  image: avatar,
  username: '子龙',
  type: ['年龄', '品种', '体重'],
})
function reset() {
  stage.value = 0
  controlFormDisplay.value = {
    display1: false,
    display2: false,
    display3: false,
  }
}
function handleReady() {
  reset()
  titleName.value = '喂养问卷'
  controlFormDisplay.value.display3 = true
}
function handleBackFeedStart() {
  reset()
  titleName.value = '喂养计算器'
  controlFormDisplay.value.display1 = true
}
function handleStep(step: number) {
  if (step === 2) {
    handleReady()
    stage.value = 1
    controlFormDisplay.value.display2 = true
  }
  else if (step === 7) {
    handleReady()
    stage.value = 2
    controlFormDisplay.value.display2 = true
  }
}
</script>

<template>
  <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
    <view v-show="controlFormDisplay.display1">
      <FeedStart :step-info="stepInfo" @ready="handleReady" />
    </view>
    <view v-show="controlFormDisplay.display2" class="flex justify-center items-center w-full h-full">
      <FeedStep :list="stepInfo" :stage="stage" />
    </view>
    <view v-show="controlFormDisplay.display3">
      <FeedQuestionnaire :list="feedFormQuestions" :step-info="stepInfo" :user-list="userList" @back="handleBackFeedStart" @step="handleStep" />
    </view>
  </view>
</template>

<style scoped>

</style>