frontend-uniapp/src/pages/start-filing/index.vue

<script setup lang="ts">
import FeedFlogan from '@/pages/feed-calculator/components/FeedFlogan.vue'
import right from '@/static/image/pet-parameters/right.png'
import edit from '@/static/image/start-filing/edit.png'
import ToolApi from '@/utils'

interface RecordList {
  title: string
  options: string[]
  aimIndex: number
}

const titleName = ref<string>('开始建档')
const safeHeight = ToolApi.getSafeHeight()
const recordList = ref<RecordList[]>([
  { title: '宠物名字', options: ['子龙'], aimIndex: 0 },
  { title: '品种', options: ['好猫'], aimIndex: 0 },
  { title: '性别', options: ['男孩'], aimIndex: 0 },
  { title: '出生日期', options: ['2月2日'], aimIndex: 0 },
  { title: '体重', options: ['2kg'], aimIndex: 0 },
])
const feedFloganBottom = ref<number>(13)
function handleAimChange(e: CustomEvent, index: number) {
  recordList.value[index].aimIndex = e.detail.value
}
function handleNext() {
  uni.navigateTo({ url: '/pages/feed-calculator/index' })
}
</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-[80px] h-[80px] rounded-full bg-[#D9D9D9] relative mt-[88px] mx-auto">
      <view class="absolute right-1 bottom-1 w-[18px] h-[18px] bg-[#0052D9] rounded-full flex items-center justify-center">
        <image :src="edit" class="w-[10px] h-[10px]" />
      </view>
    </view>
    <view v-for="(item, index) in recordList" :key="index" :style="{ marginTop: index === 0 ? '28px' : index === 1 ? '16px' : '', borderRadius: index === 0 ? '12px' : index === 1 ? '12px 12px 0 0' : index === recordList.length - 1 ? '0 0 12px 12px' : '0px' }" class="w-[calc(100% - 32px)] mx-[16px] h-[56px] bg-[white] flex items-center card_border_bottom p-4 justify-between">
      <view class="whitespace-nowrap">
        {{ item.title }}
      </view>

      <view class="flex justify-center items-center">
        <picker :value="item.aimIndex" :range="item.options" @change="handleAimChange($event, index)">
          <view class="uni-input">
            {{ item.options[item.aimIndex] }}
          </view>
        </picker>
        <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-[58px]" @tap="handleNext">
        下一题
      </button>
    </view>
    <FeedFlogan :bottom="feedFloganBottom" />
  </view>
</template>

<style scoped>

</style>