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

<template>
	<view class="page bg-fff">
		<view class="size-22 color-ffb flex-rowl tip">
			<up-icon class="icon" name="error-circle" color="#FFBF60" size="36rpx"></up-icon>
			<text>完善服务信息和接单状态后，才可以开始接单哦！</text>
		</view>
		<view class="info">
			<view class="title mt24">
				基本资料
			</view>
			<view class="flex-colc">
				<button class="btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<view class="flex-colc">
						<image class="head" :src="form.headImage" mode="widthFix"></image>
						<text class="size-28 color-999 mt10">点击更换头像</text>
					</view>
				</button>
			</view>
			<view class="form">
				<DForm ref="baseInfoRef" :list="state.baseInfoList" @input="handleSubmit"></DForm>
			</view>
		</view>

		<view class="info">
			<view class="title mt24 flex-rowl">
				展示信息
				<text class="size-22 color-ffb fw700">(重要)</text>
			</view>
			<view class="form">
				<DForm ref="displayInfoRef" :list="state.displayInfoList" @input="handleSubmit">
					<!-- 服务记录 -->
					<template v-slot:jilu>
						<view class="flex-rowr" @click="jumpToServeRecord">
							<text>{{ `${0}条` }}</text>
							<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon>
						</view>
					</template>
				</DForm>
			</view>
		</view>

		<view class="info">
			<view class="title mt24 flex-rowl">
				服务资料
			</view>
			<view class="form">
				<DForm ref="serveInfoRef" :list="state.serveInfoList" @input="handleSubmit">
					<!-- 服务宠物类型 -->
					<template v-slot:type>
						<view class="flex-rowr" @click="openTypeSelectPopup">
							<text>{{ typeDesc }}</text>
							<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon>
						</view>
					</template>
					<!-- 增值服务 -->
					<template v-slot:zenz>
						<view class="flex-rowr" @click="openServeSelectPopup">
							<text>{{ serveDesc }}</text>
							<up-icon name="arrow-right" color="#999999" size="32rpx"></up-icon>
						</view>
					</template>
				</DForm>
			</view>
		</view>

		<view class="size-24 color-ffb flex-rowc mt32 pb28">
			伴宠师查看服务酬劳、服务时长等规则
		</view>

		<popupTypeSelect ref="popupTypeSelectRef" v-model="form.type" ></popupTypeSelect>

		<popupServeSelect ref="popupServeSelectRef" v-model="form.serve" :options="serveOptions" ></popupServeSelect>

	</view>
</template>

<script setup>
	import { ref, reactive, computed } from "vue";
	import { onShow } from '@dcloudio/uni-app'
	import { ossUpload } from '@/utils/oss-upload/oss/index.js'

	import DForm from "@/components/dForm/index.vue"
	import popupTypeSelect from "./popupTypeSelect.vue";
	import popupServeSelect from "./popupServeSelect.vue";

	const form = reactive({
		headImage: null,
		type: [],
		serve: [],
	})

	const onChooseAvatar = (res) => {
		ossUpload(res.target.avatarUrl)
		.then(url => {
			form.headImage = url
		})
	}

	const baseInfoRef = ref()
	const displayInfoRef = ref()
	const serveInfoRef = ref()

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

	onShow(() => {
		// todo: fetch data and init data
	})

	const handleSubmit = () => {
		// todo
	}

	const jumpToServeRecord = () => {
		uni.navigateTo({
			url: "/otherPages/authentication/serve/record"
		})
	}

	const popupTypeSelectRef = ref()
	const openTypeSelectPopup = () => {
		popupTypeSelectRef.value.open()
	}
	const typeDesc = computed(() => {
		const typeCodes = form.type
		if (!typeCodes.length) {
			return '请选择'
		}
		
		let descArr = typeCodes.reduce((arr, item) => {
			switch(item) {
				case 'cat':
					arr.push('猫咪')
					break
				case 'dog':
					arr.push('狗狗')
					break
				case 'special-pet':
					arr.push('异宠')
					break
				default:
					break
			}

			return arr
		}, [])

		return descArr.join('、')
	})

	const popupServeSelectRef = ref()
	const serveOptions = reactive([
		{
			title: '陪玩/遛狗',
			desc: '外出遛狗或者陪玩，10mins/次',
			value: 0,
		},
		{
			title: '一天多次',
			desc: '每额外上门一次，收取基础服务费用的80%',
			value: 1,
		},
		{
			title: '护理',
			desc: '清洁宠物耳道、眼部、鼻部以及梳毛，10mins/次',
			value: 2,
		},
		{
			title: '提前熟悉',
			desc: '提前上门熟悉，购买此服务支持免费更换伴宠师1次',
			value: 3,
		},
		{
			title: '清洁',
			desc: '清洗砂盆或其他区域卫生，15mins/次',
			value: 4,
		},
		{
			title: '喂药',
			desc: '将药品喂入宠物口中',
			value: 5,
		},
		{
			title: '上药',
			desc: '将药品放入宠物水粮、或者涂抹在皮肤外表',
			value: 6,
		},
		{
			title: '打针',
			desc: '兽医上门打针，自备药品',
			value: 7,
		},
		{
			title: '在线问诊',
			desc: '在线问诊在职兽医健康问题',
			value: 8,
		},
		{
			title: '线下体察',
			desc: '上门外表体查，给予宠物健康咨询',
			value: 9,
		},
	])
	const openServeSelectPopup = () => {
		popupServeSelectRef.value.open()
	}
	const serveDesc = computed(() => {
		const serveCodes = form.serve
		if (!serveCodes.length) {
			return '请选择'
		}
		
		let descArr = serveCodes.reduce((arr, item) => {
			const desc = serveOptions.find(option => option.value === item)?.title

			arr.push(desc)

			return arr
		}, [])

		return descArr.join('、')
	})

</script>

<style lang="scss" scoped>

	.page {
		padding-top: 16rpx;

		.tip {
			background-color: rgba($color: #FFBF60, $alpha: 0.16);
			padding: 13rpx 22rpx;
			margin: 0 28rpx 37rpx 28rpx;

			.icon {
				margin-right: 15rpx;
			}
		}
	}

	.info {

		& + & {
			margin-top: 50rpx;
		}

	}
	
	.head {
		width: 165rpx;
    height: auto;	
		margin-top: 28rpx;
	}

	.btn-avatar {
		border: none;
		padding: 0;
	}

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

		&:before {
			display: inline-block;
			content: "";
			width: 10rpx;
			border-radius: 5rpx;
			height: 33rpx;
			background-color: #FFBF60;
			margin-right: 7rpx;
		}
	}

	.form {
		padding: 0 22rpx;

		:deep(.form-item){
			padding-left: 24rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
		}
	}
</style>