前端项目-11-交易trade-订单-微信支付_前端支付功能怎么实现

目录

1-交易模块

1.1-交易模块静态组件

1.2-页面接口开发

1.3-动态渲染页面

2-提交订单-获取订单支付信息

2.1-提交订单

2.2-获取订单支付信息

3-微信支付业务

3.1-按需引入elementUI组件

3.2-支付

---

1-交易模块

当用户(前提是登录用户)点击购物车后，跳转到交易组件，进行相关数据动态渲染。

1.1-交易模块静态组件

项目重点在于逻辑交互，静态组件开发就省略，直接使用已有的。我们先把静态组件路由注册上，然后把点击购物车列表页面结算按钮，跳转到交易模块静态页面。

1.2-页面接口开发

分析页面需要使用到地址列表接口，获取订单交易页信息接口；
写api->新建仓库文件(如果没有)->import api方法->注册小仓库到大仓库(如果没有注册)->写action->写mutations，state(如果需要)->组件派发action
套路来了

 

 

1.3-动态渲染页面

在组件中派发action，获取数据，并且动态渲染页面；

 获取到数据之后，为了方便，我们可以先计算一下

 :class="{selected:address.isDefault==1}；如果是默认地址，选中，注意这里写法

 当我们点击某条地址信息，我们需要变更点击的地址为默认地址，需要注册一个点击事件，并且点击事件的逻辑是，先把所有地址设置为非默认，再把点击选中的地址设置为默认。

 页面下方需要展示点击默认地址的用户收货信息，我们需要计算默认用户地址，进行展示。

 交易页面明细展示，循环遍历数组，展示相关信息，为了方便循环，我们先计算信息，然后直接循环我们计算的数组；商品图片显示过大，我们简单进行宽和高限制。

2-提交订单-获取订单支付信息

2.1-提交订单

当用户点击交易页面的提交订单时，需要调用提交订单接口，并且带上提交订单接口返回的参数跳转到支付页面；这次我们不使用vuex进行派发action操作，直接在组件中发起请求获取数据（主要是在不使用vuex的情况怎么发送请求获取数据）。
定义请求api->import 文件->调用封装方法发送数据
为了方便我们不用每次都在vue文件中导入单个封装的请求方法，我们将请求的整个文件在main.js中进行统一引入，并且复制的变量API，这样我们在vue页面就可以直接使用。

 

 

2.2-获取订单支付信息

跳转到支付页面，我们需要调用获取订单支付信息接口来获取订单支付信息，包括订单支付参数和订单需要支付的金额等信息。

 这次也是没有采用vuex进行存储数据，直接在组件页面进行存储。

 

3-微信支付业务

3.1-按需引入elementUI组件

我们需要使用elementUI组件，我们现在先按需引入；
参考文档：Element - The world's most popular Vue UI framework

npm install --save element-ui@^2.15.5 --force
npm install babel-plugin-component -D --force

 

3.2-支付

       产品需求：当用户点击立即支付，就会弹出微信支付二维码框进行支付，这里我们使用elementUI组件中的MessageBox组件来实现；服务端返回的是一个字符串，我们需要借助qrcode组件来实现转化为二维码进行展示给用户。当弹出二维码支付框的时候我们需要定时去轮询用户的订单支付状态，染过支付成功，我们可以关闭弹框，跳转到支付成功组件页面。
       开发步骤：
1-在main.js中按需引入elementUI组件的MessageBox；
2-安装qrcode我们固定版本1.4.4组件来解析服务端返回的数据为二维码图片；
npm install --save qrcode@^1.4.4 --force
3-定时（我这边3秒轮询一次，具体根据自己的项目来设置）轮询订单的支付状态（开发查询订单状态接口）；
4-订单成功或者失败的逻辑处理；
5-点击弹框按钮的逻辑处理。

 

 

 

 

 async openQrCode(){
         //生成一个二维码URL
        let url = await QRCode.toDataURL(this.orderPayInfo.codeUrl);
        this.$alert(`<img src=${url}>`, "请你微信扫码支付", {
          dangerouslyUseHTMLString: true, //将字符串转换为标签
          center: true, //居中
          showClose: false, //右上角的关闭按钮不显示
          confirmButtonText: "支付成功", //确定按钮的文本
          showCancelButton: true, //显示取消按钮
          cancelButtonText: "支付遇见问题", //取消按钮的文本
          closeOnClickModal: true, //点击遮罩层关闭messagebox
          //在消息盒子关闭之前会触发,action参数:可以区分用户点击的是取消【cancel】、确定【confirm】
          //instance参数:当前消息框组件VC;done参数：是一个函数,函数可以关闭消息盒子
          beforeClose:(action, instance, done)=>{      
            if(action=='confirm' && this.code==200){//如果点击支付成功按钮并且 订单状态返回code=200          
                clearInterval(this.timer);//清除定时器            
                done(); //关闭盒子              
                this.$router.push('/paysuccess');//路由跳转
            }else if(action=='cancel' && this.code!=200){//如果点击页面的 支付遇到问题
                console.log("点击了支付遇到问题按钮");   
                clearInterval(this.timer);//清除定时器              
                done();//关闭盒子
                this.$message.error('支付遇见问题请联系超管管理员，电话：136xxxxxxxx');
            }else{
              //为了开发调试方便，直接跳转过去
              if(action=='confirm'){
                clearInterval(this.timer);//清除定时器            
                done(); //关闭盒子              
                this.$router.push('/paysuccess');//路由跳转
              }
            }
          }
        });
 
        //查询支付结果,开启定时器每隔一段时间（这里指定1秒轮询一次）询问支付结果
        this.timer  = setInterval(async () => {         
          let result = await this.$API.reqPayResult(this.orderPayInfo.orderId);//发请求获取支付结果
          this.count++;
          console.log("count的次数",this.count);
          if(this.count>20){
            console.log("count次数大于20");
            clearInterval(this.timer);//清除定时器            
            this.$msgbox.close(); //关闭messagebox 
            this.count=0; 
          }
           //返回数据当中：code=200代表支付成功  其他表示未支付成功
          if (result.code == 200) {           
            this.code = result.code;//支付成功-存储一下支付成功的code数值，通过他判断支付是否成功            
            clearInterval(this.timer);//清除定时器            
            this.$msgbox.close(); //关闭messagebox            
            this.$router.push('/paySuccess');//路由跳转到支付成功页面
          } else {            
            this.code = result.code;//未支付成功，给code赋值
          }
        }, 3000);
 
 
 
      }

优化点：为了减轻服务器的压力，这里定时轮询限制次数，如果超过一定次数还没有支付就关闭二维码框。