tqApp-webView/pagesBase/taskQrCode/index.vue

<template>
	<view class="page-container">
		<view class="page-head">
			<text>{{titleObj[model.form.scanType]}}</text>
		</view>
		<view class="page-body">

			<u--form label-width="auto" labelAlign="left"
				ref="uForm"
				:model="model"
				:rules="rules"
				:labelStyle="{
					fontSize: '28rpx',
					fontWeight: '500',
				}"
			>
				<u-cell-group :border="false">
				
					<template>
							
						<view class="box" style="margin: 24rpx 24rpx 0rpx 24rpx;">
							<u-cell title="" :border="false" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="" labelPosition="" prop="form.remark" :required="false">
										<view slot="label" class="item-label">
											<view class="item-label-left">
												驾驶员
											</view>
											
										</view>
										<view  class="item-label-right">{{model.form.driverName}}</view>
									</u-form-item>
								</view>	
							</u-cell> 
							
							<u-cell title="" :border="false" :isLink="false" :clickable="false" class="hidde-cell-title">
								<view slot="value" class="value">
									<u-form-item label="" labelPosition="" prop="form.remark" :required="false">
										<view slot="label" class="item-label">
											<view class="item-label-left">
												车辆
											</view>
											
										</view>
										<view  class="item-label-right">{{model.form.plate}}</view>
									</u-form-item>
								</view>	
							</u-cell> 
						</view>
						
					</template>
				</u-cell-group>
			</u--form>
		</view>
		
		<view class="page-footer">
			<u-row style="">
				
				<u-col :span="12">
					<u-button type="primary" shape="" :hairline="false" :custom-style="{
							width: '100%',
							borderRadius: '0',
							height: '100rpx',
							fontSize: '32rpx',
							fontWeight: '500',
							 background:'linear-gradient(to right, #41B5FF, #4573FC)'
						  }" @click="handleSubmit">确认
					</u-button>
				</u-col>
			</u-row>
			
		</view>
		
	</view>
</template>

<script>
import {userProfile} from '@/api/common/user.js'
import {checkHasOutRec,scanVehCode} from '@/api/vehDispatch/taskQrCode.js'
import {clearProps,copyProps} from '@/utils/gdtq.js'
import {isEmpty} from 'lodash'

export default {
	components: {
	},
	data() {
		return {
			titleObj: {
				1: '是否确认出车？',
				2: '是否确认还车？',
			},
			model: {
			  form: {
				recId: "", //出车记录ID (还车时，传该参数)
				scanType: "",	//扫码类型 1出车 2还车
				vehicleId: "", //车辆ID (出车时，传该参数)
				
				driverName: '',
				plate: '',
			  }
			},
			rules: {
				
				'form.outflowType': [
					{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},	
				],
				'form.backDate': {
					type: 'string',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},
				'form.outList': {
					type: 'array',
					required: true,
					message: '请选择',
					trigger: ['blur', 'change']
				},	
			},
			
			userInfo: null,
			params: null,
			copyItem: null,
		}
	},
	onLoad(params) {
		// console.log(id,'id')
		this.params = params
		setTimeout(() => {
			this.initData()
		},500)
		
	},
	
	async created() {
		// this.getUserInfo()
	},

	
	onShow() {
		
	},
	onHide() {
		
	},
	onReady() {	
		// this.resetRules()
	},
	methods: {
		async initData() {
			let {vehicleId} = this.params
			let {code,data} = await checkHasOutRec({vehicleId})
			if(code == 0) {
				this.copyItem = data
				if(data.hasRec) {
					this.model.form.scanType = 2
				} else {
					this.model.form.scanType = 1
				}
				this.model.form.driverName = data.driverName
				this.model.form.vehicleId = data.vehicleId
				this.model.form.plate = data.plate
				this.model.form.recId = data.id
				
			}
		},
		
		resetRules() {
			this.$refs.uForm.setRules(this.rules)			
		},

		async getInfo(id) {
			let {code,data} = await queryOneById({id})
			if(code == 0) {
				copyProps(this.model.form,data)
			}
		},
		getUserInfo() {
			userProfile().then((res) => {
				this.userInfo = res.data
				this.model.form.outflowUserId = res.data.userId
				this.model.form.outflowUser = res.data.nickName
	
				this.model.form.deptId = res.data.deptId
				this.model.form.deptName = res.data.deptName
			})
		},
		// 提交
		async handleSubmit() {
				
			let titleObj = {
				1: '已出车',
				2: '已还车',
			}

			  this.$refs.uForm.validate().then(async res => {
				  
		
					  let ajaxData = {
						  ...this.model.form,
					  }

					  let { data, code,msg } = await scanVehCode(ajaxData) 
					  
					  
					  if (code == 0) {
							
							uni.showModal({
								title: '提示',
								content: `${titleObj[ajaxData.scanType]}`,
								showCancel:false,
								confirmText: '好的',
								success: function(res) {
									if (res.confirm) {
										uni.switchTab({url: '/pages/index/index'})
									}
								}
							})
							
					  }	
				  
			  }).catch(errors => {
				  console.log('校验失败',errors)
			  })
		},
		handleClear() {
			
			clearProps(this.model.form,[])
		},
	
	}
}
</script>

<style lang="scss" scoped>
	.disflex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.disflex-right {
		display: flex;
		justify-content: right;
		align-items: center;
	}
.page-container {
	
	font-size: 28rpx;
	min-height: 100%;
	position: relative;
	background: #fff;
	// padding-bottom: 60rpx;
	

	.page-head {
		text-align: center;
		font-size: 40rpx;
		font-weight: 700;
		padding: 40rpx 0;
	}
	
	.page-body {
		padding-bottom: 120rpx;
		
		.box {
			margin: 24rpx 24rpx 0;
			padding: 20rpx;
			border-radius: 20rpx;
			background: #fff;
			border: 1rpx solid #EBEDF0;
			
			.item-label {
				display: flex;
				justify-content: space-between;
				align-items: center;
				&-left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
					
					position: relative;
					text {
						color: #f56c6c;
						font-size: 40rpx;
						position: absolute;
						left: -18rpx;
					}
				}
				&-right {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					text-align: right;
					width: 100%;
				}
			}
		}
		
	}
	.page-footer {
		padding: 0rpx 0;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}	


::v-deep {
	
	.u-form-item__body {
		padding: 0;
	}
	.hidde-cell-title {
		
		.u-cell__body__content {
			width: auto;
			flex: none;
			
		}
		.u-cell__body {
			.value {
				flex: 1;
			}
		}
		
	}
	
}
</style>