07小米页面- 确认订单

 

1 

2 订单详情

 订单详情展开，关闭

 

3 支付宝支付

1 切换功能， 支付宝和微信

 <div class="item-pay">
          <h3>选择以下支付方式付款</h3>
          <div class="pay-way">
            <p>支付平台</p>
            <div class="pay pay-ali" :class="{'checked':payType==1}" @click="payType=1"></div>
            <div class="pay pay-wechat" :class="{'checked':payType==2}" @click="payType=2"></div>
          </div>
        </div>

2 点击支付宝，打开新的窗口

调用支付接口，返回一个form表单（支付宝返回）

 <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>



   paySubmit(payType){
      if(payType == 1){
        window.open('/#/order/alipay?orderId='+this.orderId,'_blank');
      }
    },

<template>
  <div class="ali-pay">
    <div class="form" v-html="content"></div>
  </div>
</template>
<script>
  export default{
    name:'alipay',
    data(){
      return {
        orderId:this.$route.query.orderId,
        content:'',
        loading:true
      }
    },
    mounted(){
      this.paySubmit();
    },
    methods:{
      paySubmit(){
        this.axios.post('/pay',{
          orderId:this.orderId,
          orderName:'Vue高仿小米商城',
          amount:0.01,//单位元
          payType:1 //1支付宝，2微信
        }).then((res)=>{
          this.content = res.content;
       
        })
      }
    }
  }
</script>

 

 3 添加loading加载组件

  调用接口返回一个 form表单（支付宝吧form表单吐给前端了），前端需要拿到form表单进行渲染

到页面当中（<div class="form" v-html="content"></div>），

渲染进行发现并没有提交，需要我们帮助进行跳转。提交需要一个过程，我们用一个插件 loading组件来等待这个过程。

<template>
  <div class="loading">
    <img src="/imgs/loading-svg/loading-bars.svg" alt="">
  </div>
</template>
<script>
  export default{
    name:'loading'
  }
</script>
<style lang="scss">
  .loading{
    height:80px;
    line-height:80px;
    text-align:center;
    padding:30px 0;
    img{
      height:100%;
    }
  }
</style>

<template>
  <div class="ali-pay">
    <loading v-if="loading"></loading>
    <div class="form" v-html="content"></div>
  </div>
</template>
<script>
  import Loading from './../components/Loading'
  export default{
    name:'alipay',
    components:{
      Loading
    },
    data(){
      return {
        orderId:this.$route.query.orderId,
        content:'',
        loading:true
      }
    },
    mounted(){
      this.paySubmit();
    },
    methods:{
      paySubmit(){
        this.axios.post('/pay',{
          orderId:this.orderId,
          orderName:'Vue高仿小米商城',
          amount:0.01,//单位元
          payType:1 //1支付宝，2微信
        }).then((res)=>{
          this.content = res.content;
          setTimeout(()=>{
            document.forms[0].submit();
          },100)
        })
      }
    }
  }
</script>

form表单提交自动跳转支付宝二维码页面

 

4 微信支付

## 微信扫码支付开发文档

https://pay.weixin.qq.com/wiki/doc/api/index.html

https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_5

native支付：

后台传给我们一个地址(微信返回来的)，我们需要自己转成二维码 

需要插件 转成二维码： qrcode

 安装插件： cnpm i qrcode

4.1 调用

 <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>

     <scan-pay-code v-if="showPay" @close="closePayModal" :img="payImg"></scan-pay-code>

     showPay:false,//是否显示微信支付弹框
      payImg:'',//微信支付的二维码地址
      showPayModal:false,//是否显示二次支付确认弹框
      payment:0,//订单总金额
      T:''//定时器ID




 paySubmit(payType){
      if(payType == 1){
        window.open('/#/order/alipay?orderId='+this.orderId,'_blank');
      }else{
        this.axios.post('/pay',{
          orderId:this.orderId,
          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(() => {
            this.$message.error('微信二维码生成失败，请稍后重试');
          })
        })
      }
    },
    // 关闭微信弹框
    closePayModal(){
      this.showPay = false;
      this.showPayModal = true;
      clearInterval(this.T);
    },
    // 轮询当前订单支付状态
    loopOrderState(){
      this.T = setInterval(()=>{
        this.axios.get(`/orders/${this.orderId}`).then((res)=>{
          if(res.status == 20){
            clearInterval(this.T);
            this.goOrderList();
          }
        })
      },1000);
    },

微信支付弹框：

 

<template>
  <div class="scan">
    <div class="mask"></div>
    <div class="item-wrap">
      <div class="img-scan"></div>
      <div class="img-pay">
        <div class="title">微信支付<em @click="close"></em></div>
        <div class="qrcode"><img :src="img"></div>
        <div class="tip">
          <p>请使用<span class="theme-color">微信</span>扫一扫</p>
          <p>二维码完成支付</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    name:'scan-pay-code',
    props:['img'],
    methods:{
      close(){
        this.$emit('close');
      }
    }
  }
</script>
<style lang="scss">
  @import './../assets/scss/config.scss';
  @import './../assets/scss/mixin.scss';
  .scan{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    .mask{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: .6;
      background-color: #000000;
    }
    .item-wrap{
      position: fixed;
      width:670px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      display: flex;
      align-items: center;
      .img-scan{
        @include bgImg(296px,485px,'/imgs/pay/icon-scan.png');
      }
      .img-pay{
        width: 370px;
        height: 440px;
        display: inline-block;
        background-color:#ffffff;
        .title{
          position:relative;
          height:60px;
          line-height:60px;
          color:#333333;
          font-size:20px;
          padding:0 18px;
          background-color:#F5F5F5;
          em{
            position:absolute;
            top: 23.5px;
            right: 20px;
            @include bgImg(13px,13px,'/imgs/icon-close.png');
            cursor:pointer;
          }
        }
        .qrcode{
          text-align: center;
          padding:44px 0 26px;
          img{
            width:237px;
            height:240px;
          }
        }
        .tip{
          text-align:center;
          font-size:14px;
          color:#333333;
        }
      }
    }
  }
</style>

4.2