vue前台十（1）

一，订单交易页trade的数据展示

1.trade组件静态页面完成，创建trade.js的vuex,在总vuex中引入，注册

2.封装请求订单交易信息的函数接口

//请求订单交易信息 /api/order/auth/trade
export const reqTradeInfo = () => Ajax.get('/order/auth/trade')

3.在trade.js的vuex中发送请求

import {reqTradeInfo} from '@/api'
const state = {
  tradeInfo:{}
}
const mutations = {
  RECEIVETRADEINFO(state,tradeInfo){
    state.tradeInfo = tradeInfo
  }
}

const actions = {
  async getTradeInfo({commit}){
    const result = await reqTradeInfo()
    if(result.code === 200){
      commit('RECEIVETRADEINFO',result.data)
    }
  }
}

const getters = {
  detailArrayList(state){
    return state.tradeInfo.detailArrayList || []
  },
  userAddressList(state){
    return state.tradeInfo.userAddressList || []
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

4.在trade组件中，dispatch到vuex, 然后获取vuex中的数据

  mounted() {
    this.getTradeInfo();
  },

  getTradeInfo() {
      this.$store.dispatch("getTradeInfo");
    },

 computed: {
    ...mapGetters(["userAddressList", "detailArrayList"]),
    ...mapState({
      tradeInfo: state => state.trade.tradeInfo
    }),
    deaultAddress() {
      return this.userAddressList.find(item => item.isDefault === "1") || {}; //找到默认的地址那一项
    }
  }

5.在html模板中填充数据

 <div class="address clearFix" v-for="(address, index) in userAddressList" :key="address.id">
        <span class="username" :class="{selected:address.isDefault === '1'}">{{address.consignee}}</span>
        <p @click="changeDefaultAddress(index)">
          <span class="s1">{{address.userAddress}}</span>
          <span class="s2">{{address.phoneNum}}</span>
          <span class="s3" v-if="address.isDefault === '1'">默认地址</span>
        </p>
      </div>

注；isDefault是判断默认地址是否显示的一个值，1，为显示， 0，为不显示，用v-if去判断

 

 

 

6，对于收件地址，点击那一个就应该那一个是默认地址， 在p标签中添加一个点击事件changeDefaultAddress，需要传递一个index,

 

js代码

利用排他法

  changeDefaultAddress(index) {
      this.userAddressList.forEach(item => {
        item.isDefault = "0";
      });
      this.userAddressList[index].isDefault = "1";
    },

7，左边还有一个选中的边框按钮需要调整，点击哪个地址，选中框就是哪个，对selected类需要判断

<div class="address clearFix" v-for="(user, index) in userAddressList" :key="user.id">
        <span class="username " :class="{selected:user.isDefault === '1'}">{{user.consignee}}</span>
        <p @click="changeDefaultAddress(index)">
          <span class="s1">{{user.userAddress}}</span>
          <span class="s2">{{user.phoneNum}}</span>
          <span class="s3" v-if="user.isDefault === '1'">默认地址</span>
        </p>
      </div>

8.在底部还有个地址信息，需要根据顶部选中的地址变化而变化

 

 <div class="receiveInfo">
        寄送至:
        <span>{{deaultAddress.userAddress}}</span>
        收货人：
        <span>{{deaultAddress.consignee}}</span>
        <span>{{deaultAddress.phoneNum}}</span>
      </div>

此时需要计算属性，找到那个isDefault为1的对象

deaultAddress() {
      return this.userAddressList.find(item => item.isDefault === "1") || {}; //找到默认的地址那一项
    }

二，提交订单分析及接口请求函数封装

逻辑分析，此时在订单页面，底部有个提交订单按钮，点击提交按钮，这里是要发送提交订单的请求，这个订单需要携带请求体对象，而且所有的数据都在订单页面，那么就不需要在vuex中发送ajax请求，

只在订单trade组件中发送即可，此时，需要根据api接口的请求体参数，
来收集各种参数，去发送请求，

请求体参数，我们需要收集这些参数

{
    "consignee": "admin",
    "consigneeTel": "15011111111",
    "deliveryAddress": "北京市昌平区2",
    "paymentWay": "ONLINE",
    "orderComment": "xxx",
    "orderDetailList": [
        {
            "id": null,
            "orderId": null,
            "skuId": 6,
            "skuName": " Apple iPhone 11 (A2223) 128GB 红色 移动联通电信22",
            "imgUrl": "http://182.92.128.115:8080//rBFUDF6V0JmAG9XGAAGL4LZv5fQ163.png",
            "orderPrice": 4343,
            "skuNum": 2,
            "hasStock": null
        },
        {
            "id": null,
            "orderId": null,
            "skuId": 4,
            "skuName": "Apple iPhone 11 (A2223) 128GB 红色",
            "imgUrl": "http://182.92.128.115:80800/rBFUDF6VzaeANzIOAAL1X4gVWEE035.png",
            "orderPrice": 5999,
            "skuNum": 1,
            "hasStock": null
        }
    ]
}

1，封装提交订单接口的函数

//请求提交订单（其实本质就是创建订单，返回的是订单编号）
// /api/order/auth/submitOrder?tradeNo={tradeNo}   post  
export const reqSubmitOrder = (tradeNo,tradeInfo) =>Ajax.post(`/order/auth/submitOrder?tradeNo=${tradeNo}`,tradeInfo)

 2.提交按钮绑定点击事件

<a href="javascript:;" class="subBtn" @click="submitOrder">提交订单</a>

js代码，发送请求，跳转到支付页面，此时接口函数在入口文件main.js配置下，在原型配置，让组件可以自动获取

import * as API from '@/api'

new Vue({
  beforeCreate() {
    Vue.prototype.$bus = this
    Vue.prototype.$API = API
  },
  el:'#app',
  render: h => h(App),
  router,
  store
})

 //提交按钮，发送请求，跳转到支付页面，携带订单编号到支付页面
    async submitOrder() {
      //准备query参数和data参数
      let tradeNo = this.tradeInfo.tradeNo;
      let tradeInfo = {
        consignee: this.deaultAddress.consignee,
        consigneeTel: this.deaultAddress.phoneNum,
        deliveryAddress: this.deaultAddress.userAddress,
        paymentWay: "ONLINE",
        orderComment: this.message,
        orderDetailList: this.detailArrayList
      };

      //调用接口请求函数去发送请求创建订单
      const result = await this.$API.reqSubmitOrder(tradeNo, tradeInfo);
      if(result.code === 200){
        //请求提交创建订单成功，会返回一个订单编号，有了这个订单编号，再去跳转到支付页面
        //接下来就可以携带这个订单编号去到支付页面
        alert('创建订单成功，自动跳转到支付页面')
        this.$router.push('/pay?orderNo='+result.data)
      }
    }

注；此时返回的响应信息有个订单编号，需要路由到t支付页面pay, 订单编号需要传递过去 

响应信息的事例

{
    "code": 200,
    "message": "成功",
    "data": 71,   // orderId 订单号
    "ok": true
}

注；关于API模块的配置，将API配置成vue的原型，可以让组件实例直接访问到，在入口文件main.js配置

new Vue({
  beforeCreate() {
    Vue.prototype.$bus = this
    Vue.prototype.$API = API
  },

此时组件实例访问，

const result = await this.$API.reqSubmitOrder(tradeNo, tradeInfo);

 

 

 

三，支付页面的信息请求及展示

1.在支付组件页面，对于订单编号，需要从路由参数中获取

    <span class="fl">
            请您在提交订单
            <em class="orange time">4小时</em>之内完成支付，超时订单会自动取消。订单号：
            <em>{{$route.query.orderNo}}</em>
          </span>

2.而对支付的总金额，需要发送请求获取

配置接口函数， orderId是订单编号，作为请求参数

//请求获取订单信息 /api/payment/weixin/createNative/{orderId}  get
export const reqOrderInfo = (orderId) => Ajax.get(`/payment/weixin/createNative/${orderId}`)

3.在pay支付组件中，发送请求，我们可以不在vuex中发送请求，而直接在组件中发送请求，更方便。页面加载完后，即可发送请求

  mounted() {
    this.getOrderInfo();
  },
  methods: {
    async getOrderInfo() {
      const result = await this.$API.reqOrderInfo(this.$route.query.orderNo);
      if (result.code === 200) {
        this.orderInfo = result.data;
      }
    },

响应信息事例， orderId为订单编号。 totalFee为支付总费用

{
    "code": 200,
    "message": "成功",
    "data": {
        "codeUrl": "weixin://wxpay/bizpayurl?pr=P0aPBJK",
        "orderId": 71,
        "totalFee": 23996,
        "resultCode": "SUCCESS"
    },
    "ok": true
}

在html中填充支付费用

<span class="fr">
            <em class="lead">应付金额：</em>
            <em class="orange money">￥{{orderInfo.totalFee}}</em>
          </span>

 

 四， element-ui的引入消息盒子，弹出alert,message消息提示

element-ui库：https://element.eleme.cn/#/zh-CN/component/quickstart

1.安装element-ui， npm i element-ui -S

2.按需引入组件，可参考官网

支付整体逻辑

点击立即支付
        1、我们需要根据codeUrl 使用qrcode生成要显示的微信二维码url
        2、使用element-ui的this.$alert 弹出消息框显示二维码图片，使用需要显示html的消息框
        3、弹出消息框的时候，我们需要循环定时器去查询支付状态
        4、如果支付成功，那么把支付成功的状态码保存在data当中，并且清除定时器，自动跳转到支付成功页面
        5、如果点击我已经支付成功，那么需要判断状态码是不是成功，如果成功那就关闭提示框，不成功就提示不关闭
            （需要放在messageBox的beforeClose回调当中去，判断 然后手动关闭）
        6、如果点击支付失败，那么需要提示信息 清除定时器  关闭提示框 关闭也要去手动关闭
            （需要放在messageBox的beforeClose回调当中去，判断 然后手动关闭）
        7、支付成功才能到支付成功页面，那么我们都要去花钱，所以把支付功能简化，直接点击就能跳

import { MessageBox, Message } from 'element-ui';

Vue.prototype.$msgbox = MessageBox; //消息盒子
Vue.prototype.$alert = MessageBox.alert; //弹出框
Vue.prototype.$message = Message; //提示信息

注；将element-ui组件挂载在vue原型上，组件对象可以直接访问

五，使用qrcode生成微信支付二维码,npm install --save qrcode  ,github去搜索的时候，搜索node-qrcode

1.点击立即支付按钮，弹出一个支付框，需要element-ui来创建，并且有一个二维码图片，需要借助qrcode来完成

 引入qrcode,      import QRCode from 'qrcode'

 <div class="submit">
          <!-- <router-link class="btn" to="/paysuccess">立即支付</router-link> -->
          <a href="javascript:;" class="btn" @click="pay">立即支付</a>
        </div>

2. js逻辑代码， 点击立即支付， 弹出一个框。需要对返回的微信连接，转换成二维码。 发送一个查看支付信息的请求，搞个定时器去实时查看，

async pay() {
      //1、弹出一个消息盒子

      //2、这个消息盒子内部需要二维码，所以得去准备二维码
      //codeUrl:"weixin://wxpay/bizpayurl?pr=DcuIayu" 是微信官方返回的支付链接信息
      //我们需要把这个信息转化为一张二维码图片的路径
      //使用qrcode可以把这个支付链接信息转化为二维码

      //3、this.$alert返回的也是一个promise，而且这个promise成功代表点了确认按钮  失败代表点了取消按钮，必须处理
      //哪怕什么都不做

      // 4、 二维码显示成功后，我们需要时时刻刻去查看订单的支付状态信息，如果支付状态信息是成功那么就自动跳转。，如果是失败继续查看

      // 5、 处理用户点击行为  点击确认和点击取消  在beforeClose当中去处理，可以让我们选择的去关闭消息盒子



      // With promises
      try {
        const imgUrl = await QRCode.toDataURL(this.orderInfo.codeUrl); //会把支付链接信息转化为二维码图片的路径
        this.$alert(`<img src="${imgUrl}" />`, "请使用微信扫码支付", {
          dangerouslyUseHTMLString: true,
          showClose: false,
          showCancelButton: true,
          cancelButtonText: "支付中遇到了问题",
          confirmButtonText: "我已经成功支付",
          center: true,
　　　　　　//取消弹框之前的操作　　
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {  //确认按钮
              if (this.status !== 200) {
                clearInterval(this.timer);
                this.timer = null;
                this.$router.push("/paysuccess");
                done(); //手动关闭消息盒子，如果不调，那么就永远不关闭
              } else {
                this.$message.warning("请确保支付成功");
              }
            } else if (action === "cancel") {   //取消按钮
              clearInterval(this.timer);
              this.timer = null;
              this.$message.warning("请联系前台小姐姐");
              done()
            }
          }
        })

          .then(() => {}) //代表你点了确认按钮后的逻辑    都会强制关闭消息盒子
          .catch(() => {}); //代表你点了取消按钮后的逻辑   都会强制关闭消息盒子
      } catch (error) {
        this.$message.error(error.message);
      }

      // 循环定时器   每3秒发请求查看支付状态信息
      // 定时器设置后返回的是一个编号，是一个数字，我们使用变量存储的是这个数字
      // 定时器又是一个异步操作，所以会有对应得管理模块去管理 ，依赖的是编号
      // 清除定时器，其实是把这个编号的定时器任务清除，但是这个编号还是存在你之前保存的变量当中
      // 因此以后清除定时器  记得把保存编号的变量也去置为null,代表彻底清除

      if (!this.timer) {
        this.timer = setInterval(async () => {
          const result = await this.$API.reqPayStatus(this.orderInfo.orderId);
          if (result.code === 200) {
            //支付成功
            //支付成功的状态码保存一下,为了用户点击成功支付按钮的时候去判断
            this.status = 200;

            clearInterval(this.timer); //取消定时器
            this.timer = null;
            this.$router.push("/paysuccess");
            this.$msgbox.close(); //手动关闭消息盒子
          }
        }, 3000);
      }
    }

 注；1，qrcode的git连接: https://github.com/soldair/node-qrcode

2.QRCode.toDataURL(this.orderInfo.codeUrl) 是一个promise,返回的是一个二维码图片路径

3， codeUrl:"weixin://wxpay/bizpayurl?pr=DcuIayu" 是之前返回的响应数据

 3， 封装请求查看订单的支付状态信息接口，需要查看订单支付是否成功，

//请求查看订单的支付状态信息 /api/payment/weixin/queryPayStatus/{orderId}  get
// 返回状态200代表支付成功   205代表支付中

export const reqPayStatus = (orderId) => Ajax.get(`/payment/weixin/queryPayStatus/${orderId}`)