ihotel-h5/pages/order_mark/order_mark.vue

<template>
	<view class="content">
		<!-- 第一层模块 -->
		<view class="one-order3" :class="{'one-order3': orderList2.types == 6}" v-if="orderList2.types === 6">
			<view class="one-order-title">{{orderList2.orderTitle}}<text class="all-price">{{orderList2.allPrice}}</text></view>
			<view class="one-order-menshi">{{orderList2.orderShuidian}}<text class="menshi-price">{{orderList2.shuidianPrice}}</text></view>
			<view class="room-button-6">
				<text>删除订单</text>
			</view>
			<view class="room-button2-6">
				<text>再次预定</text>
			</view>
		</view>
		<view class="one-order" v-else>
			<view class="one-order-title">{{orderList2.orderTitle}}<text class="all-price">{{orderList2.allPrice}}</text></view>
			<view class="one-order-menshi">门市价<text class="menshi-price">{{orderList2.menshiPrice}}</text></view>
			<view class="one-order-fuli">教师福利<text class="fuli-price">{{orderList2.fuliPrice}}</text></view>
			<view class="one-order-yufukuan">预付款<text class="yufukuan-price">{{orderList2.yufukuanPrice}}</text></view>
			<view class="one-order-zhu">
				注：水费为0.62元/吨，电费为1.1元/度；补助吨数为3吨，补助度
				数为10度，超出标准需在预付款中扣除，未超出原路返回预
				付款
			</view>
			<view class="room-button">
				<text v-if="orderList2.types === 1">支付</text>
				<text v-if="orderList2.types === 4">删除订单</text>
				<text v-if="orderList2.types === 3">办理续住</text>
				<text v-if="orderList2.types === 2">办理入住</text>
			</view>
			<view class="room-button2">
				<text v-if="orderList2.types === 1">取消订单</text>
				<text v-if="orderList2.types === 3">办理退房</text>
				<text v-if="orderList2.types === 2">取消订单</text>
				<text v-if="orderList2.types === 4">再次预定</text>
			</view>
		</view>
		<!-- 第二层模块 -->
		<view class="two-order" :class="{'two-order3': orderList2.types == 6||orderList2.types == 3}">
			<view class="two-order-title">订单信息</view>
			<view class="two-order-name">预定信息：<text class="two-order-txt">李老师</text></view>
			<view class="two-order-phone">手机号码：<text class="two-order-txt">13569855689</text></view>
			<view class="two-order-count">订  单  号：<text class="two-order-txt">165404161161631</text></view>
			<view class="two-order-time">下单时间：<text class="two-order-txt">2022.07.21  15:15:15</text></view>
			<view class="two-order-xing">户         型：<text class="two-order-txt">01户型</text></view>
			<view class="two-order-zhuTime">入离时间：<text class="two-order-txt">入住日14：00后   离店日12：00前</text></view>
			<view class="two-order-shui" v-if="orderList2.types === 6">水起码：</view>
			<view class="two-order-dian" v-if="orderList2.types === 6">电起码：</view>
		</view>
		
		<view class="order-mark">您的满意是我们最大的追求</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				orderList:[
					// {id:1,orderTitle:'预定成功 / 等待您的支付',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:1},
					// {id:4,orderTitle:'预定成功 / 等待您的入住',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:2},
					// {id:2,orderTitle:'订单已取消 / 期待您再次光临',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:4},
					// {id:3,orderTitle:'订单已完成 / 期待您再次光临',allPrice:'¥10.00',orderMenshi:'门市价',shuidianPrice:'¥10',orderShuidian:'水电扣除',types:6}
				],
				orderList2:[]
			}
		},
		onShow() {
			// 模拟从后台拿到的数据
			var orderList = [
				{id:1,orderTitle:'预定成功 / 等待您的支付',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:1},
				{id:4,orderTitle:'预定成功 / 等待您的入住',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:2},
				{id:2,orderTitle:'订单已取消 / 期待您再次光临',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:4},
				{id:3,orderTitle:'订单已完成 / 期待您再次光临',allPrice:'¥10.00',orderMenshi:'门市价',shuidianPrice:'¥10',orderShuidian:'水电扣除',types:6}
			]
			orderList.forEach(el => el.isChecked = false);
			this.orderList = orderList;
			this.orderList2 = orderList;//真实数据赋值给页面数据
			// 获取当前小程序的页面栈
			let pages = getCurrentPages();
			// 数组中索引最大的页面--当前页面
			let currentPage = pages[pages.length-1];
			// 打印出当前页面中的 options
			// console.log(currentPage.options)      //正常打印出 options 值
			// console.log(this.orderList)
			for(let i=0;i<this.orderList.length;i++) {
				if(currentPage.options.orderId==this.orderList[i].types){
					this.orderList2=this.orderList[i]
				}
			}
			// console.log(this.orderList2)
		},
		onload(option){
			console.log('不能执行onload')
		},
		methods:{
			
		}
	}
</script>

<style>
	@import url("./css/order_mark.css");
</style>