lhyt_shop_applet/XCX-Shop/pages/index/reservationCar.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;" @click="LikeStore">
				<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="storeName"
						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="model"
						disabled="true"
						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: 0.5px 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="date"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 6vw; "
						@focus="TimeFocus" />
				<!-- 	<u-datetime-picker ref="datetimePicker" :formatter="formatter" :show="show" v-model="timeValue" -->
				<!-- 		@confirm="confirm" @cancel="cancel" mode="date"></u-datetime-picker> -->
				<u-picker mode="time" :params="params"  v-model="show" @confirm="confirm" @cancel="cancel"></u-picker>
				</p>
			</view>
			<!-- 备注说明 -->
			<view style="width: 85vw; height: 12vw; display: flex; border-bottom: 0.5px 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="number"
						v-model="text"
						placeholder="请输入备注说明"
						style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 6vw; " />
				</p>
			</view>
			<!-- 图片上传 -->
<!-- 			<view class="picture">
				<view class="front" @click="chooseImageFront">
					<p v-if="frontImg==''? true : false ">
						<image style="width: 7vw; height: 7vw;" src="../../static/xiangji.png"></image>
					</p>
					<p v-if="frontImg==''? true : false " style="font-size: 0.8rem; color: #d4b9c0;">驾驶证正页拍照</p>
						<image  v-if="frontImg!=''? true : false " style="width: 100%; height: 100%;" :src="frontImg"></image>
				</view>
				<view class="opposite" @click="choosePppositeImg">
					<p v-if="oppositeImg==''? true : false ">
						<image style="width: 7vw; height: 7vw;" src="../../static/xiangji.png"></image>
					</p>
					<p v-if="oppositeImg==''? true : false " style="font-size: 0.8rem; color: #d4b9c0;">驾驶证副页拍照</p>
					
						<image  v-if="oppositeImg!=''? true : false " style="width: 100%; height: 100%;" :src="oppositeImg"></image>
				</view>
			</view> -->
			<!-- 协议 -->
			<view class="agreement" v-if="rechargeDetial!=''? true :  false  ">
			<u-checkbox-group>
				<u-checkbox @change="checkboxChange" v-model="checked" label-disabled="true" shape="circle"
					active-color="red">代表您已同意</u-checkbox>
			</u-checkbox-group>
			<p>代表您已同意</p>
				<p style="color: red;">《用户协议》,</p>
				<p style="color: red;">《隐私协议》</p>
			
			</view>
			<!--  提交-->
			<u-toast ref="uToast" />
			<view class="button" @click="submit" >提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				time: '',
				checked: false,
				timeValue: Number(new Date()),
				frontImg:'',
				oppositeImg:'',
				name:'',
				tel:'',
				model:'',
				date:'',
				storeName:'',
				storeId:'',
				text:'',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
			}
		},
		onLoad(option) {
			
			if(option.id){
				this.id=option.id
				this.getBuyCarDetialInfo(option.id)
			}
			if(this.$db.get('tel')){
				this.tel=this.$db.get('tel')
			}
			if(this.$db.get('name')){
				this.name=this.$db.get('name')
			}
		},
		onShow(object) {
			if(object){
				this.storeName=object.name
				this.storeId=object.id
			}
		},
		methods: {
			// 提交
			submit(){
				if(!this.$db.get('token')){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				}
				if(this.checked==true){
					this.$api.postDriveReserve({shop:this.storeId,name:this.name,tel:this.tel,model:this.modelID,date:this.date,notes:this.text},res=>{
						if(res.code==0){
						this.successToast('操作成功')
						setTimeout(function(){
						uni.navigateBack({
							url:1
						})
						},1000)
							
						}else{
							this.errorToast('请填写必填项')
						}
					})
				}else{
					this.errorToast('请勾选协议')
				}
				
			},
			getBuyCarDetialInfo(id){
				this.$api.getBuyCarDetial(id,res=>{
					if(res.code==0){
						this.model=res.data.series_name
						this.modelID=res.data.id
					}
				})
			},
			LikeStore(){
				uni.navigateTo({
					url:'/pages/index/storeList'
				})
			},
			checkboxChange(e) {
				this.checked = e.value
			},
			// 选择图片
			chooseImageFront() {
				let that =this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(e) {
					that.frontImg=e.tempFiles[0].path
						
					}
				})
			},
			choosePppositeImg(){
				let that =this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(e) {
					that.oppositeImg=e.tempFiles[0].path
					}
				})
			},
			successToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'success',
					duration: 1000
				})
			},
			errorToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'error',
					duration: 1000
				})
			},
			TimeFocus() {
				this.show = true
			},
			// 时间
			confirm(e) {
				this.date=e.year+'-'+e.month+'-'+e.day
			},
			cancel() {
				this.show = false
			},
		}
	}
</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>