vue功能之“轮询，用于支付是否成功“

 1.如果微信支付页面二维码被支付，就会跳转页面，否则就会-轮询

<template>
  <div class="order-pay">
    <order-header title="订单支付">
      <template v-slot:tip>
        <span>请谨防钓鱼链接或诈骗电话，了解更多</span>
      </template>
    </order-header>
    <div class="wrapper">
      <div class="container">
        <div class="order-wrap">
          <div class="item-order">
            <div class="icon-succ"></div>
            <div class="order-info">
              <h2>订单提交成功！去付款咯～</h2>
              <p>请在<span>30分</span>内完成支付, 超时后将取消订单</p>
              <!-- <p>收货信息：{{addressInfo}}</p> -->
            </div>
            <div class="order-total">
              <p>应付总额：<span>{{payment}}</span>元</p>
              <p>订单详情<em class="icon-down" :class="{'up':showDetail}" @click="showDetail=!showDetail"></em></p>
            </div>
          </div>
          <div class="item-detail" v-if="showDetail">
            <div class="item">
              <div class="detail-title">订单号：</div>
              <!-- <div class="detail-info theme-color">{{orderId}}</div> -->
            </div>
            <div class="item">
              <div class="detail-title">收货信息：</div>
              <div class="detail-info">{{addressInfo}}</div>
            </div>
            <div class="item good">
              <div class="detail-title">商品名称：</div>
              <div class="detail-info">
                <ul>
                  <li v-for="(item,index) in orderDetail" :key="index">
                    <img v-lazy="item.productImage"/>{{item.productName}}
                  </li>
                </ul>
              </div>
            </div>
            <div class="item">
              <div class="detail-title">发票信息：</div>
              <div class="detail-info">电子发票 个人</div>
            </div>
          </div>
        </div>
        <div class="item-pay">
          <h3>选择以下支付方式付款</h3>
          <div class="pay-way">
            <p>支付平台</p>
            <div class="pay pay-ali" :class="{'checked':payType==1}" @click="paySubmit(1)"></div>
            <div class="pay pay-wechat" :class="{'checked':payType==2}" @click="paySubmit(2)"></div>
          </div>
        </div>
      </div>
    </div>
    <scan-pay-code v-if="showPay" @close="closePayModal" :img="payImg"></scan-pay-code>
    <modal
      title="支付确认"
      btnType="3"
      :showModal="showPayModal"
      sureText="查看订单"
      cancelText="未支付"
      @cancel="showPayModal=false"
      @submit="goOrderList"
    >
      <template v-slot:body>
        <p>您确认是否完成支付？</p>
      </template>
    </modal>
  </div>
</template>
<script>
import QRCode from 'qrcode'//通过插件生成二维码
import OrderHeader from './../components/OrderHeader'
import ScanPayCode from './../components/ScanPayCode'
import Modal from './../components/Modal'
export default{
  name:'order-pay',
  data(){
    return {
      orderNo:this.$route.query.orderNo,
      addressInfo:'',//收货人地址
      orderDetail:[],//订单详情，包含详情列表
      showDetail:false,//是否显示订单详情
      payType:'',//1选中支付宝 2微信 状态
      showPay:false,//是否显示微信支付弹窗
      payImg:'',//微信支付的二维码地址
      showPayModal:false,//是否显示二次支持确认弹窗
      T:'',//定时器的ID
      payment:0,//订单总金额

    }
  },
  components:{
    OrderHeader,
    ScanPayCode,
    Modal
  },
  mounted(){
    this.getOrderDetail()
  },
  methods:{
   getOrderDetail(){
     this.$axios.get(`/orders/${this.orderNo}`).then((res)=>{
       let item = res.shippingVo
       this.addressInfo = `${item.receiverName} ${item.receiverMobile} ${item.receiverProvince} ${item.receiverCity} ${item.receiverDistrict} ${item.receiverAddress} ${item.receiverZip}`
       this.orderDetail = res.orderItemVoList
       this.payment = res.payment
     })
   },
   paySubmit(payType){
     this.payType = payType
     if(this.payType == 1){
       window.open('/#/order/alipay?orderId='+this.orderNo,'_blank')//新窗口打开的字符串拼接
     }else{
     this.$axios.post('/pay',{
        orderId:this.orderNo,
        orderName:'Vue高仿小米商城',//扫码支付时订单名称
        amount:0.01, //单位元
        payType:2, //1支付宝，2微信
       }).then((res)=>{
         QRCode.toDataURL(res.content)
          .then(url => {
           this.showPay = true//
            this.payImg = url//
            this.loopOrderState()
          })
          .catch(err => {
            // console.error(err)
            this.$message.error('二维码转换失败')
          })
       })

     }
   },

   closePayModal(){//关闭微信
      this.showPay = false//
      this.showPayModal = true
      clearInterval(this.T) 
   },

   goOrderList(){//点击查看订单
     this.$router.push('/order/list')
   },
   
   
   loopOrderState(){//轮询当前订单状态s
     this.T = setInterval(()=>{
      this.$axios.get(`/orders/${this.orderNo}`).then((res)=>{
          if(res.status == 20){//10是未支付  20已付款
              clearInterval(this.T)
              this.goOrderList()
          }
      })
    },1000)
   }

    
   
  }
}
</script>