moxuan_takeaway_shanghu/pages/order/detail.vue

<template>
	<view class="order_details">
		<!-- 待支付 -->
		<view class="part_one">
			<view>
				<!-- 订单状态 -->
				<view class="rider_order" v-if="orderDetails.indentState == 0">待付款</view>
				<view class="rider_order"
					v-if="orderDetails.indentState == 1||orderDetails.indentState ==8||orderDetails.indentState ==9||orderDetails.indentState ==10">
					已取消</view>
				<view class="rider_order" v-if="orderDetails.indentState == 2">待接单</view>
				<view class="rider_order" v-if="orderDetails.indentState == 5">待确认</view>
				<view class="rider_order" v-if="orderDetails.indentState == 3">已接单</view>
				<view class="rider_order" v-if="orderDetails.indentState ==4">派送中</view>
				<view class="rider_order" v-if="orderDetails.indentState ==6||orderDetails.indentState ==7">已完成
				</view>
				<!-- 订单提示状态 -->
				<view class="rider_tit" v-if="orderDetails.indentState == 2">请耐心等待骑手接单...</view>
				<view class="rider_tit" v-if="orderDetails.indentState == 0">请及时支付订单，否则将自动取消</view>
				<view class="rider_tit"
					v-if="orderDetails.indentState ==5||orderDetails.indentState ==6||orderDetails.indentState ==7">

					<text v-if="orderDetails.evaluateMessage">评价内容：{{orderDetails.evaluateMessage}}</text>
					<text v-else>写下您的评价感受吧！</text>
				</view>
				<view class="rider_tit"
					v-if="orderDetails.indentState == 1||orderDetails.indentState ==8||orderDetails.indentState ==9||orderDetails.indentState ==10">
					订单已被您取消</view>
				<view class="rider_tit" v-if="orderDetails.indentState == 3||orderDetails.indentState ==4">骑手已接单，尽快为您派送
				</view>

				<!-- 订单按钮状态 -->
				<view style="display: flex;justify-content: flex-end;margin-top: 16upx;margin-right: 20rpx;">
					<view class="btn1" @tap.stop="bindcomment(orderDetails)"
						v-if="orderDetails.indentState ==7||orderDetails.indentState == 6&&!orderDetails.evaluateMessage">
						去评论
					</view>
					<view class="btn1" v-if="orderDetails.indentState == 0||orderDetails.indentState == 2"
						@tap.stop="bindorderOff(orderDetails)">取消订单</view>
					<view class="btn1" @tap.stop="bindconfirm(orderDetails)" v-if="orderDetails.indentState == 5">确认订单
					</view>
					<view class="btn2" @tap.stop="bindorder(orderDetails)"
						v-if="orderDetails.indentState == 1||orderDetails.indentState == 3||orderDetails.indentState ==8||
					orderDetails.indentState ==9||orderDetails.indentState ==10||orderDetails.indentState == 4||orderDetails.indentState == 6">再来一单</view>
					<view class="btn2" v-if="orderDetails.indentState == 0" @tap.stop="bindorderpay(orderDetails)">立即付款
					</view>
				</view>
			</view>
		</view>
		<!-- 购买时间 -->
		<view class="five_box" style="padding: 30rpx 30rpx;font-size: 30upx;">
			<text>预约时间</text>
			<text style="font-weight: bold;">{{orderDetails.sendOutTime}}</text>
		</view>

		<map v-if="orderDetails.indentState == 4 && latitude && longitude" id="map" @tap="goMap"
			style="width: 95%; height: 300rpx;margin: 20rpx auto 0;" :markers="markers" :latitude="latitude"
			:longitude="longitude"></map>

		<!-- 同城购买-->
		<view class="part_three" v-if="orderDetails.indentType == 3">
			<view class="city_pay">
				<view class="city_box">同城购买</view>
				<text v-if="orderDetails.buyType == 0">就近购买</text>
				<text v-else>指定购买</text>
			</view>
			<view class="pay_tit">{{orderDetails.productDetails}}</view>
		</view>
		<!-- 同城服务-->
		<view class="part_three" v-if="orderDetails.indentType == 4">
			<view class="city_pay">
				<view class="city_box">同城服务</view>
				<text>{{orderDetails.serviceType}}</text>
			</view>
			<view class="pay_tit">{{orderDetails.serviceDetails}}</view>
		</view>
		<!-- 骑手商家地址 -->
		<view class="part_four">
			<view class="city_pay" v-if="orderDetails.indentType !=3&&orderDetails.indentType !=4">
				<view class="city_box" v-if="orderDetails.indentType == 1">帮我送</view>
				<view class="city_box" v-if="orderDetails.indentType == 2">帮我取</view>
				<text>{{orderDetails.itemType}}</text>
			</view>
			<view v-if="orderDetails.indentType !=3&&orderDetails.indentType != 4">
				<u-line color="#F2F2F2" />
			</view>
			<!-- 发货地址 -->
			<view class="one_box" v-if="orderDetails.indentType != 4" style="margin-top: 30rpx;">
				<view class="box_dian">
					<image src="../../../static/image/mai.png" v-if="orderDetails.indentType == 3"></image>
					<image src="../../../static/image/icon_f.png" v-else></image>
				</view>
				<view class="box_addres">
					<view class="add">
						{{orderDetails.shipAddress?orderDetails.shipAddress:''}}{{orderDetails.shipAddressDetail}}
					</view>
					<view class="num">
						<view class="name" v-if="orderDetails.indentType !=3">
							{{orderDetails.shipUserName}} <text>{{orderDetails.shipUserPhone}}</text>
							<!-- <view class="phone_bd" @click="bindphone(0)">拨打</view> -->
						</view>
						<view class="name" v-else>暂无信息</view>
					</view>
				</view>
			</view>
			<!-- 收获地址 -->
			<view class="one_box" style="margin-top: 20rpx;margin-bottom: 30rpx;">
				<view class="box_dian">
					<image src="../../../static/image/icon_s.png"></image>
				</view>
				<view class="box_addres">
					<view class="add">{{orderDetails.deliveryAddress}}{{orderDetails.deilveryAddressDetail}}</view>
					<view class="num">
						<view class="name">
							{{orderDetails.deliveryUserName}}<text>{{orderDetails.deliveryUserPhone}}</text>
							<!-- <view class="phone_bd" @click="bindphone()">联系TA</view> -->
						</view>

					</view>
				</view>
			</view>
			<u-line color="#F2F2F2" />
			<view class="address_pay">
				<view class="runing_pay">
					预估跑腿费
				</view>
				<view class="runing_distance">
					<text v-if="orderDetails.distance">{{orderDetails.distance/1000}}公里</text>
					<text>￥{{orderDetails.indentBasicsMoney}}</text>
				</view>
			</view>
		</view>
		<!-- 联系骑手 -->
		<view class="rider_box"
			v-if="orderDetails.indentState != 0&&orderDetails.indentState != 1&&orderDetails.indentState != 8&&orderDetails.indentState != 2&&orderDetails.indentState != 9&&orderDetails.indentState != 10">
			<view class="flex justify-between align-center padding">
				<view style="font-size: 31rpx;color: black;">联系骑手...</view>
				<image @click="complaint" src="../../../static/image/order/tousu.png"
					style="width: 43rpx;height: 39rpx;" mode=""></image>
			</view>
			<view>
				<u-line color="#F2F2F2" />
			</view>
			<view style="padding: 20rpx 25rpx;display: flex;justify-content: space-between;align-items: center;">
				<view style="display: flex;">
					<view class="rider_left">
						<image :src="orderDetails.avatar"></image>
					</view>
					<view style="margin-left: 10rpx;color: #333333;">
						<view>{{orderDetails.riderNickName}}</view>
						<view>{{orderDetails.phone}}</view>
					</view>
				</view>
				<view class="phone" @click="bindphone()">联系TA</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="part_six">
			<view class="order_info">
				订单信息
			</view>

			<!-- 备注 -->

			<view class="order_list">
				<view class="order_name">订单编号</view>
				<view class="order_nums">{{orderDetails.indentNumber}}</view>
			</view>
			<view class="order_list">
				<view class="order_name">下单时间</view>
				<view class="order_nums">{{orderDetails.createTime}}</view>
			</view>
			<view class="order_list">
				<view class="order_name">支付方式</view>
				<view class="order_nums">在线支付</view>
			</view>
			<view class="order_list" v-if="orderDetails.itemCode">

				<view class="order_name" style="color: #FF6A04;">收货码</view>
				<view class="order_nums" style="color: #FF6A04;">{{orderDetails.itemCode}}</view>
			</view>
			<view class="order_list"
				v-if="orderDetails.indentType != 4&&orderDetails.indentType != 3&&orderDetails.remarks">
				<view class="order_name">备注</view>
				<view class="order_nums">{{orderDetails.remarks}}</view>
			</view>

		</view>
		<!-- 订单下单详情 -->
		<view class="part_sevens">
			<view class="order_info">
				费用说明
			</view>
			<view class="order_list">
				<view class="order_name">预估跑腿费</view>
				<view class="order_nums">￥{{orderDetails.indentBasicsMoney}}</view>
			</view>
			<view class="order_list" v-if="orderDetails.tip">
				<view class="order_name">小费</view>
				<view class="order_nums">￥{{orderDetails.tip}}</view>
			</view>
			<view class="order_list" v-if="orderDetails.prepayMoney">
				<view class="order_name">预付价格</view>
				<view class="order_nums">￥{{orderDetails.prepayMoney}}</view>
			</view>
			<view class="order_list" v-if="orderDetails.redPacketAmount">
				<view class="order_name">红包</view>
				<view class="order_nums">-￥{{orderDetails.redPacketAmount}}</view>
			</view>
			<view class="order_list" v-if="orderDetails.cargoInsuranceFlag == 0">
				<view class="order_name">物品保价</view>
				<view class="order_nums">￥{{orderDetails.cargoInsurance}}</view>
			</view>
			<view class="order_list">
				<view class="order_name" style="color: black;font-size: 28rpx;">合计</view>
				<view class="order_nums" style="color: red;font-size: 28rpx;">￥{{orderDetails.indentMoney}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetails: '',
				latitude: '',
				longitude: '',
				markers: [], //标记点
			}
		},
		onLoad(data) {
			let that = this
			console.log(data)
			that.indentNumber = data.indentNumber
			if (!data) {
				that.orderDetails = JSON.stringify(data.data)
			}
			// console.log(that.orderDetails)
			that.userList()

		},
		methods: {
			getLocation(e) {
				let data = {
					riderUserId: e,
					lat: this.orderDetails.deliveryAddressLatitude,
					lng: this.orderDetails.deliveryAddressLongitude
				}
				this.$Request.getT('/timedtask/selectRiderLocation', data).then(res => {
					if (res.code === 0) {

						console.log(res.data, '经纬度')
						this.latitude = res.data.riderLocation.lat;
						this.longitude = res.data.riderLocation.lng;

						this.markers = [{
							id: 1,
							latitude: res.data.riderLocation.lat,
							longitude: res.data.riderLocation.lng,
							iconPath: '../../static/images/order/rider.png',
							width: '40',
							height: '40'
						}]
					}
				});
			},
			goMap() {
				uni.navigateTo({
					url: '/pages/order/orderDetail/orderMap?indentNumber=' + this.indentNumber
				})
			},
			// 拨打电话
			bindphone() {
				uni.makePhoneCall({
					phoneNumber: this.orderDetails.phone
				});
			},
			userList() {
				this.$Request.postT('/app/indent/userIndentMessage?indentNumber=' + this.indentNumber).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.orderDetails = res.data
						this.getLocation(this.orderDetails.riderUserId)
					}
				});
			},
			// 再来一单
			bindorder(e) {
				console.log(e)
				if (e.indentType == 1 || e.indentType == 2) {
					let index = e.indentType
					uni.navigateTo({
						url: '/pages/Helpsend/Helpsend?indentNumber=' + e.indentNumber + '&index=' + index
					})
				} else if (e.indentType == 3) {
					let index = e.indentType
					let current = e.buyType
					uni.navigateTo({
						url: '/pages/Helppay/Helppay?indentNumber=' + e.indentNumber + '&index=' + index +
							'&current=' + current
					})
				} else if (e.indentType == 4) {
					let index = e.indentType
					uni.navigateTo({
						url: '/pages/Cityservice/Cityservice?indentNumber=' + e.indentNumber + '&index=' + index
					})
				}

			},
			// 去评论
			bindcomment(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/order/comments/comments?indentNumber=' + e.indentNumber + '&riderUserId=' + e
						.riderUserId
				})
			},
			// 取消订单
			bindorderOff(e) {
				// console.log(e)this.orderDetails.userFine
				let indentNumber = e.indentNumber
				console.log(indentNumber)
				uni.showModal({
					title: '温馨提示',
					content: '确定取消订单?',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.postT('/app/indent/userCancleIndent?indentNumber=' + indentNumber)
								.then(res => {
									// console.log(res)
									if (res.code == 0) {
										uni.showToast({
											title: '订单取消成功'
										});
										this.userList()
										// setTimeout(function() {
										// 	uni.navigateBack();
										// }, 1000);
									} else {
										uni.hideLoading();
										uni.showModal({
											showCancel: false,
											title: '订单失败',
											content: res.msg
										});
									}
								});
						}
					}
				});
			},
			//确认订单
			bindconfirm(e) {
				// console.log(e)
				let indentNumber = e.indentNumber
				console.log(indentNumber)
				this.$Request.postT('/app/indent/userDelivery?indentNumber=' + indentNumber).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.showToast({
							title: '订单确认成功'
						});
						this.userList()
						// setTimeout(function() {
						// 	uni.navigateBack();
						// }, 1000);
					} else {
						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							title: '订单确认失败',
							content: res.msg
						});
					}
				});
			},
			// 立即付款
			bindorderpay(e) {
				console.log(e)
				let indentNumber = e.indentNumber
				uni.navigateTo({
					url: '/pages/order/pay/pay?indentNumber=' + indentNumber
				})
			},
			complaint() {
				uni.navigateTo({
					url: '/pages/order/complaint/complaint?indentNumber=' + this.orderDetails.indentNumber
				})
			}

		}
	}
