parkPay/parkPay.vue

<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:18px;">
                    {{orderFee | toFixed2}}
                </view>
                <view class="order-info" style="margin-right: 50upx;margin-left: 0px;">
                    元
                </view>
            </view>
        </view>
        <!-- <view class="uni-list-cell-pd pos-rel">
            <input class="" type="number"
                style="background-color: #fff;height:40px;line-height: 40px;padding-left: 15px;font-size: 20px;" v-model="rechargeNum"
                @input="checkNum" :maxlength="maxlength" placeholder="确认支付金额(单位:元)">
            <view class="pos-abs paywarp">
                元
            </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" :loading="loadingFlag"
                :disabled="disabledFlag">{{btnText}}
        </button>
    </view>
</template>
<script>
export default {
  data() {
    return {
      loadingFlag: false,
      disabledFlag: false,
      btnText:'确认支付',
      businessId: '',
      orderId: '',
      mycarNumber: '',
      parkName: '',
      parkInTime: '',
      staytime: '',
      due: '',
      orderFee: '',
      // appOrderTimeout:'0',
      totalFee: '', //应收
      // rechargeNum: '',
      // maxlength: 6 //默认一个长度
    }
  },
  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.rechargeNum = data.unPayFee / 100;
    this.orderId = data.orderId;
  },
  onShow() {
  },
  methods: {
    checkNum(e) {
      let value = e.detail.value;
      let dot = value.indexOf('.'); //包含小数点
      let reg = /^[0-9]+$/; //正整数
      if (dot > -1) {
        this.maxlength = dot + 3; //长度是小数点后两位
        if (value.length > dot + 3) {
        }
      }
      if (reg.test(value)) { //如果是正整数不包含小数点
        this.maxlength = 6;
      }
    },
    payClick() {
      let that = this;
      that.loadingFlag = true
      that.disabledFlag = true
      that.btnText = '支付中,请稍后'
      let orderFee = that.orderFee;
      let paramsData = {
        payType: '35',
        paySrcType: '101',
        orderId: that.orderId,
        payFee: orderFee,
      }
      // 获取 接口
      that.$myRequest({
        url: that.$common.accountPay,
        method: 'POST',
        data: that.$common.requestSign(paramsData)
      }).then(res => {
        console.log(res)
        console.log('1')
        that.loadingFlag = false
        that.disabledFlag = false
        if(res.code == '0'){
          that.btnText = '支付完成'
          console.log('余额支付:' + res)
          uni.showToast({
            title: "支付成功",
            icon: 'success',
            duration: 500
          });
          setTimeout(function () {
            let pages = getCurrentPages(); //当前页
            let beforePage = pages[pages.length - 2];
            uni.navigateBack({
              success: function () {
                beforePage.onLoad();
              }
            })
          }, 1000);
        }else {
          that.btnText = '支付失败,重新支付'
        }
      })
    },
    // payClick() {
    // 	let that = this;
    // 	let orderFee = that.orderFee;
    // 	let rechargeNum = that.rechargeNum;
    // 	if (rechargeNum <= 0) {
    // 		return uni.showToast({
    // 			title: '不能输入小于等于0的金额',
    // 			icon: 'error'
    // 		})
    // 	} else if (rechargeNum === " ") {
    // 		return uni.showToast({
    // 			title: '金额不能为空',
    // 			icon: 'error'
    // 		})
    // 	} else if (rechargeNum > orderFee) {
    // 		return uni.showToast({
    // 			title: '金额不能大于需支付金额',
    // 			icon: 'error'
    // 		})
    // 	} else {
    // 		let paramsData = {
    // 			payType: '35',
    // 			paySrcType: '101',
    // 			orderId: that.orderId,
    // 			payFee: (rechargeNum * 100).toString(),
    // 		}
    // 		// 获取 接口
    // 		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;
    }
    .paywarp {
        top: 12px;
        right: 30px;
        font-size: 20px;
        height: 40px;
        line-height: 40px;
    }
</style>