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

<template>
	<view class="bt" style="padding-bottom: 150rpx;">
		<view class="plr-36 ptb-30 bb flex">
			<view class="flex1 flex-middle">
				<text class="bold">{{info.car_name}}</text>
				<view class="mlr-15" style="width: 1rpx;height: 29rpx ;background: #bbb;"></view>
				<text>{{info.appointment_time_text?info.appointment_time_text:'立即出发'}}</text>
			</view>
			<view class="">
				{{info.status_text}}
			</view>
		</view>
		<view class="plr-32 ptb-25">
			<view class="flex1 flex-middle">
				<view class="center" style="width: 100rpx;">
					<view class="" style="width: 28rpx;height: 28rpx;background: #6340FF;border-radius: 50%;"></view>
				</view>
				<view class="ml-30 bold">
					{{info.start}}
				</view>
			</view>
			<view class="flex1 flex-middle mt-20">
				<view class="center" style="width: 100rpx;">
					起点
				</view>
				<view class="ml-30">
					{{info.start_address}}
				</view>
			</view>
		</view>
		<view class="plr-32 ptb-25" v-for="(item,i) in info.shaddress" :key="i">
			<view class="flex1 flex-middle">
				<view class="center" style="width: 100rpx;">
					<view class="" style="width: 28rpx;height: 28rpx;background: #EA0000;border-radius: 50%;"></view>
				</view>
				<view class="ml-30 bold">
					{{item.end}}
				</view>
			</view>
			<view class="flex1 flex-middle mt-15">
				<view class="center" style="width: 100rpx;">
					{{i==info.shaddress.length-1?'终点站':'中途站'}}
				</view>
				<view class="ml-30 u-flex-1 flex">
					<view class="mr-20">
						{{item.end_address}}
					</view>
					<view class="img center">
						<image @click="toMap(item.end_latitude,item.end_longitude)" src="../../static/order-map.png" mode="" class="mr-20"></image>
						<image @click="toTel(item.mobile)" v-if="item.mobile" src="../../static/order-phone.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="plr-36 bb ptb-30">
			<view class="flex1 flex-middle">
				<view class="">
					跟车人数：
				</view>
				<view class="">
					{{info.people_num}}人
				</view>
			</view>
			<view class="flex1 mt-20" v-if="info.demand_text">
				<view class="">
					额外需求：
				</view>
				<view class="u-flex-1">
				{{info.demand_text}}
				</view>
			</view>
			<view class="flex1 mt-20">
				<view class="">
					订单备注：
				</view>
				<view class="u-flex-1">
					{{info.remark?info.remark:'无'}}
				</view>
			</view>
		</view>
		<view class="plr-36 ptb-30">
			<view class="bold">
				订单信息
			</view>
			<view class="mt-20">
				订单号：{{info.out_trade_no}}
			</view>
			<view class="mt-20">
				下单时间：{{info.createtime}}
			</view>
			<view class="mt-20">
				订单总价：￥{{info.order_price}}
			</view>
			<view class="mt-20">
				支付方式：{{info.pay_method==1?'在线支付':'货到付款'}}
			</view>
			<view class="mt-20">
				订单里程：约{{info.distance}}千米
			</view>
			<view class="mt-20" v-if="info.platform_service_fee!=0">
				服务费：{{info.platform_service_fee}}元
			</view>
		</view>
		<!-- status -1=已取消,0=呼叫中,1=已接单,2=进行中,3=待支付,
		4=司机已到达,5=预约单待司机出发,99=已完成' -->
		<view class="fixed-bottom pd-36">
			<u-button @click="takeOrder" type="primary" v-if="info.status==0">立即接单</u-button>
			<u-button @click="onOrigin" type="primary" v-if="info.status==1">确认我已到达</u-button>
			<u-button @click="toDestination" type="primary" v-if="info.status==4">开始行程</u-button>
			<u-button @click="toPay" type="primary" v-if="info.status==2">确认货物已到达</u-button>
			<u-button @click="startGo" type="primary" v-if="info.status==5">开始出发</u-button>
			<u-button @click="toHome" type="primary" v-if="info.status==-1">订单已取消，重新接单</u-button>
			<u-button @click="toHome" type="primary" v-if="info.status==99">订单已完成，重新接单</u-button>
			<u-button @click="toPay1" type="primary" v-if="info.status==3">确认货到付款</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: {},
				timer:null,
				arr:[0,1,4,5]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.init()
		},
		onShow(){
			this.init()
		},
		onHide() {
			clearInterval(this.timer)
			this.timer=null
		},
		onUnload() {
			clearInterval(this.timer)
			this.timer=null
		},
		methods: {
			init() {
				this.$http('/addons/ddrive/hyorder/info', {
					order_id: this.id
				}, "POST").then(data => {
					this.info = data
					uni.setNavigationBarTitle({
						title:data.status_text
					})
					if(!this.timer&&this.arr.includes(this.info.status*1)){
						this.timer = setInterval(()=>{
							if(!this.arr.includes(this.info.status*1)){
								clearInterval(this.timer)
								this.timer=null
							}else{
								this.init()
							}
						},1000)
					}
				})
			},
			// 抢单
			takeOrder() {
				this.$http('/addons/ddrive/hyorder/tasking', {
					order_id: this.info.id
				}, "POST").then(() => {
					uni.showToast({
						title: '接单成功'
					})
					this.init()
				})
			},
			// 预约单开始出发
			startGo() {
				this.$http('/addons/ddrive/hyorder/set_out', {
					order_id: this.info.id
				}, "POST").then(() => {
					this.init()
				})
			},
			// 到达起点
			onOrigin() {
				this.$http('/addons/ddrive/hyorder/reach', {
					order_id: this.info.id
				}, "POST").then(() => {
					this.init()
				})
			},
			// 开始行程
			toDestination() {
				this.$http('/addons/ddrive/hyorder/start', {
					order_id: this.info.id
				}, "POST").then(() => {
					this.init()
				})
			},
			// 确认订单
			toPay() {
				this.$http('/addons/ddrive/hyorder/done', {
					order_id: this.info.id
				}, "POST").then(() => {
					console.log(this.info.pay_method);
					if(this.info.pay_method==1){
						this.init()
					}else{
						uni.navigateTo({
							url:'/pages/huoyun/pay?id='+this.id
						})
					}
				})
			},
			toPay1(){
				uni.navigateTo({
					url:'/pages/huoyun/pay?id='+this.id
				})
			},
			toHome(){
				uni.switchTab({
					url:'/pages/home/index'
				})
			},
			toTel(tel){
				uni.makePhoneCall({
				    phoneNumber: tel //仅为示例
				});
			},
			toMap(lat,long){
				uni.getSystemInfo({
					success(res) {
						console.log(res.platform);
						if(res.platform=='android'){
							plus.runtime.openURL("androidamap://navi?sourceApplication=ddcar&lat="+lat+"&lon="+long+"&dev=0&style=2")
						}else if(res.platform=='ios'){
							plus.runtime.openURL("iosamap://navi?sourceApplication=ddcar&lat="+lat+"&lon="+long+"&dev=0&style=2")
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn--primary {
		background: $blue !important;
	}

	.img {
		image {
			width: 54rpx;
			height: 54rpx;
		}
	}
</style>