BD-LDBD-UNI/pages/maintenance/onlineReservation/index.vue

<template>
	<view style="padding-bottom: 200rpx;">
		<Card titles="服务门店" page="maintenance" :data="carShop"></Card>
		<Card titles="预约车辆" :data="cardMsg"></Card>
		<view class="body">
			<view class="classHead">
				<view class="classBorder">

				</view>
				<view class="classTitle">
					服务预约
				</view>
			</view>
			<view class="projectBody" @tap="toPage()">
				<view class="title">
					服务项目
				</view>
				<view :class="projectList.num?'projectTime':'projectNull'">
					{{projectList.num?'已选'+projectList.num+'项':'未选择'}}
				</view>
				<view class="dataRight">
					<image class="classChoose" :src="require('../../../static/choose.png')">
				</view>
			</view>
			<view class="border"></view>
			<!-- 服务项目 -->
			<view class="projectBody">
				<view class="title">
					预约时间
				</view>
				<picker class="projectTime" :value="defaultValues" mode="multiSelector" :range="dateTimeArray"
					@change="change" @columnchange="columnchange">
					<view style="height: 100%;">
						<input style="height: 100%;width: 300rpx;text-align:left" type="text" disabled="true"
							:value="customer.time" placeholder="请选择预约时间" placeholder-class="placeholder" />
					</view>
				</picker>
				<view class="dataRight">
					<image class="classChoose" :src="require('../../../static/choose.png')">
				</view>
			</view>
			<view class="border"></view>
			<!-- 联系人 -->
			<view class="projectBody2">
				<view class="title">
					联 系 人
				</view>
				<input type="text" v-model="customer.contacts" placeholder-class="placeholder" placeholder="请输入联系人">
			</view>
			<view class="border"></view>
			<!-- 联系方式 -->
			<view class="projectBody2">
				<view class="title">
					联系方式
				</view>
				<input type="text" v-model="customer.phone" placeholder-class="placeholder" placeholder="请输入联系方式">
			</view>
			<view class="border"></view>
			<!-- </view> -->
			<!-- 发票 -->
			<view class="projectBody">
				<view class="title">
					需要发票
				</view>
				<radio-group @change="invoiceRadioChange">
					<div class="radioBody">
						<div class="radio">
							<radio style="transform:scale(0.7)" color="#0078FF" :value="1"
								:checked="invoiceRadioType===1" />需要
						</div>
						<div class="radio">
							<radio style="transform:scale(0.7)" color="#0078FF" :value="2"
								:checked="invoiceRadioType===2" />不需要
						</div>
					</div>
				</radio-group>
			</view>
			<!-- 预约备注 -->
			<view class="projectBody">
				<view class="title">
					预约备注
				</view>
				<input type="text" :value="remarks" style="margin-left:18rpx;" placeholder="请输入备注"
					placeholder-class="placeholder" />
			</view>
		</view>

		<button class="onLineBtn" @click="onLine">立即预约</button>
		<view class="annotation">
			点击立即预约即代表同意优1优5的<view class="agreement" @click="toAgreement('维修保养协议')">维修保养协议</view>
		</view>
		<view v-if="showPicker" class="bigMorePicker" @touchmove.stop.prevent="()=>false" @tap="closePicker">
			<view class="morePickerCent" @tap.stop="()=>false">
				<view class="morePickerTitle">
					<view @tap="closePicker" style="color: #333;">取消</view>
					<view @tap="confirmPicker" style="color:#1aa034">确认</view>
				</view>
				<picker-view indicator-style="height: 50px;" :value="defaultValue" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in oneList" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in twoList" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in threeList" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>

			</view>
		</view>
	</view>
</template>

