index.vue

<template>
	<div>
		<u-popup :show="show" :round="10" closeable mode="bottom" @close="close">
			<div class="order_flow">
				<div class="code">取单码 {{ orderInfo.orderNum }}</div>
				<!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> -->
				<div class="qr_code">
					<image mode="scaleToFill" :src="qrCode" class="qr"></image>
					<view class="status_text">{{ orderStatusText }}</view>
				</div>
				<div class="flow_describe">
					<h3>扫码流程</h3>
					<image :mode="'aspectFit'" width="600px" class="flow_img" src="/static/imgs/order_flow.png"></image>
				</div>
				<div class="flow_describe">
					<h3>注意事项</h3>
					<view class="text">
						<view>*热饮温度高，推荐使用纸吸管，纸吸管体验更佳。拿到后请小心饮用，吸入时请注意烫口喔</view>
						<view>*冷饮如选择冰块分装，冰块分装后饮品将不满杯，敬请谅解。</view>
						<view>*冷饮去冰如选择椰椰雪糕，默认分装椰椰雪糕，敬请谅解</view>
					</view>
				</div>
			</div>
		</u-popup>
	</div>
</template>

<script>
export default {
	data() {
		return {
			orderInfo: {},
			qrCode: '',
			show: false,
		}
	},
	computed: {
		// 0 创建未校验 
		// 1 未支付 
		// 2 已支付 
		// 3 支付制作中 
		// 4 制作完成未取 
		// 5 取餐中 
		// 6 正常完成 
		// 7 待取超时 
		// 8 未支付取消 
		// 9 支付后制作前取消 
		// 10 制作中取消 
		// 11 制作完成取消 
		// 12 退款中
		// 13 退款失败
		// 14 部分退款 
		// 15 已退款 
		// 50 其他人工干预状态
		showMask() {
			return ['2', '3'].indexOf(this.orderInfo.state) != -1
		},
		orderStatusText() {
			switch (this.orderInfo.state) {
				case '2':
					return '已支付'
				case '3':
					return '等待中'
				default:
					return ''
			}
		}
	},
	onLoad() {
		
	},
	methods: {
		close() {
			this.show = false;
		},
		open(data, path) {
			this.show = true;
			this.orderInfo = data;
			// console.log("order:"+JSON.stringify(this.orderInfo));
			
			if(this.showMask) {
				this.qrCode = '/static/imgs/noQr.png';
			} else {
				this.qrCode = path;
			}
		},
		jsonParse(json) {
			return JSON.parse(json)
		},
	}
}
</script>

<style lang="scss" scoped>
.pages {
	padding-top: 1rpx;
	padding-bottom: 30rpx;
}

.text {
	font-size: 20rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 30rpx;
}

.order_status {
	width: 686rpx;
	height: 174rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin: 32rpx auto 0;
	padding: 14px;

	.status_text {
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		text-align: center;
	}

	.btns {
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;


	}

	.btn {
		width: 160rpx;
		height: 52rpx;
		background: #006ECF;
		border-radius: 6rpx;
		display: inline-block;
		margin: 20rpx;
		padding: 0;
		line-height: 52rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;


	}
}

.order_flow {
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: 32rpx;
	padding-top: 65rpx;

	.code {
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		text-align: center;

	}
	
	.qr_code {
		width: 508rpx;
		height: 510rpx;
		display: block;
		margin: 25rpx auto;
		background-color: #ccc;
		position: relative;
	
		.status_text {
			font-size: 48rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 66rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	
		.qr {
			width: 100%;
			height: 100%;
		}
	}

	.flow_describe {
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166, 166, 166, 0.5);
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 30rpx;



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

		.flow_img {
			width: 600rpx;
			height: 214rpx;
			display: block;
			margin: 24rpx auto;
		}
	}
}

.customer_service {
	height: 90rpx;
	line-height: 90rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #000000;
	padding: 0 64rpx;
	margin: 32rpx 0;

	display: flex;
	justify-content: space-between;
}
</style>