pet-front/otherPages/orderTakingManage/create/index.vue

<template>
	<!-- <div>创建宠物档案</div> -->
	<view class="box">
		<view class="top box-size">
			<view class="title">
				宠物头像
			</view>
			<view class="img">
				<image src="/static/images/ydd/profile.png" mode="" style="width: 157rpx;height: 157rpx;"
					:style="{borderRadius:'100rpx'}"></image>
				<view class="">
					点击更换头像
					<view class="top_item">
						<image src="/static/images/ydd/photograph.png" mode="" style="width: 55rpx;height: 55rpx;"
							:style="{borderRadius:'50rpx'}"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="base-info box-size">
			<view class="information">基本信息(必填)</view>
			<view class="information_">
				<DForm :list="state.list" @submit="handleSubmit" />
			</view>
		</view>
		<view class="base-info box-size">
			<view class="information">其他信息(非必填)</view>
			<view class="information_">
				<DForm :list="nostate.list" @submit="nohandleSubmit" />
			</view>
		</view>
		<view class="bottom box-size level">
			<view class="delet level" :style="{borderRadius:'12rpx'}">
				删除
			</view>
			<view class="save level" :style="{borderRadius:'12rpx'}">
				保存
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		reactive
	} from "vue";
	import DForm from "@/components/dForm/index.vue"

	const state = reactive({
		list: [{
				type: "input",
				label: "昵称 ",
				key: "name",
				placeholder: "请输入宠物名字",
			},
			{
				type: "select",
				label: "类别",
				key: "category",
				placeholder: "请选择",
				options: [{
						name: "猫咪"
					},
					{
						name: "狗狗"
					}
				]
			},
			{
				type: "select",
				label: "性别",
				key: "sex",
				placeholder: "请选择",
				options: [{
						name: "男生"
					},
					{
						name: "女生"
					}
				]
			},
			{
				type: "select",
				label: "品种",
				key: "variety",
				placeholder: "请选择",
				options: [{
						name: "男生"
					},
					{
						name: "女生"
					}
				]
			},
			{
				type: "select",
				label: "体重",
				key: "variety",
				placeholder: "请选择",
				options: [{
						name: "小型(<10KG)"
					},
					{
						name: "中型(10~20KG)"
					},
					{
						name: "大型(20KG以上)"
					}
				]
			}
		]
	})

	const nostate = reactive({
		list: [{
				type: "select",
				label: "生日",
				key: "birthday",
				placeholder: "请选择",
				options: [{
						name: "猫咪"
					},
					{
						name: "狗狗"
					}
				]
			},
			{
				type: "input",
				label: "性格",
				key: "character	",
				placeholder: "请描述",
			},
			{
				type: "select",
				label: "疫苗",
				key: "sex",
				placeholder: "请选择",
				options: [{
						name: "每年都免疫"
					},
					{
						name: "有免疫史"
					},
					{
						name: "未免疫"
					}
				]
			},
			{
				type: "select",
				label: "驱虫",
				key: "variety",
				placeholder: "请选择",
				options: [{
						name: "未驱虫"
					},
					{
						name: "定期驱虫"
					},
					{
						name: "有驱虫史"
					}
				]
			},
			{
				type: "select",
				label: "绝育",
				key: "variety",
				placeholder: "请选择",
				options: [{
						name: "未绝育"
					},
					{
						name: "已绝育"
					}
				]
			},
			{
				type: "select",
				label: "健康",
				key: "variety",
				placeholder: "请选择(多选)",
				options: [{
						name: "小型(<10KG)"
					},
					{
						name: "中型(10~20KG)"
					},
					{
						name: "大型(20KG以上)"
					}
				]
			}
		]
	})

	const handleSubmit = (val) => {
		console.log("获取参数", val)
	}

	const nohandleSubmit = (val) => {
		console.log("获取参数", val)
	}
</script>

<style scoped lang="scss">
	@import"index.css";

	.line1 {
		position: relative;
		margin-bottom: 30rpx;

		&::before {
			position: absolute;
			top: 5rpx;
			left: 0;
			content: "";
			width: 670rpx;
			height: 0.5rpx;
			// background-color: #EFEFEF;
			background-color: red;
		}
	}
</style>