</script>

<style>
	body {
		background: #F5F5F5;
	}

	/* #ifndef MP-WEIXIN */
	page {
		background: #F2EDED;
	}

	/* #endif */
	.order_details {
		width: 100%;
	}

	/* 待支付 */
	.part_one {
		width: 95%;
		margin: 0 auto;
		height: 230rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}

	.city_box {
		width: 110rpx;
		line-height: 42rpx;
		background: #c4e2ff;
		color: #49A5FF;
		text-align: center;
		font-size: 30rpx;
		height: 42rpx;
	}

	.city_pay {
		width: 90%;
		margin: 0 auto;
		display: flex;
		height: 80rpx;
		justify-content: left;
		align-items: center;
	}

	.city_pay text {
		font-size: 30rpx;
		letter-spacing: 2rpx;
		margin-left: 15rpx;
	}

	.rider_order {
		width: 90%;
		margin: 0 auto;
		font-size: 36rpx;
		font-weight: bold;
		padding-top: 20rpx;
		letter-spacing: 2rpx;
	}

	.rider_tit {
		width: 90%;
		margin: 0 auto;
		color: #999999;
		font-size: 30upx;
		margin-top: 10rpx;
		letter-spacing: 2rpx;
	}

	.order_btn {
		display: flex;
		margin-top: 30rpx;
	}

	.close_order {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close_btn {
		border: 1rpx solid #CCCCCC;
		width: 245rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 75rpx;
		font-size: 31rpx;
		color: #999999;
		letter-spacing: 2rpx;
	}

	.tip_order {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close_tip {
		width: 245rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 75rpx;
		font-size: 31rpx;
		color: white;
		letter-spacing: 2rpx;
		background: #FF7F00;
	}

	/* 骑手商家地址 */
	.part_four {
		width: 95%;
		margin: 0 auto;
		margin-top: 20rpx;
		background: #FFFFFF;
		/* height: 390rpx; */
		border-radius: 10rpx;
		padding: 15rpx 15rpx;

	}

	.u-line {
		border-bottom-width: 6rpx !important;
	}

	.one_box {
		width: 100%;
		/* height: 100rpx; */
		/* background: #F5F5F5; */
		margin: 0 auto;
		border-radius: 12upx;
		display: flex;

	}

	.box_dian {
		/* flex: 1; */
		width: 10%;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.box_dian image {
		width: 45rpx;
		height: 45rpx;
	}

	.box_name {
		flex: 5;
		display: flex;
		justify-content: left;
		align-items: center;
		color: #333333;
		font-weight: 700;
	}

	.box_addres {
		/* flex: 5; */
		width: 85%;
		font-size: 31rpx;
	}

	.add {
		/* color: #333333;
		font-size: 31rpx;
		letter-spacing: 2upx;
		font-weight: bold;
		margin-top: 20upx; */
	}

	.name {
		display: inline;
		font-size: 30rpx;
		color: #999999;
	}

	.name text {
		color: #999999;
		font-size: 30rpx;
		margin-left: 30upx;
	}

	.address_pay {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 0 auto;
		height: 80rpx;
		line-height: 80rpx
	}

	.runing_pay {
		/* flex: 1; */
		color: #999999;
		font-size: 30rpx;
		letter-spacing: 1rpx;
	}

	.runing_distance {
		/* flex: 1; */
		color: #999999;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		text-align: end;
	}

	.runing_distance text {
		font-size: 31rpx;
		color: black;
		margin-left: 35rpx;
	}

	/* 收货码 */
	.five_box {
		width: 95%;
		margin: 0 auto;
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		font-size: 35rpx;

		display: flex;
		justify-content: space-between;
	}

	.part_five {
		/* height: 85rpx; */
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
	}

	.take_number {
		flex: 1;
		display: flex;
		justify-content: left;
		align-items: center;
		text-indent: 30rpx;
	}

	.numbers {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-right: 30rpx;
	}

	/* 订单信息 */
	.part_six {
		width: 95%;
		margin: 0 auto;
		/* height: 275rpx; */
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		/* margin-bottom: 100rpx; */

	}

	.order_info {
		width: 90%;
		margin: 0 auto;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 31rpx;
		font-weight: bold;
		letter-spacing: 3rpx;
	}

	.order_list {
		width: 90%;
		margin: 0 auto;
		display: flex;
		height: 60rpx;

	}

	.order_name {
		flex: 1;
		color: #999999;
		font-size: 29rpx;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.order_nums {
		flex: 2;
		color: #999999;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	/* 同城服务 */
	.part_three {
		width: 95%;
		margin: 0 auto;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-bottom: 30rpx;
	}

	.city_pay {
		width: 90%;
		margin: 0 auto;
		display: flex;
		/* height: 90rpx; */
		justify-content: left;
		align-items: center;
	}

	.city_pay text {
		font-size: 28rpx;
		letter-spacing: 2rpx;
		margin-left: 30rpx;
	}

	.city_box {
		width: 110rpx;
		line-height: 42rpx;
		background: #c4e2ff;
		color: #49A5FF;
		text-align: center;
		font-size: 28rpx;
		height: 42rpx;
	}

	.pay_tit {
		width: 90%;
		margin: 0 auto;
		font-size: 27rpx;
	}

	.btn1 {
		width: 170upx;
		font-size: 28rpx;
		line-height: 60upx;
		text-align: center;
		border: 1upx solid #9C9C9C;
		border-radius: 20upx;
		color: #9C9C9C;
		margin-right: 30upx;
	}

	.btn2 {
		width: 170upx;
		line-height: 60upx;
		color: white;
		background: #FF6A04;
		font-size: 22upx;
		text-align: center;
		margin-right: 10rpx;
		border-radius: 20upx;
	}

	.phone_bd {
		display: inline-block;
		background: #FF6A04;
		color: #ffffff;
		padding: 0rpx 15rpx;
		margin-left: 14rpx;
		border-radius: 10rpx;
	}

	.part_seven {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.part_sevens {
		width: 95%;
		margin: 0 auto;
		/* height: 275rpx; */
		background: #ffffff;
		margin-top: 20rpx;
		padding-bottom: 10upx;
		border-radius: 10rpx;
		margin-bottom: 100rpx;
	}

	/* 联系骑手 */
	.rider_box {
		width: 95%;
		margin: 0 auto;
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 10rpx;

	}

	.rider_left image {
		width: 80rpx;
		height: 85rpx;
		border-radius: 60%;
	}

	.phone {
		background: #FD6416;
		color: #ffffff;
		padding: 8rpx 15rpx;
		border-radius: 13rpx;
		font-size: 24rpx;
	}
</style>