selectRoomType.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <template>
  2. <view class="date-info" @click="showCalendar">
  3. <view class="checkout-date">
  4. <view class="title">
  5. <text>离店</text>
  6. </view>
  7. <view class="content">
  8. <text v-text="endDateFormatted"></text>
  9. <text v-text="endDay"></text>
  10. </view>
  11. </view>
  12. <view class="day-num">
  13. <text>共{{dayNum}}晚</text>
  14. <image src="../../static/arrow.png"></image>
  15. </view>
  16. </view>
  17. <view class="room-type-item" v-for="(item,index) in roomTypeList" :key="index">
  18. <image :src="item.roomPicPath" mode="aspectFill"></image>
  19. <view class="room-type-name">
  20. <text v-text="item.roomTypeName"></text>
  21. </view>
  22. <view class="room-type-right">
  23. <view class="room-type-price">
  24. <text>¥{{item.unitPrice}}</text>
  25. </view>
  26. <button @click="selectRoomType(item)">选房</button>
  27. </view>
  28. </view>
  29. <view class="">
  30. <uni-calendar ref="calendar" :insert="false" :lunar="true" :start-date="calendarStartDate" :date="endDate"
  31. title="离店日期" @confirm="confirmEndTime"></uni-calendar>
  32. </view>
  33. </template>
  34. <script setup>
  35. import moment from 'moment/moment'
  36. import {
  37. computed,
  38. onMounted,
  39. reactive,
  40. ref
  41. } from 'vue';
  42. import {
  43. onLoad
  44. } from '@dcloudio/uni-app'
  45. import {
  46. useHotelStore
  47. } from '../../store/hotelStore';
  48. import {
  49. getDayOfWeek
  50. } from '../../utils/dateTimeUtil';
  51. import {
  52. useOrderStore
  53. } from "../../store/orderStore";
  54. const hotel = useHotelStore().hotel
  55. let roomTypeList = reactive([])
  56. async function getRoomTypeList() {
  57. let res = await uni.request({
  58. url: `/hotel/${hotel.hotelId}/roomType`,
  59. method: 'GET'
  60. })
  61. roomTypeList.push(...res.data.data)
  62. }
  63. let calendarStartDate = ref('')
  64. let endDate = ref('')
  65. let endDateFormatted = computed(() => {
  66. let split = endDate.value.split('-')
  67. return split[1] + '月' + split[2] + '日'
  68. })
  69. let endDay = ref('')
  70. let checkoutDate = ''
  71. let checkoutTime = hotel.checkoutTime || "12:00:00"
  72. let [checkoutHour, checkoutMinute, checkoutSecond] = checkoutTime.split(':')
  73. .map(Number)
  74. let dayNum = computed(() => {
  75. let date = new Date(endDate.value)
  76. date.setHours(checkoutHour, checkoutMinute, checkoutSecond)
  77. return Math.ceil((date.valueOf() - new Date().valueOf()) / (24 * 60 * 60 * 1000))
  78. })
  79. function confirmEndTime(params) {
  80. let date = new Date(params.fulldate)
  81. endDate.value = moment(date).format('YYYY-MM-DD')
  82. endDay.value = getDayOfWeek(date)
  83. date.setHours(checkoutHour, checkoutMinute, checkoutSecond)
  84. checkoutDate = date
  85. }
  86. let calendar = ref()
  87. function showCalendar() {
  88. calendar.value.open()
  89. }
  90. let order = useOrderStore()
  91. function selectRoomType(item) {
  92. order.updateOrderInfo({
  93. hotelId: hotel.hotelId,
  94. roomType: item.roomType,
  95. startTime: new Date(),
  96. endTime: checkoutDate,
  97. dayNum: dayNum,
  98. createHotelOrderReason: 'CHECKIN',
  99. orderSource: 'MINI_APP',
  100. isResv: false,
  101. roomTypeName: item.roomTypeName,
  102. roomPicPath: item.roomPicPath,
  103. unitPrice: item.unitPrice
  104. })
  105. uni.navigateTo({
  106. url: '/subpkg_checkin/selectRoom/selectRoom?roomType=' + item.roomType
  107. })
  108. }
  109. onLoad(() => {
  110. let checkinBoundaryTime = hotel.checkinBoundaryTime || "06:00:00"
  111. let [hour, minute, second] = checkinBoundaryTime.split(':').map(Number)
  112. let boundaryTime = new Date()
  113. boundaryTime.setHours(hour, minute, second)
  114. //入住时间早于边界时间,默认当天结束
  115. //入住时间晚于边界时间,默认第二天结束
  116. let endTime = new Date()
  117. if (new Date() > boundaryTime) {
  118. endTime.setDate(endTime.getDate() + 1)
  119. }
  120. endDate.value = moment(endTime).format('YYYY-MM-DD')
  121. //日历开始时间,选择的离店日期不能早于该时间
  122. calendarStartDate.value = moment(endTime).format('YYYY-MM-DD')
  123. //离店日期为星期几
  124. endDay.value = getDayOfWeek(endTime)
  125. endTime.setHours(checkoutHour, checkoutMinute, checkoutSecond)
  126. checkoutDate = endTime
  127. })
  128. onMounted(async () => {
  129. showCalendar()
  130. await getRoomTypeList()
  131. })
  132. </script>
  133. <style lang="scss">
  134. .date-info {
  135. background-color: #FFFFFF;
  136. display: flex;
  137. padding: 0 80rpx;
  138. height: 120rpx;
  139. justify-content: space-between;
  140. align-items: center;
  141. .checkout-date {
  142. display: flex;
  143. flex-direction: column;
  144. .title {
  145. color: #666666;
  146. font-size: 26rpx;
  147. }
  148. .content {
  149. color: #333333;
  150. font-weight: bold;
  151. font-size: 28rpx;
  152. }
  153. }
  154. .day-num {
  155. display: flex;
  156. justify-content: right;
  157. align-items: center;
  158. width: 160rpx;
  159. text {
  160. color: #333333;
  161. font-weight: bold;
  162. font-size: 36rpx;
  163. }
  164. image {
  165. margin-left: 20rpx;
  166. width: 18rpx;
  167. height: 32rpx;
  168. }
  169. }
  170. }
  171. .room-type-item {
  172. border-radius: 30rpx;
  173. background-color: #FFFFFF;
  174. margin: 20rpx;
  175. padding: 20rpx;
  176. display: flex;
  177. background: #FFFFFF;
  178. box-shadow: 0rpx 10rpx 6rpx 1rpx rgba(75, 75, 75, 0.1);
  179. border-radius: 10rpx;
  180. image {
  181. width: 200rpx;
  182. height: 200rpx;
  183. border-radius: 10rpx;
  184. }
  185. .room-type-name {
  186. margin-left: 30rpx;
  187. width: 200rpx;
  188. text {
  189. font-size: 40rpx;
  190. font-weight: bold;
  191. color: #333333;
  192. }
  193. }
  194. .room-type-right {
  195. margin-left: 80rpx;
  196. .room-type-price {
  197. font-size: 40rpx;
  198. font-weight: bold;
  199. color: #FF5C58
  200. }
  201. button {
  202. background-color: #F69B49;
  203. height: 60rpx;
  204. width: 100%;
  205. color: #FFFFFF;
  206. display: flex;
  207. justify-content: center;
  208. align-items: center;
  209. margin-top: 60rpx;
  210. border-radius: 6rpx;
  211. }
  212. }
  213. }
  214. </style>