daijia/司机端/components/huoyun/hy-item.vue

<template>
	<view class="bg-white" style="box-shadow: 0px 0px 13px 0px rgba(18, 0, 98, 0.2);">
		<!-- 标题 -->
		<view class="flex">
			<view class="flex_l">
				<view v-if="type==1" class="size-30 bg-blue white ptb-18 plr-28">{{item.type==1?'即时单':'预约单'}}</view>
				<view v-if="type==2" class="size-30 bg-blue white ptb-18 plr-28">{{item.type==1?'即时单-':'预约单-'}}{{item.status_text}}</view>
				<view v-if="type==3" class="size-30 bg-blue white ptb-18 plr-28">{{item.type==1?'即时单-':'预约单-'}}{{item.status_text}}</view>
				<view class="ml-20" v-if="type!=3&&item.type==1">立即出发</view>
				<view class="ml-20 size-28" v-if="type!=3&&item.type==2">{{ item.appointment_time | formatDate }} 出发</view>
				<view class="ml-20 red" v-if="type==3&&item.platform_service_fee">服务费：￥{{item.platform_service_fee}}</view>
			</view>
			<view class="red bold mr-36">￥{{item.order_price}}</view>
		</view>
		<!-- 起始点 -->
		<view class="pt-35 pl-40 pr-28" @click="toDetail(item.id)">
			<view class="flex">
				<view class="flex_l u-flex-1 over-hidden">
					<view class="flex flex-column">
						<view class="bg-purple radius mt-10" style="width: 28rpx;height: 28rpx;"></view>
						<view class="size-28 mt-16">起点</view>
					</view>
					<view class="flex1 flex-column ml-40 u-flex-1 over-hidden">
						<view class="flex">
							<view class="bold u-flex-1">{{item.start}}</view>
							<!-- <view class="gray-1">【距您1.5km】</view> -->
						</view>
						<view class="u-line-1 size-28 mt-12">{{item.start_address}}</view>
					</view>
				</view>
				<view v-if="item.is_transport==1">
					<image src="../../static/hy-banyun.png" style="width: 64rpx;height: 35rpx;" mode=""></image>
					<view class="blue size-26">需搬运</view>
				</view>
			</view>

			<view class="w100 flex_r" style="height: 46rpx;">
			</view>

			<view class="flex flex-bottom mb-40" v-for="(items,index) in item.shaddress" :key="index">
				<view class="flex_l u-flex-1 over-hidden" >
					<view class="flex flex-column">
						<view class="bg-red radius mt-10" style="width: 28rpx;height: 28rpx;"></view>
						<view class="size-28 mt-16">终点</view>
					</view>
					<view class="flex1 flex-column ml-40 u-flex-1 over-hidden">
						<view class="flex">
							<view class="bold u-flex-1">{{items.end}}</view>
							<view class="ml-15 mr-12 gray-1" v-if="index==(item.shaddress.length-1)"> 全程{{item.distance}}km </view>
						</view>
						<view class="u-line-1 size-28 mt-12">{{items.end_address}}</view>
					</view>
				</view>

			</view>
			<view class="bt size-28 ptb-20">
				<view class="pb-10" v-if="item.demand_text">额外需求：{{item.demand_text}}</view>
				<view class="flex">
					<view>备注：{{item.remark?item.remark:'无'}}</view>
					<view>跟车{{item.people_num}}人</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view v-if="type==1||type==2" class="flex size-32 bold white w100" style="height: 96rpx;">
			<view @click="clickButton(item.id,item.status)" class="u-flex-1 bg-blue center h100">{{type==1?'抢单':item.status==5?'开始出发':'查看详情'}}</view>
		</view>
	</view>
</template>

<script>
	// import { formatTime } from '../common/utils.js'
	//代驾			 -2=已超时,-1=已取消,0=呼叫中,1=已接单,2=进行中,3=待支付,4=司机已到达,5=预约单待司机出发,99=已完成
	export default {
		props: {
			type: {
				type: String, // 1 首页  2 订单(1245)  3 历史订单 （3 99）
			},
			item: {
				type: Object
			}
		},
		data() {
			return {

			};
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/huoyun/order-detail?id=' + id
				})
			},

			clickButton(id, status) {
				if (this.type == 1) {
					//首页抢单
					this.$http('/addons/ddrive/hyorder/tasking', {
						order_id: id
					}, "POST").then(() => {
						uni.showToast({
							title: '抢单成功'
						})
						setTimeout(() => {
							this.toDetail(id)
						}, 200)
					})
				} else if (this.type == 2) {
					if (status == 5) {
						//订单——已接单——开始出发
						this.$http('/addons/ddrive/hyorder/set_out', {
							order_id: id
						}, "POST").then(() => {
							setTimeout(() => {
								this.toDetail(id)
							}, 200)
						})
					} else {
						//订单——查看详情
						this.toDetail(id)
					}
				}
			}
		}
	}
</script>

<style lang="scss">

</style>