订单源代码

写router.js 路由组件

import Trade from "@/pages/Trade"

let router = new VueRouter({
  //配置路由
  routes: [
    {
      path: "/trade",
      name: "Trade",
      component: Trade,
    },
}

购物车 vue

        <div class="sumbtn">
            <router-link class="sum-btn" to="/trade">结算</router-link>
        </div>

接口

//获取用户地址信息
export const reqAddressInfo = () => requests({
    url: "/user/userAddress/auth/findUserAddressList",
    method: "get",
  });

//获取商品清单
export const reqOrderInfo = () =>
  requests({ url: "/order/auth/trade", method: "get" });

仓库 trade.js

import { reqAddressInfo, reqOrderInfo } from "@/api";
const state = {
  address: [],
  orderInfo:{}
};
const mutations = {
  GETUSERADDRESS(state, address) {
    state.address = address;
  },
  GETORDERINFO(state,orderInfo){
     state.orderInfo = orderInfo;
  }
};
const actions = {
  //获取用户地址信息
  async getUserAddress({ commit }) {
    let result = await reqAddressInfo();
    if (result.code == 200) {
      commit("GETUSERADDRESS", result.data);
    }
  },
  //获取商品清单数据
  async getOrderInfo({commit}) {
    let result = await reqOrderInfo();
    if(result.code==200){
      commit("GETORDERINFO",result.data);
    }
  },
};
const getters = {};
export default {
  state,
  mutations,
  actions,
  getters,
};

在trade.vue中 派发action 等组件挂载完毕

<script>
export default {
  name: "Trade",
  //生命周期函数:挂载完毕
  mounted() {
    this.$store.dispatch("getUserAddress");
    this.$store.dispatch("getOrderInfo");
  },
};
</script>

动态展示订单数据

<template>
  <div class="trade-container">
    <h3 class="title">填写并核对订单信息</h3>
    <div class="content">
      <h5 class="receive">收件人信息</h5>
      <div
        class="address clearFix"
        v-for="(address, index) in addressInfo"
        :key="address.