discounts-minapp/my/order/trip/detail.vue

<template>
	<view class="order-detail">
		<zs-skeleton type="orderDetail" :loading="pageLoading"></zs-skeleton>
		<view class="status-box">
			<view class="text-box">
				<view class="status">
					{{ info.goodsList[0] | filterType }}
				</view>
			</view>
		</view>
		<view class="content">
			<view class="title">
				行程信息
			</view>

			<view class="item">
				<view class="label">
					下单时间
				</view>
				<view class="value">
					{{ info.goodsList[0].extend.createTime }}
				</view>
			</view>


			<view class="item">
				<view class="label">
					出发地点
				</view>
				<view class="value">
					{{ info.goodsList[0].extend.originName }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					到达地点
				</view>
				<view class="value ">
					{{ info.goodsList[0].extend.destinationName }}
				</view>
			</view>

			<view class="price-box">
				<view class="price">
					{{ info.goodsList[0].payAmount }} 元
				</view>
				<view class="text" @click="clickDetail">
					<view>收费明细</view>
					<image class="img" :class="show ? 'deg90' : '-deg90'" src="@/static/jiantou-icon.png"></image>
				</view>
			</view>

			<template v-if="show">
				<view class="item" :key="index" v-for="(item, index) in info.goodsList[0].extend.priceItems">
					<view class="label">
						{{ item.title }}
					</view>
					<view class="value">
						{{ item.value }}元
					</view>
				</view>
			</template>

			<view class="title" style="	margin-top: 28rpx;">
				全程{{ (distance / 1000).toFixed(1) }}公里，{{ isNaN(minutes) ? 0 : minutes }}分钟
			</view>
		</view>



		<view class="content">
			<view class="title">
				订单信息
			</view>
			<view class="item">
				<view class="label">
					订单编号
				</view>
				<view class="value">
					{{ info.orderNo }}
				</view>
			</view>

			<view class="item" v-if="info.goodsList[0].goodsState == 'USED'">
				<view class="label">
					付款方式
				</view>
				<view class="value">
					线下支付
				</view>
			</view>
		</view>

		<button type="default" :loading="btnLoading" class="pay-btn" v-if="info.goodsList[0].goodsState == 'WAIT_PAYMENT'"
			@click="toTrip">前往订单</button>

	</view>
</template>

<script>
var QQMapWX = require('@/libs/qqmap-wx-jssdk.min.js');
var qqmapsdk = new QQMapWX({
	key: 'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'
});
import { payDetails } from '@/api/payment.js';
export default {
	data() {
		return {
			isVisual: false,//是否是虚拟商品
			codeData: '123',
			show: false,
			loading: false,
			pageLoading: true,
			info: {
				goodsList: [{
					goodsState: 'CLOSE', serviceFee: 0, extend: {

					}
				}]
			},
			distance: 0,
			minutes: 0
		}
	},
	watch: {
		// isNotTime(val) {
		// 	if(this.isNotTime){
		// 		this.payDetails(this.info.orderNo)
		// 	}
		// }
	},
	filters: {
		filterType: function (val) {
			if (val.refundLog && val.refundLog.refund == 'REFUSAL_REFUND' && !val.change) {
				return '拒绝退款'
			}
			else if (val.goodsState == 'APPLY_REFUND') {
				return '退款审核中'
			} else if (val.goodsState == 'CLOSE') {
				return '关闭订单'
			} else if (val.goodsState == 'REFUNDED') {
				return '已退款'
			} else if (val.goodsState == 'REFUSAL_REFUND') {
				return '拒绝退款'
			} else if (val.goodsState == 'APPLY_REFUNDING') {
				return '退款中'
			} else if (val.goodsState == 'USED') {
				return '已结束'
			} else if (val.goodsState == 'WAIT_PAYMENT') {
				return '进行中'
			} else if (val.goodsState == 'WAIT_USE') {
				return '待使用'
			} else {
				return ''
			}
		},

	},

	methods: {
		toTrip() {
			uni.redirectTo({
				url: '/trip/index/index'
			});
		},
		close() {
			this.show = false
		},
		// 获取订单详情
		payDetails(orderNo) {
			payDetails(orderNo).then(res => {
				this.pageLoading = false
				this.info = res.content

				// 计算开始和结束的距离
				const destinationLongitude = this.info.goodsList[0].extend.destinationLongitude
				const destinationLatitude = this.info.goodsList[0].extend.destinationLatitude
				const originLongitude = this.info.goodsList[0].extend.originLongitude
				const originLatitude = this.info.goodsList[0].extend.originLatitude

				qqmapsdk.calculateDistance({
					mode: 'driving',
					from: {
						latitude: originLatitude,
						longitude: originLongitude
					},
					to: [{
						latitude: destinationLatitude,
						longitude: destinationLongitude
					}],
					success: (res) => {
						console.log(res)
						if (res.message === 'Success') {
							this.distance = res.result.elements[0].distance.toFixed(2)
						}
					}
				})
				// 计算订单开始到结束的耗时
				// driverEndTime
				// startTime

				const driverEndTime = new Date(this.info.goodsList[0].extend.driverEndTime).getTime()
				const startTime = new Date(this.info.goodsList[0].extend.startTime).getTime()
				const time = driverEndTime - startTime
				// 转换为分钟数
				this.minutes = (time / 1000 / 60).toFixed(0)

			})
		},
		clickDetail() {
			this.show = !this.show
		}


	},
	onReady() {

	},
	onLoad(options) {
		this.info.orderNo = options.id
	},
	onShow() {
		this.pageLoading = true
		this.payDetails(this.info.orderNo)
	},
	created() {
		// this.info = JSON.parse(uni.getStorageSync('order'))
	}
}
</script>

<style lang="scss">
.order-detail {
	background: #F9F9F9;
	min-height: 100vh;
	padding-bottom: 100rpx;

	.status-box {
		padding: 24rpx 24rpx 4rpx;
		display: flex;
		justify-content: space-between;

		.text-box {
			color: #181818;

			.status {
				font-weight: bold;
				font-size: 32rpx;
				display: flex;

				.u-count-down__text {
					color: $uni-color-primary !important;
				}
			}

			.notice {
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}

	.pay-btn {
		background: $uni-color-primary;
		width: 688rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 46rpx;
		color: #fff;
		margin-top: 50rpx;
	}

	.content {
		margin: 20rpx 30rpx;
		padding: 28rpx 24rpx;
		border-radius: 16rpx;
		background: #fff;

		.title {
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 28rpx;

			.label {
				font-size: 28rpx;
				color: #AAAAAA;
			}

			.value {
				font-size: 28rpx;
				color: #222222;
				word-break: break-all;
				max-width: 80%;
			}
		}

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 28rpx;

			.price {
				font-size: 36rpx;
				font-weight: bold;
				color: #222222;
			}

			.text {
				font-size: 24rpx;
				color: #AAAAAA;
				display: flex;
				align-items: center;

				.img {
					margin-left: 16rpx;
					width: 24rpx;
					height: 24rpx;

				}

				.deg90 {
					rotate: 90deg;
				}

				.-deg90 {
					rotate: -90deg;
				}
			}
		}



	}
}
</style>