MiniScm/subpkg_checkin/queryOrderResult/queryOrderResult.vue

<template>
	<view class="container">
		<view>
			<!-- #ifdef MP-WEIXIN -->
			<NavigateBar title="查询结果" control="back" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<NavigateBar title="查询结果" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
		</view>
		<view class="order-item" v-for="(order,index) in orderList" @click="gotoSelectRoom(index)" :key="index">
			<view class="order-item-top">
				<u-text :text="order.roomTypeName" color="#333333" bold size="18"></u-text>
				<view class="order-item-top-right">
					<u-text :text="order.status" color="#A5B6F1" align="center"></u-text>
				</view>
			</view>
			<u-text :text="order.orderId"></u-text>
			<u-text :text="order.createTime"></u-text>
			<u-text :text="order.room"></u-text>
			<u-text :text="order.duration"></u-text>
			<view class="payment-info">
				<view class="">
					<u-text :text="order.paymentStatus"></u-text>
				</view>
				<view class="">
					<u-text :text="order.price" color="#F7312F"></u-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from "moment"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import NavigateBar from "../../components/navigateBar/navigate-bar.vue";
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				orderList: [],
				paymentStatus: {
					UNPAID: '待支付',
					PAID: '已支付'
				},
				status: {
					ORDER_PLACED: '未入住'
				}
			};
		},
		computed: {
			...mapState('m_business', ['queryOrderResult']),
		},
		methods: {
			...mapMutations('m_business', ['updateOrder']),
			gotoSelectRoom(index) {
				console.log(index)
				this.updateOrder(this.queryOrderResult[index])
				uni.navigateTo({
					url: '/subpkg_checkin/addGuest/addGuest'
				})
			}
		},
		onLoad() {
			this.orderList = JSON.parse(JSON.stringify(this.queryOrderResult))
			this.orderList.forEach(order => {
				order.paymentStatus = this.paymentStatus[order.paymentStatus] + '：'
				order.status = '待入住'
				order.orderId = '订单号：' + order.orderId
				order.createTime = '订单创建时间：' + moment(order.createTime).format('YYYY/MM/DD hh:mm:ss')
				order.room = '房间号：' + order.room
				order.duration = moment(order.startTime).format('YYYY-MM-DD') + '至' + moment(order.endTime).format(
					'YYYY-MM-DD')
				order.price = '￥' + order.price
			})
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		}
		// #endif
	}
</script>

<style>
	page {
		background-color: #EFEFF4;
	}
</style>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;

		.order-item {
			background-color: #FFFFFF;
			box-shadow: 0px 10px 6px 1px rgba(75, 75, 75, 0.1);
			border-radius: 10px;
			margin: 20rpx;
			padding: 30rpx;

			.order-item-top {
				display: flex;
				justify-content: space-between;

				.order-item-top-right {
					width: 120rpx;
					height: 60rpx;
					background-color: #E7EDFD;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.payment-info {
				display: flex;
			}
		}
	}

	.u-text__value {
		margin: 10rpx 0;
	}
</style>