lhyt_shop_applet/XCX-Shop/pages/userInfo/bindCar.vue

<template>
	<view class="body">
		<view class="content">
			<view class="heade">
				欢迎您光顾，请仔细填写您的车辆信息!
			</view>
			<!-- 姓名 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 1px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">您的姓名</span> <input type="text"
						v-model="name" placeholder="请输入你的姓名"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 6vw; " />
				</p>
			</view>
			<!-- 手机号 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 1px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">手机号码</span> <input type="text"
						placeholder="请输入你的电话" v-model="tel"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 6vw; " />
				</p>
			</view>
			<!-- 手机号 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 1px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">车牌号</span> <input type="text"
						placeholder="请输入你的车牌" v-model="Number"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 9vw; " />
				</p>
			</view>
			<!-- 车型 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 1px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">车型</span> <input type="text"
						placeholder="请输入您的车型" v-model="model"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 12vw; " />
				</p>
			</view>
			<!-- 车架号 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 1px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;"></span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">车架号</span> <input type="text"
						placeholder="请输入您的车架号" v-model="vin"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 9vw; " />
				</p>
			</view>
			<!-- 年检到期时间 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 1px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;"></span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">年检到期</span> <input type="text"
						placeholder="请输入您的年检到期时间" v-model="inspecEndDate" @focus="inspectShow" 
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 6vw; " />
				</p>
			</view>
			<!-- 保险到期时间 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 1px solid #f8f8f8;">
				<p style="display: flex;"><span style="color: red;  line-height: 11vw;"></span> <span
						style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">保险到期</span> <input type="text"
						placeholder="请输入您的保险到期时间" v-model="insureEndDate" @focus="insureShow"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 6vw; " />
				</p>
			</view>
			<!--  提交-->
			<u-picker mode="time" v-model="inspecshows" @confirm="inspecconfirm" @cancel="cancel"></u-picker>
			<u-picker mode="time" v-model="insureshows" @confirm="insureconfirm" @cancel="cancel"></u-picker>
			<u-toast ref="uToast" />
			<view class="button" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inspecshows: false,
				insureshows: false,
				date: '',
				name: '',
				tel: '',
				Number: '',
				model: '',
				vin: '',
				inspecEndDate: null,
				insureEndDate: null
			}
		},
		onLoad() {
			if(this.$db.get('tel')){
				this.tel=this.$db.get('tel')
			}
			if(this.$db.get('name')){
				this.name=this.$db.get('name')
			}
		},
		methods: {
			insureShow() {
				this.insureshows = true
			},
			inspectShow() {
				this.inspecshows = true
			},
			// 时间
			inspecconfirm(e) {
				this.inspecEndDate = e.year + '-' + e.month + '-' + e.day
			},
			insureconfirm(e) {
				this.insureEndDate = e.year + '-' + e.month + '-' + e.day
			},
			cancel() {
				this.show = false
			},
			// 提交
			submit() {
				if (!this.$db.get('token')) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				this.$api.postBindCar({
					name: this.name,
					tel: this.tel,
					number: this.Number,
					model: this.model,
					vin: this.vin,
					inspect_end_date: this.inspecEndDate,
					insure_end_date: this.insureEndDate
				}, res => {
					if (res.code == 0) {
						this.successToast('提交成功')
						this.$nextTick(() => {
							this.name = ''
							this.tel = ''
							this.Number = ''
							this.model = ''
							this.vin = ''
							this.inspecEndDate=null
							this.insureEndDate=null
						})
					} else {
						this.errorToast('请填写必填项')
					}
				})

			},
			successToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'success',
					duration: 1000
				})
			},
			errorToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'error',
					duration: 1000
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100vw;
		height: 100vh;
		background-color: #f8f8f8;
		display: flex;
		justify-content: center;

		.content {
			width: 95vw;
			height: 80vh;
			background-color: white;
			border-radius: 5px;
			padding: 2vw;

			.heade {
				width: 95vw;
				height: 22vw;
				box-sizing: border-box;
				text-align: center;
				padding: 8vw 15vw 5vw 15vw;
				font-size: 0.9rem;
				color: gray;
				border-bottom: 1px solid #f8f8f8;
				;
			}

			.picture {
				width: 95vw;
				height: 14vh;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.front {
					width: 40vw;
					height: 25vw;
					background-color: #f8f8f8;
					border: 1px dashed #d8d8d8;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.opposite {
					width: 40vw;
					height: 25vw;
					background-color: #f8f8f8;
					border: 1px dashed #d8d8d8;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}

			.agreement {
				display: flex;
				font-size: 0.8rem;
				width: 96vw;
				justify-content: center;
				align-items: center;
				height: 10vh;

			}

			.button {
				width: 85vw;
				height: 10vw;
				margin-top: 10vw;
				background-color: red;
				line-height: 10vw;
				border-radius: 5vw;
				color: white;
				text-align: center;
				margin-left: 5vw;
			}
		}
	}
</style>