daijia/司机端/components/order-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==5?'已接单':'行程中'}}</view>
				<view v-if="type==3" class="size-30 bg-blue white ptb-18 plr-28">{{item.type==1?'即时单-':'预约单-'}}{{item.status==3?'待支付':'已完成'}}</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.estimated_price}}</view>
		</view>
		<!-- 起始点 -->
		<view class="ptb-35 pl-40 pr-28" @click="toDetail(item.id)">
			<view class="flex flex-top">
				<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>

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

			<view class="flex flex-bottom">
				<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">{{item.end}}</view>
							<view class="ml-15 mr-12 gray-1"> 全程{{(item.distance/1000).toFixed(1)}}km </view>
						</view>
						<view class="u-line-1 size-28 mt-12">{{item.end_address}}</view>
					</view>
				</view>

			</view>

		</view>
		<!-- 按钮 -->
		<view v-if="type==1||type==2" class="flex size-32 bold white w100" style="height: 96rpx;">
			<!-- <view @click="zhuandan(1)" v-if="type==2&&status==1" class="bg-gray-2 center h100" style="width: 170rpx;">转单</view> -->
			<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'
	export default {
		props: {
			type: {
				type: Number, // 1 首页  2 订单(124行程中 5已接单)  3 历史订单 （3待支付 99已完成）
			},
			item: {
				type: Object
			}
		},
		data() {
			return {

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

			clickButton(id, status) {
				if (this.type == 1) {
					//首页抢单
					this.$http('/addons/ddrive/order/taking', {
						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/order/set_out', {
							order_id: id
						}, "POST").then(() => {
							setTimeout(() => {
								this.toDetail(id)
							}, 200)
						})
					} else {
						//订单——查看详情
						this.toDetail(id)
					}
				}
			}
		}
	}
</script>

<style lang="scss">

</style>