parkPay.vue 6.49 KB
<template>
    <view>
        <view v-show="showFlag" style="padding: 20px; text-align: center">
            该车没有停放在该车场
        </view>
        <view v-else>
            <!-- 	<view class="order-time">
            剩余支付时间: {{appOrderTimeout}}
        </view> -->

            <view class="order-title">
                订单详情
            </view>
            <view class="order-info">
                车牌号:{{mycarNumber | tranNull}}
            </view>
            <view class="order-line"></view>
            <view class="order-info">
                停车场:{{parkName | tranNull}}
            </view>
            <view class="order-line"></view>
            <view class="order-info">
                进场时间:{{parkInTime | tranNull}}
            </view>
            <view class="order-line"></view>
            <view class="order-info">
                停车时间:{{staytime | timeFormatter}}
            </view>
            <view class="order-line"></view>
            <view class="order-info">
                总计费用:{{due |toFixed2}}元
            </view>
            <view class="order-line"></view>

            <view class="flex-row-justify-between">
                <view class="order-info">
                    支付金额
                </view>
                <view class="flex-row-justify-end">
                    <view class="order-info" style="font-weight:bold;font-size:17px ;">
                        {{orderFee | toFixed2}}
                    </view>
                    <view class="order-info" style="margin-right: 50upx;margin-left: 0px;">

                    </view>
                </view>
            </view>

            <view class="order-line-bold"></view>

            <view class="order-title">
                支付方法
            </view>
            <view class="order-line"></view>

            <view class="orderwaysview">
                <!--<image src="../../static/orderInfo/orderinfo-wechat.png" class="orderways"></image>-->
                <view class="order-info" style="margin-left: 15px;">
                    商户余额
                </view>
                <image src="../../static/orderInfo/orderinfo-sel.png" class="orderwaysSel"></image>

            </view>

            <view class="order-line"></view>
            <button @click="payClick" class="button-sp-area" type="primary" plain="true">确认支付</button>
        </view>



    </view>
</template>

<script>
export default {
  data() {
    return {
      businessId: '',
      orderId: '',
      mycarNumber: '',
      parkName: '',
      parkInTime: '',
      staytime: '',
      due: '',
      orderFee: '',
      // appOrderTimeout:'0',
      totalFee: '', //应收
      showFlag: false,
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })
    this.mycarNumber = params.carNumber;
    let indexInfo = uni.getStorageSync("indexInfo");
    this.businessId = indexInfo.businessId;
    console.log(this.mycarNumber, this.businessId)
    this.getbBillQueryInfo();
  },
  onShow() {

  },
  methods: {
    payClick() {
      let that = this;
      let paramsData = {
        payType: '35',
        paySrcType: '101',
        orderId: that.orderId,
        payFee: that.orderFee,
      }
      // 获取 接口
      that.$myRequest({
        url: that.$common.accountPay,
        method: 'POST',
        data: that.$common.requestSign(paramsData)
      }).then(res => {
        console.log('余额支付:' + res)
        uni.showToast({
          title: "支付成功",
          icon: 'success',
          duration: 2000
        });
        setTimeout(function () {
          let pages = getCurrentPages(); //当前页
          let beforePage = pages[pages.length - 2];
          uni.navigateBack({
            success: function () {
              beforePage.onLoad();
            }
          })
        }, 2000);
      })
    },
    getbBillQueryInfo() {
      let that = this
      let paramsData = {
        carNumber: that.mycarNumber,
        pageNum: '1',
        pageSize: '10',
        businessId: that.businessId,
        parkState: '10',
      }
      // 获取 接口
      that.$myRequest({
        url: that.$common.queryParkingRecordByCarNumbers,
        method: 'POST',
        data: that.$common.requestSign(paramsData)
      }).then(res => {
        console.log(res.data.dataList[0])
        if (res.data.dataList.length > 0) {
          let data = res.data.dataList[0]
          that.parkName = data.parkName;
          that.parkInTime = data.parkInTime;
          that.staytime = data.parkDuration;
          that.due = data.totalFee;
          that.orderFee = data.unPayFee;
          that.orderId = data.orderId;
          that.showFlag = false
        } else {
          that.showFlag = true
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
    .order-time {
        padding: 5px 0;
        background: #f0ad4e;
        text-align: center;
        color: #fff;
    }

    .order-title {
        font-size: 18px;
        margin-left: 16px;
        margin-top: 15px;
        font-weight: bold;
        color: #404040;
    }

    .order-info {
        font-size: 14px;
        margin-left: 15px;
        margin-top: 12px;
        color: #404040;
    }

    .order-line {
        background: #D9D9D9;
        height: 1px;
        margin-top: 12px;
        margin-left: 15px;
        padding: 0px;
        overflow: hidden;
        /* 透明度 */
        opacity: 0.5;
    }

    .order-line-bold {
        background: #FAFAFA;
        height: 12px;
        margin-top: 12px;
        padding: 0px;
        overflow: hidden;
    }

    .flex-row-justify-between {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .flex-row-justify-end {
        display: flex;
        flex-direction: row;
        /* 水平对齐*/
        align-items: baseline;

    }

    .order-discount {
        color: #C8C7CC;
        margin-right: 20 upx;
        /* margin-right: 12px ; */
        /* margin-top:12px ; */

    }

    .orderwaysview {
        display: flex;
        flex-direction: row;
    }

    .orderways {
        width: 18px;
        height: 18px;
        margin-left: 15px;
        margin-top: 14px;
    }

    .orderwaysSel {
        width: 16px;
        height: 16px;
        margin-left: auto;
        margin-right: 14px;
        margin-top: 14px;
        /* justify-content:flex-end; */
    }

    .button-sp-area {
        margin: 0 auto;
        width: 60%;
        margin-top: 40px;

    }
</style>