直接在组件中调用接口获取数据（不通过Vuex）【需掌握了解】

提交订单案例

接口信息

1、请求地址

/api/order/auth/submitOrder?tradeNo={tradeNo}

2、请求方式

POST

3、参数类型

4、例子

{
    "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
        }
    ]
}

5、返回示例

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

书写调用接口方法

提交订单的接口 - 还需要通过query传递参数，拼接到url地址中

// 提交订单的接口
// URL：/api/order/auth/submitOrder?tradeNo={tradeNo} method：post
export const reqSubmitOrder = (tradeNo, data) => requests({
    url:`/order/auth/submitOrder?tradeNo=${tradeNo}`,  // 通过query传递参数，拼接到了url地址中
    data,
    method:'post'
})

获取支付信息的接口

// 获取支付信息
// URL：/api/payment/weixin/createNative/{orderId}  GET
export const reqPayInfo = (orderId) => requests({
    url:`/payment/weixin/createNative/${orderId}`, 
    method:'get'
})

书写接口以后，在组件中进行调用即可
在提交订单组件中，调用接口方法 在methods中进行相应调用操作

注意：
本来如果在调用接口方法的时候，需在每个组件中

import { reqCategoryList, reqGetBannerList, reqFloorList } from '@/api/index

为了让每一个组件能够轻松调用接口函数方法，我们可以在入口文件main.js中

当然在书写调用接口方法之前，因为我们没有vuex中的commit，所以我们需要定义orderId来接收

data() {
  return {
    // 收集买家的留言信息
    msg: "",
    // 因为我们没有vuex中的commit，所以我们需要定义一个orderId来接收
    // 订单号
    orderId:''
  };
},

  methods: {
    // 修改默认地址
    changeDefault(address, addressInfo) {
      // 全部的isDefault为0
      addressInfo.forEach((item) => {
        item.isDefault = 0;
        address.isDefault = 1;
      });
    },
    // 提交订单
    async submitOrder() {
      // 交易编码
      let { tradeNo } = this.orderInfo;
      // 其余的六个参数
      let data = {
        consignee: this.userDefaultAddress.consignee, // 最终收件人的名字
        consigneeTel: this.userDefaultAddress.phoneNum, // 最终收件人的手机号
        deliveryAddress: this.userDefaultAddress.fullAddress, // 收件人的地址
        paymentWay: "ONLINE", // 支付方式
        orderComment: this.msg, // 买家的留言信息
        orderDetailList: this.orderInfo.detailArrayList  // 商品清单
      };
      // 需要带参数的 我们需要等待服务器的成功与失败 用result来接收返回的结果
      // 因为返回了成功和失败的内容，所以我们需要使用try...catch来捕获
      // 当然也可以使用ifelse来解决
      let result = await this.$API.reqSubmitOrder(tradeNo, data);
      // console.log(result) 
      if(result.status == 200) {
        this.orderId = result.data.data
        // 提交订单成功：路由跳转 + 路由传递参数
        this.$router.push('/pay?orderId='+this.orderId)
        // 提交订单失败
      }else {
        alert(result.data.message)
      }
    },
  },

路由跳转 + 路由传递参数

// 提交订单成功：路由跳转 + 路由传递参数
this.$router.push('/pay?orderId='+this.orderId)