jingrunTechnology-ui/pages/home/myorder/orderDetails/index.vue

<template>
	<view>
		<view class="ordertop">
			<view>
				<view class="iconblue"></view>
				<text class="license">订单基本信息</text>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>提单号</view>
				<view>{{form.mblno}}</view>
			</view>
			<view class="basic">
				<view>车号</view>
				<view>{{form.carregNo}}</view>
			</view>
			<view class="basic">
				<view>调度员</view>
				<view>{{form.planUserId}}</view>
			</view>
			<view class="basic">
				<view>驾驶员</view>
				<view>{{form.driverName}}</view>
			</view>
			<view class="basic">
				<view>装货品名</view>
				<view>{{form.goodsId}}</view>
			</view>
			<view class="basic">
				<view>调度数量</view>
				<view>{{form.cntrQty}}</view>
			</view>
			<view class="basic">
				<view>船名航次</view>
				<view>{{form.ysl}}/{{form.voy}}</view>
			</view>
		</view>
		<view class="ordertop">
			<view>
				<view class="iconblue"></view>
				<text class="license">提箱信息</text>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>提箱地点</view>
				<view>{{form.tLoadAddr}}</view>
			</view>
			<view class="basic">
				<view>提箱时间</view>
				<view>{{form.tLoadDate}}</view>
			</view>
			<view class="basic">
				<view>提箱联系</view>
				<view>{{form.tLoadAttntel}}</view>
			</view>
		</view>
		<view class="ordertop">
			<view>
				<view class="iconblue"></view>
				<text class="license">装卸信息</text>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>装卸地点</view>
				<view>{{form.tMdLoadAddr}}</view>
			</view>
			<view class="basic">
				<view>装卸时间</view>
				<view>{{form.tMdLoadDate}}</view>
			</view>
			<view class="basic">
				<view>装卸联系</view>
				<view>{{form.tMdLoadAttnTel}}</view>
			</view>
		</view>
		<view class="ordertop" style="margin-bottom: 140rpx;">
			<view>
				<view class="iconblue"></view>
				<text class="license">卸柜信息</text>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>卸柜地点</view>
				<view>{{form.tUnLoadAddr}}</view>
			</view>
			<view class="basic">
				<view>卸柜时间</view>
				<view>{{form.tUnLoadDate}}</view>
			</view>
			<view class="basic">
				<view>卸柜联系</view>
				<view>{{form.tUnLoadAttnTel}}</view>
			</view>
		</view>
		<view style="width: 100%;background-color: #ffffff;position: fixed; bottom: 0;">
			<view style="width: 96%;margin: 0 auto;margin-bottom: 20rpx;display: flex;justify-content: space-around;" v-if="!form.acceptDate||!form.loadDate||!form.mdLoadDate||!form.unLoadDate">
				<u-button type="primary" :ripple="true" @click="receiving(1)" :disabled="!form.acceptDate?fasle:true">接单</u-button>
				<u-button type="primary" :ripple="true" @click="receiving(3)" :disabled="!form.loadDate?fasle:true">提箱</u-button>
				<u-button type="primary" :ripple="true" @click="receiving(4)" :disabled="!form.mdLoadDate?fasle:true">装卸</u-button>
				<u-button type="primary" :ripple="true" @click="receiving(5)" :disabled="!form.unLoadDate?fasle:true">卸柜</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/common/request/request'
	export default {
		data() {
			return {
				form: {
					mblno: '', //提单号
					carregNo: '', //车号
					transUserId: '', //调度员*
					goodsId: '', //装货品名
					cntrQty: '', //调度数量
					ysl: '', //船名
					voy: '', //航次
					loadAddr: '', //提箱地点
					loadDate: '', //提箱时间
					loadAttntel: '', //提箱联系
					mdLoadAddr: '', //装卸地点
					mdLoadDate: '', //装卸时间
					mdLoadAttnTel: '', //装卸联系
					unLoadAddrL: '', //卸车地点
					unLadDate: '', //卸车时间
					unLoadAttnTel: '' //卸车联系
				},
				id: ''
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 1000);
			this.id = option.id
			// this.query(option.id)
		},
		onShow() {
			this.query(this.id)
		},
		methods: {
			query(id) {
				request({
					url: '/fleet/ftmsorderbillscars/selectDriver',
					method: 'post',
					data: {
						id: id
					}
				}).then(res => {
					console.log(res.data)
					if(res.data.code == 500){
						uni.showToast({
							icon: 'none',
							title: res.msg,
							position: "bottom"
						})
					}else if(res.data.code == 200){
						this.form = res.data.data.cars
						
						if(!this.form.mblno){
							this.form.mblno = ''
						}
						if(!this.form.goodsId){
							this.form.goodsId = ''
						}
						if(!this.form.cntrQty){
							this.form.cntrQty = ''
						}
						if(!this.form.ysl){
							this.form.ysl = ''
						}
						if(!this.form.voy){
							this.form.voy = ''
						}
						if(!this.form.loadAddr){
							this.form.loadAddr = ''
						}
						if(!this.form.loadDate){
							this.form.loadDate = ''
						}
						if(!this.form.loadAttntel){
							this.form.loadAttntel = ''
						}
						if(!this.form.mdLoadAddr){
							this.form.mdLoadAddr = ''
						}
						if(!this.form.mdLoadDate){
							this.form.mdLoadDate = ''
						}
						if(!this.form.mdLoadAttnTel){
							this.form.mdLoadAttnTel = ''
						}
						if(!this.form.unLoadAddrL){
							this.form.unLoadAddrL = ''
						}
						if(!this.form.unLadDate){
							this.form.unLadDate = ''
						}
						if(!this.form.unLoadAttnTel){
							this.form.unLoadAttnTel = ''
						}
					}
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: '网络繁忙请稍后再试',
						position: "bottom"
					})
				})
			},
			receiving(res) {
				if (res !== 1) {
					if (!this.form.acceptDate) {
						uni.showToast({
							icon: 'none',
							title: '未接单，请先接单',
							position: "bottom"
						})
					} else {
						uni.navigateTo({
							url: '../operation/index?res=' + res + '&id=' + this.id
						});
					}
				} else {
					uni.navigateTo({
						url: '../operation/index?res=' + res + '&id=' + this.id
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.basic {
		width: 94%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.basic>view {
		margin-bottom: 10rpx;
	}

	.basic>view:nth-child(1) {
		color: #797979;
	}

	.license {
		float: left;
		font-size: 32rpx;
	}

	.ordertop {
		width: 96%;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-top: 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		padding-bottom: 10rpx;
	}

	.ordertop>view:nth-child(1) {
		width: 98%;
		margin-bottom: 60rpx;
	}

	.iconblue {
		width: 10rpx;
		height: 45rpx;
		float: left;
		background-color: #3a63cf;
		margin-right: 10rpx;
	}

	.line {
		width: 92%;
		margin: 0 auto;
	}
</style>