count-pass-app/subpages/driver/dealerAddVehicle.vue

<template>
	<view class="main">
		<u-navbar :title="vehicleForm.id ? $t('base.button.update') : $t('base.button.add')" :autoBack="true"
			:placeholder="true">
		</u-navbar>
		<view v-if="vehicleForm.vehicleType == 0" class="order-card">
			<u-form labelPosition="left" :model="vehicleForm" ref="form1" labelWidth='90'>
				<u-form-item :label="$t('driver.name')" borderBottom prop="driver">
					<u--input v-model="vehicleForm.driver" border="none"
						:placeholder="$t('base.common.placeholderI') + $t('driver.name')"></u--input>
				</u-form-item>
				<!-- <u-form-item :label="$t('driver.agricultural')" borderBottom prop="driver">
					<u-radio-group v-model="vehicleForm.agricultural">
						<u-radio shape="circle" name="1" :label="$t('driver.yes')"></u-radio>
						<u-radio shape="circle" name="0" :label="$t('driver.no')"></u-radio>
					</u-radio-group>
				</u-form-item> -->
				<u-form-item :label="$t('order.phone')" borderBottom prop="phone">
					<u--input @input="phoneInput" maxlength="11" v-model="vehicleForm.phone" border="none" type="number"
						:placeholder="$t('base.common.placeholderI') + $t('order.phone')">
					</u--input>
				</u-form-item>
				<!-- #ifndef APP-PLUS -->
				<!-- <u-form-item label="车轴" borderBottom prop="axle" @click="showPopup('popupAxle')">
					<span>{{ vehicleForm.axleName }}</span>
				</u-form-item>
				<PopupSelect ref="popupAxle" :hasSearch='false' :option="axleOption" @onConfirm="onAxleConfirm" /> -->
				<!-- #endif  -->
				<!-- <u-form-item v-if="vehicleForm.agricultural == 0" :label="$t('driver.vehicle')" borderBottom prop="vehicle"
					@click="carKeyboardShow = true">
					<u-input readonly v-model="vehicleForm.vehicle" border="none"
						:placeholder="$t('base.common.placeholderI') + $t('driver.vehicle')"></u-input>
				</u-form-item> -->
				<u-form-item :label="$t('driver.vehicle')" borderBottom prop="vehicle">
					<u-input @input="vehicleForm.vehicle=vehicleForm.vehicle.toUpperCase()" v-model="vehicleForm.vehicle" border="none"
						:placeholder="$t('base.common.placeholderI') + $t('driver.vehicle')"></u-input>
				</u-form-item>


				<u-form-item :label="$t('order.idcard')" borderBottom prop="idCard">
					<u-input v-model="vehicleForm.idCard" border="none"
						:placeholder="$t('base.common.placeholderI') + $t('order.idcard')"></u-input>
				</u-form-item>

<!-- 
				<view class="img_box">
					<text class="label_text">{{$t('order.idcardImg')}}：</text>
					<view class="img_small_box">
						<uni-file-picker v-model="imageValue" ref="files" :auto-upload="false" :limit='1'
							@select="onFileSelect" @progress="progress" @success="success"
							@delete="deleteImg" />
					</view>
				</view> -->


			</u-form>

		</view>
		<view v-if="vehicleForm.vehicleType == 1">
			<u-form labelPosition="left" :model="vehicleForm" ref="form1" labelWidth='90' class="order-card">
				<u-form-item :label="$t('driver.fleet')" borderBottom prop="fleet">
					<u--input v-model="vehicleForm.fleet" border="none"
						:placeholder="$t('base.common.placeholderI') + $t('driver.fleet')">
						<template slot="suffix">
							<u-button type="success" :text="$t('base.common.motorcade')" @click="onFleetClick"></u-button>
						</template>
					</u--input>
				</u-form-item>
			</u-form>
		</view>
		<CarKeyboard :show.sync="carKeyboardShow" :isProvince="isProvince" :vehicleNo="vehicleForm.vehicle"
			@confirm="keyboardconfirm" vehicleType="car">
		</CarKeyboard>
		<div class="btn-wrap">
			<u-button type="primary" color='#4680F9' native-type="submit" @click="submit()">
				{{ $t('base.common.submit') }}</u-button>
		</div>
	</view>
</template>

<script>
import PopupSelect from '../../components/popup-select/index'
import CarKeyboard from '../../components/carKeyboard/carKeyboard'
import {
	publicUrl
} from '../../utils/config'
import {
	bindDriver,
	getAxleOption
} from '../../api/dealer'
import {
	getVehicleListByFleet,
} from '../../api/driver'

