|
|
@@ -0,0 +1,65 @@
|
|
|
+<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>
|
