wangluohuoyun-app/pages/order/orderDetails.vue

<!-- 订单详情-->
<template>
	<view class="content">
		<view class="fixed1"></view>
		<view class="fixed">
			<view class='title flex flex-center'>
				<image class="back"  src="../../static/images/return.png" @click="back" mode="" style="width: 40rpx; height: 40rpx;"></image>
<!-- 				<u-icon class="back" name="arrow-left" color="" size="20" ></u-icon> -->
				<view class="nav-title">订单</view>
				<image class="search" style='width:18px;height:18px;' src="../../static/images/kefu.png" @click="$helper.contactCustomerService" mode=""></image>
				<!-- <u-icon class="search" name="server-fill" color="" size="28" @click="$helper.contactCustomerService"></u-icon> -->
			</view>
		</view>
		<view class="content1">
			<view class="item1">
				<view class="status">{{dataObj.orderStatus}}</view>
			</view>
			<!-- flex flex-space-between -->
			<view class="item2">
				<u-button class="btn" text="查看合同" @click="lookContract" v-if="dataObj.driverContract=='1'"></u-button>
			     <!-- <u-button class="btn" text="签订合同" @click="signContract" v-if="dataObj.cargoOwnerStatus=='未装车'&&dataObj.driverContract!='1'"></u-button> -->
				<u-button class="btn" text="终止" @click="stop"  v-if="dataObj.orderStatus=='待货主确认'||dataObj.orderStatus=='未装车'"></u-button>
				<!-- <u-button class="btn" text="联系客服"  @click="$helper.contactCustomerService()"></u-button> -->
				<u-button class="btn" text="确认装车" @click="confirmLoading" v-if="dataObj.orderStatus=='未装车'"></u-button>
				<!-- <u-button class="btn" text="确认装车" @click="confirmLoading"></u-button> -->
				<u-button class="btn" text="修改装车信息"  @click="confirmLoading" v-if="dataObj.orderStatus=='货主驳回装车信息'||dataObj.orderStatus=='平台驳回装车信息'"></u-button>
				<u-button class="btn" text="确认卸车" @click="confirmUnLoading" v-if="dataObj.orderStatus=='运输中'"></u-button>
				<u-button class="btn" text="修改卸车信息" @click="confirmUnLoading" v-if="dataObj.orderStatus=='货主驳回卸车信息'||dataObj.orderStatus=='平台驳回卸车信息'"></u-button>
				<u-button class="btn" text="完结" @click="closed" v-if="dataObj.orderStatus=='结算中'"></u-button>
			</view>
			<view class="item3 flex flex-space-between align-center">
				<view class="left flex align-center">
					<u--image :showLoading="true" :src="dataObj.cargoOwnerPortrait" width="44px" height="44px" @click="" shape='circle'>
					</u--image>
					<view class="name">{{dataObj.cargoOwner}}</view>
					<view class="flex align-center">
						<!-- <view class="number">4.98</view> -->
						<!-- <u-icon class="star" name="star-fill" color="#FEC823" size="20" @click="back"></u-icon> -->
					</view>
				</view>
				<view class="right flex s-row align-center phone">
					<view class="bgc">
						<image class="phone" style='width:24px;height:24px;' src="../../static/images/dianhua.png" @click="$helper.contactCustomerService(dataObj.cargoOwnerPhone)" mode=""></image>
						<!-- <u-icon class="phone" name="phone-fill" color="#2772FB" size="20" @click="$helper.contactCustomerService(dataObj.cargoOwnerPhone)"></u-icon> -->
					</view>

					<view class="hz-name">联系货主</view>
				</view>
			</view>
			<!-- <view class='row-between'>
				<view class="">货主</view>
				<view>张三</view>
			</view>
			<view class='row-between'>
				<view class="">货主单位</view>
				<view>黑龙江中天昊元贸易有限公司</view>
			</view>
			<view class='row-between'>
				<view class="">卸货地</view>
				<view>黑龙江省齐齐哈尔市梅里斯达斡尔族区杜尔门沁达斡尔乡53农场</view>
			</view>
			<view class='row-between'>
				<view class="">货名</view>
				<view>玉米</view>
			</view>
			<view class='row-between'>
				<view class="">距离</view>
				<view>约15公里</view>
			</view>
			<view class='row-between'>
				<view class="">货运费</view>
				<view>100元/吨</view>
			</view> -->
		</view>

		<view class="content2">
			<view class="flex flex-space-between border">
				<view class="flex s-row item1">
					<view class="fontsize-46 fontweight-500 text">{{dataObj.sendCity}}</view>

					<view class="fontsize-28 gray">发货地</view>
				</view>
				<image class="change-btn" src="@/static/images/common/jt.png" mode='widthFix'></image>
				<view class="flex s-row item2">

					<view class="fontsize-46 fontweight-500 text" @click="">{{dataObj.unloadCity}}</view>
					<view class="fontsize-28 gray text-align-right">卸货地</view>
				</view>
			</view>
			<view class="level2-title">基本信息</view>
			<view class='row-between'>
				<view class=" gray">订单编号</view>
				<view class="">{{dataObj.orderNo}}</view>
			</view>
		<!-- 	<view class='row-between'>
				<view class=" gray">货主</view>
				<view class="">{{dataObj.cargoOwner}}</view>
			</view> -->
			<view class='row-between'>
				<view class=" gray">货主单位</view>
				<view class="">{{dataObj.compName?dataObj.compName:'个人货主'}}</view>
			</view>
			<view class='row-between'>
				<view class=" gray">发货地</view>
				<view class=" place">{{dataObj.sendPrivate}}{{dataObj.sendCity}}{{dataObj.sendArea}}{{dataObj.sendDetailedAddress}}</view>
			</view>
			<view class='row-between'>
				<view class=" gray">卸货地</view>
				<view class=" place">{{dataObj.unloadPrivate}}{{dataObj.unloadCity}}{{dataObj.unloadArea}}{{dataObj.unloadDetailedAddress}}</view>
			</view>
			<view class='row-between'>
				<view class=" gray">货名</view>
				<view class="">{{dataObj.goodsName}}</view>
			</view>
			<view class='row-between'>
				<view class=" gray">距离</view>
				<view class="">约{{dataObj.distance}}公里</view>
			</view>
			<view class='row-between'>
				<view class=" gray">收货联系人</view>
				<view class="flex flex-center">{{dataObj.publishTaskInfo.sender?dataObj.publishTaskInfo.sender:''}}
				<image style='width:12px;height:12px;margin-left:5px;' v-if='dataObj.publishTaskInfo.senderPhone' class="phone" @click="$helper.contactCustomerService(dataObj.publishTaskInfo.senderPhone)" src="../../static/images/order/dianhua.png" mode=""></image>
				<!-- <u-icon name="phone-fill" color="#2772FB" size="20"></u-icon> -->
				</view>
			</view>
			<view class='row-between'>
				<view class=" gray">发货联系人</view>
				<view class="flex flex-center">{{dataObj.publishTaskInfo.receiver?dataObj.publishTaskInfo.receiver:''}}
				<image style='width:12px;height:12px;margin-left:5px;' v-if='dataObj.publishTaskInfo.receiverPhone' class="phone" @click="$helper.contactCustomerService(dataObj.publishTaskInfo.receiverPhone)" src="../../static/images/order/dianhua.png" mode=""></image>
				<!-- <u-icon v-if='dataObj.publishTaskInfo.receiverPhone' class="phone" name="phone-fill" color="#2772FB" size="20" @click="$helper.contactCustomerService(dataObj.publishTaskInfo.receiverPhone)"></u-icon> -->
				</view>
			</view>
		<!-- 	<view class='row-between'>
				<view class=" gray">运费</view>
				<view class="">{{dataObj.freight}}{{dataObj.illingMethod==0?'元/吨':'元/车'}}</view>
			</view> -->
		</view>
		<view class="content3" v-if='dataObj.orderStatus!="待货主确认"&&dataObj.orderStatus!="未装车"&&dataObj.orderStatus!="已终止"'>
			<view class="level2-title">承运信息</view>
			<view class='row-between'>
				<view class=" gray">合同编号</view>
				<view class="">{{carrierInfo.contractNo}}</view>
			</view>
			<view class='row-between'>
				<view class=" gray">车牌号</view>
				<view class="">{{carrierInfo.carNo}}</view>
			</view>
			<view class='row-between'>
				<view class=" gray">运费</view>
				<view class="">{{carrierInfo.estimatedFreight}}元</view>
			</view>
			<view class='row-between'>
				<view class=" gray">装车时间</view>
				<view class="">{{carrierInfo.loadingDate}}</view>
			</view>
			<view class='row-between'>
				<view class=" gray">装车照片</view>
				<view class="flex">
					<u--image :showLoading="true" :src='item' width="40px" height="40px" v-for="(item,index) in zcPhoneList"></u--image>
				</view>
			</view>
			<view v-if='dataObj.orderStatus!="待货主确认"&&dataObj.orderStatus!="未装车"&&dataObj.orderStatus!="待货主确认装车"&&dataObj.orderStatus!="货主驳回装车信息"&&dataObj.orderStatus!="待平台确认装车"&&dataObj.orderStatus!="平台驳回装车信息"&&dataObj.orderStatus!="运输中"&&dataObj.orderStatus!="已终止"'>
				<view class='row-between'>
					<view class=" gray">合计应付运费</view>
					<view class="">{{carrierInfo.totalFreight}}元</view>
				</view>
				<view class='row-between'>
					<view class=" gray">卸车时间</view>
					<view class="">{{carrierInfo.loadingDate}}</view>
				</view>
				<view class='row-between'>
					<view class=" gray">卸车照片</view>
					<view class="flex">
						<u--image :showLoading="true" :src='item' width="40px" height="40px" v-for="(item,index) in xcPhoneList"></u--image>
					</view>
				</view>
			</view>
	
		</view>
		<!-- v-if="status2 -->
		<!-- dataObj.orderStatus!="待货主确认"&&dataObj.orderStatus!="未装车"&&dataObj.orderStatus!="待货主确认装车"&&dataObj.orderStatus!="货主驳回装车信息"&&dataObj.orderStatus!="待平台确认装车"&&dataObj.orderStatus!="平台驳回装车信息"&&dataObj.orderStatus!="已终止" -->
		<view class="content4" v-if='status2'>
			<view class="level2-title gray">运费信息（单位：元）</view>
			<view class='row-between'>
				<view class=" gray">预付运费</view>
				<view class="">{{freightInfo.prepaidFreight}}</view>
			</view>
			<view class='flex flex-end'>
				<view class="">{{freightInfo.prepaidFreightDate}}</view>
			</view>
			<view class='row-between'>
				<view class=" gray">运费尾款</view>
				<view class="">{{freightInfo.freightBalance?freightInfo.freightBalance:'未支付'}}</view>
			</view>
			<view class='row-between mx ' v-if="freightInfo.freightBalance">
				明细：预付{{freightInfo.prepaidFreight}}元，服务费{{freightInfo.driverServiceCharge}}元，尾款{{freightInfo.freightBalance}}元，合计收款{{freightInfo.totalCollection}}元。
			</view>
		</view>
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :confirmText='confirmText'
			:closeOnClickOverlay='true' :showCancelButton='true' @confirm="confirmClick" @close="cancelClick"
			@cancel="cancelClick" class="modal">
			<u-radio-group v-model="radiovalue1" placement="" v-if='isShowTerminationReason' class='row'>
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name" :name="item.name" @change="radioChange">
				</u-radio>
			</u-radio-group>
			<u--textarea class="row" v-model="value2" placeholder="终止原因描述" count maxlength='50'
				v-if='isShowTerminationReason'>
			</u--textarea>
		</u-modal>
		<u-popup :show="show" mode="bottom" @close="close" @open="open">
			<view class="">
				<view ><u-icon @click="closepopup" class='close' name="close" size="20"></u-icon></view>
				
				<view style='fon-size:34rpx;margin-bottom:20px;text-align:center;font-weight: 600;'>确认终止订单</view>
				<view style="margin: 0 auto;">
		           	<u-radio-group iconPlacement="right" v-model="radiovalue1" placement="" v-if='isShowTerminationReason' >
		           	<u-radio  :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
		           		:label="item.name" :name="item.name" @change="radioChange" >
		           	</u-radio>
		           </u-radio-group>
		           </view>
				   <view style='border-top:10px solid #F2F4F7;position:absolute;left:0;height:0;width:100%;'></view>
		           <view style='padding:40rpx 0 30rpx;'>终止原因描述</view>
		           <u--textarea class="row" v-model="value2" placeholder="终止原因描述" count maxlength='50'
		           	v-if='isShowTerminationReason'>
		           </u--textarea>
				   <view class='termination' :class="{'active':value2.length>0}" @click='confirmClick'>终止</view>
			</view>
		           
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components:{
			uniPopup
		},
		data() {
			return {
				zcPhoneList:[],
				xcPhoneList:[],
				show:false,
				carrierInfo:{},
				freightInfo:{},
				cyinfoStatus: '未装车',
				isShowTerminationReason: false,
				dataObj:{},
				status1:false,
				status2:false,
				id: '',
				value2: '',
				radiolist1: [{
						name: '已与货主协商',
						disabled: false
					},
					{
						name: '货主原因终止',
						disabled: false
					},
					{
						name: '司机个人原因终止',
						disabled: false
					}, {
						name: '其他',
						disabled: false
					}
				],
				radiovalue1: '已与货主协商',
				confirmText: '终止',
				alertTitle: '确定终止订单？',
				alertContent: "",
				isShowAlert: false,
			}

		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getList()
		},
		methods: {
			lookContract(){
				uni.downloadFile({
				  url: this.dataObj.driverContractUrl,
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      showMenu: true,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
				// this.$request.baseRequest('get', '/orderInfo/setPdf', {
				// 	}).then(res => {
				// 		if (res.code == 200) {
				// 			this.contractSrc = res.data
				// 			uni.downloadFile({
				// 			  url: res.data,
				// 			  success: function (res) {
				// 			    var filePath = res.tempFilePath;
				// 			    uni.openDocument({
				// 			      filePath: filePath,
				// 			      showMenu: true,
				// 			      success: function (res) {
				// 			        console.log('打开文档成功');
				// 			      }
				// 			    });
				// 			  }
				// 			});
				// 			// this.$refs.uToast.show({
				// 			// 	type: 'success',
				// 			// 	message: "提交成功",
				// 			// 	complete() {
				// 			// 		that.upCallback({
				// 			// 			size: 10,
				// 			// 			num: 1
				// 			// 		})
				// 			// 	}
				// 			// })
				// 		}
				// 	})
				// 	.catch(res => {
				// 		uni.$u.toast(res.message);
				// 	});
			},
			signContract() {
				// this.lookAlert = true
				uni.$u.route('/pages/order/signContract',{obj:encodeURIComponent(JSON.stringify(this.dataObj))} 
				);
				
			},
			// 完结
			closed() {
				let item = this.dataDetails
				let that = this
				this.$request.baseRequest('post', '/orderInfo/api/editEnd', {
						id: item.id,
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "提交成功",
								complete() {
									that.upCallback({
										size: 10,
										num: 1
									})
								}
							})
			
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			confirmLoading() {
				uni.$u.route('/pages/order/confirmLoading', {
					obj: JSON.stringify({id:this.id,carrierId:this.dataObj.hyCarrierInfo.id}),
				});
				// uni.$u.route('/pages/order/confirmLoading', {id:this.id});
			},
			confirmUnLoading() {
				let item = this.dataObj
				uni.$u.route('/pages/order/confirmUnloading', {obj:JSON.stringify(item)});
			},
			confirmClick() {
				let  that = this
				if (this.radiovalue1 == '其他' && !this.value2) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写终止原因描述!",
					})
					return
				}
				let _terminationReason = ''
				if (this.radiovalue1 == '已与货主协商') {
					_terminationReason = 1
				} else if (this.radiovalue1 == '货主原因终止') {
					_terminationReason = 2
				} else if (this.radiovalue1 == '司机个人原因终止') {
					_terminationReason = 3
				} else if (this.radiovalue1 == '其他') {
					_terminationReason = 4
				}
				this.$request.baseRequest('post', '/orderInfo/api/end', {
						id: this.id,
						terminationReason: _terminationReason,
						terminationReasonDescription: this.value2,
						terminator:1
					}).then(res => {
						this.show=false
						this.isShowAlert = false
						// this.mescroll.resetUpScroll()
						this.$refs.uToast.show({
							type: 'success',
							message: "提交成功！",
							complete() {
								that.getList()
							}
						})
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			cancelClick() {
				this.isShowAlert = false
			},
			stop() {
				let item = this.dataObj
				// 货主接单
				this.id = item.id
				if(item.orderStatus=='未装车'){
					if (item.orderStatusKey == 1) {
						this.isShowTerminationReason = false
					} else {
						this.isShowTerminationReason = true
					}
					
					this.show = true
				}else{
					this.isShowAlert=true
				}
			},
			toPhone(){
				uni.makePhoneCall({
				    phoneNumber: this.dataObj.cargoOwnerPhone
				});
			},
			back() {
				uni.navigateBack()
			},
			getList(){
				this.$request.baseRequest('get', '/orderInfo/getOrderInfo', {
						id: this.id,
					}).then(res => {
						if(res.code==200){
							this.dataObj = res.data
							this.carrierInfo = res.data.hyCarrierInfo
							this.freightInfo =  res.data.freightInfo
							if(this.carrierInfo.loadingImg&&this.carrierInfo.loadingImg.length>0){
								this.zcPhoneList = this.carrierInfo.loadingImg.split(',')
							}
							
							// if(res.data.orderStatus!="待货主确认"&&res.data.orderStatus!="未装车"&&res.data.orderStatus!="已终止"){
							// 	this.status1 = true
							// }
							// 运费信息
							if (res.data.cargoOwnerStatus != "待接单" && res.data.cargoOwnerStatus != "未装车" && res.data
								.cargoOwnerStatus != "待确认装车" && res.data.cargoOwnerStatus != "已驳回装车信息" && res.data
								.cargoOwnerStatus != "待平台确认装车" && res.data.cargoOwnerStatus != "平台驳回装车信息"  && res.data.cargoOwnerStatus != "待结算" && res.data
								.cargoOwnerStatus != "已终止") {
								this.status2 = true
							}
						}
						
					})
			},
			goConfirmLoading(id) {
				uni.$u.route('/pages/order/confirmLoading', {
					obj: JSON.stringify({id:this.id}),
				});
			},
		}
	}
</script>

<style lang="scss">
	.fixed,
	.fixed1 {
		background: white;
		position: fixed;
		top: var(--status-bar-height);
		z-index: 999;
		width: 100%;
	}

	.fixed {
		padding-bottom: 10rpx;

		.title {
			background: white;
			position: relative;
			font-size: 36rpx;
			color: rgba(0, 0, 0, 0.85);

			.search {
				position: absolute;
				right: 20rpx;
			}

			.back {
				position: absolute;
				left: 20rpx;
				width:18px;height:18px;

			}
		}
	}

	.fixed1 {
		top: 0;
		height: var(--status-bar-height);
		background: white;
	}
.row-between{
	margin-bottom: 10rpx;
}
	.content1 {
		background: white;
		margin: calc(var(--status-bar-height) + 80rpx) 20rpx 0 20rpx;
		border-radius: 20rpx;
		padding: 40rpx 0rpx 0 0;
		box-sizing: border-box;

		.status {
			display: flex;
			justify-content: center;
			margin-bottom: 40rpx;
			font-size: 36rpx;
			color: #333333;
			font-weight: 700;
		}

		.btn {
			width: 40%;
			margin-top: 20rpx;
		}

		.item2 {
			padding-bottom: 40rpx;
		}

		.item3 {
			padding: 20rpx;
			background: linear-gradient(180deg, #F7F7F9 0%, #FFFFFF 100%);
			border-radius: 0 0 20rpx 20rpx;

			.name {
				margin-left: 10rpx;
				margin-right: 20rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.number {
				font-size: 26rpx;
				color: #878787;
			}

			.star {
				margin-left: 10rpx;
			}

			.phone {
				.bgc {
					background: #E5F0FE;
					width: 58rpx;
					height: 58rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.hz-name {
					font-size: 26rpx;
					color: #2772FB;
				}

			}
		}
	}

	.level2-title {
		margin: 20rpx 0 20rpx 0;
	}

	.content2 {
		background: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;

		.change-btn {
			width: 86rpx;
			height: 86rpx;
			position: relative;
			top: -20rpx;
		}

		.item1,
		.item2 {
			width: 40%;

			.text {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.gray {
				text-align: center;
			}

		}

		.item1 .text {
			text-align: center;
		}

		.item2 .text {
			text-align: center;
		}

		.border {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 33rpx;
		}



		.place {
			width: 80%;
			text-align: right;
		}
	}

	.content3,
	.content4 {
		background: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.content4 {
		.time{
			text-align: right;
		}
		.mx {
		
			background: #F7F8FA;
			padding: 10rpx;
			margin: 10rpx 0;
		}
	}
	/deep/.u-modal__content {
		flex-direction: column;
	}
	/deep/.u-popup__content{
		border-radius: 10px;
		padding:20px;
	}
	/deep/.u-radio{
		margin:40rpx 0;
	}
	.close{
		position:absolute;
		right:20px;
	}
	.termination{
		background:#F1F3F6;
		color:#C5CAD4;
		padding:10px;
		border-radius:30px;
		text-align: center;
		margin-top:30rpx;
	}
	.termination.active{
		background: #2772FB;
		color: white;
	}
</style>