Homestay_manage_app/pages/orderManage/orderManage.vue

<template>
	<view class="container">
		<!-- 每一个订单区域 -->
		<uni-swipe-action>
			<uni-swipe-action-item v-for="item in orderList" :key="item.id">
				<!-- 右侧选项内容区域 -->
				<template v-slot:right>
					<view class="order_right" @click="handleDelete(item)">
						<img class="img" src="../../static/my/delete.png" />
					</view>
				</template>
				<view class="order_box">
					<!-- 标题区域 -->
					<view class="box_header">
						<img class="img" src="../../static/my/hotel.png" />
						<view class="title">{{ item.hotelName }}</view>
						<view class="type type2" v-if="item.type === 1">待付款，剩余15:00</view>
						<view class="type" v-if="item.type === 2">支付超时</view>
						<view class="type" v-if="item.type === 3">已支付</view>
						<view class="type" v-if="item.type === 4">已取消</view>
					</view>

					<!-- 酒店信息区域 -->
					<view class="box_info">
						<img class="img" :src="item.imgUrl" />
						<view class="info_right">
							<view class="info_right_item">1间，大床房</view>
							<view class="info_right_item">2023-07-26 - 2023-07-27</view>
							<view class="info_right_item">总价：¥229.00</view>
						</view>
					</view>

					<!-- 按钮区域 -->
					<view class="box_btn" v-if="item.type === 1 || item.type === 2">
						<view class="btn_item" v-if="item.type === 1">预定</view>
						<view class="btn_item" v-if="item.type === 2">再次预定</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// type: 1 为待付款  2 为支付超时,
			//       3 为已支付  4 为已取消
			orderList: [
				{
					id: 1,
					hotelName: '靖安乡宿',
					type: 1,
					imgUrl: '../../static/my/test.png'
				},
				{
					id: 2,
					hotelName: '开心乡宿',
					type: 2,
					imgUrl: '../../static/my/test.png'
				},
				{
					id: 3,
					hotelName: '健康乡宿',
					type: 3,
					imgUrl: '../../static/my/test.png'
				},
				{
					id: 4,
					hotelName: '幸福乡宿',
					type: 4,
					imgUrl: '../../static/my/test.png'
				}
			]
		}
	},
	methods: {
		// 右侧选项内容删除按钮回调
		handleDelete(item) {
			console.log(item.name)
			uni.showModal({
				title: '提示',
				content: '确定删除吗？删除后不可恢复',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 0 20rpx 40rpx;
	min-height: 100vh;
	background-color: #f2f3f5;
	overflow-y: auto;

	.order_right {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 126rpx;
		background-color: #d43030;

		.img {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.order_box {
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0 22rpx;
		width: 710rpx;
		border-radius: 15rpx;
		background-color: #fff;

		.box_header {
			display: flex;
			align-items: center;
			height: 94rpx;

			.img {
				width: 47rpx;
				height: 47rpx;
			}

			.title {
				margin-left: 16rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			.type {
				margin-left: auto;
				color: #808080;
				font-size: 28rpx;
			}

			.type2 {
				color: #ff5733;
			}
		}

		.box_info {
			display: flex;
			height: 140rpx;

			.img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 9rpx;
			}

			.info_right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-top: -5rpx;
				margin-left: 18rpx;
				height: 120rpx;
				color: #808080;
				font-size: 28rpx;

				.info_right_item {
					flex: 1;
				}
			}
		}

		.box_btn {
			display: flex;
			justify-content: flex-end;
			height: 100rpx;

			.btn_item {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				width: 178rpx;
				height: 68rpx;
				border-radius: 64rpx;
				color: #808080;
				font-size: 28rpx;
				border: 1rpx solid #808080;
			}
		}
	}
}
</style>