risk-wx/pages/particulars/index.vue

<template>
	<view class="content">
		<view class="head-no a-blue">
			<text>订单号: {{formData.orderNo}}</text>
		</view>
		<view class="striping"></view>
		<view class="head a-blue" @click="telFun">
			<text>驾驶员: {{formData.driver1Name == null ? '' : formData.driver1Name}}&nbsp;{{formData.driver1mobile == null ? '' : formData.driver1mobile}}</text>
		</view>
		<!-- <u-collapse :value="['Declaration information']"> -->
		<u-collapse ref="xxxxxx111">
			<!-- <u-collapse-item title="报单信息" name="Declaration information"> -->
			<view class="box-box">

				<!-- <view class="box">
					<view class="data">
						<text class="key">装车吨位</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkLoadQty"
							v-model="formData.loadQty" />
					</view>
					<view class="data">
						<text class="key-date">装车时间</text>
						<uni-datetime-picker class="value" :disabled="disabled"
							v-model="formData.loadDateString">{{formData.loadDateString == null ? "请选择日期" : formData.loadDateString }}</uni-datetime-picker>
					</view>
				</view> -->

				<view class="box-two">
					<text class="key">装车吨位</text>
					<input class="value-two" selection-start="0" selection-end="9999" :disabled="disabled" inputmode="decimal" @input="checkLoadQty"
						v-model="formData.loadQty" />
				</view>

				<view class="box-two">
					<text class="key">装车时间</text>
					<uni-datetime-picker class="value-two" :disabled="disabled" v-model="formData.loadDateString" :border="false" />
					
					<!-- <uni-datetime-picker class="value-two" :disabled="disabled"
						v-model="formData.loadDateString">{{formData.loadDateString == null ? "请选择日期" : formData.loadDateString }}</uni-datetime-picker> -->
				</view>


				<!-- <view class="box">
					<view class="data">
						<text class="key">卸车吨位</text>
						<input class="value" :disabled="disabled" inputmode="decimal" @input="checkUnLoadQty"
							v-model="formData.unLoadQty" />
					</view>
					<view class="data">
						<text class="key-date">卸车时间</text>
						<uni-datetime-picker class="value" :disabled="disabled"
							v-model="formData.unLoadDateString">{{formData.unLoadDateString == null ? "请选择日期" : formData.unLoadDateString }}</uni-datetime-picker>
					</view>
				</view> -->

				<view class="box-two">
					<text class="key">卸车吨位</text>
					<input class="value-two" selection-start="0" selection-end="9999" :disabled="disabled" inputmode="decimal" @input="checkUnLoadQty"
						v-model="formData.unLoadQty" />
				</view>

				<view class="box-two">
					<text class="key">卸车时间</text>
					
					<uni-datetime-picker class="value-two" :disabled="disabled" :clear-icon="false" v-model="formData.unLoadDateString" :border="false" />
					<!-- <uni-datetime-picker class="value-two" :disabled="disabled"
						v-model="formData.unLoadDateString">{{formData.unLoadDateString == null ? "请选择日期" : formData.unLoadDateString }}</uni-datetime-picker> -->
				</view>

				<view class="box">
					<view class="data">
						<text class="key">空载起点</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled" v-model="formData.emptyaddr1" />
					</view>
					<view class="data">
						<text class="key">空车里程</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled" inputmode="decimal"
							v-model="formData.odometerstart" />
					</view>
				</view>

				<view class="box">
					<view class="data">
						<text class="key">空载终点</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled" v-model="formData.emptyaddr2" />
					</view>
					<view class="data">
						<text class="key">空车里程</text>
						<input class="value" selection-start="0" selection-end="9999" :disabled="disabled" inputmode="decimal" v-model="formData.odometerend" />
					</view>
				</view>

				<view class="box-two">
					<text class="key">重车里程</text>
					<input class="value-two" selection-start="0" selection-end="9999" :disabled="disabled" inputmode="decimal" @input="checkUnLoadmile"
						v-model="formData.loadmile" />
				</view>
				<view class="box-two">
					<text class="key">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</text>
					<input class="value-two" selection-start="0" selection-end="9999" :disabled="disabled" v-model="formData.driverassdesc" />
				</view>

			</view>
			<!-- </u-collapse-item> -->

			<u-collapse-item title="照片" name="img" ref="collapseHeight">
				<!-- @afterRead="imgUploading" -->
				<u-upload :fileList="fileList1" @afterRead="imgUploading" @delete="deletePic" name="1" multiple :previewFullImage="true"
					:disabled="this.status317 == 6"></u-upload>
			</u-collapse-item>

			<u-collapse-item title="订单信息" name="order information">
				<view class="box-two textAlign">
					<text class="key">货物名称</text>
					<text class="value">{{formData.goodsCName == null ? "" : formData.goodsCName}}</text>
				</view>
				<view class="box-two textAlign">
					<text class="key">装车地点</text>
					<text class="value">{{formData.loadAddr == null ? "" : formData.loadAddr}}</text>
				</view>
				<view class="box-two textAlign">
					<text class="key">装车厂家</text>
					<text class="value">{{formData.loadFactory == null ? "" : formData.loadFactory}}</text>
				</view>
				<view class="box-two textAlign">
					<text class="key">联系人电话</text>
					<text
						class="value">{{formData.loadAttn == null ? "" : formData.loadAttn}}&nbsp;{{formData.loadAttnTel == null ? "" : formData.loadAttnTel}}</text>
				</view>
				<view class="box-two textAlign">
					<text class="key">卸车地点</text>
					<text class="value">{{formData.unLoadAddr == null ? "" : formData.unLoadAddr}}</text>
				</view>
				<view class="box-two textAlign">
					<text class="key">卸车厂家</text>
					<text class="value">{{formData.unLoadFactory == null ? "" : formData.unLoadFactory}}</text>
				</view>
				<view class="box-two textAlign">
					<text class="key">联系人电话</text>
					<text
						class="value">{{formData.unLoadAttn == null ? "" : formData.unLoadAttn}}&nbsp;{{formData.unLoadAttnTel == null ? "" : formData.unLoadAttnTel}}</text>
				</view>
			</u-collapse-item>
		</u-collapse>

		<view class="attention">
			<text class="text-grey1">请查看</text>
			<text @click="attention()" class="text-blue">注意事项</text>
		</view>

		<view class="cushion">
		</view>

		<view class="bottom vertical-layout">

			<view class="onsubmit-script" @click="setOrderBillsPlansByid()">
				<text v-if="status317 == 2">提交里程</text>
				<text v-if="status317 == 6 || status317 == 0">里程信息</text>
			</view>
			<view class="claim-expense" @click="skipClaimExpense()">
				<text v-if="status376 == 2">报销费用</text>
				<text v-if="status376 == 6 || status376 == 0">查看报销</text>
			</view>

		</view>
		<!-- 遮盖罩 -->
		<u-loading-page :loading="loading"></u-loading-page>
		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 删除图片弹出框 -->

		<u-modal :show="deleteShow" title="提示" showCancelButton @confirm="deleteImg" @cancel="deleteShow = false">
			<view class="slot-content">
				<rich-text nodes="确定删除这张图片吗?"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getOrderBillsPlansByid,
		putOrderBillsPlansByid,
		insertTmsAttachMngs,
		pictureUploading,
		deleteTmsAttachMngs
	} from "@/api/particulars"
	
	import {
		getGasStations,
		getItems,
		insertLoadFeeItems,
		getLoadFeeItems
	} from "@/api/reimbursement"
	export default {
		data() {
			return {
				// 遮盖罩
				loading: true,
				formData: {},
				// 表单验证
				rules: {
					loadQty: '',
					loadDateString: '',
					unLoadQty: '',
					unLoadDateString: '',
					emptyaddr1: '',
					odometerstart: '',
					emptyaddr2: '',
					odometerend: '',
					loadmile: '',
					remarks: ''
				},
				orderNo: '',
				// 照片
				fileList1: [],
				// 删除弹框
				deleteShow: false,
				// 删除的图片
				event: {},
				// 输入框禁用
				disabled: false,
				status317: 0,
				status376: 0

			};
		},
		onLoad: function(option) {
			this.status317 = option.status317;
			this.status376 = option.status376;
			getOrderBillsPlansByid(option.orderNo).then(res => {
				this.orderNo = option.orderNo;
				this.formData = res.data;
				this.fileList1 = res.data.fileList1;
				this.loading = false;

				if (this.status317 == 6) {
					this.disabled = true;
				}
			})
		},
		onUnload() {
			this.formData = {};
			this.loading = true;
			this.event = {};
		},
		methods: {
			// 保存订单
			setOrderBillsPlansByid(id) {
				// console.log(this.status317);
				if (this.status317 == 2) {

					if (this.formData.unLoadQty == '' || this.formData.unLoadQty == null) {
						this.$refs.uToast.show({
							type: 'warning',
							icon: false,
							message: "请输入卸车吨位!",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
						})
					} else if (this.formData.unLoadDateString == '' || this.formData.unLoadDateString == null) {
						this.$refs.uToast.show({
							type: 'warning',
							icon: false,
							message: "请选择卸车时间!",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
						})

					} else if (this.formData.loadmile == '' || this.formData.loadmile == null) {
						this.$refs.uToast.show({
							type: 'warning',
							icon: false,
							message: "请输入重车里程!",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
						})

					} else {

						putOrderBillsPlansByid(this.formData).then(res => {
							if (res.code == 200) {
								// 保存成功弹窗提示
								this.$refs.uToast.show({
									type: 'success',
									message: "保存成功!",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								})
							} else {
								// 保存失败消息
								this.$refs.uToast.show({
									icon: false,
									message: "保存失败请重试!",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
								})
							}
						})
					}
				} else {
					// this.$refs.uToast.show({
					// 	type: 'warning',
					// 	icon: false,
					// 	message: "不允许保存!",
					// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					// })
				}
			},
			// 点击拨打电话
			telFun() {
				if (this.formData.driver1mobile != null && this.formData.driver1mobile != '') {
					uni.makePhoneCall({
						phoneNumber: this.formData.driver1mobile, //电话号码
						success: function(e) {
							// console.log(e);
						},
						fail: function(e) {
							// console.log(e);
						}
					})
				}
			},
			// 删除图片
			deletePic(event) {
				if (this.status317 == 6) {
					this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						message: "不允许修改!",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					})
				} else if (this.status317 == 2) {
					this.event = event;
					this.deleteShow = true;
				}
			},
			deleteImg() {
				var event = this.event;
				var url = event.file.url;
				var index = url.lastIndexOf("\/");
				var attachId = url.substring(index + 1, url.length);

				deleteTmsAttachMngs(attachId).then(res => {
					if (res.code == 200) {
						this[`fileList${event.name}`].splice(event.index, 1)
						// 删除成功消息
						this.$refs.uToast.show({
							type: 'success',
							message: "删除成功!",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
					} else {
						// 删除失败消息
						this.$refs.uToast.show({
							icon: false,
							message: "删除失败请重试!",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
						})
					}

					this.event = {};
					this.deleteShow = false;
				})
			},
			// 新增图片
			imgUploading(event) {
				// this.$nextTick(() => {
				// 	this.$refs.xxxxxx111.init()
				// })

				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					insertTmsAttachMngs(this.formData).then(res => {
						if (res.code == 200) {
							let data = {
								name: 'avatarfile',
								filePath: lists[i].url
							}
							let dataForm = {
								attachId: res.data
							}

							pictureUploading(data, dataForm).then(res => {

								let item = this[`fileList${event.name}`][fileListLen]
								// console.log("item");
								// console.log(item);
								this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(
									item, {
										status: 'success',
										message: '',
										url: res.data.data
									}))
								fileListLen++
							})
						}

					})
				}
			},
			uploadFilePromise(url) {

				insertTmsAttachMngs(this.formData).then(res => {
					if (res.code != 200) {
						return null;
					}
					let data = {
						name: 'avatarfile',
						filePath: url
					}
					let dataForm = {
						attachId: res.data
					}
					pictureUploading(data, dataForm).then(res => {
						return res.data.data;
					})
				})
			},
			// 跳转报销费用页面
			skipClaimExpense() {
				uni.navigateTo({
					url: '/pages/particulars/claimExpense/index?orderNo=' + this.orderNo + '&status376=' + this.status376,
				});
			},
			// 跳转注意事项
			attention() {
				uni.navigateTo({
					url: '/pages/particulars/attention/index?remarks=' + this.formData.remarks,
				});
			},
			//输入框小数
			checkLoadQty(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.loadQty = e.target.value
				})
			},
			checkUnLoadQty(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.unLoadQty = e.target.value
				})

			},
			checkUnLoadmile(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,3})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.formData.loadmile = e.target.value
				})

			}
		}
	}
