checkin.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <view v-if="result">
  3. <view class="tips">
  4. <image class="image" src="/static/success.png" mode=""></image>
  5. <text class="text">支付成功,祝您入住愉快!</text>
  6. </view>
  7. <view class="confirm-button">
  8. <button class="button" @click="gotoHome">{{buttonText}}</button>
  9. </view>
  10. </view>
  11. </template>
  12. <script setup>
  13. import moment from 'moment'
  14. import {
  15. onLoad
  16. } from '@dcloudio/uni-app'
  17. import {
  18. computed,
  19. ref
  20. } from 'vue'
  21. import {
  22. useOrderStore
  23. } from '@/store/orderStore'
  24. import {
  25. useCheckinInfoStore
  26. } from '@/store/checkinInfoStore'
  27. let time = ref(3)
  28. let buttonText = computed(() => {
  29. return '确认(' + time.value + ')'
  30. })
  31. let orderStore = useOrderStore()
  32. let orderInfo = orderStore.orderInfo
  33. let checkinInfoStore = useCheckinInfoStore()
  34. let checkinInfo = checkinInfoStore.checkinInfo
  35. let result = ref(false)
  36. let countDownTimer
  37. async function checkin() {
  38. try {
  39. uni.showLoading({
  40. title: '正在办理入住...'
  41. })
  42. let info = {
  43. hotelId: orderInfo.hotelId,
  44. building: orderInfo.building,
  45. floorId: orderInfo.floor,
  46. roomId: orderInfo.room,
  47. startTime: moment(new Date()).format('YYMMDDHHmmss'),
  48. endTime: moment(orderInfo.endTime).format('YYMMDDHHmmss'),
  49. cardId: '0',
  50. userType: 1,
  51. orderId: orderInfo.orderId,
  52. isResv: orderInfo.orderSource !== 'MINI_APP'
  53. }
  54. let checkinResult = new Array(checkinInfo.length).fill(false)
  55. for (let i = 0; i < checkinInfo.length; i++) {
  56. if (i == 0) {
  57. info.isMainCustomer = true
  58. info.totalCustomerNum = checkinInfo.length
  59. } else {
  60. info.isMainCustomer = false
  61. }
  62. info.userName = checkinInfo[i].name
  63. info.userId = checkinInfo[i].idNumber
  64. info.faceData = checkinInfo[i].faceData
  65. info.userPhone = checkinInfo[i].phone
  66. info.address = checkinInfo[i].address
  67. info.race = checkinInfo[i].nation
  68. info.userGender = checkinInfo[i].sex === '男' ? 1 : 2
  69. info.birth = checkinInfo[i].birth
  70. info.issuingAuthority = checkinInfo[i].issuingAuthority
  71. info.issuingDate = checkinInfo[i].issuingDate
  72. info.expiryDate = checkinInfo[i].expiryDate
  73. let res = await uni.request({
  74. url: '/scm/checkin',
  75. method: 'POST',
  76. data: info
  77. })
  78. if (res.data.success) {
  79. checkinResult[i] = true
  80. }
  81. }
  82. let falsePos = checkinResult.indexOf(false)
  83. if (falsePos < 0) {
  84. result.value = true
  85. countDownTimer = setInterval(() => {
  86. time.value--
  87. if (time.value === 0) {
  88. clearInterval(countDownTimer)
  89. gotoHome()
  90. }
  91. }, 1000)
  92. } else {
  93. let failName = checkinInfo[falsePos].name
  94. uni.showModal({
  95. showCancel: false,
  96. content: '办理失败,请重新选择订单',
  97. success: (res) => {
  98. if (res.confirm) {
  99. uni.switchTab({
  100. url: '/pages/home/home'
  101. })
  102. }
  103. }
  104. })
  105. }
  106. } finally {
  107. uni.hideLoading()
  108. }
  109. }
  110. function gotoHome() {
  111. clearInterval(countDownTimer)
  112. uni.switchTab({
  113. url: '/pages/home/home'
  114. })
  115. }
  116. onLoad(async () => {
  117. await checkin()
  118. })
  119. </script>
  120. <style lang="scss">
  121. .tips {
  122. margin-top: 200rpx;
  123. display: flex;
  124. flex-direction: column;
  125. .image {
  126. width: 200rpx;
  127. height: 200rpx;
  128. margin: 0 auto;
  129. }
  130. .text {
  131. color: #666666;
  132. font-size: 40rpx;
  133. font-weight: bold;
  134. text-align: center;
  135. }
  136. }
  137. .confirm-button {
  138. margin-top: 200rpx;
  139. .button {
  140. width: 80%;
  141. margin: 0 auto;
  142. color: #ffffff;
  143. background-color: #9e97c3;
  144. }
  145. }
  146. </style>