pet-front/otherPages/authentication/serve/index.vue

<template>
	<view class="box bg-fff">
		<view class="size-22 color-ffb tip">
			❗完善服务信息和接单状态后，才可以开始接单哦！
		</view>
		<view class="title mt24">
			基本资料
		</view>
		<view class="flex-colc">
			<image class="head" src="@/static/images/ydd/img.png" mode="widthFix"></image>
			<text class="size-28 color-999 mt10">点击更换头像</text>
		</view>
		<DForm :list="state.list" @submit="handleSubmit"></DForm>

		<view class="title mt24 flex-rowl">
			展示信息
			<text class="size-22 color-ffb fw700">(重要)</text>
		</view>
		<DForm :list="state.list1" @submit="handleSubmit"></DForm>

		<view class="title mt24 flex-rowl">
			服务资料
		</view>
		<DForm :list="state.list2" @submit="handleSubmit"></DForm>
	</view>
	<view class="size-24 color-ffb flex-rowc mt32 pb28">
		伴宠师查看服务酬劳、服务时长等规则
	</view>
</template>

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


	const state = reactive({
		list2: [{
				type: "select",
				label: "服务宠物类型",
				key: "type",
				placeholder: "请选择",
				options: [{
						name: "大兴区"
					},
					{
						name: "小型犬"
					}
				]
			},
			{
				type: "input",
				label: "基础服务",
				unit: "年",
				key: "base",
				placeholder: "宠物喂养上门遛狗",
			},
			{
				type: "select",
				label: "增值服务",
				key: "zenz",
				placeholder: "请选择",
				options: [{
						name: "男"
					},
					{
						name: "女"
					}
				]
			}
		],
		list1: [{
				type: "input",
				label: "个人简介",
				key: "jianjie",
				placeholder: "请输入",
			},
			{
				type: "input",
				label: "养宠经验",
				unit: "年",
				key: "jingyan",
				placeholder: "请输入",
			},
			{
				type: "select",
				label: "服务记录",
				key: "jilu",
				placeholder: "请选择",
				options: [{
						name: "男"
					},
					{
						name: "女"
					}
				]
			}
		],
		list: [{
				type: "input",
				label: "昵称",
				key: "name",
				placeholder: "请输入",
			},
			{
				type: "input",
				label: "手机号",
				key: "idCard",
				placeholder: "请输入",
			},
			{
				type: "select",
				label: "性别",
				key: "sex",
				placeholder: "请选择",
				options: [{
						name: "男"
					},
					{
						name: "女"
					}
				]
			}
		]
	})
	const handleSubmit = () => {}
</script>

<style lang="scss" scoped>
	.head {
		width: 165rpx;
		margin-top: 28rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 700;
		display: flex;
		align-items: center;

		&:before {
			display: block;
			content: "";
			width: 10rpx;
			border-radius: 10rpx;
			height: 34rpx;
			background-color: #FFBF60;
			margin-right: 15rpx;
		}
	}

	.box {
		padding: 24rpx 36rpx;

		.tip {
			background-color: rgb(255, 245, 229);
			padding: 15rpx;
		}
	}
</style>