import prototype from '../../utils/prototype.js'
export default {
	components: {
		CarKeyboard,
		PopupSelect
	},
	data() {
		return {
			isProvince: true,
			fleetVehicleList: [],
			axleOption: [],
			isShowVehicleList: false,
			imageValue:[],
			vehicleForm: {
				axle: '',
				axleOption: [],
				driver: '',
				vehicle: '',
				phone: '',
				vehicleType: '0',
				fleet: "",
				id: '',
				// agricultural: '0'
			},
			vehicleRules: {
				vehicle: [{
					required: true,
					message: this.$t('base.common.placeholderI') + this.$t('driver.name')
				}],
			},
			carKeyboardShow: false,
		}
	},
	onLoad(options) {
		// this.getAxleOption()
		console.log("获取到参数信息、", options)
		Object.assign(this.vehicleForm, options);
		if(options.idCardImage){
			this.imageValue = [
				{
					"imageName":'',
					"url":options.idCardImage,
					"imageType": "ACCEPT",
					"name": ""
				}
			]
		}
		//#ifdef APP-PLUS
		this.isProvince = false
		//#endif 
	},
	methods: {
		//手机号输入
		phoneInput(){
			if(this.vehicleForm.phone.length >= 9){
				uni.showToast({
					title: this.$t('base.smsCode.phoneTooLong'),
					icon: 'none'
				})
			}
		},
		//获取本地的车轴信息
		async getAxleOption() {
			var that = this;
			//获取租户
			this.vehicleForm.tenantId = uni.getStorageSync('currentTenantId').value;
			//通过云端调用本地车轴信息接口
			console.log("开始获取本地车轴信息", that.vehicleForm);
			await this.$request({
				url: '/admin/appStand/getAxleOption',
				method: 'post',
				data: that.vehicleForm
			}).then(res => {
				// 请求成功的处理逻辑
				console.log("getAxleOption:success")
				console.log("res::::", res);
				if (res.data) {
					that.axleOption = res.data.data.appAxle;
					//车轴转名称
					that.axleOption.forEach(item => {
						if (item.value == this.vehicleForm.axle) {
							this.vehicleForm.axleName = item.text
						}
					})
				} else {
					that.axleOption = [{ text: "空", value: "0" }]
				}
				console.log("获取到的车轴列表", that.axleOption);
			})
		},
		//勾选车轴
		onAxleConfirm(value) {
			this.vehicleForm.axle = ''
			this.vehicleForm.axleName = ''
			if (value.value) {
				this.vehicleForm.axle = value.value,
					this.vehicleForm.axleName = value.text
			}
		},
		//显示选择
		showPopup(refs) {
			console.log("ddd", this.axleOption);
			if (!this.axleOption) {
				this.axleOption = [{
					text: this.$t('order.notSelected'),
					value: null
				}] //物料选项
			}
			this.$refs[refs].showPicker = true
		},
		//判断平台
		onFleetClick() {
			if (!this.vehicleForm.fleet) {
				uni.showToast({
					title: this.$t('base.common.placeholderI') + this.$t('driver.fleet'),
					icon: "none",
					duration: 2500,
				})
				return;
			}
			uni.navigateTo({
				url: '/subpages/driver/fleetVehicle?fleet=' + this.vehicleForm.fleet
			})
		},
		//车号键盘输出
		keyboardconfirm(id) {
			this.vehicleForm.vehicle = id
		},

		//提交表单
		submit() {
			let _this = this
			let phone = /^\d{9}$/
			if (_this.vehicleForm.vehicleType == 0) {
				if (!_this.vehicleForm.vehicle) {
					uni.showToast({
						title: this.$t('base.common.placeholderI') + this.$t('driver.vehicle'),
						icon: "none",
						duration: 2500,
					})
					return;
				}
			} else {
				if (!_this.vehicleForm.fleet) {
					uni.showToast({
						title: this.$t('base.common.placeholderI') + this.$t('driver.fleet'),
						icon: "none",
						duration: 2500,
					})
					return;
				}
				_this.vehicleForm.vehicle = _this.vehicleForm.fleet
			}
		
			if (!_this.vehicleForm.idCard) {
				uni.showToast({
					title: this.$t('base.common.placeholderI') + this.$t('order.idcard'),
					icon: "none",
					duration: 2500,
				})
				return;
			}
			// if (!_this.imageValue.length) {
			// 	uni.showToast({
			// 		title: this.$t('order.idcardImg'),
			// 		icon: "none",
			// 		duration: 2500,
			// 	})
			// 	return;
			// }
			console.log(_this.vehicleForm);
			let data = JSON.parse(JSON.stringify(_this.vehicleForm))
			this.imageValue.length?data.idCardImage = this.imageValue[0].url:''
			
			bindDriver(data).then(res => {
				if (res.statusCode == 200) {
					var that = this;
					//获取租户
					that.vehicleForm.tenantId = uni.getStorageSync('currentTenantId').value;
					// this.$request({
					// 	url: '/ymt/appStand/updateVehicleAxle',
					// 	method: 'post',
					// 	data: that.vehicleForm
					// }).then(res => {
					// 	// 请求成功的处理逻辑
					// 	console.log("res::::", res);
					// })
					uni.showModal({
						// title: '提示',
						content: _this.$t('order.checkAddVehicle'),
						showCancel: true,
						cancelText: _this.$t('driver.no'),
						confirmText: _this.$t('driver.yes'),
						success: function (r) {
							if (r.confirm) {
								_this.$refs[ref]
									.resetFields()
								console.log('用户点击确定');
							} else if (r.cancel) {
								console.log('用户点击取消');
								uni.navigateBack({
									url: '/subpages/driver/dealerList'
								})
							}
						}
					})
				}
			})


		},
		onFileSelect(e) {
				console.log('选择文件：', e)
				uni.showLoading({
					title: this.$t('userinfo.uploading')
				})
				// if (this.uploadImgSrcType == '102') {
						console.log('图片信息',uni.getStorageSync('tenantId'),e.tempFilePaths);
				uni.uploadFile({
					// #ifdef APP-PLUS || MP-WEIXIN
					url: publicUrl + '/admin/sys-file/upload',
					// #endif
					// #ifndef APP-PLUS || MP-WEIXIN 
					url: '/admin/sys-file/upload',
					// #endif
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token'),
						'TENANT-ID': uni.getStorageSync('tenantId'),
					},
					data: {
						file: e.tempFilePaths[0]
					},
					success: (res) => {
						console.log(res.data);
						let data = JSON.parse(res.data)
						if (data.code == 0) {
							this.imageValue.push({
								// #ifdef APP-PLUS || MP-WEIXIN
								"imageName":publicUrl + data.data.url,
								"url": publicUrl +  data.data.url,
								// #endif
								// #ifndef APP-PLUS || MP-WEIXIN 
								"imageName":data.data.url,
								"url":data.data.url,
								// #endif
								"imageType": "ACCEPT",
								"name": ""
							})
							uni.showToast({
								title: this.$t('settings.successText'),
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: this.$t('settings.fail'),
								icon: 'none'
							})
						}
					},
					fail: function(res) {
						console.log('图片上传接口失败',res,uni.getStorageSync('tenantId'),e.tempFilePaths[0]);
						uni.showToast({
							title:  this.$t('tips.error'),
							icon: 'none'
						})
					},
					complete: function(res) {
						console.log('图片上传接口完成',res);
						// console.log(res);
						uni.hideLoading()
					}
				})
			},
		progress(e) {
			console.log('上传进度：', e)
		},
		success(e) {
			console.log('上传成功', e)
		},

		deleteImg(e) {
			console.log('删除成功', e)
			console.log(this.imageValue);
		},
	},
}
</script>
<style>
/* #ifndef H5 */
page {
	/* height: 100%; */
	background-color: #f2f2f2;
}

/* #endif */
</style>
<style lang="scss" scoped>
@import '../../common/css/public.scss';

/deep/ .uni-date-x {
	padding: 0;
}

/deep/ .u-button {
	margin: 0px 0px 0px 0px !important;
}

.btn-wrap {
	position: absolute;
	bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 32rpx;
}
.img_box {
		display: flex;
		align-items: center;
		// height: 200rpx;
		// line-height: 200rpx;
		padding-bottom: 50rpx;
		background-color: #fff;
		padding: 40rpx 0;
		text {
			// flex: .8;
			width: 200rpx;
			display: inline-block;
			text-align: right;
			margin-right: 20rpx;
		}

		.img_small_box {
			flex: 3;
		}

		/deep/ .uni-file-picker__container {
			margin-top: 10rpx !important;
		}
	}
</style>