16前端项目----交易页

交易页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支付页面，然后在支付页可以通过订单号请求支付金额的数据