Vue项目中常见问题(54)获取交易页面数据,用户地址信息展示,交易页面完成

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

一、获取用户地址信息接口

 1.写api

 2.创建一个新的小仓库

 3.回到大仓库引入小仓库

 4.回到小仓库发请求,存储数据,展示数据

二、获取订单交易页信息的接口

 1.写api

 2.回到仓库,三连环

三、用户地址信息的展示

 1.利用计算属性把数据放到组件的身上

 2.遍历,把数据放到页面上

 我们知道一上来应该有一个默认地址,就是默认勾选的,这个取决于数据中的isDefault

 我们知道默认地址应该是时而显示,时而隐藏的,默认地址显示与不显示取决于isDefault

 我们知道点击谁,谁就应该被选中,我们这里利用排他的方法来做

 我们还想要最底下的地址和信息也一起改变:

 四、交易页面完成

商品清单

 1.我们需要把商品清单的信息捞到组件身上

 2.找到商品清单的静态结构遍历替换数据

 买家留言

1.找到对应的结构

商品数量及总金额

1.分析数据,数据中的totalNum的数量就是我们加入购物车结算的商品数量 totalAmount是商品的总价

2.进行替换

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

 

一、获取用户地址信息接口

接口地址:/api/user/userAddress/auth/findUserAddressList

请求方式:get

1.写api

在api/index.js中:

 2.创建一个新的小仓库

因为trade是一个新的模块,我们需要新建一个小仓库

在store中新建一个trade文件夹,里面在建一个index.js文件

 在store/trade/index.js中:

 3.回到大仓库引入小仓库

 4.回到小仓库发请求,存储数据,展示数据

在store/trade/index.js中:

在pages/Trade/index.vue中:派发action 

 

控制台查看:

 

在store/trade/index.js中:

import {reqAddressInfo} from '@/api'
const state = {
  address:[]
}
const mutations = {
  GETUSERADDRESS(state,address){
    state.address = address 
  }
}
const actions = {
  //获取用户信息
  async getUserAddress({commit}){
    let result = await reqAddressInfo()
    // console.log(result)
    if(result.code==200){
      commit('GETUSERADDRESS',result.data)
    }
  }
}
const getters = {}
export default{
  state,
  mutations,
  actions,
  getters
}

查看控制台,发现仓库中已经有trade了

 

获取交易页面用户信息

用户要登录了才可以获取用户地址信息,不登录是没有办法获取到的

二、获取订单交易页信息的接口

请求地址:/api/order/auth/trade

请求方式:get

 1.写api

 

 2.回到仓库,三连环

在store/trade/index.js中:

 在pages/Trade/index.vue中派发action: