daijia/司机端/pages/shunfeng/order-detail.vue

<template>
	<view style="padding-bottom: 190rpx;">
		<view class="mlr-36 mt-30" style="box-shadow: 0px 0px 13px 0px rgba(18, 0, 98, 0.2);">
			<sfItem :item="info" type="2" :button="false"></sfItem>
			<!-- -1=已取消,1=待接单,2=待确认,3=待出发,4=行驶中,5=已完成 -->
			<!-- 待确认--总费用 -->
			<view class="bt ptb-20" v-if="info.status==2">
				<view class=" size-32 text-center">
					订单总费用
				</view>
				<u-field v-model="price" label-width="0" placeholder="请输入金额"></u-field>
			</view>
		</view>
		<view class="plr-36 size-26 gray-2 mtb-30" v-if="info.status==2">
			注：请尽快与乘客联系，协商好订单总费用后填写费用再发送给乘客
		</view>

		<!-- 待出发--预留座位 -->
		<view  v-for="(item,i) in info.chil_order" :key="i" v-if="info.order_type==2">
			<view class="bg-blue white  pd-30 size-28 mlr-36">
				<view class="flex">
					<view class="">
						预留座位：{{item.people_num}}人
					</view>
					<view class="">
						￥{{item.car_price}}
					</view>
				</view>
				<view class="flex mt-10" @click="call(item.tel)">
					<view class="">
						联系方式：{{item.tel}}
					</view>
					<view class="img">
						<image src="../../static/phone-white.png" mode=""></image>
					</view>
				</view>
				<view class="flex mt-10">
					<view class="">
						上车地点：{{item.start_address}}
					</view>
				</view>
			</view>
			<!-- 行程中--线下结算 -->
			<view class="bg-grey mlr-36" v-if="info.status==4&&item.pay_status==0">
				<u-button type="default" @click="offline(item.id)">确认线下结算</u-button>
			</view>
		</view>
		
		<!-- 按钮 -->
		<view class="fixed-bottom bg-white pb-50 pt-20">
			<view class="mlr-36 mt-20" v-if="info.status==-1">
				<u-button type="primary" @click="toHome">重新接单</u-button>
			</view>
			<view class="cancel mlr-36" v-if="info.status==2">
				<u-button type="primary" @click="cancle">取消订单</u-button>
			</view>
			<view class="mlr-36 mt-20" v-if="info.status==2">
				<u-button type="primary" @click="confirm">确认发送订单价格给乘客</u-button>
			</view>
			<view class="mlr-36 mt-20" v-if="info.status==1||info.status==3">
				<u-button type="primary" @click="go">开始出发</u-button>
			</view>
			<view class="cancel mlr-36" v-if="info.status==4&&info.order_type==1&&info.pay_status==0">
				<u-button type="primary" @click="offline('')">确认线下结算</u-button>
			</view>
			<view class="mlr-36 mt-20" v-if="info.status==4">
				<u-button type="primary" @click="over">行程结束</u-button>
			</view>
			<view class="mlr-36 mt-20" v-if="info.status==5">
				<u-button type="primary" @click="toHome">已完成，继续接单</u-button>
			</view>
		</view>
		<u-modal v-model="show" :content="content" :show-title="false" :confirm-style="{background:'#286ceb'}" confirm-color="#fff"></u-modal>
		<u-modal @confirm="confirmOff" :show-cancel-button="true" v-model="showOff" :content="contentOff" :show-title="false"
		 :confirm-style="{background:'#286ceb'}" confirm-color="#fff"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {  
				id: '',
				cid:'', //子单id
				info: {}, //-1=已取消,1=待接单,2=待确认,3=待出发,4=行驶中,5=已完成
				price: '',
				content: '乘客还未支付，请乘客支付后再进行此操作',
				contentOff: '请先确认收到乘客线下付款，否则一切损失平台概不负责',
				show: false,
				showOff: false,
				timer:null,
				//乘客发布:待确认，待出发：轮询顾客是否取消
				arr:[2,3], //order_type  1用户发  2 司机发 
			};
		},
		onLoad(option) {
			this.id = option.id
			clearInterval(this.timer)
			this.timer = null
			this.init()
		},
		onUnload() {
			clearInterval(this.timer)
			this.timer = null
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null
		},
		methods: {
			init() {
				this.$http('/addons/ddrive/sforder/info', {
					order_id: this.id
				}, "POST").then((data) => {
					this.info = data
					uni.setNavigationBarTitle({
						title: this.info.statusText
					})
					//乘客发布:待接单，待确认，待出发：轮询顾客是否取消
					//司机发布:待出发：轮询顾客是否取消
					if((data.order_type==1&&this.arr.includes(data.status*1))||(data.order_type==2&&data.status==3)){
						if(!this.timer){
							this.timer = setInterval(()=>{
								this.init()
							},3000)
						}
					}else{
						clearInterval(this.timer)
						this.timer = null
					}
				})
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/home/index'
				})
			},
			// 线下结算
			offline(id) {
				if (id) {
					//司机发布——子单
					this.cid = id
					this.showOff = true
				} else {
					//乘客发布
					this.showOff = true
				}
			},
			// 确认
			confirmOff() {
				this.$http('/addons/ddrive/sforder/offline_settlement', {
					order_id: this.cid?this.cid:this.id
				}, "POST").then(() => {
					uni.showToast({
						title: '付款成功'
					})
					setTimeout(() => {
						this.init()
					}, 1000)
				})
			},
			// 取消订单
			cancle() {
				this.$http('/addons/ddrive/sforder/cancel', {
					order_id: this.id
				}, "POST").then(() => {
					uni.showToast({
						title: '取消成功'
					})
					setTimeout(() => {
						uni.navigateBack();
					}, 1000)
				})
			},
			// 确认订单价格
			confirm() {
				if (!this.price) {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					})
				} else {
					this.$http('/addons/ddrive/sforder/confirm', {
						order_id: this.id,
						order_money: this.price
					}, "POST").then(() => {
						uni.showToast({
							title: '发送成功'
						})
						setTimeout(() => {
							this.init()
						}, 1000)
					})
				}
			},
			// 开始出发
			go() {
				this.$http('/addons/ddrive/sforder/set_out', {
					order_id: this.id
				}, "POST").then(() => {
					this.init()
				})
			},
			// 结束行程
			over() {
				if (this.info.pay_status == 0) {
					this.show = true
				} else {
					this.$http('/addons/ddrive/sforder/order_complete', {
						order_id: this.id
					}, "POST").then(() => {
						this.init()
					})
				}
			},
			//打电话
			call(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn--primary {
		border-radius: 0;
	}
	/deep/.u-primary-hover {
		background-color: $blue !important;
	}
	/deep/.u-size-default {
		width: 100% !important;
		height: 88rpx !important;
		font-weight: 700 !important;
	}

	.img {
		image {
			width: 54rpx;
			height: 54rpx;
		}
	}

	.cancel {
		/deep/.u-btn--primary {
			color: $blue;
			background: none !important;
			border: 1rpx solid rgba(18, 0, 98, 0.2);
		}
	}
</style>