H5-ThreeDoorder/pages/restaurant/order/order-details/rx-orders-details.vue

<template>
	<view class="content" v-if="InforData">
		<!-- 订单状态 -->
		<view class="order-status order-style">
			<b-restaurant-order-status v-if="InforData" :InforData="InforData" @payments="payments">
			</b-restaurant-order-status>
		</view>
		<!-- 订单商品 -->
		<view class="order-commodity order-style">
			<!-- 页面顶部店铺信息头部 -->
			<b-shop-infor-head ref="b-shop-infor-head"></b-shop-infor-head>
			<view class="goods-item" v-for="(item,index) in InforData['goods']">
				<b-rx-commodity-item :item="item" :key='index'></b-rx-commodity-item>
			</view>
			<view class="Order-Commodity-Num">
				共{{length}}杯
			</view>
		</view>


		<!-- 订单详情 -->
		<view class="order-infor order-style">
			<view class="order-infor-title">
				餐品详情
			</view>
			<view class="order-infor-item">
				<view class="order-infor-item-label">
					自提单号
				</view>
				<view class="order-infor-item-value">
					<text>{{order_no}}</text>
					<view class="order-infor-item-value-Copy" @tap="Copy(order_no)">
						复制
					</view>
				</view>
			</view>
			<view class="order-infor-item">
				<view class="order-infor-item-label">
					下单时间
				</view>
				<view class="order-infor-item-value">
					{{InforData['create_time']}}
				</view>
			</view>
			<view class="order-infor-item">
				<view class="order-infor-item-label">
					下单手机号
				</view>
				<view class="order-infor-item-value">
					{{InforData['phone_number']}}
				</view>
			</view>
			<view class="order-infor-item">
				<view class="order-infor-item-label">
					原价
				</view>
				<view class="order-infor-item-value">
					￥{{RetainDecimalPoint(InforData['pay_price'] +  InforData['deduction_amount_total'])}}
				</view>
			</view>
			<view class="order-infor-item">
				<view class="order-infor-item-label">
					补贴卡抵扣
				</view>
				<view class="order-infor-item-value">
					￥{{RetainDecimalPoint(InforData['deduction_amount_total'])}}
				</view>
			</view>
			<view class="order-infor-item">
				<view class="order-infor-item-label">
					实际付款
				</view>
				<view class="order-infor-item-value">
					￥{{RetainDecimalPoint(InforData['pay_price'])}}
				</view>
			</view>
			<view class="order-infor-item">
				<view class="order-infor-item-label">
					预估佣金
				</view>
				<view class="order-infor-item-value">
					￥{{InforData['self_commission']}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let tiem = null;
	// 混入
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 接口请求
	import {
		GetorderInfoAPI,
	} from '@/request/restaurant/index.js';
	// 客服链接
	import {
		KFCSERVICE
	} from '@/static/js/serviceurl.js';
	export default {
		mixins: [mixin, restaurantmixins],
		data() {
			return {
				InforData: null,
				order_sn: 0
			};
		},
		computed: {
			length() {
				try {
					return this['InforData']['goods'].map(item => {
						return item['amount'];
					}).reduce((total, currentValue) => {
						return total + currentValue
					})
				} catch (e) {
					return 0
				}
			},
			order_no() {
				try {
					return this['InforData']['order_no'] ? this['InforData']['order_no'] : this['InforData']['order_sn']
				} catch (e) {
					return ''
				}
			},
		},
		onLoad(parameter) {
			this['order_sn'] = parameter['order'];
			this.GetorderInfo()
		},
		methods: {
			GetorderInfo() {
				console.log('进入获取订单详情');
				GetorderInfoAPI({
					order_sn: this['order_sn']
				}).then(data => {
					this['InforData'] = data['data'];
					let {
						lat: latitude,
						lng: longitude,
						restaurant_address,
						restaurant_id,
						restaurant_name
					} = data['data'];
					this.SETSHOPDETAIL({
						latitude,
						longitude,
						restaurant_address,
						restaurant_id,
						restaurant_name,
					})
					console.log('要对比的状态', this['OrderStatus1']);
					console.log('当前订单状态', data['data']['status']);
					if (data['data']['status'] == this['OrderStatus0'] || data['data']['status'] == this['OrderStatus1']) {
						// tiem不等于null说明已经执行过一次了
						this.GetStatus(false);
					} else {
						this.GetStatus(true);
						console.log(tiem, '状态变更停止倒计时');
					}
				})
			},
			/**
			 * @定时获取订单状态
			 * */
			GetStatus(clear) {
				console.log('进入倒计时方法');
				clearInterval(tiem);
				tiem = null;
				if (!clear) {
					tiem = setInterval(() => {
						console.log('进入倒计时')
						this.GetorderInfo();
					}, 10000)
				}
			},


			// 再次支付
			payments({order_sn, restaurant_id}) {
				let self = this;
				this.againpayment(order_sn);
			},

		},
		onUnload() {
			// 页面卸载之后将定时器取消
			this.GetStatus(true);
			console.log(tiem, '离开页面停止倒计时');
		}

	}
</script>

<style lang="scss">
	.content{
		padding: 32rpx 0;
	}
	.order-style {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}


	.goods-item {
		padding: 0 32rpx;
		margin-top: 20rpx;
	}

	.Order-Commodity-Num {
		width: 100%;
		height: 89rpx;
		line-height: 89rpx;
		text-align: right;
		color: #999999;
		padding: 0 30rpx;
		position: relative;
		margin-top: 30rpx;
		font-size: 26rpx;

		&::after {
			content: '';
			width: 90%;
			height: 1rpx;
			background-color: rgba(0, 0, 0, 0.1);
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 0;
		}
	}

	.order-commodity {
		padding: 32rpx 0;
	}

	.order-infor {
		padding: 32rpx;

		&-title {
			color: #333333;
			font-size: 28rpx;
			line-height: 80rpx;
		}

		&-item {
			height: 80rpx;
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-label {
				max-width: 150rpx;
				min-width: 150rpx;
				color: #666666;
			}

			&-value {
				display: flex;

				&-Copy {
					color: #4B6FE7;
					padding: 0 0 0 20rpx;
				}
			}
		}

	}
</style>