mall4pc-bbc/pages/weixin-pay.vue

<template>
  <div class="weixin-pay">
    <div class="content">
      <div class="weixin-pay-info">
        <div class="item">
          <div class="tip-text">{{$t('payment.orderSubmittedSuccessfully')}}！</div>
          <div class="act-pay">
            {{$t('payment.actualPayment')}}：
            <span class="price">￥{{total}}</span>
          </div>
        </div>
        <div class="item">
          <div class="time" v-if="isOverTime && $t('language') == 'zh'">
            请在
            <span class="warning">{{min}} : {{sec}}</span>内付款，否则交易会被取消。
          </div>
          <div class="time" v-if="isOverTime && $t('language') == 'en'">
            please pay within
            <span class="warning">{{min}} : {{sec}}</span>，otherwise the transaction will be cancelled。
          </div>
          <div class="time" v-if="!isOverTime">{{$t('payment.orderHasExpired')}}</div>
          <div class="back-pay" @click="checkOtherPayWay">{{$t('payment.chooseAnotherPaymentMethod')}}</div>
        </div>
      </div>
      <weixin-pay-code v-if="weixinCodeUrl !== ''" :isShowCodeMask="isShowCodeMask" :weixinCodeUrl="weixinCodeUrl" />
    </div>
  </div>
</template>

<script>
import weixinPayCode from '~/components/weixin-pay-code'

// import QRCode from 'qrcode'
export default {
  data () {
    return {
      orderNumber: '',
      total: 0,
      endTime: '',
      min: '00',
      sec: '00',
      isShowCodeMask: false,  //二维码是否过期
      checkIsPay: null,
      timer: null,
      isOverTime: true,
      weixinCodeUrl: '' //微信二维码数据
    }
  },
  mounted () {
    this.orderNumber = sessionStorage.getItem("pay_orderNumber")
    this.wxPayCode()
    this.getEndTime()
    this.isPay()
  },
  components: {
    weixinPayCode
  },
  methods: {

    // 请求订单剩余时间
    getEndTime () {
      this.$axios.get('/p/order/getOrderPayInfoByOrderNumber', {
        params: {
          orderNumbers: this.orderNumber
        }
      }).then(({ data }) => {
        this.total = data.totalFee
        this.endTime = data.endTime
        this.countTime()
      })
    },

    // 倒计时
    countTime () {
      // 获取当前时间
      let date = new Date()
      let now = date.getTime()

      // // 设置截止时间
      let end = new Date(this.endTime).getTime()
      // 时间差
      let leftTime = end - now
      // 定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        // 分
        let m = Math.floor(leftTime / 1000 / 60 % 60)
        this.min = m < 10 ? '0' + m : m
        // 秒
        let s = Math.floor(leftTime / 1000 % 60)
        this.sec = s < 10 ? '0' + s : s
      } else {
        this.min = '00'
        this.sec = '00'
        this.isOverTime = false
      }
      // 等于0的时候不调用
      if (Number(this.min) === 0 && Number(this.sec) === 0) {
        this.isShowCodeMask = true
        return this.isOverTime = false
      } else {
        // 递归每秒调用countTime方法，显示动态时间效果,
        this.timer = setTimeout(this.countTime, 1000)
      }
    },

    //选择其他支付方式
    checkOtherPayWay () {
      this.$router.push({ path: '/payment' })
    },

    // 生成微信支付二维码
    wxPayCode () {
      let that = this
      this.$axios.post('/p/order/pay', {
        payType: 3,
        orderNumbers: this.orderNumber
      }).then(({ data }) => {
        this.$nextTick(function () {
          that.weixinCodeUrl = data
        })
      })
    },

    //判断是否已经支付
    isPay () {
      this.checkIsPay = window.setInterval(() => {
        this.$axios.get('/p/order/isPay/' + this.orderNumber).then(({ data }) => {
          if (data) {
            this.$router.push({
              path: '/user-center/uc-order'
            })
          }
        })
      }, 3000)
    }
  },

  destroyed () {
    if (this.timer) { //如果定时器在运行则关闭
      clearInterval(this.timer);
    }
    if (this.checkIsPay) { //如果定时器在运行则关闭
      clearInterval(this.checkIsPay);
    }
  }

}
</script>

<style scoped src='~/assets/css/weixin-pay.css'>
</style>