parkPay.vue 5.29 KB
<template>
    <view>

        <!-- 	<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>
</template>

<script>
export default {
  data() {
    return {
      businessId: '',
      orderId: '',
      mycarNumber: '',
      parkName: '',
      parkInTime: '',
      staytime: '',
      due: '',
      orderFee: '',
      // appOrderTimeout:'0',
      totalFee: '', //应收
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })
    let data = JSON.parse(params.optionData)
    this.mycarNumber = data.carNumber
    this.parkName = data.parkName;
    this.parkInTime = data.parkInTime;
    this.staytime = data.parkDuration;
    this.due = data.totalFee;
    this.orderFee = data.unPayFee;
    this.orderId = data.orderId;
  },
  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);
      })
    },
  }
}
</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>