vue前後端分離喚起微信/支付寶支付+15分鐘付款倒計時

在這裏插入圖片描述
點擊付款的時候帶過去訂單編號和價錢,有微信和支付寶兩種支付方式,都需要這兩個參數(我們的是需要這兩個參數,也可以有別的參數)
在這裏插入圖片描述
倒計時十五分鐘的代碼:這個就是普通的倒計時,後臺定時也是十五分鐘,到了十五分鐘後臺自動刪除訂單。

<div class="a">{{minute}}:{{second}}</div>
data() {
      return {
        minutes: 15,
        seconds: 0
      }
    },
    methods: {
      num(n) {
        return n < 10 ? '0' + n : '' + n
      },
      timer:function() {
        var time = window.setInterval(function() {
          if (_this.seconds === 0 && _this.minutes !== 0) {
            _this.seconds = 59
            _this.minutes -= 1
          } else if (_this.minutes === 0 && _this.seconds === 0) {
            _this.seconds = 0
            window.clearInterval(time)
          } else {
            _this.seconds -= 1
          }
        }, 1000)
      }
   },
   mounted() {
      this.timer()
    },
    watch: {
      second: {
        handler(newVal) {
          this.num(newVal)
        }
      },
      minute: {
        handler(newVal) {
          this.num(newVal)
        }
      }
    },
    computed: {
      second: function() {
        return this.num(this.seconds)
      },
      minute: function() {
        return this.num(this.minutes)
      }
    }

支付寶的直接帶這兩個參數過去訪問第三方接口了(跳到外部鏈接用window.location.href)

 window.location.href = "http://xxx/alipay/wap/gotoPayPage?oid=" + orderId + "&value=" +
            paymentMoney;

微信需要先跳到一個空白頁然後在進行跳轉,下面是空白頁的代碼,也是需要兩個參數。

methods:{
      go(){
        var oid = this.$route.query.orderId;
        var value = this.$route.query.paymentMoney;
        var data={
          oid:oid,
          value:value
        }

        this.axios.post('/pay/wxpay?',this.qs.stringify(data)).then(res => {
          console.log(res)
          window.location.href = res.data
        })
      }
    },
    mounted() {
      this.go()
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章