MiniScmV3/pages/order/order.vue

<template>
	<uni-segmented-control :values="orderStatusLabel" style-type="text" active-color="#666666"
		@clickItem="tabChange"></uni-segmented-control>
	<view class="order-list">
		<view class="order-item" v-for="order in orderList" :key="order.orderId">
			<view class="order-id">
				<text>订单号：</text>
				<text>{{order.orderId}}</text>
			</view>
			<view class="room-info">
				<image :src="order.roomPicPath"></image>
				<view class="room-info-text">
					<view class="room-type">
						<text>{{ order.roomTypeName }}</text>
					</view>
					<view class="room-price" v-if="current===0">
						<text>￥{{ order.price }}</text>
					</view>
				</view>
			</view>
			<view class="date-info">
				<view class="date-info-item">
					<view class="date-info-item-title">
						<text>入住日期</text>
					</view>
					<view class="date-info-item-content">
						<text>{{formatDateTime(order.startTime)}}</text>
						<text>{{convertDateTimeToDayOfWeek(order.startTime)}}</text>
					</view>
				</view>
				<view class="date-info-item">
					<view class="date-info-item-title">
						<text>离店日期</text>
					</view>
					<view class="date-info-item-content">
						<text>{{formatDateTime(order.endTime)}}</text>
						<text>{{convertDateTimeToDayOfWeek(order.endTime)}}</text>
					</view>
				</view>
				<view class="date-info-item">
					<text>{{ `共${order.dayNum}晚` }}</text>
					<text>{{ order.breakfastNum ? `含${order.breakfastNum}早` : "不含早" }}</text>
				</view>
			</view>
			<view class="button">

			</view>
		</view>
	</view>
</template>

<script setup>
	import moment from "moment"
	import {
		reactive,
		ref
	} from "vue"
	import {
		useHotelStore
	} from '@/store/hotelStore'
	import {
		getDayOfWeek
	} from "../../utils/dateTimeUtil"
	import {
		onPullDownRefresh,
		onReachBottom,
		onLoad
	} from '@dcloudio/uni-app'
	const hotel = useHotelStore().hotel
	const orderStatusLabel = ['未入住', '已入住', '已完成']
	const orderTitleStatus = ['待入住', '已入住', '已完成']
	const orderStatus = ['NOT_CHECKIN', 'CHECKIN', 'FINISHED']
	let current = ref(0)
	let orderList = reactive([])
	let pageNo = ref(1)
	const pageSize = 10
	let total = ref(0)

	function tabChange(e) {
		orderList.length = 0
		pageNo.value = 1
		current.value = e.currentIndex
		getOrders(orderStatus[e.currentIndex])
	}
	async function getOrders(status) {
		uni.showLoading({
			title: '正在加载'
		})
		try {
			let res = await uni.request({
				url: `/order/status`,
				method: "POST",
				data: {
					pageNo: pageNo.value,
					pageSize: pageSize,
					orderStatus: status,
					hotelId: hotel.hotelId
				}
			})
			orderList.push(...res.data.data.records)
			total.value = res.data.data.total
		} catch (err) {
			console.log(err)
			uni.showToast({
				icon: "none",
				title: '加载失败'
			})
		} finally {
			uni.hideLoading()
		}
	}

	function formatDateTime(dateTime) {
		return moment(dateTime).format('MM月DD日')
	}

	function convertDateTimeToDayOfWeek(dateTime) {
		return getDayOfWeek(new Date(dateTime))
	}

	onPullDownRefresh(() => {
		pageNo.value = 1
		orderList.length = 0
		setTimeout(() => {
			getOrders(orderStatus[current.value])
			uni.stopPullDownRefresh()
		}, 500)
	})

	onReachBottom(() => {
		if (orderList.length < total.value) {
			pageNo.value++
			getOrders(orderStatus[current.value])
		} else {
			uni.showToast({
				icon: "none",
				title: '已经到底啦！'
			})
		}
	})

	onLoad(async () => {
		await getOrders(orderStatus[0])
	})
</script>

<style lang="scss">
	page {
		background-color: #EBEAF0;
	}

	.order-list {
		overflow: hidden;

		.order-item {
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			margin: 20rpx;

			&:last-child {
				margin-bottom: 40rpx;
			}

			.order-id {
				color: #333333;
				margin: 10rpx;
				font-size: 28rpx;
			}

			.room-info {
				margin: 10rpx 20rpx;
				display: flex;
				background-color: #F1F1F4;

				border-radius: 20rpx;

				image {
					margin: 10rpx;
					width: 180rpx;
					height: 180rpx;
				}

				.room-info-text {
					width: 60%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: bold;
					margin: 0 20rpx;

					.room-price {
						color: #ff0000;
					}
				}
			}

			.date-info {
				margin: 10rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				background-color: #F1F1F4;

				.date-info-item {
					margin: 10rpx;
					display: flex;
					flex-direction: column;

					.date-info-item-title {
						margin: 10rpx;
						font-size: 28rpx;

						text {
							color: #666666;
						}
					}

					.date-info-item-content {
						margin: 10rpx;
						font-size: 24rpx;
						display: flex;
						justify-content: space-around;

						text {
							margin-right: 40rpx;
							color: #333333;
						}
					}

					&:last-child {
						justify-content: space-around;
						font-weight: bold;
						margin-right: 20rpx;

						text {
							color: #333333;
						}
					}
				}
			}
		}
	}

	.segmented-control--text {
		background-color: #ffffff;
	}
</style>