yiliangyiyun-app/pageB/contract/contract_detail.vue

<template>
	<view class="container">
		<view class="information">
			<!-- <block v-if="TabCur==2"> -->
			<view class="c-row">
				<view class="title1">发车信息</view>

			</view>
			<view class="c-row b-b">
				<view class="title">派车编号</view>
				<view class="con-list">
					<input disabled name="input" v-model="goods.tranCarNo"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<view class="title">车牌号</view>
				<view class="con-list">
					<input maxlength='7' placeholder="请输入车牌号" name="input" v-model="goods.carNo"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<view class="title">司机手机号</view>
				<view class="con-list">
					<input maxlength='11' placeholder="请输入司机手机号" name="input" v-model="goods.driverPhone"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<view class="title">毛重(吨)</view>
				<view class="con-list">
					<input placeholder="请输入毛重" type="mobile" name="input" @input="grossWeightchange"
						v-model="goods.grossWeight"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<view class="title">皮重(吨)</view>
				<view class="con-list">
					<input placeholder="请输入皮重" type="mobile" name="input" @input="tarechange"
						v-model="goods.tare"></input>
				</view>
			</view>
			<view class="c-row b-b">
				<view class="title">净重(吨)</view>
				<view class="con-list">
					<view class="con-list">
						<input placeholder="自动计算" type="mobile" name="input" v-model="goods.loadNetWeight"
							disabled="disabled"></input>
					</view>
				</view>
			</view>
			<view class="c-row ">
				<view class="title">发货日期</view>
				<view class="con-list">
					<view @click="show = true">{{goods.sendDateStart!=''?goods.sendDateStart:time}}</view>
					<u-picker :params='params' :default-time='time' @confirm="DateChange" v-model="show" mode="time">
					</u-picker>
				</view>
			</view>
		</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.loadPoundImg != ''" @tap="ViewImage"
						:data-url="goods.loadPoundImg">
						<image :src="goods.loadPoundImg" 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.loadPoundImg == ''">
						<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 {
				goods: {
					tranCarNo: '',
					carNo: '',
					grossWeight: '',
					tare: '',
					loadNetWeight: '',
					loadPoundImg: '',
					contractNo: '',
					goodsName: '',
					sendDateStart: ''

				},
				params: {
					year: true,
					month: true,
					day: true,
				},
				carNo: '',
				PageCur: "trust",
				TabCur: 0,
				priceTypeIndex: -1,
				priceType: ['库内价', '到库价', '到港价'],
				unitPrice: 0,
				price: '',
				seller: '',
				sellerPhone: '',
				minSale: '',
				exsitCount: 0,
				origin: '',
				stock: '',
				show: false,
				goodsName: '',
				verifyCode: '',
				sendText0: '获取验证码',
				sendText1: '获取验证码',
				sendText2: '获取验证码',
				sendText3: '获取验证码',
				sendDisabled0: false,
				sendDisabled1: false,
				sendDisabled2: false,
				sendDisabled3: false,
				buyer: '',
				buyerPhone: '',
				level: '',
				sender: '',
				senderPhone: '',
				receiver: '',
				receiverPhone: '',
				total: 0,
				startPlace: '',
				endPlace: '',
				driver: '',
				driverPhone: '',
				carNo: '',
				personNoImg: '',
				personNoImg1: '',
				driverNoImg: '',
				driverNoImg1: '',
				carNoImg: '',
				carNoImg1: '',
				goodsName: '',
				showTran: 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() {
		// },
		onLoad(option) {
			this.goods.planId = option.planId
			this.goodsName = option.goodsName
			this.contractNo = option.contractNo
			this.goods.goodsName = option.goodsName
			this.goods.contractNo = option.contractNo
			this.goods.tranCarNo = option.tranCarNo
		},
		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.loadNetWeight = Number(
						this.goods.grossWeight - this.goods.tare
					)
				}
			},
			tarechange(e) {
				if (this.goods.grossWeight && this.goods.tare) {
					this.goods.loadNetWeight = Number(
						this.goods.grossWeight - this.goods.tare
					)
				}
			},
			getList() {
				if (this.goods.carNo.length == 0) {
					this.$api.msg('车牌号不能为空')
					return
				}
				if (this.goods.carNo.length != 7) {
					this.$api.msg('车牌号输入错误')
					return
				}
				if (this.goods.driverPhone.length == 0) {
					this.$api.msg('手机号不能为空')
					return
				}
				if (this.goods.driverPhone.length != 11) {
					this.$api.msg('司机手机号输入错误')
					return
				}
				if (this.goods.grossWeight == '') {
					this.$api.msg('毛重不能为空')
					return
				}
				if (this.goods.tare == '') {
					this.$api.msg('皮重不能为空')
					return
				}
				if (this.goods.grossWeight > 100) {
					this.$api.msg('毛重输入错误')
					return
				}
				if (this.goods.tare > 50) {
					this.$api.msg('皮重输入错误')
					return
				}
				var that = this
				uni.showModal({
					content: '确定提交发车信息？',
					success: function(res) {
						if (res.confirm) {
							that.$api.doRequest('post', '/tranCarInfo/api/addTranTask', that.goods).then(
								res => {
									if (res.data.code == 200) {
										uni.showModal({
											content: '提交成功！',
											cancelText: "返回",
											confirmText: "继续添加",
											success: function(res) {
												if (res.confirm) {
													uni.navigateTo({
														url: `/pageB/contract/contract_detail?`
													})
												}
												setTimeout(() => {
													var result = that.goods.tranCarNo
														.substr(that.goods.tranCarNo
															.indexOf("C") + 1, that
															.goods.tranCarNo.length);
													var num = Number(result) + 1
													if (num <= 9) {
														num = 'C00' + num
													} else if (num < 100 && num > 9) {
														num = 'C0' + num
													} else if (num < 1000 && num >
														99) {
														num = 'C' + num
													}
													
													that.goods = {
														tranCarNo: num,
														carNo: '',
														grossWeight: '',
														tare: '',
														loadNetWeight: '',
														loadPoundImg: '',
														contractNo: that.contractNo,
														goodsName: that.goodsName,
														sendDateStart: '', 
														driverPhone:''
													}
													uni.navigateBack({
														// delta: 1
													});
												}, 2000)
											},
											
										})
									} else if (res.data.code == 11015) {
										uni.showToast({
											title: '该司机未认证身份，请司机认证后再操作',
											icon: 'none',
											duration: 2000
										})
									}
								})
								.catch(res => {
									uni.showToast({
										title: res.errmsg,
										icon: 'none',
										duration: 2000
									})
								});
						} else if (res.cancel) {
							// setTimeout(()=>{uni.navigateBack({})},1000);
						}
					}
				});
			},
			ChooseImagePerson() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改

						uploadImage(res.tempFilePaths[0], 'loadPoundImg/',
							result => {

								this.goods.loadPoundImg = 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) {
							if (e.currentTarget.dataset.index == 0) {
								this.goods.loadPoundImg = "";
							} 
						}
					}
				})
			},
		},
	}
</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;
	}
</style>