wangluohuoyun-huozhuapp/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" @click="back"></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.cargoOwnerStatus}}</view>

			</view>
			<!-- flex flex-space-between -->
			<view class="item2">

				<u-button class="btn" text="拒绝" @click="accept(2)" v-if="dataObj.cargoOwnerStatus=='待接单'">
				</u-button>
				<u-button class="btn" text="接受" @click="accept(1)" v-if="dataObj.cargoOwnerStatus=='待接单'">
				</u-button>
				<u-button class="btn" text="终止" @click="clickstop()" v-if="dataObj.cargoOwnerStatus=='未装车'">
				</u-button>
				<u-button class="btn" text="查看合同" @click="lookContract" v-if="dataObj.cargoOwnerContract=='1'">
				</u-button>
				<u-button class="btn" text="签订合同" @click="signContract"
					v-if="dataObj.cargoOwnerStatus=='待确认装车'&&dataObj.cargoOwnerContract!='1'">
				</u-button>

				<u-button class="btn" text="驳回装车信息" @click="confirmLoading(5)" v-if="dataObj.cargoOwnerStatus=='待确认装车'">
				</u-button>
				<!-- 		<u-button class="btn" text="确认装车" @click="confirmLoading(3)"
					v-if="dataObj.cargoOwnerStatus=='待确认装车'&&dataObj.cargoOwnerContract=='1'">
				</u-button> -->
				<u-button class="btn" text="确认装车" @click="confirmLoading(3)" v-if="dataObj.cargoOwnerStatus=='待确认装车'">
				</u-button>

				<u-button class="btn" text="驳回卸车信息" @click="confirmUnLoading(6)" v-if="dataObj.cargoOwnerStatus=='待收货'">
				</u-button>
				<u-button class="btn" text="确认卸车" @click="confirmUnLoading(4)" v-if="dataObj.cargoOwnerStatus=='待收货'">
				</u-button>
				<u-button class="btn" text="确认运费" @click="freightOk()" v-if="dataObj.cargoOwnerStatus=='司机驳回运费信息'"></u-button>
				<!-- <u-button class="btn" text="确认卸车" @click="confirmLoading(4)" v-if="dataObj.cargoOwnerStatus=='待收货'">
				</u-button> -->
				<u-button class="btn" text="付款" @click="closed"
					v-if="dataObj.cargoOwnerStatus=='待结算'||dataObj.cargoOwnerStatus=='已结算'"></u-button>
				<u-button class="btn" text="还款" @click="stop" v-if="dataObj.cargoOwnerStatus=='待还款'"></u-button>
				<u-button class="btn" text="联系客服" @click="$helper.contactCustomerService()"
					v-if="dataObj.cargoOwnerStatus!='待接单'&&dataObj.cargoOwnerStatus!='未装车'">
				</u-button>
			</view>
			<view class="item3 flex flex-space-between align-center">
				<view class="left flex align-center" @click="goTodriverDetail">
					<u--image :showLoading="true" :src="dataObj.driverPortrait" width="44px" height="44px" @click=""
						shape='circle'>
					</u--image>
					<view class="name">{{dataObj.driverName}}</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="toPhone" mode=""></image>
						<!-- <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.wtContractNo?dataObj.wtContractNo:'未签订'}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">车牌号</view>
				<view class="row-right-text">{{dataObj.hyCarrierInfo.carNo}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">预计运费</view>
				<view class="row-right-text">{{dataObj.hyCarrierInfo.estimatedFreight}}元</view>
			</view>
			<view class='row-between' >
				<view class="row-left-text gray">预付款</view>
				<view class="row-right-text">{{dataObj.advanceCharge}}元</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">装车净重</view>
				<view class="row-right-text">{{dataObj.hyCarrierInfo?dataObj.hyCarrierInfo.loadingWeight:""}}吨</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">运输开始日期</view>
				<view class="row-right-text">{{dataObj.tranStartDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">运输结束日期</view>
				<view class="row-right-text">{{dataObj.tranEndDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">装车时间</view>
				<view class="row-right-text">{{dataObj.hyCarrierInfo.loadingDate}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">装车照片</view>
				<view class="flex">
					<u--image :showLoading="true" :src="item" width="40px" height="40px"
						v-for="(item,index) in zcImgList" @click='ylImg(zcImgList)'></u--image>
				</view>
			</view>
			<view v-if='dataObj.orderStatus=="待货主确认卸车"||dataObj.orderStatus=="待平台确认卸车"||dataObj.orderStatus=="货主驳回装车信息"||dataObj.orderStatus=="平台驳回装车信息"||dataObj.orderStatus=="待确认运费"||dataObj.cargoOwnerStatus=="已完结"'>
				<view class='row-between'>
					<view class="row-left-text gray">合计应付运费</view>
					<view class="row-right-text">
						<u--input v-if='dataObj.orderStatus=="待货主确认卸车"' placeholder="请输入合计应付运费" border="none" inputAlign="right" clearable v-model="totalFreight"></u--input>
						<view v-if='dataObj.orderStatus=="待平台确认卸车"||dataObj.orderStatus=="货主驳回装车信息"||dataObj.orderStatus=="平台驳回装车信息"||dataObj.orderStatus=="待确认运费"||dataObj.cargoOwnerStatus=="已完结"'>{{totalFreight}}</view>
					</view>
				</view>
				<view class='row-between'>
					<view class="row-left-text gray">卸车时间</view>
					<view class="row-right-text">{{dataObj.hyCarrierInfo.unloadingDate}}</view>
				</view>
				<view class='row-between'>
					<view class="row-left-text gray">卸车照片</view>
					<view class="flex">
						<u--image :showLoading="true" :src="item" width="40px" height="40px"
							v-for="(item,index) in xcImgList" @click='ylImg(xcImgList)'></u--image>
					</view>
				</view>
				<view class='row-between'>
					<view class="row-left-text gray">回单照片</view>
					<view class="flex">
						<u--image @click='ylImg(hdImgList)' :showLoading="true" :src='item' width="40px" height="40px" v-for="(item,index) in hdImgList"></u--image>
					</view>
				</view>
			</view>
		</view>
		<!-- v-if="status2 -->
		<view class="content4" v-if="status2">
			<view class="level2-title">运费信息（单位：元）</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="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.ownerFreightBalanceDate?dataObj.freightInfo.ownerFreightBalance:"未支付"}}
				</view>
			</view>
			<view class='flex flex-end'>
				<view class="row-right-text">{{dataObj.freightInfo.ownerFreightBalanceDate}}</view>
			</view>
			<view style='flex-wrap: wrap;' class='flex mx row-left-text'>
				<!-- 明细：预付{{dataObj.advanceCharge}}元，服务费{{dataObj.freightInfo.driverServiceCharge}}元，尾款{{dataObj.freightInfo.ownerFreightBalance}}元，合计{{dataObj.freightInfo.totalPayment}}元。 -->
				明细：预付{{dataObj.advanceCharge}}元，工本费{{dataObj.freightInfo.ownerServiceCharge}}元，<text v-if="dataObj.freightInfo.ownerFreightBalance">尾款{{dataObj.freightInfo.ownerFreightBalance}}元，</text>合计{{dataObj.freightInfo.totalPayment}}元。</view>
			</view>
		<!-- v-if="status3" -->
		<view class="content4" v-if="status3">
			<view class="level2-title gray">还款信息</view>
			<view class='row-between'>
				<view class="row-left-text gray">运费</view>
				<view class="row-right-text">{{dataObj.freightInfo.totalRepayable}}</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">超期费（每天3%）</view>
				<view class="row-right-text">{{dataObj.freightInfo.overdueFee}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">合计应还</view>
				<view class="row-right-text">{{dataObj.freightInfo.totalRepayable}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">还款（尾号{{dataObj.freightInfo.repaymentBank}}）</view>
				<view class="row-right-text">{{dataObj.freightInfo.repaymentConfirm}}</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">{{dataObj.freightInfo.updateDate}}</view>
				<!-- <view class="row-right-text">{{dataObj.freightInfo.freightBalance}}</view> -->
			</view>
		</view>
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :confirmText='confirmText'
			:closeOnClickOverlay='true' :showCancelButton='true' @confirm="$u.throttle(confirmClick(), 5000)" @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="u-popup-wrap">
				<view >
					<image style='width:12px;height:12px;' @click='closepopup' class='close'  src="../../static/images/order/guanbi@3x.png" mode=""></image>
					<!-- <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="" >
		           	<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'>
		           </u--textarea>
				   <view class='termination' :class="{'active':value2.length>0}" @click='$u.throttle(termination(), 5000)'>终止</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<!-- <u-popup :show="moneyShow" mode="center" @close="close" @open="open">
			<view class="freight">
				<view class="freight_text">
					合计运费
				</view>
				<u--input v-model="totalFreight" placeholder="请输入合计运费"></u--input>
				<view class="freight_up">
					<view class="freight_item">取消</view>
					<view class="freight_item">确定</view>
				</view>
			</view>
			
		</u-popup> -->
		<u-modal :show="moneyShow"  title="合计运费" showCancelButton @confirm="moneyClick" @close="moneyclose"
			@cancel="moneyclose">
					<view class="slot-content">
						<u--input v-model="totalFreight" type="number" placeholder="合计应付运费(含预付款)"></u--input>
					</view>
		</u-modal>
		<!-- 		<view v-if="lookAlert" class="look-contract" @click="lookAlert==false">
			<u-button class="btn" text="查看合同" @click="lookContract"></u-button>
			<u-button class="btn" text="签名"></u-button>
			<view class="wrapper">
				<view class="handBtn">
					<image @click="selectColorEvent('black','#1A1A1A')"
						:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
						:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
					<image @click="selectColorEvent('red','#ca262a')"
						:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
						:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
					<button @click="retDraw" class="delBtn">重写</button>
					<button @click="saveCanvasAsImg" class="saveBtn">保存</button>
					<button @click="previewCanvasImg" class="previewBtn">预览</button>
					<button @click="subCanvas" class="subBtn">完成</button>
				</view>
				<view class="handCenter">
					<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
						@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
				</view>
				<view class="handRight">
					<view class="handTitle">请签名</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	var that;
	import permision from "@/js_sdk/wa-permission/permission.js"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		components:{
			uniPopup
		},
		data() {
			return {
				cyinfoStatus: '未装车',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				isShowTerminationReason: false,
				id: "",
				dataObj: {
					contractNo: '123'
				},
				type: null,
				status1: false,
				status2: false,
				status3: false,
				id: '',
				show:false,
				value2: '',
				radiolist1: [{
						name: '已与司机协商',
						disabled: false
					},
					{
						name: '司机原因终止',
						disabled: false
					},
					{
						name: '货主个人原因终止',
						disabled: false
					}, {
						name: '其他',
						disabled: false
					}
				],
				radiovalue1: '已与司机协商',
				confirmText: '终止',
				alertTitle: '确定终止订单？',
				alertContent: "",
				isShowAlert: false,
				zcImgList: [],
				xcImgList: [],
				hdImgList:[],
				contractSrc: '',
				canvasName: 'handWriting',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				moneyShow:false,
				totalFreight:""
			}

		},
		onLoad(options) {
			that = this
			this.id = options.id
			this.get_camera_permission()
			// this.ctx = uni.createCanvasContext("handWriting");
			// this.$nextTick(() => {
			// 	uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
			// 			this.canvasWidth = rect.width;
			// 			this.canvasHeight = rect.height;
			// 			/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
			// 			this.setCanvasBg('#fff');
			// 		})
			// 		.exec();
			// });
		},
		onShow() {
			this.getList()
		},
		methods: {
			async get_camera_permission() {
				var phone = await permision.requestAndroidPermission("android.permission.CALL_PHONE")
				if (phone == false) {
					uni.showModal({
						title: '提示',
						content: '您已经关闭拨打电话权限,去设置',
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppPermissionSetting()
								// plus.runtime.openURL("app-settings:");
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			moneyClick(){
				this.moneyShow = false
				if(this.dataObj.cargoOwnerStatus == "司机驳回运费信息"){
					this.$request.baseRequest('post', '/orderInfo/api/confirmFreight', {
							 id: this.dataObj.id,
							 typeFlag:1,
							 totalFreight:this.totalFreight
						}).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "确认成功",
								})
								// this.getList()
							}
						})
				}else{
					this.confirmUnLoading(4)
				}
			},
			moneyclose(){
				this.moneyShow = false
				this.totalFreight = ""
			},
			freightOk(){
					this.moneyShow = true
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			closepopup(){
				this.show=false
			},
			open() {
			          // console.log('open');
			},
			close() {
				this.show = false
			          // console.log('close');
			},
			ylImg(src) {
				uni.previewImage({
					urls: src,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			goTodriverDetail() {
				uni.$u.route('/pages/order/driverDetail', {
					driver: JSON.stringify(this.dataObj)
				});
			},
			lookContract() {
				uni.downloadFile({
					url: this.dataObj.ownerContractUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			signContract() {
				
				// this.lookAlert = true
				uni.$u.route('/pages/order/signContract', {
					obj: JSON.stringify(this.dataObj)
				});

			},
			// 完结
			closed() {
				let item = this.dataObj
				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);
					});
			},
			accept(type) {
				this.type = type
				if (type == 1) {
					this.alertTitle = '确定接受订单？'
					this.confirmText = '确定'
				} else if (type == 2) {
					this.alertTitle = '确定拒绝订单？'
					this.confirmText = '确定'
				} else {
					this.alertTitle = '确定终止订单？'
					this.confirmText = '终止'
				}
				this.isShowAlert = true
			},
			confirmLoading(type) {
				this.type = type
				if(this.type == 3 || this.type == 4){
					if (this.dataObj.cargoOwnerContract != '1') {
					uni.showToast({
						title: '请先签订合同!',
						icon: 'none'
					})
					return
				}
				}
				if (type == 3) {
					this.alertTitle = '确认装车？'
					this.confirmText = '确定'
					this.isShowAlert = true
				} else if (type == 4) {
					this.alertTitle = '确认卸车？'
					this.confirmText = '确定'
					this.isShowAlert = true
				} else if (type == 5) { //驳回装车信息不用签合同
					this.alertTitle = '确认驳回装车信息？'
					this.confirmText = '确定'
					this.isShowAlert = true
				}
				
				// uni.$u.route('/pages/order/confirmLoading', item);
			},
			confirmUnLoading(type) {
				this.type=type
				if(type == 4){
					console.log(this.totalFreight)
					if(this.totalFreight){
						this.alertTitle = '确认卸车？'
						this.confirmText = '确定'
						this.isShowAlert = true
					}else{
						this.moneyShow = true
					}
				}else if(type == 6){
					this.alertTitle = '确定驳回卸车信息？'
					this.confirmText = '确定'
					this.isShowAlert = true
				}
				
				// let item = this.dataObj
				// uni.$u.route('/pages/order/confirmUnloading', item);
			},
			confirmClick() {
				console.log(111111111)
				var that=this
				that.isShowAlert = false
				if (this.type == 1 || this.type == 2) {
					let _title = ''
					this.$request.baseRequest('post', '/orderInfo/api/orderReceiving', {
							id: this.dataObj.id,
							flag: this.type
						}).then(res => {
							if (res.code == 200) {
								if (this.type == 1) {
									_title = '接单成功'
								} else {
									_title = '拒绝接单成功'
								}
								this.$refs.uToast.show({
									type: 'success',
									message: _title,
									complete() {
										that.getList()
									}
								})
							} else {
								if (this.type == 1) {
									_title = '接单失败'
								} else {
									_title = '拒绝接单失败'
								}
								this.$refs.uToast.show({
									type: 'success',
									message: _title,
									complete() {
										
									}
								})
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				} else if (this.type == 3 || this.type == 4) {
					let _flag = ''
					if (this.type == 3) _flag = 1
					if (this.type == 4) _flag = 2
					
					this.$request.baseRequest('post', '/carrierInfo/cargoOwnerLoadingAdd', {
							orderId: this.dataObj.id,
							id: this.dataObj.hyCarrierInfo.id,
							loadingFlag: _flag,
							flag: 1,
							totalFreight:this.totalFreight,
						}).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "提交成功",
									complete() {
										that.getList()
										// that.upCallback({
										// 	size: 10,
										// 	num: 1
										// })
									}
								})

							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				}else if(this.type==5){
					this.$request.baseRequest('post', '/carrierInfo/cargoOwnerLoadingAdd', {
							orderId: this.dataObj.id,
							loadingFlag: 1,
							flag: 2
						}).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "驳回装车成功！",
									complete() {
										that.getList()
										// that.upCallback({
										// 	size: 10,
										// 	num: 1
										// })
									}
								})
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				}else if(this.type == 6){
					this.$request.baseRequest('post', '/carrierInfo/cargoOwnerLoadingAdd', {
							orderId: this.dataObj.id,
							loadingFlag: 2,
							flag: 2
						}).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "驳回卸车信息成功",
									complete() {
										that.getList()
										// that.upCallback({
										// 	size: 10,
										// 	num: 1
										// })
									}
								})
					
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				} else{
					var 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,
												terminator: 2,
												terminationReason: _terminationReason,
												terminationReasonDescription: this.value2
											}).then(res => {
												if (res.code == 200) {
													that.show=false
													that.value2=''
													this.$refs.uToast.show({
														type: 'success',
														message: '终止订单成功',
													})
													that.getList()
												} else {
													this.$refs.uToast.show({
														type: 'success',
														message: '终止订单失败',
													})
												}
											})
											.catch(res => {
												uni.$u.toast(res.message);
											});
				}
			},
			termination(){
				var 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,
							terminator: 2,
							terminationReason: _terminationReason,
							terminationReasonDescription: this.value2
						}).then(res => {
							if (res.code == 200) {
								that.show=false
								that.value2=''
								this.$refs.uToast.show({
									type: 'success',
									message: '终止订单成功',
								})
								that.getList()
							} else {
								this.$refs.uToast.show({
									type: 'success',
									message: '终止订单失败',
								})
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
			},
			cancelClick() {
				this.isShowAlert = false
			},
			stop() {
				let item = this.dataObj
				// 货主接单
				if (item.cargoOwnerStatusKey == 1) {
					this.isShowTerminationReason = false
				} else {
					this.isShowTerminationReason = true
				}
				this.id = item.id
				this.isShowAlert = true
			},
			clickstop(){
				let item = this.dataObj
				// 货主接单
				if (item.cargoOwnerStatusKey == 1) {
					this.isShowTerminationReason = false
				} else {
					this.isShowTerminationReason = true
				}
				this.id = item.id
				this.show = true
			},
			toPhone() {
				var that=this
				uni.makePhoneCall({
					phoneNumber: that.dataObj.driverPhone,
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			back() {
				uni.navigateBack()
			},
			getList() {
				this.$request.baseRequest('get', '/orderInfo/getOrderInfo', {
					id: this.id,
				}).then(res => {
					if (res.code == 200) {
						this.dataObj = res.data
						if(this.dataObj.hyCarrierInfo.totalFreight){//货主确定卸车输入的 合计运费
							this.totalFreight = this.dataObj.hyCarrierInfo.totalFreight
						}
						
						// 承运信息显示
						if (res.data.cargoOwnerStatus != "待接单" && res.data.cargoOwnerStatus != "未装车" && res.data
							.cargoOwnerStatus != "已终止") {
							this.status1 = true
						}
						// 运费信息
						if (res.data.cargoOwnerStatus == "已完结") {
							this.status2 = true
						}
						//还款信息
						if (res.data.cargoOwnerStatus == "待还款" && res.data.cargoOwnerStatus == "已还款" && res.data
							.cargoOwnerStatus == "已完结") {
							this.status3 = true
						}
						if (res.data.hyCarrierInfo) {
							this.zcImgList=[]
							if (res.data.hyCarrierInfo.loadingImg) {
								let _zcList = res.data.hyCarrierInfo.loadingImg.split(',')
								for (let i = 0; i < _zcList.length; i++) {
									if (_zcList[i]) this.zcImgList.push(_zcList[i])
								}
							}
							if (res.data.hyCarrierInfo.unloadingImg) {
								this.xcImgList=[]
								let _xcList = res.data.hyCarrierInfo.unloadingImg.split(',')
								for (let i = 0; i < _xcList.length; i++) {
									if (_xcList[i]) this.xcImgList.push(_xcList[i])
								}
							}
							if (res.data.hyCarrierInfo.receiptImg) {
								this.hdImgList=[]
								let _hdList = res.data.hyCarrierInfo.receiptImg.split(',')
								console.log(_hdList)
								for (let i = 0; i < _hdList.length; i++) {
									if (_hdList[i]) this.hdImgList.push(_hdList[i])
								}
							}
						}
					}

				})
			},
			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%;
			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;
	}

	.look-contract {
		padding-top: 1000rpx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: #0000005e;
		width: 100%;
		height: 100vh;

		.btn {
			width: 70%;
			margin-bottom: 20rpx;
		}
	}

	.wrapper {
		width: 100%;
		height: 95vh;
		margin: 30rpx 0;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
		position: relative;
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 95vh;
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}

	.handTitle {
		transform: rotate(90deg);
		flex: 1;
		color: #666;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 95vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.delBtn {
		position: absolute;
		top: 250rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn image {
		position: absolute;
		top: 13rpx;
		left: 25rpx;
	}

	.subBtn {
		position: absolute;
		bottom: 52rpx;
		left: -3rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #008ef6;
		color: #fff;
		margin-bottom: 30rpx;
		text-align: center;
		justify-content: center;
	}

	/*Peach - 新增 - 保存*/

	.saveBtn {
		position: absolute;
		top: 375rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.previewBtn {
		position: absolute;
		top: 500rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.uploadBtn {
		position: absolute;
		top: 625rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	/*Peach - 新增 - 保存*/

	.black-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		left: 25rpx;
	}

	.black-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 100rpx;
		left: 10rpx;
	}

	.red-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 140rpx;
		left: 25rpx;
	}

	.red-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 120rpx;
		left: 10rpx;
	}
	/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;
	}
	.freight{
		.freight_text{
			font-size: 34rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		.freight_up{
			display: flex;
			border-top: 1px solid #EEEEEE;
			height: 60rpx;
			background: red;
			margin-top: 10px;
		}
		.freight_item{
			width: 50%;
			text-align: center;
			line-height: 50rpx;
		}
	}
	.u-popup-wrap{
		padding:20px;
	}
</style>