MiniScm/subpkg_checkin/orderDetail/orderDetail.vue

<template>
	<view>
		<view>
			<uni-card :title="checkinInfo.hotelName" extra="入住信息" note="Tips">
				<view class="card-item">
					<view class="card-item-left">
						<text>房间类型：</text>
					</view>
					<text>{{checkinInfo.roomTypeName}}\n</text>
				</view>
				<view class="card-item">
					<view class="card-item-left">
						<text>起始时间：</text>
					</view>
					<text>{{checkinInfo.startTime}}\n</text>
				</view>
				<view class="card-item">
					<view class="card-item-left">
						<text>结束时间：</text>
					</view>
					<text>{{checkinInfo.endTime}}</text>
				</view>
			</uni-card>
			<view class="completeBtn">
				<u-button type="primary" @click="gotoSelectRoom">办理入住</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				checkinInfo: {
					hotelName: ""
				}
			};
		},
		computed: {
			...mapState('m_business', ['reservationInfo']),
		},
		methods: {
			gotoSelectRoom() {
				uni.navigateTo({
					url: '/subpkg_checkin/selectRoom/selectRoom?roomType=' + this.checkinInfo.roomType
				})
			},
			getCheckinInfo() {
				this.checkinInfo.hotelName = this.reservationInfo.orderInfo.hotelName
				this.checkinInfo.roomType = this.reservationInfo.orderInfo.roomType
				this.checkinInfo.roomTypeName = this.reservationInfo.orderInfo.roomTypeName
				this.checkinInfo.startTime = this.reservationInfo.orderInfo.startTime
				this.checkinInfo.endTime = this.reservationInfo.orderInfo.endTime
				this.checkinInfo.startTime = moment(this.checkinInfo.startTime).format('YYYY/MM/DD HH:mm')
				this.checkinInfo.endTime = moment(this.checkinInfo.endTime).format('YYYY/MM/DD HH:mm')
			}
		},
		onLoad() {
			this.getCheckinInfo()
			console.log(this.checkinInfo)
		}
	}
</script>

<style lang="scss">
	.card-item {
		margin-bottom: 40rpx;
		display: flex;

		.card-item-left {
			width: 140rpx;
		}
	}

	.completeBtn {
		left: 80rpx;
		right: 80rpx;
		bottom: 120rpx;
		position: fixed;
		background-color: #0081ff;
		color: #ffffff;
	}

	.not-reservation {
		display: flex;
		justify-content: center;
		height: 100%;
		text-align: center;
		vertical-align: 100rpx;
	}

	.tip {
		padding-top: 40%;
	}
</style>