</script>

<style lang="scss">
	// 修改布局方向为纵向布局
	.vertical-layout {
		display: flex;
	}
	
	.textAlign {
		text-align: right;
		// margin-left: 20rpx;
	}

	// 分割线
	.striping {
		width: 100%;
		height: 4rpx;
		background-color: #f0f0f0f0;
	}

	.box-box {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	
	.a-blue {
		color: #3c9cff;
	}

	.content {

		// box-sizing: border-box;
		background-color: white;

		.head-no {
			// border-radius: 0 0 40rpx 40rpx;
			// width: 500rpx;
			height: 100rpx;
			padding-left: 30rpx;

			vertical-align: middle;
			display: table-cell;

			font-size: 34rpx;
			font-weight: 900;

			// background-color: #3c9cff;

		}

		.head {
			// width: 100%;
			height: 100rpx;
			padding-left: 30rpx;

			vertical-align: middle;
			display: table-cell;

			font-size: 34rpx;
			font-weight: 900;
			// background-color: red;
		}

		.box-two {

			color: #3b3b3b;

			overflow: hidden;
			height: 100rpx;

			// border-bottom: 2rpx solid #f0f0f0f0;

			padding-left: 20rpx;
			margin-right: 20rpx;

			font-size: 30rpx;

			display: flex;
			align-items: center;

			.key {
				
				
				display: inline-block;
				width: 24%;
				color:  #3c9cff;
				// font-weight: 700;

			}

			.value {
				margin-left: 20rpx;
				// color: #787878;
				color: #3b3b3b;
				margin-right: 20rpx;

			}

			.value-two {
				width: calc(100% - 24%);
				color: #3b3b3b;
				// margin-right: 20rpx;
				border-bottom: 2rpx dotted #000;
			}
		}

		.box {

			color: #3b3b3b;

			overflow: hidden;
			height: 100rpx;

			// border-bottom: 2rpx solid #f0f0f0f0;
			padding-left: 20rpx;
			font-size: 30rpx;

			display: flex;
			align-items: center;

			.data {
				width: 50%;
				height: 100%;
				// background-color: pink;
				display: flex;
				align-items: center;

				.key {
					// background-color: indianred;
					width: 100%;
					color:  #3c9cff;
				}

				.key-date {
					width: 40%;
				}


				.value {
					margin-right: 20rpx;
					border-bottom: 2rpx dotted #000;
					// color: rgb(144, 147, 153);
					color: #3b3b3b;
				}
			}
		}

		.bottom {

			position: fixed;
			bottom: calc(var(--window-bottom));
			width: 100%;
			height: 80rpx;

			background-color: pink;

			text-align: center;
			line-height: 80rpx;



			background-color: #f0f0f0f0;

			color: #f0f0f0f0;
			// font-weight: bold;
			font-size: 35rpx;

			.onsubmit-script {
				width: 50%;
				height: 100%;
				border-left: 2rpx solid #f0f0f0f0;
				border-right: 2rpx solid #f0f0f0f0;
				background-color: #0b68ffff;
				border-radius: 20rpx;

			}

			.claim-expense {
				width: 50%;
				height: 100%;
				border-left: 2rpx solid #f0f0f0f0;
				border-right: 2rpx solid #f0f0f0f0;
				background-color: #0b68ffff;
				border-radius: 20rpx;
			}



			.primary {
				background-color: #0b68ffff;
			}
		}

		.attention {
			padding: 30rpx;
			padding-left: 50rpx;
			padding-bottom: 40rpx;

			background-color: #f0f0f0f0;
		}

		.cushion {
			width: 100%;
			height: 104rpx;
			background-color: #f0f0f0f0;
		}
	}
</style>