yiliangyiyun-app/pageA/freightTransport/contract_detail.vue

<template>
	<view class="container">
		<view class="information">
			<view class="c-row">
				<view class="title1">发车信息</view>
			</view>
			<u-form :model="goods" ref="uForm" class="uForm">
				<u-form-item label="派车编号" prop="tranCarNo" label-width="160" required>
					<u-input v-model="goods.tranCarNo" input-align="right" placeholder="请输入派车编号" />
				</u-form-item>
				<u-form-item label="车牌号" prop="carNo" label-width="160" required>
					<u-input v-model="goods.carNo" input-align="right" placeholder="请输入车牌号" />
				</u-form-item>
				<u-form-item label="司机手机号" prop="driverPhone" label-width="160" required>
					<u-input v-model="goods.driverPhone" input-align="right" placeholder="请输入司机手机号" />
				</u-form-item>
				<u-form-item label="毛重(吨)" prop="grossWeight" label-width="160" required>
					<u-input v-model="goods.grossWeight" input-align="right" placeholder="请输入毛重"
						@input="grossWeightchange" />
				</u-form-item>
				<u-form-item label="皮重(吨)" prop="tare" label-width="160" required>
					<u-input v-model="goods.tare" input-align="right" placeholder="请输入皮重" @input="tarechange" />
				</u-form-item>
				<u-form-item label="净重(吨)" prop="reciveNetWeight" label-width="160" required>
					<u-input v-model="goods.reciveNetWeight" input-align="right" disabled="" placeholder="自动计算" />
				</u-form-item>
				<u-form-item label="发货日期" label-width="160" required>
					<view @click="show = true" class="time-style">
						{{goods.dispatchingDate!=''?goods.dispatchingDate:time}}
					</view>
					<u-picker :params='params' :default-time='time' @confirm="DateChange" v-model="show" mode="time">
					</u-picker>
				</u-form-item>
			</u-form>
		</view>
		<view class="information">
			<view class="c-row">
				<view class="action">
					上传磅单照片
				</view>
			</view>
			<view class="c-row">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-if="goods.collectionScreenshot != ''" @tap="ViewImage"
						:data-url="goods.collectionScreenshot">
						<image :src="goods.collectionScreenshot" mode="aspectFit"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="0">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImagePerson" v-if="goods.collectionScreenshot == ''">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>

		<button class="btn btns" @click="getList">提交</button>

		<!-- </block> -->
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import {
		mapState
	} from 'vuex';
	export default {
		name: "trust",
		data() {
			return {
				show: false,
				goods: {
					tranCarNo: '',
					carNo: '',
					driverPhone: '',
					grossWeight: '',
					tare: '',
					reciveNetWeight: '',
					collectionScreenshot: '',
					dispatchingDate: '',
					// compId: '2710b21efc1e4393930c5dc800010dc4',
					batch: ""

				},
				rules: {
					tranCarNo: [{
						validator: (rule, value, callback) => {
							return !this.$u.test.isEmpty(value)
						},
						message: '派车编号不能为空',
						trigger: ['change', 'blur']
					}],
					carNo: [{
						validator: (rule, value, callback) => {
							return this.$u.test.carNo(value)
						},
						message: '车牌号格式不正确',
						trigger: ['change', 'blur']
					}],
					driverPhone: [{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号格式不正确',
						trigger: ['change', 'blur']
					}],

					grossWeight: [{
							validator: (rule, value, callback) => {
								return !this.$u.test.isEmpty(value)
							},
							message: '毛重不能为空',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.amount(value)
							},
							message: '数值类型，最多保留两位小数',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.range(value, [1, 100])
							},
							message: '数值类型，1-100之间',
							trigger: ['change', 'blur'],
						},

					],
					tare: [{
							validator: (rule, value, callback) => {
								return !this.$u.test.isEmpty(value)
							},
							message: '皮重不能为空',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.amount(value)
							},
							message: '数值类型，最多保留两位小数',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.range(value, [1, 50])
							},
							message: '数值类型，1-50之间',
							trigger: ['change', 'blur'],
						},

					],
				},
				params: {
					year: true,
					month: true,
					day: true,
				}

			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			time() {
				var date = new Date()
				var year = date.getFullYear()
				var month = date.getMonth()
				var date1 = date.getDate()
				if (month + 1 < 10) {
					month = "0" + (month + 1)
				}
				if (date1 + 1 < 10) {
					date1 = "0" + date1
				}
				return year + '-' + month + "-" + date1
			},
			startDate() {
				//限制开始时间;
				//也可以直接限定为当天日期 var date= new Date(); return date
				return new Date(new Date(new Date().toLocaleDateString()).getTime() - (1 * 60 * 60 * 1000))
			},
			endDate() {
				return new Date()
			}
		},
		onShow() {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			this.goods.dispatchingDate = this.time;
			this.goods.batch = option.id;

		},
		methods: {
			DateChange(e) {
				this.goods.sendDateStart = e.year + '-' + e.month + '-' + e.day
			},
			commit1(item) {
				uni.navigateTo({
					url: `/pageB/contract/look?id=${item.id}&netWeight=${item.netWeight}&carNo=${item.carNo}&sendDateStart=${item.sendDateStart}`
				})
			},
			grossWeightchange(e) {
				if (this.goods.grossWeight && this.goods.tare) {
					this.goods.reciveNetWeight = Number(
						this.goods.grossWeight - this.goods.tare
					)
				}
			},
			tarechange(e) {
				if (this.goods.grossWeight && this.goods.tare) {
					this.goods.reciveNetWeight = Number(
						this.goods.grossWeight - this.goods.tare
					)
				}
			},
			getList() {

				this.grossWeight = parseInt(this.grossWeight)
				var that = this
				uni.showModal({
					content: '确定提交发车信息？',
					success: function(res) {
						if (res.confirm) {
							that.$refs.uForm.validate(valid => {
								if (valid) {
									console.log('验证通过');
									that.$api.doRequest('post',
											'/freightReceivingDispatching/api/insertFreightReceivingDispatchingCar',
											that.goods).then(res => {
											if (res.data.code == 200) {
												console.log(that.goods)
												uni.showModal({
													content: '提交成功！',
													cancelText: "返回",
													confirmText: "继续添加",
													success: function(res) {
														if (res.confirm) {
															that.goods = {
																carNo: '',
																collectionScreenshot: '',
																dispatchingDate: '',
																loadNetWeight: '',
																driverPhone: '',
																reciveNetWeight: '',
																tare: '',
																tranCarNo: ''
															}
														} else if (res.cancel) {

															// uni.navigateBack({
															// 	delta: 1,
															// 	success: function() {
															// 		beforePage.$vm.init(); 
															// 	}
															// });
														}
													}
												});
											} else if (res.data.code == 11015) {
												uni.showToast({
													title: '该司机未认证身份，请司机认证后再操作',
													icon: 'none',
													duration: 2000
												})
											}
										})
										.catch(res => {
											if(res.errmsg){
												uni.showToast({
													title: res.errmsg,
													icon: 'none',
													duration: 2000
												})
											}
											else{
												uni.showToast({
													title: "系统异常，请联系管理员",
													icon: 'none',
													duration: 2000
												})
											}
										});
								} else {
									console.log('验证失败');
								}
							});

						} else if (res.cancel) {

						}
					}
				});
			},
			ChooseImagePerson() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改

						uploadImage(res.tempFilePaths[0], 'collectionScreenshot/',
							result => {
								this.goods.collectionScreenshot = result
								uni.hideLoading();
							}
						)
					}
				});
			},
			ChooseImageDriver() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'driverNoImg/',
							result => {
								if (this.driverNoImg.length != 0) {
									this.driverNoImg1 = result
								} else {
									this.driverNoImg = result
								}
								uni.hideLoading();
							}
						)
					}
				});
			},
			ChooseImageCar() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'carNoImg/',
							result => {
								if (this.carNoImg.length != 0) {
									this.carNoImg1 = result
								} else {
									this.carNoImg = result
								}
								uni.hideLoading();
							}
						)
					}
				});
			},
			ViewImage(e) {
				var img = [];
				img = e.currentTarget.dataset.url.split(' ')
				uni.previewImage({
					current: 0,
					urls: img
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.goods.collectionScreenshot = ""
						}
					}
				})
			},
		},
	}
</script>

<style scoped>
	.container {
		padding: 10px 10px;
		background-color: #F5F6FA;
	}

	.title1 {
		font-size: 18px;
		font-weight: 600;
	}

	.cu-form-group input {
		text-align: right;
	}

	.text-white text {
		background: linear-gradient(45deg, #3DC146, #B2D612);
		padding: 5px 10px;
		border-radius: 38rpx;
	}

	.cu-form-group textarea {
		text-align: right;
	}

	.commit {
		background: linear-gradient(45deg, #DF331C, #DA611A);
		color: #fff;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 14px;
	}

	.information {
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-top: 10px;
	}

	.btn {
		margin-top: 10px;
		border-radius: 25px;
		background-color: #22C572;
		border: none;
		color: #FFFFFF;
	}

	.uForm {
		padding: 0 40rpx;
	}

	.time-style {
		position: absolute;
		right: 0;
	}
</style>