|
|
@@ -0,0 +1,264 @@
|
|
|
+<template>
|
|
|
+ <!-- 道闸 -->
|
|
|
+ <view class="parking-lock">
|
|
|
+ <!-- 道闸支付 -->
|
|
|
+ <template v-if="parkingLockStatus === 1">
|
|
|
+ <view class="parking-lock-pay">
|
|
|
+ <view class="parking-lock-title">支付停车费</view>
|
|
|
+ <view class="parking-lock-tips">请您确认停车费用，确认后请支付费用，结束停车。谢谢您的使用！</view>
|
|
|
+ <view class="parking-lock-info">
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>车牌号</view>
|
|
|
+ <view class="weight">{{ orderInfo.vehicleNo }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>停车场名称</view>
|
|
|
+ <view>{{orderInfo.roadName }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>入场车道</view>
|
|
|
+ <view>{{'入口1'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>入场时间</view>
|
|
|
+ <view>{{orderInfo.inTime}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>出场车道</view>
|
|
|
+ <view>{{'出口1'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>出场时间</view>
|
|
|
+ <view>{{orderInfo.outTime}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>免费时长</view>
|
|
|
+ <!-- <view>{{ orderInfo.freeDuration || '0天0时15分0秒' }}</view> -->
|
|
|
+ <view>{{ '0天0时15分0秒' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>计费时长</view>
|
|
|
+ <view>{{orderInfo.calcDuration || 0}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>累计停车时长</view>
|
|
|
+ <view>{{ orderInfo.duration || 0 }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>应缴金额</view>
|
|
|
+ <view class="really-money">{{ orderInfo.payAmount || 0 }} 元</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-info-item">
|
|
|
+ <view>订单编号</view>
|
|
|
+ <view>{{ orderInfo.orderId }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-lock-pay-btn" v-if="is_pay">
|
|
|
+ <button type="default" @click="payMoney">立即支付</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="parkingLockStatus === 2">
|
|
|
+ <view class="parking-lock-pay">
|
|
|
+ <view class="parking-lock-tips">{{ tipsMsg }}</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!-- 支付方式 -->
|
|
|
+ <PaymentMethod :payWayPop="payWayPop" :curOrderList="[orderId]" :jumpUrl="jumpUrl" :payeeId="payeeId"
|
|
|
+ :payeeName="payeeName" @closePaymentMethod="closePaymentMethod"></PaymentMethod>
|
|
|
+ <u-popup v-model="show" mode="center" border-radius="14" width="200rpx" height="200rpx">
|
|
|
+ <view class="loadingSelect">订单查询中...</view>
|
|
|
+ <view class="spinner">
|
|
|
+ <view class="rect1"></view>
|
|
|
+ <view class="rect2"></view>
|
|
|
+ <view class="rect3"></view>
|
|
|
+ <view class="rect4"></view>
|
|
|
+ <view class="rect5"></view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-toast ref="uToast" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import getUrlParams from "../../utils/getUrlParams.js";
|
|
|
+ import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ PaymentMethod
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 车位锁状态 1:需支付 2:查询失败返回提醒
|
|
|
+ parkingLockStatus: 0,
|
|
|
+ // 支付方式选择弹框
|
|
|
+ payWayPop: false,
|
|
|
+ // 订单编号
|
|
|
+ orderList: [],
|
|
|
+ // 提示信息
|
|
|
+ tipsMsg: null,
|
|
|
+ // 轮询
|
|
|
+ timer: null,
|
|
|
+ // 订单信息
|
|
|
+ orderInfo: {},
|
|
|
+ // 订单id
|
|
|
+ orderId: null,
|
|
|
+ // 重定向地址
|
|
|
+ jumpUrl: location.href + '&isBack=1',
|
|
|
+ show: true,
|
|
|
+ isBack: '',
|
|
|
+ polyOrderId: '',
|
|
|
+ // 地磁
|
|
|
+ spaceId: '',
|
|
|
+ payeeId: '',
|
|
|
+ payeeName: '',
|
|
|
+ is_pay: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(page) {
|
|
|
+ if (page.orderId) {
|
|
|
+ this.orderId = page?.orderId
|
|
|
+ this.spaceId = page?.orderId
|
|
|
+ this.payeeId = page?.payeeId
|
|
|
+ this.polyOrderId = page?.polyOrderId
|
|
|
+ this.isBack = page?.isBack
|
|
|
+ } else {
|
|
|
+ this.tipsMsg = page.msg || '参数丢失!';
|
|
|
+ // this.parkingLockStatus = 2
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: (page.msg || '参数丢失') + ',返回首页',
|
|
|
+ showCancel: false,
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.orderId) {
|
|
|
+ this.getOrderDetails(this.spaceId, this.orderId, this.payeeId)
|
|
|
+ if (this.polyOrderId && this.isBack == 1) {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.show = true
|
|
|
+ this.handlePayStatus(this.polyOrderId)
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.show = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 反复查询支付状态
|
|
|
+ * @param { String } orderId
|
|
|
+ */
|
|
|
+ handlePayStatus(orderId) {
|
|
|
+ this.$u.api.getOrderInfo({
|
|
|
+ orderId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ if (res.data.payStatus === 1 || res.data.payStatus === 3) {
|
|
|
+ this.show = false
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.is_pay = false
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '支付成功，返回首页',
|
|
|
+ showCancel: false,
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (res.data.payStatus === 2) {
|
|
|
+ this.is_pay = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.show = false
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: res.msg,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.show = false
|
|
|
+ clearInterval(this.timer);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 立即支付
|
|
|
+ */
|
|
|
+ payMoney() {
|
|
|
+ this.payWayPop = true
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询订单信息
|
|
|
+ * @param { String } spaceId 车位ID
|
|
|
+ * @param { String } orderId 订单id
|
|
|
+ * @param { String } payeeId 收费员ID
|
|
|
+ */
|
|
|
+ getOrderDetails(spaceId, orderId, payeeId) {
|
|
|
+ this.$u.api.geomaLockDetailsApi({
|
|
|
+ spaceId,
|
|
|
+ orderId,
|
|
|
+ payeeId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 200 && res.data.id) {
|
|
|
+ this.payeeName = res.data.payeeName
|
|
|
+ this.parkingLockStatus = 1
|
|
|
+ this.orderInfo = res.data
|
|
|
+ this.show = false
|
|
|
+ if (res.data.payStatus == 0 || res.data.payStatus == 2) {
|
|
|
+ this.is_pay = true
|
|
|
+ } else if (res.data.payStatus == 1) {
|
|
|
+ this.is_pay = false
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '订单已支付，返回首页',
|
|
|
+ showCancel: false,
|
|
|
+ success: function(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: res.msg || '订单无数据',
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.show = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭支付弹框
|
|
|
+ */
|
|
|
+ closePaymentMethod() {
|
|
|
+ this.payWayPop = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ @import './roadGateSystem.scss';
|
|
|
+</style>
|
空白格