index.vue

<template>
	<div class="pages">
		<view class="topBar" :style="{'padding-top':statusBarHeight+'px','height':navigationBarHeight+'px'}">
			<u-icon @click="goBack" name="arrow-left" color="#000000" size="20"></u-icon>
			<view class="tabTitle" :style="{'line-height':navigationBarHeight+'px'}">订单详情</view>
		</view>
		<div class="order_status" :style="{'margin-top':(statusBarHeight+navigationBarHeight+getPx(32))+'px'}">
			<view class="status_text">订单状态：{{ orderStatusText }}</view>
			<view class="tips">
				<view v-if="orderInfo.state == 7">为保持口感，请尽快引用哦~</view>
				<view v-if="orderInfo.state == 4">订单已制作完成，请尽快取餐~</view>
				<view v-if="orderInfo.state == 2 || orderInfo.state == 3">请您耐心等候，预计<text class="time">{{waitTime}}</text>分钟后可取</view>
			</view>
			<div class="btns">
				<a type="primary" @click="cancelOrder" v-if="orderInfo.state == 1" class="btn_cancel">取消订单</a>
				<a type="primary" @click="PayNow" v-if="orderInfo.state == 1" class="btn">立即支付</a>
				<a type="primary" @click="toRefund" v-if="orderInfo.state == 2" class="btn_cancel">申请退款</a>
				<a type="primary" @click="oneMoreOrder(orderInfo)" v-if="orderInfo.state != 1" class="btn">再来一单</a>
			</div>
		</div>
		<div class="order_flow" v-if="qrShow">
			<div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div>
			<div class="realQrcodeBox" v-if="qrShow&&isBuild">
				<image mode="aspectFit" :src="ewmImg"/>
			</div>
			<div v-if="qrShow&&!isBuild" class="qr_code" >
				<image mode="aspectFit" :src="'/static/imgs/erweimazhedang.png'" class="qr" />
			</div>
			<view class="scan_tips" v-if="qrTextShow">——制作完成后才能扫哦——</view>
			<canvas v-if="qrShow" class="canvas-code" canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" />
			<div v-if="qrShow" class="flow_describe">
				<view class="title">扫码流程</view>
				<image :mode="'aspectFit'" class="flow_img" src="/static/imgs/saomaliucheng.png" />
			</div>
		</div>
		<div class="shop_info">
				<div class="address">
					<div class="address_1">{{ orderInfo.shop.name }}</div>
					<div class="address_2">{{ orderInfo.shop.address }}</div>
				</div>
				<div v-for="item in orderInfo.orderDetails" :key="item.id">
					<div class="goods">
						<div class="goods_item">
							<image v-if="jsonParse(item.goods.pics).thumbnailApplet" :src="jsonParse(item.goods.pics).thumbnailApplet" class="goods_img" />
							<image v-else :src="jsonParse(item.goods.pics).thumbnail" class="goods_img" />
							<div class="goods_text">
								<div class="goods_name">
									<div class="name">{{ item.goodsName }}</div>
									<div class="price">¥{{ Utils.isInteger(item.realAmount) }}</div>
								</div>
								<div class="goods_psce">
									<div class="psce_name">
										<span v-for="(rule, index) in jsonParse(item.specRuleDetail)" :key="rule.specId">
											{{ rule.ruleName }}
											<text v-if="index != jsonParse(item.specRuleDetail).length - 1">/</text>
										</span>
									</div>
									<div class="size">x{{ item.num }}</div>
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="discount">
						<div class="discount_1">
							<div class="name">优惠免减</div>
							<div class="price">¥{{ setPrice(item.amount - item.realAmount) }}</div>
						</div>
						<div class="concessional_rate">
							<div class="name">特惠价</div>
							<div class="price">¥{{ setPrice(item.realAmount) }}</div>
						</div>
					</div> -->
				</div>
				<div class="total">
					<div class="size">共{{ totalNum }}件商品</div>
					<div class="price">
						<span class="paid_in">实付</span>
						<span class="money">￥{{ Utils.isInteger(orderInfo.amount) }}</span>
					</div>
				</div>
		</div>

		<div class="order_describe">
			<view class="title">订单信息</view>
			<view class="item_cont">
				<view class="item">
					<span class="label">下单时间：</span>
					<span class="value">{{ orderInfo.createdAt }}</span>
				</view>
				<view class="item1">
					<span class="label">取单号码：</span>
					<span class="value">{{ orderInfo.orderNum }}</span>
				</view>
				<view class="item1">
					<span class="label">订单编号：</span>
					<span class="value">{{ orderInfo.orderNo }}</span>
				</view>
			</view>
		</div>
		<div class="customer_service">
			<button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
				<view class="serverBox">
					<u-icon name="server-fill" color="#000000" size="16"></u-icon>
					<span :style="{'margin-left':'16rpx'}">联系客服</span>
				</view>
				<view >
					<image class="icno-arrow" :src="'../../../static/imgs/jiantouhei.png'" />
				</view>
			</button>
		</div>
		<show-toast ref="toast"/>
	</div>