<script>
	import Card from '@/components/Card';
	import {
		getSelectStore,
		getUserCar,
		getRegion
	} from "@/api/shop.js"
	import {
		repairOrderAdd,
		getShopServiceOne
	} from "@/api/maintain.js"
	const dateTimePicker = require('@/utils/dateTimePicker.js')
	const app = getApp();
	export default {
		components: {
			Card
		},
		data() {
			return {
				remarks: "",
				// 时间选择器
				dateTimeArray: null,
				dateTime: null,
				startYear: 2022,
				endYear: 2150,
				defaultValues: [0, 0, 0, 0, 0],
				defaultValue: [0, 0, 0],
				oneList: [],
				twoList: [],
				threeList: [],
				showPicker: false,
				modeRadioType: "0",
				invoiceRadioType: 2,
				projectList: {},
				carShops: [],
				carShops2: [],
				carShop: {
					url: require("../../../static/logo.png"),
					title: "智来汽车装饰厂",
					content: "辽宁省大连市中山区友好路236号",
					location: "8.9km"
				},
				cardMsg: {
					carId: "辽B75684",
					carType: "辽5座轿车",
					url: require("../../../static/logo.png"),
					content: "奥迪a6l 2017款 30 fsi 技术型 fsi 技术型",
				},
				customer: {
					time: "",
					deliveryLocation: "",
					detailLocation: "",
					contacts: "",
					phone: "",

				},
				longitude: app.globalData.longitude,
				latitude: app.globalData.latitude,
				provCode: "",
				cityCode: "",
				areaCode: "",
				arr: "",
				token: '',
				pageType: '',
				btnStatus: false
			}
		},
		watch: {
			carShop() {
				let params = {
					shopId: this.carShop.id,
					type: 1,
					shopSeviceTwoId: []
				}
				console.log(params);
				let chooseList = this.projectList.chooseList
				console.log(chooseList);
				for (let item in chooseList) {
					params.shopSeviceTwoId.push(chooseList[item].id)
					console.log(params.shopSeviceTwoId);
				}
				let status = ''
				getShopServiceOne(params).then((res) => {
					console.log('店铺下服务===......7777777777777>', res);
				}).catch(err => {
					if (err) {
						this.projectList.num = 0
						this.projectList.chooseList = []
					}
				})
			}
		},
		onLoad: async function(option) { //option为object类型，会序列化上个页面传递的参数
			const value1 = uni.getStorageSync('shopData');
			if (value1) {
				console.log(value1);
			}
			this.carShop = value1
			console.log('1', this.carShop);
			console.log(option);
			if (option.page !== "index") {
				app.globalData.requestToken = option.token;
				uni.setStorageSync('token', option.token)
			}
			this.pageType = option.type
			let that = this;
			this.token = uni.getStorageSync('token')
			if (option.data) {
				that.projectList = JSON.parse(option.data);
			}
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let hour = date.getHours();
			let minute = date.getMinutes();
			if (month < 10) {
				month = "0" + month;
			}
			if (day < 10) {
				day = "0" + day;
			}
			if (hour < 10) {
				hour = "0" + hour;
			}
			if (minute < 10) {
				minute = "0" + minute;
			}
			this.defaultValues = [0, parseInt(month) - 1, parseInt(day), parseInt(hour), parseInt(minute)]
			this.arr = year + '/' + month + '/' + day + ' ' + hour + ':' + minute
			let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear, this.arr)
			this.dateTimeArray = obj.dateTimeArray
			this.dateTime = obj.dateTime
			let shop = uni.getStorageSync('chooseShop')
			console.log(this.carShop);
			console.log(shop, 'shoopssssssssssssss');
			if (shop) {
				this.carShop = shop
			} else {
				await getSelectStore({
					pageNo: 1,
					pageSize: 20,
					type: 2,
					isRepair: 1,
					longitude: that.longitude,
					latitude: that.latitude
				}).then(res => {
					that.carShops = res.data.rows;
					console.log(res.data.rows[0]);
					that.carShops[0] = that.carShop;
					console.log(that.carShops[0]);
					let carShop1 = uni.getStorageSync('shopData')
					console.log(carShop1);
					if (carShop1 == "") {
						console.log(1);
						this.carShops2 = res.data.rows
						console.log(this.carShops2[1]);
						this.carShop = this.carShops2[1]
					}
					console.log(this.carShops2[1]);
					// console.log(this.carShop[0]);
					if (option.type === 'maintenance') {

					} else {
						uni.removeStorageSync('shopData')
					}
				})
				uni.$on('chooseShop', function(data) {
					that.carShop = data;
				})
			}
			await getUserCar().then(res => {
				console.log(res, 'getUserCar');
				that.cardMsg = res.data;
				let data = uni.getStorageSync('chooseCar')
				if (data) {
					console.log(data, 'car');
					that.cardMsg = data
				}
			})
			await getRegion().then(res => {
				that.oneList = res.data;
			})
			await getRegion({
				parentId: 110000
			}).then(res => {
				that.twoList = res.data;
			})
			await getRegion({
				parentId: 110100
			}).then(res => {
				that.threeList = res.data;
			})

		},
		onUnload() {
			uni.clearStorageSync('shopData')
		},
		onBackPress(e) {
			if (!this.pageType) {
				uni.navigateTo({
					url: "/pages/maintenance/index?token=" + this.token
				})
				return true
			}
		},
		onShow: function() { //option为object类型，会序列化上个页面传递的参数
			let that = this;
			/* uni.$on('chooseShop', function(data) {
				console.log('getCarShop',data);
				this.carShop = data
			}) */
			let shop = uni.getStorageSync('chooseShop')
			console.log(shop, 'shoopssssssssssssss');
			if (shop) {
				this.carShop = shop
			}
			// uni.$on('chooseNum', function(data) {
			// 	that.projectList = data;
			// })
			/* uni.$on('chooseCar', function(data) {
				that.cardMsg = data;
			}) */

			let data = uni.getStorageSync('chooseCar')
			if (data) {
				console.log(data, 'car');
				that.cardMsg = data
			}
		},
		methods: {
			toAgreement(title) {
				uni.navigateTo({
					url: '/pages/maintenance/agreement/agreement?title=' + title + '&identifies=maintenance'
				})
			},
			onLine() {
				console.log('店铺信息=>', this.carShop);
				if (this.projectList.num === 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择店铺服务'
					})
					return;
				}
				let serviceId = [];
				for (let index in this.projectList.chooseList) {
					let obj = {
						upsId: '',
						twoId: '',
						type: '',
						typeId: ''
					}
					console.log(this.projectList.chooseList);
					console.log(this.projectList.chooseList[index].typeId);
					console.log(this.projectList.chooseList[index].type);
					obj.typeId = this.projectList.chooseList[index].typeId,
						obj.type = this.projectList.chooseList[index].type,
						obj.upsId = this.projectList.chooseList[index].upsId
					serviceId.push(obj)
					console.log(serviceId);
					// if (this.projectList.chooseList[index].upsId) {
					// 	obj.upsId = this.projectList.chooseList[index].upsId,
					// 		obj.twoId = this.projectList.chooseList[index].id,
					// 		obj.type = this.projectList.chooseList[index].type
					// 	console.log(obj);
					// 	serviceId.push(obj)
					// } else {
					// 	obj.upsId = null,
					// 		obj.twoId = this.projectList.chooseList[index].id
					// 	obj.type = this.projectList.chooseList[index].type
					// 	console.log(obj);
					// 	serviceId.push(obj)
					// }
				}
				/* for (let index in this.projectList.chooseList) {
					if (serviceId == "") {
						serviceId = this.projectList.chooseList[index].id
					} else {
						serviceId = serviceId + "," + this.projectList.chooseList[index].id
					}

				}
				/* const data = {
					shopId: this.carShop.id,
					carId: this.cardMsg.id,
					shopServiceIds: serviceId,
					serviceType: this.modeRadioType,
					appoinTime: new Date(this.customer.time).getTime().toFixed(),
					provCode: this.modeRadioType == 2 ? this.provCode : "",
					cityCode: this.modeRadioType == 2 ? this.cityCode : "",
					areaCode: this.modeRadioType == 2 ? this.areaCode : "",
					addressDetail: this.modeRadioType == 2 ? this.customer.deliveryLocation : "",
					contacts: this.modeRadioType == 2 ? this.customer.contacts : "aaa",
					contactsPhone: this.modeRadioType == 2 ? this.customer.phone : "13478431332",
					isInvoice: this.invoiceRadioType,
					remarks: this.remarks
				} */
				if (!this.customer.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系方式'
					})
					return;
				}
				if (!this.customer.time) {
					uni.showToast({
						icon: 'none',
						title: '请选择预约时间'
					})
					return;
				}
				if (!this.customer.contacts) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人'
					})
					return;
				}
				if (!this.customer.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系方式'
					})
					return;
				}
				console.log(this.btnStatus, 'btnStatus');
				if (this.btnStatus) return;
				this.btnStatus = true
				uni.showLoading({
					title: '加载中'
				})
				const data = {
					shopId: this.carShop.id,
					carId: this.cardMsg.id,
					// shopServiceIds: serviceId,
					serviceType: 1,
					reserveTime: new Date(this.customer.time).getTime().toFixed(),
					provCode: this.provCode,
					cityCode: this.cityCode,
					areaCode: this.areaCode,
					addressDetail: this.customer.deliveryLocation,
					contacts: this.customer.contacts,
					contactsPhone: this.customer.phone,
					isInvoice: this.invoiceRadioType,
					remarks: this.remarks,
					serviceIds: serviceId
				}
				console.log('维保订单预约参数=>', data);
				if (data.carId == null) {
					uni.showToast({
						icon: 'none',
						title: '请先添加车辆'
					})
				} else {
					repairOrderAdd(data).then((res) => {
						// uni.hideToast()
						if (res.code == "00000") {
							uni.showToast({
								title: '预约成功',
								icon: 'none',
								duration: 2000
							});
							setTimeout(function() {
								uni.removeStorageSync('shopData')
								uni.navigateBack({})
							}, 2000);
						}
					})
				}


			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			change(e) {
				let value = []
				e.detail.value.forEach((val, index) => {
					value.push(this.dateTimeArray[index][val])
				})
				let dateArray = value[0] + "/" + value[1] + "/" + value[2] + " " + value[3] + ":" + value[4]
				this.customer.time = dateArray
			},
			columnchange(e) {
				let dateArr = this.dateTimeArray
				let arr = this.dateTime
				//滑动所在列的数据并对其值进行更新
				arr[e.detail.column] = e.detail.value
				//更新展示月份对应的天数（28 or 29 or 30 or 31）
				dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])
				//最后把最新的数值赋值到dateTimeArray
				this.dateTimeArray = dateArr
				this.dateTime = arr
			},
			showPickerChange() {
				this.showPicker = true;
			},
			//变化
			async bindChange(e) {
				let that = this;
				await getRegion({
					parentId: this.oneList[e.detail.value[0]].id
				}).then(async res => {
					that.twoList = res.data;
					await getRegion({
						parentId: that.twoList[e.detail.value[1]].id
					}).then(res => {
						that.threeList = res.data;
					})
				})
				this.defaultValue = e.detail.value;
				console.log(e)
			},
			//取消
			closePicker() {
				this.showPicker = false;
				this.defaultValue = [0, 0, 0];
			},
			//确认
			confirmPicker() {
				this.customer.deliveryLocation = "";
				this.customer.deliveryLocation = this.oneList[this.defaultValue[0]].name + this.twoList[this.defaultValue[
					1]].name + this.threeList[this.defaultValue[2]].name;
				this.showPicker = false;
				this.provCode = this.oneList[this.defaultValue[0]].id;
				this.cityCode = this.twoList[this.defaultValue[1]].id;
				this.areaCode = this.threeList[this.defaultValue[2]].id;
			},
			modeRadioChange(e) {
				this.modeRadioType = 2
			},
			invoiceRadioChange(e) {
				this.invoiceRadioType = e.detail.value
			},
			toPage() {
				this.$yrouter.push({
					path: "/pages/maintenance/servicesAvailable/index?shopId=" + this.carShop.id +
						"&projectList=" + JSON.stringify(this.projectList) + '&type=main'
				});
				console.log('2', this.carShop);
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.projectTime {
		max-width: 238rpx;
		height: 100%;
		display: flex;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 100rpx;
		padding-left: 28rpx;
	}

	.projectNull {
		min-width: 238rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #A9A9A9;
		line-height: 100rpx;
		padding-left: 28rpx;
	}

	.bigMorePicker {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99;
	}

	.morePickerCent {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;

	}

	.morePickerTitle {
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		border-bottom: #eee 2rpx solid;
	}

	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		line-height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.body {
		width: 94%;
		margin-left: 3%;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 28rpx;
		margin-bottom: 28rpx;

		.classHead {
			display: flex;
			padding-top: 28rpx;
			width: 100%;
			height: 28rpx;

			.classBorder {
				width: 5rpx;
				height: 28rpx;
				background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
				border-radius: 3rpx;
			}

			.classTitle {
				height: 25rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				padding-left: 28rpx;
				line-height: 28rpx;
			}
		}

		.projectBody2 {
			width: calc(100% - 60rpx);
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: left;
			padding: 28rpx 30rpx 0;

			.title {
				min-width: 300rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 100rpx;
			}
		}

		.projectBody {
			width: calc(100% - 60rpx);
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: left;
			padding: 28rpx 30rpx 0;

			.title {
				min-width: 300rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 100rpx;
			}

			.projectTime {
				min-width: 238rpx;
				height: 100%;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 100rpx;
				padding-left: 0rpx;
			}

			.projectNull {
				min-width: 238rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #A9A9A9;
				line-height: 100rpx;
				padding-left: 0rpx;
			}

			.dataRight {
				line-height: 100rpx;
				margin-left: 198rpx;

				image {
					width: 15rpx;
					height: 23rpx;
				}
			}
		}

		.border {
			width: 650rpx;
			height: 1px;
			background: #EEEEEE;
			border-radius: 1px;
			margin-left: 4%;
		}
	}

	.box {
		width: 660rpx;
		height: 590rpx;
		// background-image: url(../../../static/bg.png);
		background-size: 100% 100%;
		margin-left: 25rpx;
		transition: all 0.3;

		.projectBodys {
			width: 100%;
			height: 100rpx;
			padding-top: 18rpx;
			display: flex;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 100rpx;
				padding-left: 35rpx;
				width: 117rpx;
			}

			.projectTime {
				width: 300rpx;
				font-size: 27rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #666666;
				line-height: 100rpx;
				padding-left: 54rpx;
			}

			.projectNull {
				width: 300rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #A9A9A9;
				line-height: 100rpx;
				padding-left: 52rpx;
			}

			.dataRight {
				line-height: 100rpx;
				margin-left: 110rpx;

				image {
					width: 15rpx;
					height: 23rpx;
				}
			}
		}

		.border {
			width: 586rpx;
			height: 1px;
			background: #DCECFF;
			border-radius: 1px;
			margin-left: 5%;
		}
	}

	.radio {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 55rpx;
		width: 50%;
	}

	.radioBody {
		display: flex;
		padding: 28rpx 0 28rpx 0;
		width: 400rpx;
	}

	.placeholder {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 31rpx;
	}

	.onLineBtn {
		width: 600rpx;
		height: 90rpx;
		margin-left: 75rpx;
		margin-top: 91rpx;
		background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
		border-radius: 45rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 90rpx;
		// position: fixed;
		// bottom: 50rpx;
	}

	.annotation {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		display: flex;
		justify-content: center;
		margin-top: 41rpx;
		margin-bottom: 50rpx;

		.agreement {
			text-decoration: none;
			color: #0068FF;
		}
	}
</style>