交易页Trade

在computed中mapState映射出addressInfo和orderInfo，然后v-for渲染到组件当中

修改默认地址

<div class="address clearFix" v-for="address in addressInfo" :key="address.
  <span class="username" :class="{selected:address.isDefault==1}">{{address
  <p @click="changeDefault(address, addressInfo)">
    <span class="s1">{{ address.fullAdress }}</span>
    <span class="s2">{{ address.phoneNum }}</span>
    <span class="s3" v-show="address.isDefault==1">默认地址</span>
  </p>
</div> 

绑定changeDefault修改默认地址

changeDefault(address, addressInfo) {
      addressInfo.forEach(item => {
        item.isDefault = 0;
      });
      address.isDefault = 1;
    }

• 提取出来被选中的address,在组件右下角需要
  在computed中
  array.find()是找到数组中符合条件的那一个，然后返回该项值

userDefaultAddress(){
	return this.addressInfo.find(item=>item.isDefault==1)||{};
}

商品清单

获取数据展示就完事，一样的

reduce计算总数和总价

• 理解reduce的用法

1. reduce(callback,initialValue)接收两个参数
   - callback（回调函数）：对数组每一项执行的操作
   - initialValue（可选初始值）：accumulator的初始值（如果不提供，默认是数组第一项）

2. 回调函数callback(accumulator,currentItem,index,array)通常有四个参数（常用前两个）
   - accumulator（累加器）：存储上一次回调的返回值（或初始值）
   - cuurentIndex（当前项）：当前被处理的数组元素
   - index（可选）：当前项索引
   - array（可选）：原数组本身

3. accumulator是什么？
   accumulator（累加器）是 reduce 方法中的一个参数，它用于累积每次回调函数返回的值。你可以把它想象成一个"记忆器"，它记住了到目前为止的计算结果。

应用

computed当中

totalNum(){	
	return orderInfo.detailArrayList.reduce(
	(accumulator,curentValue)=>{
		return accumulator + currentValue.skuNum;
	},0);
},
totalPrice(){
	return orderInfo.detailArrayList.reduce(
	(accumulator,currentValue)=>{
		return accumulator+currentValue.orderPrice;
	},0)
}

统一引入接口

api里面有大量接口，每次需要import某个接口，如何实现在某处统一引入全部请求函数，然后在其他组件内可直接使用？

在main.js中

import * as API from '@/api';
console.log(API);

打印出来是一个对象，包含了所有的请求函数

然后在vue的原型上

new Vue({
  render: h => h(App),
  
  beforeCreate() {
  //直接挂载到vue原型对象身上
  //vue组件实例可以直接访问使用
    Vue.prototype.$API = API;

	Vue.prototype.$bus = this;
  },

  router,
  store
}).$mount('#app')

提交订单

• 当用户点击提交订单跳转到支付页，但在跳转时需要传递给服务器订单的信息（商品、用户地址和信息、支付价格），即要再次发送请求
  

1. api封装请求函数

export const reqSubmitOrder = (tradeNo,data)=>request({url:`/order/auth/submitOrder?tradeNo=${tradeNo}`,data,method:'post'})
//data中k,v一致省略v

订单编号：

2. 组件内绑定事件触发请求
首先<a class="subBtn" @click="submitOrder">提交订单</a>

不用router-link，因为在跳转前需要处理复杂逻辑

这里我们不用vuex，直接在组件内发送请求

//methods:
async submitOrder(){
	//发送请求
	//解构出所需要传递的参数
	let {tradeNo} = this.orderInfo;
	let data = {
		consignee:this.userDefaultAddress.consignee,
		//……后面参数同样
	}
	try{
		let result = await this.$API.reqSubmitOrder(tradeNo,data);
		//成功就进行路由跳转，还需要带上订单号
		this.orderId = result.data;
		this.$router.push(`/pay?orderId=${this.orderId}`);
	}catch(error){
		alert(error.message);
	}
}

请求成功传递订单号并跳转到pay支付页面，然后在支付页可以通过订单号请求支付金额的数据