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