orderDetail.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <template>
  2. <view>
  3. <view class="top">
  4. <!-- #ifdef MP-WEIXIN -->
  5. <NavigateBar title="订单详情" control="back" bgcolor="#a09cc4"></NavigateBar>
  6. <!-- #endif -->
  7. <!-- #ifdef MP-ALIPAY -->
  8. <NavigateBar title="订单详情" bgcolor="#a09cc4"></NavigateBar>
  9. <!-- #endif -->
  10. </view>
  11. <view class="info-item">
  12. <u-text text="订单id:"></u-text>
  13. <u-text :text="orderInfo.orderId" align="right"></u-text>
  14. </view>
  15. <view class="info-item">
  16. <u-text text="姓名:"></u-text>
  17. <u-text :text="orderInfo.name" align="right"></u-text>
  18. </view>
  19. <view class="info-item">
  20. <u-text text="手机号:"></u-text>
  21. <u-text :text="orderInfo.phone" align="right"></u-text>
  22. </view>
  23. <view class="info-item">
  24. <u-text text="酒店:"></u-text>
  25. <u-text :text="orderInfo.hotelName" align="right"></u-text>
  26. </view>
  27. <view class="info-item">
  28. <u-text text="房间类型:"></u-text>
  29. <u-text :text="orderInfo.roomTypeName" align="right"></u-text>
  30. </view>
  31. <view class="info-item">
  32. <u-text text="楼栋:"></u-text>
  33. <u-text :text="orderInfo.building" align="right"></u-text>
  34. </view>
  35. <view class="info-item">
  36. <u-text text="楼层:"></u-text>
  37. <u-text :text="orderInfo.floor" align="right"></u-text>
  38. </view>
  39. <view class="info-item">
  40. <u-text text="房间号:"></u-text>
  41. <u-text :text="orderInfo.room+'('+orderInfo.breakfastNum+')'" align="right"></u-text>
  42. </view>
  43. <view class="info-item">
  44. <u-text text="开始日期:"></u-text>
  45. <u-text :text="orderInfo.startTime" align="right"></u-text>
  46. </view>
  47. <view class="info-item">
  48. <u-text text="结束日期:"></u-text>
  49. <u-text :text="orderInfo.endTime" align="right"></u-text>
  50. </view>
  51. <view class="info-item">
  52. <u-text text="创建时间:"></u-text>
  53. <u-text :text="orderInfo.createTime" align="right"></u-text>
  54. </view>
  55. <view class="info-item">
  56. <u-text text="价格:"></u-text>
  57. <u-text :text="orderInfo.price" align="right"></u-text>
  58. </view>
  59. <view class="info-item">
  60. <u-text text="支付时间:"></u-text>
  61. <u-text :text="orderInfo.paymentTime" align="right"></u-text>
  62. </view>
  63. <view class="info-item">
  64. <u-text text="支付方式:"></u-text>
  65. <u-text :text="orderInfo.paymentMethod" align="right"></u-text>
  66. </view>
  67. <view class="info-item">
  68. <u-text text="订单状态:"></u-text>
  69. <u-text :text="orderInfo.status" align="right"></u-text>
  70. </view>
  71. <view class="info-item">
  72. <u-text text="支付状态:"></u-text>
  73. <u-text :text="orderInfo.paymentStatus" align="right"></u-text>
  74. </view>
  75. <view class="btn-container">
  76. <u-button text="删除" type="error" @click="deleteOrder" color="#9e97c3"></u-button>
  77. </view>
  78. </view>
  79. </template>
  80. <script>
  81. import moment from "moment"
  82. import NavigateBar from "../../components/navigateBar/navigate-bar.vue";
  83. export default {
  84. components: {
  85. NavigateBar
  86. },
  87. data() {
  88. return {
  89. orderId: '',
  90. orderInfo: {},
  91. paymentStatus: {
  92. UNPAID: '待支付',
  93. PAID: '已支付'
  94. },
  95. status: {
  96. CANCELED: "已取消",
  97. ORDER_PLACED: "已下单",
  98. ROOM_SELECTED: "已选房",
  99. CHECK_IN: "已入住",
  100. FINISHED: "已完成"
  101. }
  102. };
  103. },
  104. methods: {
  105. async queryOrder() {
  106. let res = await uni.$http.post('/hotelOrder/queryByCondition', {
  107. orderId: this.orderId,
  108. deleted: false,
  109. pageNo: 1,
  110. pageSize: 999
  111. })
  112. console.log(res)
  113. this.orderInfo = JSON.parse(JSON.stringify(res.data.data.records[0]))
  114. this.orderInfo.orderId = this.orderInfo.orderId.toUpperCase()
  115. this.orderInfo.startTime = moment(this.orderInfo.startTime).format('YYYY-MM-DD')
  116. this.orderInfo.endTime = moment(this.orderInfo.endTime).format('YYYY-MM-DD')
  117. this.orderInfo.createTime = moment(this.orderInfo.createTime).format('YYYY-MM-DD HH:mm:ss')
  118. this.orderInfo.paymentTime = this.orderInfo.paymentTime === null ? '' : moment(this.orderInfo
  119. .paymentTime).format('YYYY-MM-DD HH:mm:ss')
  120. this.orderInfo.status = this.status[this.orderInfo.status]
  121. this.orderInfo.paymentStatus = this.paymentStatus[this.orderInfo.paymentStatus]
  122. this.orderInfo.breakfastNum = this.orderInfo.breakfastNum === undefined ? 0 : this.orderInfo
  123. .breakfastNum
  124. },
  125. async deleteOrder() {
  126. let res = await uni.$http.delete('/hotelOrder/' + this.orderInfo.id)
  127. console.log(res)
  128. if (res.data.code === 200 && res.data.msg === 'SUCCESS') {
  129. uni.$showMsg('删除成功!')
  130. setTimeout(() => {
  131. uni.switchTab({
  132. url: '/pages/order/order'
  133. })
  134. }, 1000)
  135. } else {
  136. uni.$showMsg('删除失败!')
  137. }
  138. }
  139. },
  140. async onLoad(options) {
  141. console.log(options.orderId)
  142. this.orderId = options.orderId
  143. await this.queryOrder()
  144. },
  145. // #ifdef MP-WEIXIN
  146. onShareAppMessage(info) {
  147. return {
  148. title: '源享住',
  149. path: 'pages/login/login',
  150. imageUrl: "/static/logo.png"
  151. }
  152. }
  153. // #endif
  154. }
  155. </script>
  156. <style lang="scss">
  157. .info-item {
  158. margin: 20rpx;
  159. display: flex;
  160. }
  161. .btn-container {
  162. margin: 40rpx;
  163. }
  164. </style>