hotelHomestayWx/pagesMy/orderList/orderList.vue

<template>
	<view class="pages">
		<TopTabs :list="tabList" @changeTab="changeTab" :placeholder="'输入景点名称/订单号'">
		</TopTabs>
		<view class="mainContain">
			<view class="card" >
				<view class="header">
					<span style="font-weight: 700;">订单号：A20231213102359619119</span>

					<text :class="statusClass[0]">{{status[0]}}</text>
				</view>
				<view class="mainContent">
					<view class="image">

					</view>
					<view class="middle">
						<span class="title">海景房-306</span>
						<span class='info'>
							<span>郑一璇</span>
							<span>15753988251</span>
							<span>03/11 - 03/12 (共两晚)</span>
						</span>
					</view>
					<view class="price">
						￥1288.0
					</view>
				</view>
				<view class="bottom" @click="handleDetail()">
					<view class="btn">
						办理入住
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopTabs from '../../components/TopTabs/topTabs.vue';
	export default {
		components: {
			TopTabs,

		},
		data() {
			return {
				statusClass: [
					'green',
					'blue',
					'grey',
					'orange'
				],
				status: [
					'已预订',
					'已入住',
					'已取消',
					'待确认'
				],
				// mt: uni.getSystemInfoSync().statusBarHeight + 44,
				tabList: [{
						name: '全部'
					},
					{
						name: '待确认'
					},
					{
						name: '待支付'
					},
					{
						name: '已预订'
					},
					{
						name: '已取消'
					},
				],
			}
		},
		methods: {
			handleDetail() {
				uni.navigateTo({
					url: '/pagesMy/orderList/alreadyBook'
				})
			},
			changeTab(index) {
				this.tabIdx = index;
				// switch (index) {
				// 	case 0:
				// 		this.gtiList()
				// 		break
				// 	case 1:
				// 		this.getiList(0)
				// 		break
				// 	case 2:
				// 		this.getiList(1)
				// 		break
				// 	case 3:
				// 		this.getiList(-3)
				// }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background: #F9FAFC;
		height: 100vh;

		.green {}

		.mainContain {
			display: flex;
			flex-direction: column;
			padding: 0 20rpx;

			.card {
				background: #fff;
				border-radius: 16rpx;
				margin: 20rpx 0;
				padding: 20rpx;

				.header {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px #f3f3f3 solid;
					padding: 20rpx;

					.green {
						color: #39CE77;
					}

					.blue {
						color: #1372FF;
					}

					.grey {
						color: #4C5F76;
					}

					.orange {
						color: #FF9100;
					}
				}

				.mainContent {
					border-bottom: 1px #f3f3f3 solid;
					display: flex;
					padding: 20rpx 0;


					justify-content: space-evenly;

					.image {
						background: url('https://i.ringzle.com/file/20231024/a68c2b2909d84930bbec1e5c7adbb0b4.jpg');
						background-repeat: no-repeat;
						background-size: cover;
						width: 180rpx;
						height: 180rpx;
						border-radius: 16rpx;
					}

					.middle {
						color: #777777;
						display: flex;
						flex-direction: column;
						justify-content: space-between;


						.title {
							font-weight: 700;
							font-size: 32rpx;
							color: black;
						}

						.info {
							color: #777777;
							display: flex;
							flex-direction: column;

							&>span {
								margin-top: 10rpx;

							}
						}
					}

					.price {
						color: red;
						text-align: center;
						height: 100%;
						align-items: center;
						align-self: center;
						font-size: 29rpx;
						font-weight: 700;
					}

				}

				.bottom {
					padding: 30rpx 20rpx;
					display: flex;
					justify-content: flex-end;

					.btn {
						background: #1372FF;
						border-radius: 35rpx;
						color: white;
						padding: 13rpx 34rpx;

					}
				}

			}
		}
	}
</style>