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" @click="goPageOrderDetail(item)">
					<!-- 标题区域 -->
					<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.orderStatus === '1'">
							待支付，剩余
							<uni-countdown :show-day="false" :second="countDownTime" @timeup="timeup(item.createTime)" />
							<!-- <uv-count-down :time="countDownTime" format="mm:ss" @change="change" @finish="finish"></uv-count-down> -->
						</view>
						<view class="type" v-if="item.orderStatus === '2'">已支付</view>
						<view class="type" v-if="item.orderStatus === '3'">待入住</view>
						<view class="type" v-if="item.orderStatus === '4'">已入住</view>
						<view class="type" v-if="item.orderStatus === '5'">已消费</view>
						<view class="type" v-if="item.orderStatus === '6'">支付超时</view>
						<view class="type" v-if="item.orderStatus === '7'">已取消</view>
						<view class="type" v-if="item.orderStatus === '8'">已退单</view>
						<view class="type" v-if="item.orderStatus === '9'">已退款</view>
						<view class="type" v-if="item.orderStatus === '10'">退款中</view>
					</view>

					<!-- 酒店信息区域 -->
					<view class="box_info">
						<img class="img" :src="item.imgUrl || '../../static/my/test.png'" />
						<view class="info_right">
							<view class="info_right_item">{{ item.houseOrderNumber }}间，{{ item.houseName }}</view>
							<view class="info_right_item">{{ item.orderStartTime }} - {{ item.orderEndTime }}</view>
							<view class="info_right_item">总价：¥{{ item.houseTotalPrice }}.00</view>
						</view>
					</view>

					<!-- 按钮区域 -->
					<view class="box_btn" v-if="item.orderStatus === '1' || item.orderStatus === '6'">
						<view class="btn_item" v-if="item.orderStatus === '1'" @click.stop="goPagePay">预定</view>
						<view class="btn_item" v-if="item.orderStatus === '6'" @click.stop="goPageDetail">再次预定</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 订单列表
			orderList: [],
			// 倒计时时间（毫秒）
			countDownTime: null,
			// 当前页
			page: 1,
			// 每页多少条数据
			rows: 10,
			// 一共多少条数据
			total: ''
		}
	},
	onLoad() {
		this.getOrderList()
	},
	onUnload: function () {
	  clearInterval(this.timer);
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.orderList = []
			this.page = 1
			this.getOrderList()
			uni.stopPullDownRefresh()
		}, 2000)
	},
	// 上拉加载
	onReachBottom() {
		if (this.orderList.length < this.total) {
			this.page++
			this.getOrderList()
		} else {
			uni.showToast({
				title: '没有更多数据了',
				icon: 'none',
				mask: true
			})
		}
	},
	methods: {
		// 获取订单列表数据
		async getOrderList() {
			const res = await this.$myRequest({
				url: '/mhotel/ampgetBookingList.action',
				data: {
					userId: '2008',
					page: this.page,
					rows: this.rows
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.orderList = [...this.orderList, ...res.data.pageList]
				this.total = res.data.total
			}
		},
		// 倒计时变化时触发
		change(e) {
			// console.log(e)
		},
		// 倒计时结束回调
		finish() {
			uni.showModal({
				title: '提示',
				content: '订单已超过可支付时间，请重新下单',
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}
				}
			})
		},
		// 倒计时
		timeup(createTime) {
			    var that = this;
			    /**setInterval间歇调用 */
			    that.timer = setInterval(function () {
				//订单下单时间
				var buy_time = createTime;
				//计算剩余下单时间
				var time = (new Date(buy_time).getTime() + 15* 60 * 1000) - (new Date().getTime());
				if(time>0){
				  //计算剩余的分钟
				  var minutes = parseInt(time / 1000 / 60 % 60, 10);
				  //计算剩余的秒数
				  var seconds = parseInt(time / 1000 % 60, 10);
				  that.countDownTime=parseInt(time / 1000);
				  // console.log(that.countDownTime)
				  //判断分钟和秒数小于10要在前面加个0.
				  if(minutes<10){
					minutes = '0' + minutes;
				  }
				  if (seconds < 10) {
					seconds = '0' + seconds;
				  }
				  var timer = minutes + ":" + seconds;
				}
			}, 1000);
			if(that.countDownTime==0) {
				uni.showModal({
					title: '提示',
					content: '订单已超过可支付时间，请重新下单',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.switchTab({
								url: '/pages/home/home'
							})
						}
					}
				})
			}
		},
		// 点击预定按钮回调
		goPagePay() {
			uni.navigateTo({
				url: '/pages/pay/pay'
			})
		},
		// 点击再次预定按钮回调
		goPageDetail() {
			uni.navigateTo({
				url: '/pages/detail/detail'
			})
		},
		// 点击每一个订单回调
		goPageOrderDetail(item) {
			let info = JSON.stringify(item)
			uni.navigateTo({
				url: `/pages/orderDetail/orderDetail?info=${info}`
			})
		},
		// 右侧选项内容删除按钮回调
		handleDelete(item) {
			// console.log(item)
			uni.showModal({
				title: '提示',
				content: '确定删除吗？删除后不可恢复',
				success: async (res) => {
					if (res.confirm) {
						const res = await this.$myRequest({
							url: '/mhotel/abkdelBooking.action',
							data: {
								bookingId: item.id
							}
						})
						// console.log(res)
						if (res.code === 200) {
							uni.showToast({
								title: '删除成功',
								icon: 'success',
								mask: true
							})
							setTimeout(() => {
								this.orderList = []
								this.page = 1
								this.getOrderList()
							}, 1500)
						}
					}
				}
			})
		}
	}
}
</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 {
				display: flex;
				align-items: center;
				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;
			margin-top: -10rpx;
			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;
			}
		}
	}
}

// 修改倒计时字体颜色
::v-deep .uv-count-down .uv-count-down__text {
	color: #ff5733;
}
</style>