wangluohuoyun-app/pages/order/orderDetails.vue

<!-- 订单详情-->
<template>
	<view class="content">
		<view class="fixed1"></view>
		<view class="fixed">
			<view class='title flex flex-center'>
				<u-icon class="back" name="arrow-left" color="" size="20" @click="back"></u-icon>
				<view class="nav-title">订单</view>
				<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="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" 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="src" 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">
						<u-icon class="phone" name="phone-fill" color="#2772FB" size="20" @click="toPhone"></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="row-left-text gray">订单编号</view>
				<view class="row-right-text">{{dataObj.orderNo}}</view>
			</view>
		<!-- 	<view class='row-between'>
				<view class="row-left-text gray">货主</view>
				<view class="row-right-text">{{dataObj.cargoOwner}}</view>
			</view> -->
			<view class='row-between'>
				<view class="row-left-text gray">货主单位</view>
				<view class="row-right-text">{{dataObj.compName?dataObj.compName:'个人货主'}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">发货地</view>
				<view class="row-right-text place">{{dataObj.sendPrivate}}{{dataObj.sendCity}}{{dataObj.sendArea}}{{dataObj.sendDetailedAddress}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">卸货地</view>
				<view class="row-right-text place">{{dataObj.unloadPrivate}}{{dataObj.unloadCity}}{{dataObj.unloadArea}}{{dataObj.unloadDetailedAddress}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">货名</view>
				<view class="row-right-text">{{dataObj.goodsName}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">距离</view>
				<view class="row-right-text">约{{dataObj.distance}}公里</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">运费</view>
				<view class="row-right-text">{{dataObj.freight}}{{dataObj.illingMethod==0?'元/吨':'元/车'}}</view>
			</view>

		</view>
		<view class="content3" v-if="status1">
			<view class="level2-title">承运信息</view>
			<view class='row-between'>
				<view class="row-left-text gray">合同编号</view>
				<view class="row-right-text">{{dataObj.contractNo}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">车牌号</view>
				<view class="row-right-text">{{dataObj.carrierInfo.carNo}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">预计运费</view>
				<view class="row-right-text">{{dataObj.carrierInfo.estimatedFreight}}元</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">装车时间</view>
				<view class="row-right-text gray">{{dataObj.carrierInfo.loadingDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">装车照片</view>
				<view class="flex">
					<u--image :showLoading="true" :src="dataObj.carrierInfo.loadingDate" width="40px" height="40px"></u--image>
				</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">合计应付运费</view>
				<view class="row-right-text">{{dataObj.carrierInfo.totalFreight}}元</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">卸车时间</view>
				<view class="row-right-text gray">{{dataObj.carrierInfo.loadingDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">卸车照片</view>
				<view class="flex">
					<u--image :showLoading="true" :src="dataObj.carrierInfo.unloadingImg" width="40px" height="40px"></u--image>
				</view>
			</view>
		</view>
		<!-- v-if="status2 -->
		<view class="content4">
			<view class="level2-title gray">运费信息（单位：元）</view>
			<view class='row-between'>
				<view class="row-left-text gray">预付运费</view>
				<view class="row-right-text">{{dataObj.freightInfo.prepaidFreight}}</view>
			</view>
			<view class='flex flex-end'>
				<view class="gray row-right-text">{{dataObj.freightInfo.prepaidFreightDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">运费尾款</view>
				<view class="row-right-text">{{dataObj.freightInfo.freightBalance}}</view>
			</view>
			<view class='row-between mx row-left-text gray'>
				明细：预付{{dataObj.freightInfo.freightBalance}}元，扣款{{dataObj.freightInfo.deduction}}元，服务费{{dataObj.freightInfo.serviceCharge}}元，尾款{{dataObj.freightInfo.freightBalance}}元，合计收款{{dataObj.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-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cyinfoStatus: '未装车',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				isShowTerminationReason: false,
				id: "",
				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: {
			// 完结
			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() {
				let item = this.dataDetails
				uni.$u.route('/pages/order/confirmLoading', item);
			},
			confirmUnLoading() {
				let item = this.dataDetails
				uni.$u.route('/pages/order/confirmUnloading', item);
			},
			confirmClick() {
				let  that = this
				console.log('终止')
				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 => {
						console.log(res) 
						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
				// 货主接单
				if (item.orderStatusKey == 1) {
					this.isShowTerminationReason = false
				} else {
					this.isShowTerminationReason = true
				}
				this.id = item.id
				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
							if(res.data.orderStatus!="待货主确认"&&res.data.orderStatus!="未装车"&&res.data.orderStatus!="已终止"){
								this.status1 = true
							}
							if(res.data.orderStatus!="已终止"&&res.data.orderStatus!="平台驳回装车信息"&&res.data.orderStatus!="待平台确认装车"&&res.data.orderStatus!="待货主确认"&&res.data.orderStatus!="未装车"&&res.data.orderStatus!="待货主确认装车"&&res.data.orderStatus!="货主驳回装车信息"){
								this.status2 = true
							}
						}
						
					})
			},
			goConfirmLoading(id) {
				
				console.log('点击详情id：', id)
				uni.$u.route('/pages/order/confirmLoading', {
					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;

			}
		}
	}

	.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%;
		}

		.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;
	}
</style>