high-mini/qianzhu-KFC/order-details/order-details.vue

<template>
	<view>
		<view class="width100 paddtop10 paddbotm10 headsbg backcorfff fotct" v-if="orderList.orderStatus == 1">
			<view class="height20"></view>
			<view class="headstu font18 fontwig6">
				{{countdownm}}:{{countdowns}}
			</view>
			<view class="width100  font18 colorc72 mart5">
				{{typeText[orderList.orderStatus]}}
			</view>
			<view class="width100  font13 fcor666 mart5">若超时未支付,订单将自动取消</view>
			<view class="stubtn mart15 backcorf2f6" v-if="typeid == 9">立即支付</view>
			<!-- <view class="stubtn mart15 backcorf2f6" v-if="colorc3 == 9">¥ {{orderList.payPrice}}</view>
			<view class="stubtn mart15 backcorf2f6" v-if="typeid == 4 || typeid == 10">¥ {{orderList.payPrice}}</view> -->
			<view class="stubtn mart15" v-if="typeid == 4 || typeid == 10" style="background-color: #c72a20;"
				@click="jumppay()">立即支付
			</view>
		</view>

		<view class=" paddtop10 paddbotm10 headsbg backcorfff fotct" v-if="orderList.orderStatus != 1 ">
			<view class="headotherstu alijus font18 fontwig6"
				v-if="orderList.orderStatus != 2 && orderList.orderStatus != 3">
				<image mode="widthFix" class="width50" src="../static/imgs/otherstu.png"></image>
			</view>
			<view class="width100  font18 fcor666 mart15"
				v-if=" orderList.orderStatus != 2  && orderList.orderStatus != 3">
				{{typeText[orderList.orderStatus]}}
			</view>

			<view v-if="(orderList.orderStatus == 2 || orderList.orderStatus == 3 ) && typeid != 10">
				<view class="fotct font14 width100  fcor999">您的取餐码为</view>
				<view v-if="typeid == 4 && orderList.list">
					<view class="width90 alijusstart mart20" v-for="(item,index) in orderList.list" :key='index'>
						<view class="font14 width50 fcor666">取餐号: <text class="colorc3 font18">{{item.code}}</text>
						</view>
						<view class="font14 width50 fcor666">手机尾号: <text class="colorc3 font18">{{item.phone}}</text>
						</view>
					</view>
				</view>
				<view v-if="typeid == 9 && orderList.object.orderItems[0].code">
					<view class="fotct font18 width100 mart10 color2f6f43"
						v-for="(item,index) in orderList.object.orderItems" :key='index'>{{item.code}}</view>
				</view>
				<view class="fotct font20 width100 mart10 colorc3" v-if="typeid == 4 && orderList.list">请取餐</view>
				<view class="fotct font20 width100 mart10 colorc3" v-if="typeid == 4 && !orderList.list">
					{{orderList.statusDesc}}
				</view>
				<view class="fotct font20 width100 mart10 color2f6f43"
					v-if="typeid == 9 && orderList.object.orderItems[0].code">请取餐</view>
				<view class="fotct font20 width100 mart10 color2f6f43"
					v-if="typeid == 9 && !orderList.object.orderItems[0].code">{{orderList.statusDesc}}</view>
				<view class="fotct font13 width100 mart15 fcor666">请至柜台凭取餐码取餐</view>
				<view class="fotct font13 width100 mart5 fcor666">如有询问手机号尾号请告知</view>
			</view>

		</view>
		<!-- <view class="width96 mart20 colorc3 font12 fotct">
			注:约5分钟后取餐,请尽快到餐厅取餐哦
		</view> -->

		<view class="concont width94 mart10 backcorfff">
			<view class="width94 paddtop10 font16 fontwig6" v-if="typeid == 10">
				充值明细
			</view>
			<view class="width94 paddtop10 font16 fontwig6" v-else>
				餐品明细
			</view>
			<view class="width100 bor-botm1 mart10 marb10"></view>
			<view class="width100">
				<view class="width90 alijusstart mart10 bor-botm1" v-for="(item,index) in orderList.highChildOrderList"
					:key="index">
					<view class="width30">
						<image :src="item.goodsImg" v-if="item.goodsImg" mode="widthFix" class="width100"></image>
						<image src="../static/imgs/vipcz.png" v-else mode="widthFix" class="width90w"></image>
					</view>
					<view class="width40 font13 fcor666">{{item.goodsName}}</view>
					<view class="width10 font12 fcor999">x{{item.saleCount}}</view>
					<view class="width20">
						<view class="width100 fcor333 font12">¥<text class="fontwig6 font16">{{item.goodsActualPrice}}</text>
						</view>
						<view class="width100 fcor999 font12" v-if="item.goodsActualPrice != item.goodsPrice" style="text-decoration: line-through;">
							¥{{item.goodsPrice}}</view>
					</view>
				</view>
				<view class="width90 fotrt height50 font13 fcor999">
					共 <text class="fcor333 fontwig6" style="margin: 0px 5px;"> {{coutnums}} </text> 件 小计:
					<text class="font16 colorc3 fontwig6 margle" v-if="typeid == 4 || typeid == 10">
						¥{{orderList.totalPrice}}</text>
					<text class="font16 color2f6f43 fontwig6 margle" v-if="typeid == 9 ">
						¥{{orderList.totalPrice}}</text>
				</view>
			</view>
		</view>

		<view class="concont width94 mart10 backcorfff marb30">
			<view class="width94 alijusstart paddtop10 font14 fcor666">
				订单信息
			</view>
			<!-- <view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">取餐门店</view>
				<view class="width70 fotrt">{{orderList.storeName}}-{{orderList.storeAddress}}</view>
			</view> -->
			<view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">订单号</view>
				<view class="width70 fotrt">{{orderList.orderNo}}</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.paySerialNo">
				<view class="width30">支付流水号</view>
				<view class="width70 fotrt">{{orderList.paySerialNo}}</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.paySerialNo">
				<view class="width30">下单时间</view>
				<view class="width70 fotrt">{{orderList.createTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666" v-if="typeid == 4">
				<view class="width30">就餐方式</view>
				<view class="width70 fotrt" v-if="orderList.eatType == 1">店内就餐</view>
				<view class="width70 fotrt" v-if="orderList.eatType == 2">打包带走</view>
			</view>

			<view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">实付金额</view>
				<view class="width70 fotrt">¥ {{orderList.payPrice}}</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">积分抵扣</view>
				<view class="width70 fotrt">¥ {{(orderList.payGold / 100).toFixed(2)}}</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">优惠券抵扣</view>
				<view class="width70 fotrt">¥ {{orderList.deductionPrice}}</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.payType">
				<view class="width30">支付方式</view>
				<view class="width70 fotrt" v-if="orderList.payType == 2">微信</view>
				<view class="width70 fotrt" v-if="orderList.payType == 3">积分</view>
				<view class="width70 fotrt" v-if="orderList.payType == 4">工会卡</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.remarks && typeid != 10">
				<view class="width30">联系方式</view>
				<view class="width70 fotrt">{{orderList.remarks}}</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666" v-if="typeid == 10">
				<view class="width30">充值手机号</view>
				<view class="width70 fotrt">{{orderList.remarks}}</view>
			</view>
			<view class="width94 alijusstart mart20 font14 fcor666">
				<view class="width30">支付状态</view>
				<view class="width70 fotrt">{{typeText[orderList.orderStatus]}}</view>
			</view>
			<view class="width94 alijusend mart20 font14 fcor666" v-if="orderList.orderStatus == 1">
				<view class="canbtn height30 marRight20" @click="thirdCancelOrder()">取消订单</view>
				<!-- <view class="canbtn height30">联系客服</view> -->
			</view>
			<view class="width100 height20"></view>
		</view>
		<view class="width90 mart10 font13 fcor666" v-if="typeid != 10">友情提示</view>
		<view class="width90 mart10 font12 fcor999" v-if="typeid != 10">1、如遇到商品售罄，将导致您无法取到所定食物，系统将自动为您安排退款，1个工作日内到账；
		</view>
		<view class="width90 mart5 font12 fcor999 marb40" v-if="typeid != 10">2、如遇更多问题，请及时联系在线客服处理。</view>
	</view>
</template>

<script>
	import {
		getThirdOrderByOrderId,
		thirdCancelOrder
	} from '../../Utils/Api.js';
	export default {
		data() {
			return {
				orderList: '',
				sttypeid: 1,
				countdownh: '',
				countdownm: '',
				countdowns: '',
				productType: '',
				timer: null, //重复执行
				timerdjs: null, //倒计时刷新
				typeid: '', //类型区分
				orderId: '', //订单id
				coutnums: 0, //商品数量
				typeText: {
					1: '待支付',
					2: '已支付',
					3: '已完成',
					4: '已退款',
					5: '已取消',
					6: '退款中',
					7: '退款失败'
				},
			}
		},
		onLoad(options) {
			this.orderId = options.id;
		},
		onShow() {
			this.getThirdOrderByOrderId();
		},
		onUnload() {
			clearInterval(this.timer);
			clearInterval(this.timerdjs);
		},
		methods: {
			getAllCount() {
				this.orderList.highChildOrderList.forEach((food) => {
					this.coutnums += food.saleCount
				})
			},
			//查询订单详情
			getThirdOrderByOrderId() {
				uni.showLoading({
					title: '加载中...'
				})
				let datas = {
					orderId: this.orderId
				}
				getThirdOrderByOrderId(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.typeid = res.return_data.highChildOrderList[0].goodsType;
						this.orderList = res.return_data;
						if (this.orderList.orderStatus == 1) {
							this.timer = setInterval(() => {
								this.showtime()
							})
						}
						if (this.orderList.orderStatus == 2) {
							this.setTimer();
						}
						this.coutnums = 0;
						this.getAllCount();
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//取消订单
			thirdCancelOrder() {
				let that = this;
				uni.showModal({
					title: '取消订单',
					content: '确定取消此订单？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...'
							})
							let params = {
								orderId: this.orderId,
							}
							thirdCancelOrder(params).then(res => {
								if (res.return_code == '000000') {
									uni.hideLoading();
									uni.showToast({
										title: res.return_data,
										icon: 'none',
										duration: 2000
									})
									let pages = getCurrentPages() //页面栈
									let prePage = pages[pages.length - 2] //上一页
									prePage.$vm.reFresh = Math.random() //触发上一页监听器
									uni.navigateBack({})
								} else {
									uni.showToast({
										title: res.return_msg,
										icon: 'none',
										duration: 2000
									})
									uni.hideLoading()
								}
							})
							return;
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//跳转支付
			jumppay() {
				uni.redirectTo({
					url: '/qianzhu-KFC/payment-method/payment-method?orderId=' + this.orderList.id + '&amount=' +
						this.orderList.payPrice + '&productType=' + this.orderList.productType
				})
			},
			//选择方式
			changedissr(item) {
				this.sttypeid = item;
			},
			//定时刷新
			setTimer() {
				let holdTime = 10;
				this.timerdjs = setInterval(() => {
					if (holdTime <= 0) {
						clearInterval(this.timerdjs);
						this.getThirdOrderByOrderId();
						holdTime = 10;
						return;
					}
					holdTime--;
				}, 1000)
			},
			//倒计时
			showtime() {
				var nowtime = new Date(), //获取当前时间
					endtime = this.orderList.createTime + 900000; //定义结束时间
				var lefttime = endtime - nowtime, //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
						(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
						24), //计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数
				this.countdownh = lefth //返回倒计时的字符串
				this.countdownm = leftm //返回倒计时的字符串
				this.countdowns = lefts //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					this.getThirdOrderByOrderId();
					clearInterval(this.timer);
					this.countdownh = this.countdownm = this.countdowns = "00"
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.headstu {
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		border-radius: 50%;
		background-color: #faf1f1;
		color: #c72a20;
		margin-left: 40%;
		border: 1px solid #c72a20;
	}

	.headotherstu {
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		border-radius: 50%;
		margin-left: 40%;
		background-color: #999999;
	}

	.stubtn {
		width: 30%;
		height: 35px;
		line-height: 35px;
		border-radius: 25px;
		color: #ffffff;
		margin-left: 35%;
	}


	.colorc72 {
		color: #c72a20;
	}

	.headsbg {
		border-radius: 0 0 30px 30px;
	}

	.concont {
		border-radius: 12px;
	}

	.footbtn {
		bottom: 0px;
		position: fixed;
	}

	.btnpay {
		width: 90px;
		background-color: #c72a20;
		border-radius: 22px;
		height: 36px;
		line-height: 36px;
	}

	.takemode {
		width: 48%;
		border-radius: 5px;
		border: 1px solid #999999;
	}

	.aftermode {
		background-color: #faf1f1;
		color: #c72a20;
	}

	.canbtn {
		border: 1px solid #313131;
		color: #333333;
		width: 80px;
		border-radius: 25px;
		text-align: center;
	}
</style>