notarization_applet/pagesHome/sell/index.vue

<template>
	<view class="content">
		<view class="info">
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="list-scroll-view">
					<view class="one">
						<view class="text">
							免费估值 精准报价
						</view>
					</view>
					<view class="two">
						<view class="text">为爱车估值</view>
						<view class="two_1" @tap="toSelect" v-if="!form.brand&&!form.brand?.title">
							<u-icon name="plus-circle-fill" size="20" color="#ffbc00"></u-icon>
							<text>请选择车辆品牌</text>
						</view>
						<view class="two_2" @tap="toSelect" v-else>
							<image class="image"
								:src="form.brand?.url&&form.brand?.url.length>0?form.brand?.url[0].url:'/static/logo.png'">
							</image>
							<view class="title">{{form.brand?.title}}</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<u--form class="form" :model="form" ref="uForm" :rules="rules" labelWidth="65"
							:border-bottom="true">
							<u-form-item label="车辆车系" prop="bank">
								<input class="input" v-model="form.bank" placeholder="填写车辆车系" />
								<template #right>
									<u-icon name="arrow-right"></u-icon>
								</template>
							</u-form-item>
							<u-form-item label="车辆车型" prop="type">
								<input class="input" v-model="form.type" placeholder="填写车辆车型" />
								<template #right>
									<u-icon name="arrow-right"></u-icon>
								</template>
							</u-form-item>
							<u-form-item label="上牌日期" prop="start">
								<picker name="date" @change="dateChange" mode="date">
									<view class="picker">{{form.start||'请选择'}}</view>
								</picker>
								<template #right>
									<u-icon name="arrow-right"></u-icon>
								</template>
							</u-form-item>
							<u-form-item label="行驶里程" prop="course">
								<picker name="course" @change="courseChange" :value="index" :range="courseList"
									range-key="label">
									<view class="picker">{{form.course||'请选择'}}</view>
								</picker>
								<template #right>
									<u-icon name="arrow-right"></u-icon>
								</template>
							</u-form-item>
							<u-form-item label="上牌城市" prop="city">
								<text class="picker" @tap="toCity">{{form.city?.name||'请选择'}}</text>
								<template #right>
									<u-icon name="arrow-right"></u-icon>
								</template>
							</u-form-item>
							<u-form-item label="估值地区" prop="place">
								<text class="picker" @tap="toCity">{{form.place?.name||'请选择'}}</text>
								<template #right>
									<u-icon name="arrow-right"></u-icon>
								</template>
							</u-form-item>
							<u-form-item label="联系人" prop="contacts">
								<input class="input" v-model="form.contacts" placeholder="填写联系人" />
							</u-form-item>
							<u-form-item label="联系电话" prop="tel">
								<input class="input" v-model="form.tel" placeholder="填写常用手机号" />
							</u-form-item>
						</u--form>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="foot">
			<view class="foot_1">
				<button class="btn" @click="toEvaluate">免费估价</button>
			</view>
			<view class="foot_2">
				<checkbox-group @change="changeAgree">
					<label>
						<checkbox color="#ffbc00" style="transform:scale(0.7)" :checked="agree" />
						<text @tap.stop="toAgree">已阅读并同意 《个人信息保护声明》，提交后将会有1-3家服务商为您提供报价服务</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad, onShow } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	// 基本信息
	const config = ref({});
	// 用户协议
	const agree = ref(false);
	// 用户信息
	const user = ref({});
	const form = ref({ phone: "" });
	const rules = ref({
		phone: [
			{
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			}
		]
	});
	// 字典表
	const courseList = ref([{ value: '1', label: '1万公里' }, { value: '2', label: '2万公里' }, { value: '3', label: '3万公里' }, { value: '4', label: '4万公里' }, { value: '5', label: '5万公里' }]);
	onLoad(async () => {
		await searchConfig();
	})
	onShow(() => {
		uni.$on('toRoute', function (data) {
			form.value.brand = data
		})
		uni.$on('toCity', function (data) {
			form.value.city = data
		})
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 上牌日期
	const dateChange = (e) => {
		form.value.start = e.target.value;
	};
	// 行驶里程
	const courseChange = (e) => {
		const data = courseList.value[e.detail.value]
		if (data) form.value.course = data.label
	};
	// 选择上牌城市
	const toCity = () => {
		uni.navigateTo({
			url: `/pagesHome/city/index`,
		})
	};
	// 选择估值城市
	const toPlace = () => {
		uni.navigateTo({
			url: `/pagesHome/city/index`,
		})
	};
	// 选择品牌
	const toSelect = () => {
		uni.navigateTo({
			url: `/pagesHome/brand/index`,
		})
	};
	// 估价
	const toEvaluate = async () => {
		if (agree.value) {
			$refs.form.validate().then(res => {
				uni.$u.toast('校验通过')
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		} else {
			uni.showToast({
				title: '请阅读并同意用户协议和隐私政策',
				icon: 'none'
			})
		}
	};
	// 查看隐私协议
	const toAgree = () => {
		uni.navigateTo({
			url: `/pagesHome/agree/index`
		})
	};
	// 同意隐私协议
	const changeAgree = () => {
		agree.value = !agree.value;
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.info {
			position: relative;
			flex-grow: 1;
			background-color: var(--f1Color);

			.one {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 25vh;
				background: linear-gradient(to bottom, #ffbc00, #f1f1f1);

				.text {
					background-image: -webkit-linear-gradient(left, #000, #ffbc00 10%, #ffbc00 20%, #ffbc00 30%, #ffbc00 40%, #ffbc00 50%, #ffbc00 60%, #ffbc00 70%, #ffbc00 80%, #ffbc00 90%, #000 100%);
					-webkit-text-fill-color: transparent;
					-webkit-background-clip: text;
					-webkit-background-size: 200% 100%;
					-webkit-animation: masked-animation 4s linear infinite;
					font-size: 30px;
					font-weight: bold;
				}

				@keyframes masked-animation {
					0% {
						background-position: 0 0;
					}

					100% {
						background-position: -100% 0;
					}
				}
			}

			.two {
				background-color: var(--mainColor);
				margin: 0 3vw 2vw 3vw;
				padding: 2vw;
				border-radius: 10px;

				.text {
					font-size: var(--font16Size);
					font-weight: bold;
					padding: 2vw;
				}

				.two_1 {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: var(--f1Color);
					padding: 6vw 2vw;

					text {
						font-size: var(--font16Size);
						margin: 0 0 0 1vw;
					}
				}

				.two_2 {
					display: flex;
					align-items: center;
					color: #323233;
					padding: 2vw 0;
					font-size: var(--font16Size);
					border-bottom: 1px solid var(--f5Color);

					.image {
						width: 60px;
						height: 60px;
						border-radius: 60px;
					}

					.title {
						width: 75%;
						margin: 0 0 0 2vw;
					}
				}

				.form {
					.picker {
						padding: 2vw;
					}

					.input {
						padding: 2vw;
					}
				}
			}
		}

		.foot {
			padding: 2vw;

			.foot_1 {
				.btn {
					background-color: var(--fFFColor);
					font-size: var(--font16Size);
				}
			}

			.foot_2 {
				font-size: var(--font12Size);
				color: var(--f85Color);
				margin: 1vw;
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>