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

<template>
	<view class="containers po-r">
		<image src="" mode="" class="mainBg"></image>
		
		<view class="w-100 po-a content">
			<view class="flex-rowl">
				<image src="@/static/images/ydd/logo.png" mode="" class="logo"></image>
				<view class="size-36 fw700 color-fff">
					伴宠师认证
				</view>
			</view>
			<view class="renz flex-rowl mt10">
				<text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text>
				<image src="@/static/images/ydd/more.png" mode=""></image>
			</view>
			<view class="neir bg-fff mt24">
				<view class="steps flex-between">
					<view class="step flex-colc">
						<view class="num mb6 flex-rowc size-26 color-fff">
							1
						</view>
						<text class="size-22">基本考核</text>
					</view>
					<view class="line"></view>
					<view class="step flex-colc">
						<view class="num mb6 flex-rowc size-26 color-fff">
							2
						</view>
						<text class="size-22">培训考核</text>
					</view>
					<view class="line"></view>
					<view class="step flex-colc">
						<view class="num mb6 flex-rowc size-26 color-fff">
							3
						</view>
						<text class="size-22">最终准备</text>
					</view>
				</view>
				<view class="color-ffb size-22 mt32">
					为保证喂养员认证顺利进行，请认真填写并确保信息的真实性
				</view>
			</view>

			<view class="bg-fff mt22 form ">
				<view class="title fw700 size-30 flex-rowl">
					基本信息
				</view>
				<dForm ref="formRef" :list="state.list" labelWidth="220rpx" :isFooter="false" @input="onFormInput"></dForm>
			</view>
			
			<view class="license__view" v-if="form.license">
				<view class="license">
					<up-checkbox-group 
						v-model="licenseData.selected" 
						shape="circle"
						activeColor="#FFBF60"
						labelColor="#000000"
						labelSize="26rpx"
					>
						<view class="license-options">
							<up-checkbox
								v-for="item in LICENSE_OPTIONS"
								:key="`license-${item.value}`"
								:label="item.label"
								:name="item.value"
							>
							</up-checkbox>
						</view>
					</up-checkbox-group>
					<view class="tips">
						温馨提示：上传专业执照将大大增加通过概率，且会快速晋升为高级伴宠师获取更高报酬
					</view>
					<up-upload
						:fileList="licenseData.fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						multiple
					>
						<image src="../static/list/icon-upload.png" style="width: 144rpx;height: 144rpx;"></image>
					</up-upload>
				</view>							
			</view>

			<view class="bg-fff mt22 form bt120">
				<view class="title fw700 size-30 flex-rowl">
					个人宠物类型
				</view>
				<view class="flex-between wrap mt32">

					<view class="type">
						<image src="../static/list/cat.png" mode="widthFix" @click="onSelectPet('cat')"></image>
						<image class="active" v-if="petType === 'cat'" src="../static/list/cat-active.png" mode="widthFix"></image>
					</view>

					
					<view class="type">
						<image src="../static/list/dog.png" mode="widthFix" @click="onSelectPet('dog')"></image>
						<image class="active" v-if="petType === 'dog'" src="../static/list/dog-active.png" mode="widthFix"></image>
					</view>

					
					<view class="type">
						<image src="../static/list/special-pet.png" mode="widthFix" @click="onSelectPet('special-pet')"></image>
						<image class="active" v-if="petType === 'special-pet'" src="../static/list/special-pet-active.png" mode="widthFix"></image>
					</view>

				</view>
			</view>

			<view class="footer-btn" @click="toNext">
				<view class="btn">
					下一步
				</view>
			</view>
		</view>

	</view>
</template>

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

	const state = reactive({
		list: [{
				type: "input",
				label: "姓名",
				key: "name",
				placeholder: "请输入您的真实姓名",
			},
			{
				type: "input",
				label: "身份证号",
				key: "idCard",
				placeholder: "请输入您的真实身份证号",
			},
			{
				type: "radio",
				label: "性别",
				key: "sex",
				options: [{
						name: "男",
						value: 0,
					},
					{
						name: "女",
						value: 1,
					}
				]
			},
			{
				type: "input",
				label: "年龄",
				key: "gender",
				placeholder: "请输入您的年龄",
			},
			{
				type: "input",
				label: "养宠经验",
				key: "shij",
				placeholder: "请输入您的养宠年限",
				unit: "年"
			},
			{
				type: "radio",
				label: "是否有专业执照",
				key: "license",
				placeholder: "请选择",
				options: [{
					name: "是",
					value: 1,
				}, {
					name: "没有",
					value: 0,
				}]
			},
		]
	})

	const formRef = ref()
	const form = ref({})
	const onFormInput = (e) => {
		form.value = e
	}

	const licenseData = reactive({
		selected: [],
		fileList: []
	})
	const LICENSE_OPTIONS = [
		{
			label: '兽医职称专业执照',
			value: 0,
		},
		{
			label: '宠物美容洗护专业执照',
			value: 1,
		},
		{
			label: '宠物康复护理专业执照',
			value: 2,
		},
		{
			label: '宠物膳食管理专业执照',
			value: 3,
		},
		{
			label: '其他专业执照',
			value: 4,
		},
	]
	const afterRead = () => {
		// todo
	}
	const deletePic = (event) => {
		licenseData.fileList.splice(event.index, 1);
	};

	const petType = ref()
	const onSelectPet = (type) => {
		petType.value = type
	}

	const toNext = () => {
		// todo: save data

		const data = {
			...form.value,
			...licenseData,
			petType: petType.value,
		}

		console.log('--data', data)

		uni.navigateTo({
			url: "/otherPages/authentication/examination/start"
		})
	}
</script>

<style lang="scss" scoped>
	.bt120 {
		margin-bottom: 120rpx;
		width: 716rpx;
		box-sizing: border-box;
	}

	.footer-btn {
		width: 100vw;
		height: 144rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		align-items: center;

		.btn {
			font-size: 30rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 574rpx;
			height: 94rpx;
			border-radius: 94rpx;
			background-color: #FFBF60;
		}
	}

	.type {
		width: 190rpx;
		margin-bottom: 74rpx;
		position: relative;

		image {
			width: 100%;
		}

		.active {
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.form {
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		width: 716rpx;
	}

	.title {
		&::before {
			content: "";
			display: block;
			width: 9rpx;
			height: 33rpx;
			background-color: #FFBF60;
			margin-right: 7rpx;
		}
	}

	.mb6 {
		margin-bottom: 6rpx;
	}

	.containers {
		.neir {
			padding: 47rpx 27rpx 36rpx 27rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			width: 716rpx;

			.steps {
				.line {
					width: 163rpx;
					height: 3rpx;
					background-color: #BDBDBD;
					margin-bottom: 30rpx;
				}

				.num {
					width: 50rpx;
					height: 50rpx;
					background-color: #FFBF60;
					border-radius: 50%;
				}

			}
		}


		.mainBg {
			width: 100vw;
			height: 442rpx;
			background-image: linear-gradient(to bottom, #FFBF60, #f5f5f5);
		}

		.content {
			top: 0;
			left: 0;
			padding: 16rpx;

			.logo {
				width: 194rpx;
				height: 70rpx;
			}

			.renz {

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}
		}
	}

	.license__view {
		width: 716rpx;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.license {
			width: 100%;
			padding: 13rpx 16rpx;
			box-sizing: border-box;
			background-color: #FFFCF1;

			&-options {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
			}
		}

		.tips {
			margin: 22rpx 0 24rpx 0;
			color: #FFBF60;
			font-size: 22rpx;
			width: 100%;
			word-break: break-all;
		}
	}
</style>