123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- <template>
- <view class="date-info" @click="showCalendar">
- <view class="checkout-date">
- <view class="title">
- <text>离店</text>
- </view>
- <view class="content">
- <text v-text="endDateFormatted"></text>
- <text v-text="endDay"></text>
- </view>
- </view>
- <view class="day-num">
- <text>共{{dayNum}}晚</text>
- <image src="../../static/arrow.png"></image>
- </view>
- </view>
- <view class="room-type-item" v-for="(item,index) in roomTypeList" :key="index">
- <image :src="item.roomPicPath" mode="aspectFill"></image>
- <view class="room-type-name">
- <text v-text="item.roomTypeName"></text>
- </view>
- <view class="room-type-right">
- <view class="room-type-price">
- <text>¥{{item.unitPrice}}</text>
- </view>
- <button @click="selectRoomType(item)">选房</button>
- </view>
- </view>
- <view class="">
- <uni-calendar ref="calendar" :insert="false" :lunar="true" :start-date="calendarStartDate" :date="endDate"
- title="离店日期" @confirm="confirmEndTime"></uni-calendar>
- </view>
- </template>
- <script setup>
- import moment from 'moment/moment'
- import {
- computed,
- onMounted,
- reactive,
- ref
- } from 'vue';
- import {
- onLoad
- } from '@dcloudio/uni-app'
- import {
- useHotelStore
- } from '../../store/hotelStore';
- import {
- getDayOfWeek
- } from '../../utils/dateTimeUtil';
- import {
- useOrderStore
- } from "../../store/orderStore";
- const hotel = useHotelStore().hotel
- let roomTypeList = reactive([])
- async function getRoomTypeList() {
- let res = await uni.request({
- url: `/hotel/${hotel.hotelId}/roomType`,
- method: 'GET'
- })
- roomTypeList.push(...res.data.data)
- }
- let calendarStartDate = ref('')
- let endDate = ref('')
- let endDateFormatted = computed(() => {
- let split = endDate.value.split('-')
- return split[1] + '月' + split[2] + '日'
- })
- let endDay = ref('')
- let checkoutDate = ''
- let checkoutTime = hotel.checkoutTime || "12:00:00"
- let [checkoutHour, checkoutMinute, checkoutSecond] = checkoutTime.split(':')
- .map(Number)
- let dayNum = computed(() => {
- let date = new Date(endDate.value)
- date.setHours(checkoutHour, checkoutMinute, checkoutSecond)
- return Math.ceil((date.valueOf() - new Date().valueOf()) / (24 * 60 * 60 * 1000))
- })
- function confirmEndTime(params) {
- let date = new Date(params.fulldate)
- endDate.value = moment(date).format('YYYY-MM-DD')
- endDay.value = getDayOfWeek(date)
- date.setHours(checkoutHour, checkoutMinute, checkoutSecond)
- checkoutDate = date
- }
- let calendar = ref()
- function showCalendar() {
- calendar.value.open()
- }
- let order = useOrderStore()
- function selectRoomType(item) {
- order.updateOrderInfo({
- hotelId: hotel.hotelId,
- roomType: item.roomType,
- startTime: new Date(),
- endTime: checkoutDate,
- dayNum: dayNum,
- createHotelOrderReason: 'CHECKIN',
- orderSource: 'MINI_APP',
- isResv: false,
- roomTypeName: item.roomTypeName,
- roomPicPath: item.roomPicPath,
- unitPrice: item.unitPrice
- })
- uni.navigateTo({
- url: '/subpkg_checkin/selectRoom/selectRoom?roomType=' + item.roomType
- })
- }
- onLoad(() => {
- let checkinBoundaryTime = hotel.checkinBoundaryTime || "06:00:00"
- let [hour, minute, second] = checkinBoundaryTime.split(':').map(Number)
- let boundaryTime = new Date()
- boundaryTime.setHours(hour, minute, second)
- //入住时间早于边界时间,默认当天结束
- //入住时间晚于边界时间,默认第二天结束
- let endTime = new Date()
- if (new Date() > boundaryTime) {
- endTime.setDate(endTime.getDate() + 1)
- }
- endDate.value = moment(endTime).format('YYYY-MM-DD')
- //日历开始时间,选择的离店日期不能早于该时间
- calendarStartDate.value = moment(endTime).format('YYYY-MM-DD')
- //离店日期为星期几
- endDay.value = getDayOfWeek(endTime)
- endTime.setHours(checkoutHour, checkoutMinute, checkoutSecond)
- checkoutDate = endTime
- })
- onMounted(async () => {
- showCalendar()
- await getRoomTypeList()
- })
- </script>
- <style lang="scss">
- .date-info {
- background-color: #FFFFFF;
- display: flex;
- padding: 0 80rpx;
- height: 120rpx;
- justify-content: space-between;
- align-items: center;
- .checkout-date {
- display: flex;
- flex-direction: column;
- .title {
- color: #666666;
- font-size: 26rpx;
- }
- .content {
- color: #333333;
- font-weight: bold;
- font-size: 28rpx;
- }
- }
- .day-num {
- display: flex;
- justify-content: right;
- align-items: center;
- width: 160rpx;
- text {
- color: #333333;
- font-weight: bold;
- font-size: 36rpx;
- }
- image {
- margin-left: 20rpx;
- width: 18rpx;
- height: 32rpx;
- }
- }
- }
- .room-type-item {
- border-radius: 30rpx;
- background-color: #FFFFFF;
- margin: 20rpx;
- padding: 20rpx;
- display: flex;
- background: #FFFFFF;
- box-shadow: 0rpx 10rpx 6rpx 1rpx rgba(75, 75, 75, 0.1);
- border-radius: 10rpx;
- image {
- width: 200rpx;
- height: 200rpx;
- border-radius: 10rpx;
- }
- .room-type-name {
- margin-left: 30rpx;
- width: 200rpx;
- text {
- font-size: 40rpx;
- font-weight: bold;
- color: #333333;
- }
- }
- .room-type-right {
- margin-left: 80rpx;
- .room-type-price {
- font-size: 40rpx;
- font-weight: bold;
- color: #FF5C58
- }
- button {
- background-color: #F69B49;
- height: 60rpx;
- width: 100%;
- color: #FFFFFF;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 60rpx;
- border-radius: 6rpx;
- }
- }
- }
- </style>
|