16前端项目----交易页-CSDN博客

本文链接：https://blog.csdn.net/2401_83475219/article/details/147801108

交易

交易页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的用法

reduce(callback,initialValue)接收两个参数
- callback（回调函数）：对数组每一项执行的操作
- initialValue（可选初始值）：accumulator的初始值（如果不提供，默认是数组第一项）
回调函数callback(accumulator,currentItem,index,array)通常有四个参数（常用前两个）
- accumulator（累加器）：存储上一次回调的返回值（或初始值）
- cuurentIndex（当前项）：当前被处理的数组元素
- index（可选）：当前项索引
- array（可选）：原数组本身
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')

提交订单

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

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);
	}
}