parkingLock.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <template>
  2. <!-- 车位锁 -->
  3. <view class="parking-lock">
  4. <!-- 车位锁支付 -->
  5. <view class="parking-lock-pay" v-if="parkingLockStatus === 1">
  6. <view class="parking-lock-title">支付停车费</view>
  7. <view class="parking-lock-tips">请您确认停车费用,确认后请支付费用,结束停车。谢谢您的使用!</view>
  8. <view class="parking-lock-info">
  9. <view class="parking-lock-info-item">
  10. <view>停车场名称</view>
  11. <view>{{orderInfo.roadName}}</view>
  12. </view>
  13. <view class="parking-lock-info-item">
  14. <view>停车泊位</view>
  15. <view>{{orderInfo.spaceName}}</view>
  16. </view>
  17. <view class="parking-lock-info-item">
  18. <view>入场时间</view>
  19. <view>{{orderInfo.inTime}}</view>
  20. </view>
  21. <view class="parking-lock-info-item">
  22. <view>出场时间</view>
  23. <view>{{orderInfo.outTime}}</view>
  24. </view>
  25. <view class="parking-lock-info-item">
  26. <view>停车时长</view>
  27. <view>{{orderInfo.duration}}</view>
  28. </view>
  29. <!-- <view class="parking-lock-info-item">
  30. <view>合计金额</view>
  31. <view>{{orderInfo.totalAmount}} 元</view>
  32. </view>
  33. <view class="parking-lock-info-item">
  34. <view>优惠金额</view>
  35. <view>{{orderInfo.preferentialAmount}} 元</view>
  36. </view> -->
  37. <view class="parking-lock-info-item">
  38. <view>应缴金额</view>
  39. <view class="really-money">{{orderInfo.payAmount}} 元</view>
  40. </view>
  41. </view>
  42. <view class="parking-lock-pay-btn">
  43. <button type="default" @click="payMoney">立即支付</button>
  44. </view>
  45. </view>
  46. <!-- 车位锁开始状态 -->
  47. <view class="parking-lock-begin" v-else-if="parkingLockStatus === 2">
  48. <view class="parking-lock-begin-box">
  49. <view class="parking-lock-begin-bg">
  50. <image src="../../static/img/parking-lock-bg.png" mode=""></image>
  51. </view>
  52. </view>
  53. <view class="parking-lock-begin-info">车位锁正在动作,还未到位</view>
  54. </view>
  55. <!-- 车位锁正在状态 -->
  56. <view class="parking-lock-loading" v-else-if="parkingLockStatus === 3">
  57. <view class="parking-lock-loading-box">
  58. <view class="parking-lock-loading-bg">
  59. <image src="../../static/img/parking-lock-bg.png" mode=""></image>
  60. </view>
  61. </view>
  62. <view class="parking-lock-loading-info">开锁中,请等待!</view>
  63. </view>
  64. <!-- 开锁完成 -->
  65. <view class="parking-lock-success" v-else-if="parkingLockStatus === 4">
  66. <view class="parking-lock-success-box">
  67. <image src="../../static/img/parking-lock-achieve.png" mode=""></image>
  68. </view>
  69. <view class="parking-lock-success-info">开锁已完成</view>
  70. <view class="parking-lock-success-button">
  71. <button @click="cancel">返回</button>
  72. </view>
  73. </view>
  74. <view class="parking-lock-pay" v-else-if="parkingLockStatus === 5">
  75. <view class="parking-lock-tips">{{tipsMsg}}</view>
  76. </view>
  77. <!-- 支付方式 -->
  78. <PaymentMethod
  79. :payWayPop="payWayPop"
  80. :curOrderList="orderList"
  81. :deviceNo="deviceNo"
  82. :jumpUrl="jumpUrl"
  83. @closePaymentMethod="closePaymentMethod"></PaymentMethod>
  84. <u-toast ref="uToast" />
  85. </view>
  86. </template>
  87. <script>
  88. import getUrlParams from "../../utils/getUrlParams.js";
  89. import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
  90. export default {
  91. components: {
  92. PaymentMethod
  93. },
  94. data() {
  95. return {
  96. // 车位锁状态 1:支付 2:开始开锁 3:开锁中 4:开锁完成
  97. parkingLockStatus: 1,
  98. // 支付方式选择弹框
  99. payWayPop: false,
  100. // 订单编号
  101. orderList: [],
  102. // 提示信息
  103. tipsMsg: null,
  104. // 设备编号
  105. deviceNo: null,
  106. // 轮询
  107. timer: null,
  108. timer1: null,
  109. // 订单信息
  110. orderInfo: {},
  111. // 订单id
  112. orderId: null,
  113. // 重定向地址
  114. jumpUrl: location.href
  115. }
  116. },
  117. onLoad(page) {
  118. if (page.orderId) {
  119. this.getOrderDetails(page.orderId)
  120. this.orderList = []
  121. this.orderId = page.orderId
  122. this.orderList.push(page.orderId)
  123. this.deviceNo = page.deviceNo
  124. } else {
  125. this.tipsMsg = page.msg
  126. this.parkingLockStatus = 5
  127. }
  128. },
  129. onShow() {
  130. this.timer1 = setInterval(() => {
  131. this.getOrderDetails(this.orderId)
  132. }, 5000)
  133. },
  134. onHide() {
  135. if (this.timer) {
  136. clearInterval(this.timer)
  137. }
  138. if (this.timer1) {
  139. clearInterval(this.timer1)
  140. }
  141. },
  142. methods: {
  143. payMoney() {
  144. this.payWayPop = true
  145. },
  146. // 查询订单信息
  147. getOrderDetails(id) {
  148. this.$u.api.getOrderDetail({id: id})
  149. .then(res => {
  150. console.log(res)
  151. if (res.code === 200) {
  152. this.orderInfo = res.data
  153. if (res.data.payStatus === 1) {
  154. clearInterval(this.timer1)
  155. this.checkEqupment()
  156. }
  157. }
  158. })
  159. },
  160. // 检测设备
  161. checkEqupment() {
  162. this.timer = setInterval(() => {
  163. this.getEqumentStatus(this.deviceNo)
  164. }, 1000)
  165. },
  166. // 查询设备状态
  167. getEqumentStatus(orderNo) {
  168. console.log(orderNo)
  169. this.$u.api.getEquomentInfo({orderNo: orderNo})
  170. .then(res => {
  171. if (res.code === 200) {
  172. console.log(res.data)
  173. if (res.data.deviceStatus === 0) {
  174. this.parkingLockStatus = 4
  175. clearInterval(this.timer)
  176. } else if (res.data.deviceStatus === 1 || res.data.deviceStatus === 5) {
  177. this.parkingLockStatus = 2
  178. } else if (res.data.deviceStatus === 6) {
  179. this.parkingLockStatus = 3
  180. }
  181. }
  182. })
  183. },
  184. // 返回首页
  185. cancel() {
  186. uni.switchTab({
  187. url: '/pages/index/index'
  188. })
  189. },
  190. closePaymentMethod() {
  191. this.payWayPop = false
  192. }
  193. }
  194. }
  195. </script>
  196. <style lang="scss" scoped>
  197. @import './parkingLock.scss';
  198. </style>