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="fetchUpdate"></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="fetchUpdate">
					<!-- 服务记录 -->
					<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="fetchUpdate">
					<!-- 服务宠物类型 -->
					<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" @confirm="fetchUpdate" ></popupTypeSelect>

		<popupServeSelect ref="popupServeSelectRef" v-model="form.serve" @confirm="fetchUpdate" ></popupServeSelect>

	</view>
</template>

<script setup>
	import { ref, reactive, computed } from "vue";
	import { useStore } from 'vuex'
	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 store = useStore()

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

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

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

			fetchUpdate()
		})
	}

	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: "基础服务",
				key: "base",
				placeholder: "宠物喂养上门遛狗",
			},
			{
				type: "custom",
				label: "增值服务",
				key: "zenz",
				placeholder: "请选择",
			}
		],
	})

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

	const popupTypeSelectRef = ref()
	const openTypeSelectPopup = () => {
		popupTypeSelectRef.value.open()
	}
	const petTypeOptions = computed(() => {
		return store.getters.petTypeOptions
	})
	const typeDesc = computed(() => {
		const typeIds = form.type
		if (!typeIds.length) {
			return '请选择'
		}
		
		let descArr = typeIds.map(typeId => {
			return petTypeOptions.value.find(item => item.id === typeId).title
		})

		return descArr.join('、')
	})

	const popupServeSelectRef = ref()
	const increaseServiceOptions = computed(() => {
		return store.getters.increaseServiceOptions
	})
	const openServeSelectPopup = () => {
		popupServeSelectRef.value.open()
	}
	const serveDesc = computed(() => {
		const serveIds = form.serve
		if (!serveIds.length) {
			return '请选择'
		}
		
		let descArr = serveIds.map(serveId => {
			return increaseServiceOptions.value.find(option => option.id === serveId)?.title
		})

		return descArr.join('、')
	})

	onShow(() => {
    store.dispatch('fetchPetTypeOptions')
    store.dispatch('fetchIncreaseServiceOptions')

		// todo: fetch data and init data

	})

</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>