frontend-uniapp/src/pages/feed-questionnaire/components/FeedForm.vue

<script setup lang="ts">
import type { PetCard } from '@/model/pet-manual'

const props = withDefaults(defineProps<{
  title: string
  formType: number
  answerList: PetCard[]
}>(), {
  title: '',
  formType: 1,
})
const emits = defineEmits<{
  next: [PetCard]
}>()
function handleChooseAnswer(answer: PetCard) {
  emits('next', answer)
}
</script>

<template>
  <view class="w-full flex justify-center items-center text-[20px] font-bold" :style="{ marginTop: formType === 3 ? '29px' : '69px' }">
    {{ props.title }}
  </view>
  <view v-if="formType === 1" class="flex w-full justify-center items-center mt-[37px] gap-3">
    <view v-for="(item, index) in props.answerList" :key="index" class="w-[136px] h-[154px] bg-[white] rounded-lg flex flex-col items-center " @click="handleChooseAnswer(item)">
      <image v-if="index === 0" :src="item?.image" class="w-[76px] h-[69px] mt-[40px]" />
      <image v-else :src="item?.image" class="w-[96px] h-[73px] mt-[35px]" />
      <text class="mt-3">
        {{ item.name }}
      </text>
    </view>
  </view>
  <view v-if="formType === 2" class="flex flex-col w-full justify-center items-center mt-[37px] gap-4">
    <view v-for="(item, index) in props.answerList" :key="index" class="w-[200px] h-[56px] bg-[white] rounded-3 flex items-center justify-center" @click="handleChooseAnswer(item)">
      {{ item.name }}
    </view>
  </view>
  <view v-if="formType === 3" class="flex flex-wrap w-full justify-center items-center mt-[39px] gap-2.5">
    <view v-for="(item, index) in answerList" :key="index" class="w-[143px] h-[134px] bg-[white] rounded-5 flex flex-col items-center text-[12px]" @click="handleChooseAnswer(item)">
      <image :src="item.image" class="w-[101px] h-[76px] mt-[21px]" />
      <text class="mt-[13px]">
        {{ item.name }}
      </text>
    </view>
  </view>
</template>

<style scoped>

</style>