ihotel-h5/pages/order_mark/order_mark.vue

<template>
	<view class="content">
		<!-- 第一层模块 -->
		<view class="one-order">
			<view class="one-order-title">预定成功 / 等待您入住<text class="all-price">¥0</text></view>
			<view class="one-order-menshi">门市价<text class="menshi-price">¥160</text></view>
			<view class="one-order-fuli">教师福利<text class="fuli-price">¥150</text></view>
			<view class="one-order-yufukuan">预付款<text class="menshi-price">¥20</text></view>
			<view class="one-order-zhu">
				注：水费为0.62元/吨，电费为1.1元/度；补助吨数为3吨，补助度
				数为10度，超出标准需在预付款中扣除，未超出原路返回预
				付款
			</view>
			<view class="room-button">
				<!-- <text v-if="item.type === '已取消'">再次预定</text>
				<text v-if="item.type === '待支付'">支付</text>
				<text v-if="item.type === '已完成'">再次预定</text> -->
				<text>办理入住</text>
				<!-- <text v-if="item.type === '已入住'">退房</text> -->
			</view>
			<view class="room-button2">
				<!-- <text v-if="item.type === '已取消'">删除</text>
				<text v-if="item.type === '待支付'">取消订单</text>
				<text v-if="item.type === '已完成'">删除</text> -->
				<text>取消订单</text>
				<!-- <text v-if="item.type === '已入住'">删除</text> -->
			</view>
		</view>
		<!-- 第二层模块 -->
		<view class="two-order">
			<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>
		
		<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}
				],
			}
		},
		// 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}
		// 	]
		// },
		onload(option){
			// console.log('返回')
			console.log(option.ids)
			console.log(this.orderList)
			// var arr =[]
			// that.room.map(item => {
			// 	if(option.id==this.orderList[i].id) {
			// 		arr.push(item);
			// 	}
			// })
			// this.orderList=arr
		},
		mounted() {
		},
		methods:{
			
		}
	}
</script>

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