</template>

<script>
import Order from '@/request/order';
import QRCode from '@/utils/qrCode'
import Menu from '@/request/menu';
import Utils from '@/utils/utils'
import { systemInfo } from '@/utils/mixin.js'
import { $EventBus } from "@/utils/EventBus";

export default {
	mixins: [systemInfo],
	async onLoad(option) {
		this.getSystemInfo()
		let oId = 0
		// 从订阅消息进入
		this.option = JSON.stringify(option)
		const { orderId } = option
		if(orderId){
			oId = orderId
			if(!this.userms){
				uni.switchTab({ url: '/pages/order/order' })
				return
			}
		}else{
			oId = uni.getStorageSync('orderId');
		}
		// return
		const {data = {}} = await Order.getOrderDetail({orderId:oId})
		this.orderInfo = data?.data
		const getTime = ['2', '3'].indexOf(this.orderInfo.state) >= 0
		const isBuild = ['4', '5'].indexOf(this.orderInfo.state) >= 0;
		if(getTime){
			const {data = {}} = await Order.getOrderWaiteTime({orderId:oId})
			this.waitTime = data?.data
		}
		if (isBuild) {
			new QRCode('myQrcode', {
				text: this.orderInfo.pickCode,
				width: 141,	//canvas 画布的宽
				height: 141,	//canvas 画布的高
				padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
				correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
				callback: (res) => {
					this.ewmImg = res.path
				}
			})
		}
		this.isBuild = isBuild
	},
	data() {
		return {
			orderInfo: {},
			ewmImg: '',
			Utils,
			isBuild:true,
			waitTime:0
		}
	},
	methods: {
		getPx(rpx) {
			// console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750)));
			// console.log(wx.getSystemInfoSync().windowWidth);
			return rpx * (wx.getSystemInfoSync().windowWidth / 750);
		},
		goBack(){
			uni.switchTab({ url: '/pages/order/order' })
		},
		async oneMoreOrder(item) {
			uni.removeStorageSync('shopCarInfo');
			$EventBus.$emit('updateCar');
			const numObj = {}
			const { id, shopId, orderDetails } = item;
			orderDetails.forEach(item => {
				orderDetails[item.skuId] = Number(item.num)
			})
			const { data } = await Order.moreOrder({ orderId: id, shopId });
			if(!data || !data.data){
				this.showToast({ title: "该订单中的商品已经售罄了" });
				return;
			}
			let list = new Array();
			data.data.forEach(item => {
				const skuId = item.skus[0].skuId
				const nextData = { ...item, skuId, num: orderDetails[skuId], flag: true, sku: item.skus[0] }
				if (nextData.sku.state == 1) {
					list.push(nextData);
				}
			});
			if(!list || list.length<=0) {
				this.showToast({ title: "该订单中的商品已经售罄了", icon: 'error' });
				return;
			}
			list.forEach(nextData => {
				Utils.getallNum(nextData);
			})
			uni.switchTab({ url: '/pages/menu/menu' })
		},
		async PayNow() {
			const orderInfo = await Order.payOrder({ orderId: this.orderInfo.id })
			if (orderInfo) {
				if (orderInfo && orderInfo.data.code == 200) {
					await Menu.requestPayment(orderInfo.data.data);
				}
			}
		},
		toRefund() {
			uni.showModal({
				title: '确认退款',
				success: (res) => {
					if (res.confirm) {
						Order.orderRefund({ orderId: this.orderInfo.id, refundAmount: this.orderInfo.amount }).then(res => {
							uni.switchTab({ url: '/pages/menu/menu' })
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}

				}
			})
		},
		jsonParse(json) {
			return JSON.parse(json)
		},
		cancelOrder() {
			Order.cancelOrder({ orderId: this.orderInfo.id }).then(res => {
				uni.switchTab({ url: '/pages/menu/menu' })
			})
		},
	},
	computed: {
		totalNum() {
			let totalNum = 0;
			const {orderDetails=[]} = this.orderInfo
			orderDetails.forEach(item => {
				totalNum += parseInt(item.num);
			})
			return totalNum;
		},
		
		qrShow() {
			return ['2','3','4','5'].indexOf(this.orderInfo.state) >= 0;
		},
		qrTextShow() {
			return ['2','3'].indexOf(this.orderInfo.state) >= 0;
		},
		// 1 未支付 
		// 2 已支付 
		// 3 支付制作中 
		// 4 制作完成未取 
		// 5 取餐中 
		// 6 正常完成 
		// 7 待取超时 
		// 8 未支付取消 
		// 9 支付后制作前取消 
		// 10 制作中取消 
		// 11 制作完成取消 
		// 12 退款中
		// 13 退款失败
		// 14 部分退款 
		// 15 已退款 
		// 50 其他人工干预状态 
		orderStatusText() {
			switch (this.orderInfo.state) {
				case '1':
					return '待付款'
				case '2':
					return '待制作'
				case '3':
					return '制作中'
				case '4':
					return '待取餐'
				case '5':
					return '取餐中'
				case '6':
				case '7':
					return '已完成'
				case '8':
				case '9':
				case '10':
				case '11':
					return '已取消'
				case '12':
					return '退款中'
				case '13':
					return '退款失败'
				case '14':
					return '部分退款'
				case '15':
					return '已退款'
				default:
					return '未知状态'
			}
		},
		qrText() {
			switch (this.orderInfo.state) {
				case '2':
					return '待制作'
				case '3':
					return '制作中'
				default:
					return ''
			}
		},
		userms() {
			return this.$store.getters.Authorization;
		},
	}
}
</script>

<style lang="scss" scoped>
.pages {
	padding-top: 1rpx;
	padding-bottom: 30rpx;
	.topBar{
		position: fixed;
		width: 100%;
		background: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 9999;
		padding-left: 34rpx;
		// .arrow-left {
		// 	margin-left: 20rpx;
		// }
		.tabTitle{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			text-align: center;
			width: 79%;
			color: #333333
		}
	}
}

.order_status {
	// max-height: 174rpx;
	background: #FFFFFF;
	margin: 32rpx 32rpx;
	padding: 24rpx 0rpx 32rpx 0rpx;

	.status_text {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;
	}

	.tips {
		text-align: center;
		margin-top: 15rpx;

		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		
		.time {
			font-size: 32rpx;
			font-family: Futura Medium, Arial, sans-serif;
			font-weight: normal;
			color: #0050F6;
			margin: 0 16rpx;
		}
	}

	.btns {
		padding-top: 28rpx;
		text-align: center;
		width: 428rpx;
		display: flex;
		margin: 0 auto;
		justify-content: space-around;
		a {
			line-height: 64rpx;
		}
	}

	.btn {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;

		width: 167rpx;
		height: 64rpx;
		background: #0050F6;
		border-radius: 2rpx;
	}
	.btn_cancel {
		box-sizing: border-box;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0050F6;

		width: 167rpx;
		height: 64rpx;
		border-radius: 2rpx;
		border: 2rpx solid #0050F6;
	}
}

.order_flow {
	background: #FFFFFF;
	margin: 32rpx;
	padding-top: 56rpx;

	.code {
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		padding-bottom: 20rpx;
	}

	.status_text {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;
	}

	.qr_code {
		height: 351rpx;
		width: 355rpx;
		display: block;
		margin-top: 48rpx;
		position: relative;
		padding-bottom: 40rpx;
		margin-bottom: 0rpx;
		margin-left: 150rpx;

		.qr {
			width: 100%;
			height: 100%;
			vertical-align: bottom;
		}
	}
	.scan_tips {
		padding-bottom: 32rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		text-align: center;
	}
	.realQrcodeBox{
		margin: 0 auto;
		width: 510rpx;
		height: 510rpx;
		image{
			width: 100%;
			height: 100%;
			vertical-align: bottom;
		}
	}

	.flow_describe {
		padding-top: 50rpx;
		padding-left: 32rpx;
		padding-right: 30rpx;
		padding-bottom: 58rpx;

		.title {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
		}

		.flow_img {
			padding: 18rpx 0rpx 0rpx 32rpx;
			width: 592rpx;
			height: 244rpx;
			display: block;
			vertical-align: bottom;
		}
	}
}

.shop_info {
	margin: 32rpx;
	background: #FFFFFF;
	padding: 40rpx 30rpx 22rpx 30rpx;

	h3 {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #000000;
	}

	.address {
		border-bottom: 1rpx solid #ECECEC;
		padding-bottom: 25rpx;

		.address_1 {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
		}

		.address_2 {
			margin-top: 18rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
		}
	}

	.goods {
		// padding-top: 20rpx;

		.goods_item {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
		}

		.goods_img {
			height: 112rpx;
			width: 112rpx;
			background-color: #eee;
			margin-right: 24rpx;
		}

		.goods_text {
			flex: 1;

			.goods_psce,
			.goods_name {
				display: flex;
				justify-content: space-between;
				// align-items: center;

				.name {
					height: 40rpx;
					line-height: 40rpx;
					margin-top: 10rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.price {
					height: 40rpx;
					line-height: 40rpx;
					margin-top: 12rpx;
					font-size: 28rpx;
					font-family: Futura-Medium, Futura;
					font-weight: 500;
					color: #333333;
				}

				.psce_name {
					height: 34rpx;
					line-height: 34rpx;
					margin-top: 18rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.size {
					height: 34rpx;
					line-height: 34rpx;
					margin-top: 24rpx;
					font-size: 24rpx;
					font-family: ArialMT;
					color: #666666;
				}
			}
		}
	}

	.discount {
		margin-top: 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #ECECEC;

		.discount_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #333333;

			.price {

				font-family: Arial-BoldMT, Arial;
				font-weight: normal;
				color: #EB5F17;
			}
		}

		.concessional_rate {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-top: 18rpx;

			.price {
				font-family: Arial-BoldMT, Arial;
				font-weight: 700;
				color: #000;
			}
		}
	}

	.total {
		display: flex;
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin-top: 32rpx;
		border-top: 1rpx solid #EEEEEE;
		padding-top: 23rpx;

		.size {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
		.price {
			display: flex;
			align-items: flex-end;
			.paid_in {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.money {
				height: 48rpx;
				line-height: 50rpx;
				vertical-align: top;
				font-size: 36rpx;
				font-family: Futura-Medium, Futura;
				font-weight: 500;
				color: #333333;
			}
		}
	}
}

.order_describe {
	background: #fff;
	padding: 24rpx 30rpx 24rpx 32rpx;
	margin: 30rpx 32rpx 32rpx 32rpx;

	.title {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
		height: 40rpx;
		border-bottom: 1rpx solid #ECECEC;
    	padding-bottom: 24rpx;
	}

	.item_cont {
		 padding-top: 6rpx;
	}
	.item1,
	.item {
		margin-top: 20rpx;
		line-height: 34rpx;
		.label {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			height: 34rpx;
		}

		.value {
			font-size: 24rpx;
			font-family: ArialMT;
			color: #666666;
			line-height: 28rpx;
			height: 28rpx;
		}
	}
	.item1 {
		margin-top: 18rpx;
	}
}

.customer_service {
	height: 90rpx;
	line-height: 90rpx;
	background: #FFFFFF;
	font-weight: 400;
	color: #000000;
	padding: 0rpx 31rpx;
	margin: 32rpx;
	.function_item_text {
		width: 100%;
		margin: 0;
		padding: 10rpx 10rpx 10rpx 0rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		border-radius: 0px;
		display: flex;
		justify-content: space-between;
		color: #333333;
		font-weight: 400;
		font-style: normal;

		.serverBox{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			span {
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.icno-arrow{
			width: 15.27rpx;
			height: 21.68rpx;
		}
	}
	.function_item_text::after {
		border: unset;
	}
}
</style>