province-uniapp-qinghai-gsq/queue-monitor/pages/reservation/reservation.vue

<template>
	<!-- 预约 -->
	<view class="content">
		<view>
		<app-header @back="back">扫码预约</app-header>
		<view style="margin-bottom: 50px;">
		<u-cell title="选择粮库" :value="form.orgName" :is-link="true" @click="storehouseSelectShow = true"></u-cell>
		<u-cell title="选择日期" :value="form.date" :is-link="true" @click="dateSelectShow = true"></u-cell>
		<u-gap height="10" bgColor="#fff"></u-gap>
		<view class="title">请选择车辆到库时间段</view>
		<view>
			<u-list :height="300">
				<u-list-item v-for="(item, index) in timeRange" :key="index">
					<u-cell :title="`${item.begin} - ${item.end}`" @click="onTimeSelect(item, index)">
						<u-icon v-if="item.checked" slot="right-icon" name="checkmark-circle" color="#f2786f"></u-icon>
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		<u-gap height="1" bgColor="#fff"></u-gap>
		<view class="title">请填写车辆基本信息</view>
		<view>
			<user-info ref="userInfo"></user-info>

			<view>
				<u-button @click="submit" type="primary">提交</u-button>
			</view>

		</view>
		</view>
		<u-action-sheet2 :actions="orgList" :closeOnClickOverlay="true" :closeOnClickAction="true" title="选择粮库"
			:show="storehouseSelectShow" @select="onOrgSelect" @close="storehouseSelectShow = false">
		</u-action-sheet2>

		<u-calendar :show="dateSelectShow" :closeOnClickOverlay="true" @confirm="onDateSelect"
			@close="dateSelectShow = false">
		</u-calendar>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import { HOME_INDEX, CAR_INDEX, MONITOR_INDEX, LIVE_INDEX } from '@/config/constants'
	import {
		simpleRequired,
		mkRules
	} from '@/utils/rules.js'
	import {
		getVehicleTypes,
		getOrgTypes,
		gsqReservationRegisterAdd,
	} from '@/api/basic'
	import { showErr } from '@/utils/common'
	import userInfo from '@/pages/components/userInfo.vue'
	import appHeader from '@/pages/components/header/header.vue'
	import tabbar from '@/pages/components/tabbar.vue'
	import uActionSheet2 from '@/components/u-action-sheet/my-action-sheet.vue'
	export default {
		components: {userInfo, appHeader, tabbar, uActionSheet2},
		data() {
			return {
				form: {
					orgName: null,
					orgId: null,
					date: null,
					time: null,
				},
				orgList: [],
				vehicleTypeList: [],
				timeRange: [],
				dateSelectShow: false,
				storehouseSelectShow: false,
				
			}
		},
		mounted() {
			
			this.timeRange = this.generateTimeSlots(8, 15)
			getOrgTypes().then(resp => {
				const list = resp.data || list
				list.forEach(d => {
					d.name = d.orgName
				})
				this.orgList = resp.data || []
			})
		},
		
		methods: {
			back(){
				getApp().globalData.tabIndex = CAR_INDEX
				uni.redirectTo({
					url: '/pages/carManager/carManager'
				})
			},
			generateTimeSlots(start, end) {
				const result = [];

				for (let i = start; i < end; i++) {
					let timeSlot = {
						begin: `${i.toString().padStart(2, '0')}:00:00`,
						end: `${(i + 1).toString().padStart(2, '0')}:00:00`,
						checked: false,
					};
					result.push(timeSlot);
				}

				return result;
			},
			onOrgSelect(data) {
				console.log('choose', data);
				this.form.orgName = data.orgName
				this.form.orgId = data.orgId
			},
			onDateSelect([date]) {
				this.form.date = date
				this.dateSelectShow = false
			},
			onTimeSelect(item, index) {
				this.timeRange.forEach(d => d.checked = false)
				item.checked = true
				this.form.time = item
			},
			submit() {
				if(!this.form.date) {
					return showErr('请选择日期')
				}else if(! this.form.time) {
					return showErr('请选择时间')
				}else if(! this.form.orgId) {
					return showErr('请选择库')
				}
				this.$refs.userInfo.getUserInfo().then(info => {
					gsqReservationRegisterAdd({
						type: 1,
						startTime: `${this.form.date} ${this.form.time.begin}`,
						endTime: `${this.form.date} ${this.form.time.end}`,
						orgId: this.form.orgId,
						driverName: info.driverName,
						identificationNumber: info.identificationNumber,
						mobileNumber: info.mobileNumber,
						vehicleType: info.vehicleType,
						licensePlateNumber: info.licensePlateNumber,
						driverAddress: info.driverAddress,
					}).then(resp => {
						console.log('123123', resp);
						if(resp.code === 200) {
							uni.redirectTo({
								url: `/pages/reservation/success?licensePlateNumber=${info.identificationNumber}&date=${this.form.date}&orgName=${this.form.orgName}`
							})
						}
					})
				}).catch(err => {
					if(err) {
						showErr(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date-list {
		max-height: 800rpx;
		overflow-y: scroll;
	}
	.title {
		display: flex;
		justify-content: center;
	}
</style>