From 69a1b3bf45738f048361ee4ccb6bdc64fce35720 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 12 三月 2025 11:31:46 +0800
Subject: [PATCH] 更新

---
 h5/pages/driver/reserved.vue |  429 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 429 insertions(+), 0 deletions(-)

diff --git a/h5/pages/driver/reserved.vue b/h5/pages/driver/reserved.vue
new file mode 100644
index 0000000..1ec23fd
--- /dev/null
+++ b/h5/pages/driver/reserved.vue
@@ -0,0 +1,429 @@
+<template>
+	<view class="main_app">
+		<view class="main_wrap">
+			<view class="main_title">杩愯緭淇℃伅</view>
+			<view class="line">
+				<view class="label">
+					<text>*</text>
+					<text>鍏ュ洯鍘熷洜</text>
+				</view>
+				<view class="value" @click="reasonClick">
+					<text class="mr6" :class="{gray: param.id}" :style="{ color: param.inReason ? '#000000' : '#999999' }">{{ param.inReason ? param.inReason : '璇烽�夋嫨' }}</text>
+					<u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
+				</view>
+			</view>
+			<view class="line">
+				<view class="label">
+					<text>*</text>
+					<text>鍚堝悓鍙�</text>
+				</view>
+				<view class="value"><input type="text" placeholder="璇疯緭鍏ユ偍鐨勫悎鍚屽彿" v-model="param.contractNum" placeholder-style="color: #999999;" /></view>
+			</view>
+			<!--  -->
+			<view class="line">
+				<view class="label">
+					<text>*</text>
+					<text>鍒板満鏃堕棿</text>
+				</view>
+				<view class="value" @click="showDatetime = true">
+					<text class="mr6" :style="{ color: param.arriveDate ? '#000000' : '#999999' }">{{ param.arriveDate ? param.arriveDate : '璇烽�夋嫨' }}</text>
+					<u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
+				</view>
+			</view>
+			<view class="line">
+				<view class="label">
+					<text>*</text>
+					<text>鍏ュ簱绫诲瀷</text>
+				</view>
+				<view class="value">
+					<view class="btns">
+						<view @click="inTypeClick(0)" :class="{ active: param.inType == 0 }" class="btn">鏁存墭鐩�</view>
+						<view @click="inTypeClick(1)" :class="{ active: param.inType == 1 }" class="btn">浠剁儫</view>
+					</view>
+				</view>
+			</view>
+			<view class="line">
+				<view class="label">
+					<text>*</text>
+					<text>鎬昏繍杈撻噺</text>
+				</view>
+				<view class="value">
+					<input type="number" @blur="checkSurplus" placeholder="璇疯緭鍏ユ�昏繍杈撻噺" v-model="param.totalNum" placeholder-style="color: #999999;" />
+					<text class="unit">涓囨敮</text>
+				</view>
+			</view>
+			<view class="line">
+				<view class="label">
+					<text>*</text>
+					<text>鍑嗚繍璇佺収鐗�</text>
+				</view>
+				<view class="value" @click="handleUpload">
+					<image v-if="param.transportImgFull" class="upload_wrap" :src="param.transportImgFull" alt="">
+					<view v-else class="upload_wrap"><u-icon name="plus" size="20" color="#999999"></u-icon></view>
+				</view>
+			</view>
+			<view class="empty"></view>
+			<view class="main_title">鍙告満/杞﹁締淇℃伅</view>
+			<view class="line">
+				<view class="label">
+					<text>*</text>
+					<text>鍙告満濮撳悕</text>
+				</view>
+				<view class="value"><input type="text" placeholder="璇疯緭鍏ユ偍鐨勭湡瀹炲鍚�" v-model="param.driverName" placeholder-style="color: #999999;" /></view>
+			</view>
+			<view class="line">
+				<view class="label">
+					<text>*</text>
+					<text>鎵嬫満鍙�</text>
+				</view>
+				<view class="value"><input type="number" placeholder="璇疯緭鍏ユ偍鐨勬墜鏈哄彿" v-model="param.driverPhone" placeholder-style="color: #999999;" /></view>
+			</view>
+			<!--  -->
+			<view class="line">
+				<view class="label">
+					<text>*</text>
+					<text>杞﹀墠鐗岀収鍙�</text>
+				</view>
+				<view class="value" @click="openInput(1)">
+					<text :style="{ color: param.carCodeFront ? '#000000' : '#999999' }">{{ param.carCodeFront ? param.carCodeFront : '璇疯緭鍏ヨ溅鐗屽彿鐮�' }}</text>
+				</view>
+			</view>
+			<view class="line">
+				<view class="label">
+					<text>*</text>
+					<text>杞﹀悗鐗岀収鍙�</text>
+				</view>
+				<view class="value" @click="openInput(2)">
+					<text :style="{ color: param.carCodeBack	 ? '#000000' : '#999999' }">{{ param.carCodeBack	 ? param.carCodeBack	 : '璇疯緭鍏ヨ溅鐗屽彿鐮�' }}</text>
+				</view>
+			</view>
+			<view class="copy" @click="copy">澶嶅埗杞﹀墠鐗岀収鍙�</view>
+			<view class="footer">
+				<view class="handle_sub" @click="onSubmit">
+					鎻愪氦
+				</view>
+			</view>
+		</view>
+		
+		<!--  -->
+		<u-picker :show="showReason" keyName="reason" closeOnClickOverlay @close="showReason = false"
+			@cancel="showReason = false" :columns="reasonList" @confirm="reasonConfirm"></u-picker>
+		<u-datetime-picker
+			:show="showDatetime"
+			closeOnClickOverlay
+			:minDate="new Date().getTime()"
+			mode="datetime"
+			@close="showDatetime = false"
+			@cancel="showDatetime = false"
+			@confirm="setinDate"
+		></u-datetime-picker>
+		<keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
+	</view>
+</template>
+
+<script>
+import keyboardInput from '@/components/keyboard-input/keyboard-input.vue';
+import { uploadUrl, driverCarApply,driverCarApplyEdit, driverReasonList, driverApplyDetail, checkSurplusNum } from '@/api';
+import dayjs from 'dayjs'
+export default {
+	components: {
+		keyboardInput
+	},
+	data() {
+		return {
+			param: {
+				inType: 0,
+				driverName: uni.getStorageSync('driverInfo').realname,
+				driverPhone: uni.getStorageSync('driverInfo').username,
+			},
+			reasonIndex: -1,
+			reasonList: [],
+			showDatetime: false,
+			showReason: false,
+
+			inputType: ''
+		};
+	},
+	onLoad(option) {
+		if(option && option.id){
+			this.getDetail(option.id, option.type)
+		}
+		this.initData()
+	},
+	methods: {
+		checkSurplus() {
+		      const { arriveDate, reasonId, totalNum } = this.param
+		      if(!arriveDate || !reasonId || !totalNum) return
+		      checkSurplusNum({
+		        arriveDate: arriveDate + ':00',
+		        reasonId,
+		        totalNum
+		      }).then(res => {
+		        console.log('res', res);
+		        
+		        if( res.data == 0 ||  res.data < Number(totalNum)){
+		          this.showToast(`褰撴棩鍓╀綑鍙绾︿綔涓氶噺涓嶈冻璇烽�夋嫨鍏朵粬鍒板満鏃ユ湡`)
+		        }
+		      })
+		    },
+		reasonClick() {
+			if(this.param.id){
+				return
+			}
+			this.showReason = true
+		},
+		onSubmit() {
+			const param = { ...this.param }
+			if (!param.arriveDate) return this.showToast('璇烽�夋嫨鍒板満鏃堕棿')
+			if (!param.inType && param.inType != 0) return this.showToast('璇烽�夋嫨鍏ュ簱绫诲瀷')
+			if (!param.contractNum) return this.showToast('璇疯緭鍏ュ悎鍚屽彿')
+			if (!param.totalNum) return this.showToast('璇疯緭鍏ユ�昏繍杈撻噺')
+			if (!param.driverName) return this.showToast('璇疯緭鍏ュ徃鏈哄鍚�')
+			if (!param.driverPhone) return this.showToast('璇疯緭鍏ユ墜鏈哄彿')
+			if (!param.carCodeFront) return this.showToast('璇疯緭鍏ヨ溅鍓嶇墝鍙�')
+			if (!param.carCodeBack) return this.showToast('璇疯緭鍏ヨ溅鍚庣墝鍙�')
+			if (!param.transportImgFull) return this.showToast('璇蜂笂浼犲噯杩愯瘉鐓х墖')
+			param.arriveDate = param.arriveDate + ':00'
+			let fn = param.id ? driverCarApplyEdit : driverCarApply
+			fn({...param}).then(res => {
+				if(res && res.code === 200){
+					setTimeout(() => {
+						this.showToast('棰勭害鐢宠鎴愬姛')
+					})
+					uni.redirectTo({
+						url: '/pages/driver/index'
+					})
+				}
+			})
+		},
+		getDetail(id, type) {
+			driverApplyDetail({id}).then(res => {
+				this.param = { ...res.data, transportImgFull: res.data.prefixUrl + res.data.transportImg }
+				if(type && type == 'reject'){
+					this.$set(this.param, 'id', null)
+				}
+			})
+		},
+		initData(){
+			driverReasonList().then(res => {
+				this.reasonList = [res.data]
+			})
+		},
+		reasonConfirm(e) {
+			const reasonList = this.reasonList[0]
+			const index = e.indexs[0]
+			this.$set(this.param, 'inReason', reasonList[index].reason)
+			this.$set(this.param, 'reasonId', reasonList[index].id)
+			this.checkSurplus()
+			this.showReason = false
+		},
+		setinDate(e) {
+			this.$set(this.param, 'arriveDate', dayjs(e.value).format('YYYY-MM-DD HH:mm'))
+			this.checkSurplus()
+			this.showDatetime = false
+		},
+		inTypeClick(e) {
+			this.param.inType = e
+		},
+		openInput(type) {
+			this.inputType = type;
+			this.$refs.keyboard.open();
+		},
+		setPlate(e) {
+			if (this.inputType === 1) {
+				this.$set(this.param, 'carCodeFront', e)
+			} else if (this.inputType === 2) {
+				this.$set(this.param, 'carCodeBack', e)
+			}
+			this.$forceUpdate();
+			this.closeInput();
+		},
+		closeInput() {
+			this.$refs.keyboard.close();
+		},
+		copy(){
+			if(this.param.carCodeFront){
+				this.$set(this.param, 'carCodeBack', this.param.carCodeFront)
+				this.showToast('澶嶅埗鎴愬姛');
+			}
+		},
+		handleUpload() {
+			let token = uni.getStorageSync('token') || ''
+			uni.chooseImage({
+			  count: 1,
+			  success: (chooseImageRes) => {
+			    uni.showLoading({ title: '涓婁紶涓�', mask: true })
+			    const tempFilePaths = chooseImageRes.tempFilePaths
+			    let imgs = tempFilePaths.map((value, index) => {
+			      return {
+			        name: 'file',
+			        uri: value
+			      }
+			    })
+			    uni.uploadFile({
+			      url: `${uploadUrl}`,
+			      files: imgs,
+			      name: 'file',
+			      formData: {
+			        folder: 'PLATFORM'
+			      },
+			      header: {
+			        Dm_user_token: token
+			      },
+			      success: (uploadFileRes) => {
+			        let res = JSON.parse(uploadFileRes.data)
+			        console.log('res', res.data)
+			        if (res.data && res.data.length > 0) {
+								this.$set(this.param, 'transportImg', res.data[0].imgaddr)
+								this.$set(this.param, 'transportImgFull', res.data[0].url)
+			        }
+			      },
+			      fail(err) {
+			        console.log('err', err)
+			      },
+			      complete() {
+			        uni.hideLoading()
+			      }
+			    })
+			    // }
+			  }
+			})
+		},
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background-color: #f7f7f7;
+}
+.main_wrap {
+	background-color: #fff;
+	margin: 0 -30rpx;
+	padding: 0 30rpx;
+	.line {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1rpx solid #e5e5e5;
+		padding: 30rpx 0;
+		.label {
+			font-size: 30rpx;
+			font-weight: 400;
+			text {
+				&:nth-child(1) {
+					color: #e42d2d;
+					margin-right: 4rpx;
+				}
+			}
+		}
+		.value {
+			flex: 1;
+			height: 100%;
+			margin-left: 30rpx;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			.gray{
+				color: #999999 !important;
+			}
+			.btns {
+				display: flex;
+				align-items: center;
+				.btn {
+					height: 60rpx;
+					line-height: 60rpx;
+					padding: 0 16rpx;
+					font-size: 26rpx;
+					margin-left: 12rpx;
+					border-radius: 12rpx;
+					border: 1rpx solid #777777;
+					color: #777777;
+				}
+				.active {
+					background-color: #4d99a8;
+					color: #fff;
+					border: 1rpx solid #4d99a8;
+				}
+			}
+			.unit {
+				width: 64rpx;
+				text-align: right;
+				font-size: 26rpx;
+				margin-bottom: 2rpx;
+			}
+			input {
+				flex: 1;
+				height: 100%;
+				text-align: right;
+				font-size: 28rpx;
+				font-weight: 400;
+				color: #222222;
+			}
+			.upload_wrap {
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 12rpx;
+				border: 2rpx solid #e5e5e5;
+				background: #f7f7f7;
+				color: #666666;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				overflow: hidden;
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+}
+.main_app {
+	padding-top: 10rpx;
+	.footer{
+		background-color: #f7f7f7;
+		padding: 20rpx 30rpx 30rpx;
+		margin: 0 -30rpx;
+	}
+	.handle_sub{
+		width: 690rpx;
+		background-color: #4d99a8;
+		height: 88rpx;
+		line-height: 88rpx;
+		text-align: center;
+		color: #fff;
+		border-radius: 50rpx;
+	}
+	.perch{
+		width: 750rpx;
+		margin: 0 -30rpx;
+		height: 200rpx;
+		background-color: #f7f7f7;
+	}
+	.copy{
+		background-color: #f7f7f7;
+		display: flex;
+		margin: 0 -30rpx;
+		width: 750rpx;
+		justify-content: flex-end;
+		padding: 12rpx 30rpx;
+		font-size: 26rpx;
+		color: #4d99a8;
+	}
+}
+.main_title {
+	width: 750rpx;
+	padding: 16rpx 30rpx;
+	background-color: #f7f7f7;
+	margin: 0 -30rpx;
+	color: #666666;
+	font-size: 26rpx;
+}
+.empty {
+	width: 750rpx;
+	height: 20rpx;
+	background-color: #f7f7f7;
+	margin: 0 -30rpx;
+}
+</style>

--
Gitblit v1.9.3