当前位置：首页 > backend >正文

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

backend 2025/7/1 10:41:42

交易

- 交易页Trade
- - 修改默认地址
  - 商品清单
  - reduce计算总数和总价
  - - 应用
- 统一引入接口
- 提交订单

交易页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);}
}