dy-admin-manager/src/views/resetTeaming/modals/giveMemberPayment.vue

<template>
  <div class="chioseWrap">
    <p>您将为<span>{{tableList.length}}</span>位学员激活团练宝<br />共需支付<span>{{ selectStudentMoney | moneyFormat }}</span>元</p>
    <p>请扫描二维码支付，支付功能后学员团练宝即刻激活</p>

    <vue-qr :text="codeUrl" style="width: 250px" :margin="0"></vue-qr>
  </div>
</template>
<script>
import VueQr from 'vue-qr'
import { cloudPayCheck } from '../api'
export default {
  props: {
    tableList: {
      type: Array,
      default: []
    },
    orderNo: {
      type: String
    },
    codeUrl: {
      type: String
    },
  },
  components: { VueQr },
  data() {
    return {
      payForm: {
        payType: null,
      },
      selectStudentMoney: 0, // 选中学生金额
      orderTimer: null
    };
  },
  async mounted() {
    let tableList = this.tableList || []
    for(let i of tableList) {
      this.selectStudentMoney += parseFloat(i.amount)
    }
    this.initTimer = setTimeout(() => {
      this.getPaymentStatus()
    }, 3000)
  },
  methods: {
    async getPaymentStatus() {
      this.orderTimer = setInterval(async () => {
        try {
          const res = await cloudPayCheck({ orderNo: this.orderNo })
          if(res.data) {
            clearInterval(this.orderTimer)
            clearTimeout(this.initTimer)
            this.$message.success('您已成功缴费')
            this.$listeners.getList()
            this.$emit('close', true)
          }
        } catch(e) {
          clearInterval(this.orderTimer)
        }
      }, 5000);
    }
  },
  beforeDestroy() {
    clearTimeout(this.initTimer)
    clearInterval(this.orderTimer)
  }
};
</script>
<style lang="less" scoped>
.chioseWrap {
  text-align: center;
  font-size: 16px;
  > p {
    font-weight: 600;
    padding-bottom: 15px;
    line-height: 1.5;
    span {
      color: red;
      padding: 0 3px;
    }
  }
}
.dialog-footer {
  text-align: right;
  display: block;
  padding-top: 15px;
}
</style>