37.获取交易数据
修改代码：
src/store/index.js
import trade from "@/store/trade"
modules:{
...
trade
}
AI 代码解读
src/store/trade/index.js
import {reqAddressInfo, reqOrderInfo} from "@/api";
//trade交易模块的小仓库
//actions代表一系列动作，可以书写自己的业务逻辑，也可以处理异步
const actions = {
//获取用户地址信息
async reqAddressInfo({commit}) {
let response = await reqAddressInfo();
console.log("******获取用户地址信息-response:{}", response);
if (response.code == 200) {
commit('REQ_ADDRESS_INFO', response.data);
//返回的是成功的标记
return "OK";
} else {
//返回的是失败的标记
return Promise.reject(new Error(response.message))
}
},
//获取商品清单
async reqOrderInfo({commit}) {
let response = await reqOrderInfo();
console.log("******获取商品清单-response:{}", response);
if (response.code == 200) {
commit('REQ_ORDER_INFO', response.data);
//返回的是成功的标记
return "OK";
} else {
//返回的是失败的标记
return Promise.reject(new Error(response.message))
}
},
}
//mutations代表维护，操作维护的是state中的数据，且state中数据只能在mutations中处理
const mutations = {
REQ_ADDRESS_INFO(state, addressInfo) {
state.addressInfo = addressInfo
},
REQ_ORDER_INFO(state, orderInfo) {
state.orderInfo = orderInfo
},
}
//state代表仓库中的数据
const state = {
addressInfo: [],
orderInfo: {},
}
//计算属性
//项目当中getters主要的作用是:简化仓库中的数据(简化数据而生)
//可以把我们将来在组件当中需要用的数据简化一下【将来组件在获取数据的时候就方便了】
const getters = {
}
//创建并暴露store
export default {
actions,
mutations,
state,
getters
}
AI 代码解读
src/api/index.js
//获取用户地址信息
//URL:/api/user/userAddress/auth/findUserAddressList method:get
export const reqAddressInfo = ()=>requests({url:'/user/userAddress/auth/findUserAddressList',method:'get'});
//获取商品清单
//URL:/api/order/auth/trade method:get
export const reqOrderInfo = ()=>requests({url:'/order/auth/trade',method:'get'});
AI 代码解读
src/pages/ShopCart/index.vue
<router-link class="sum-btn" to="/trade">结算</router-link>
AI 代码解读
src/router/routes.js
{
name: 'trade',
path: '/trade',
component: Trade,
meta:{"isShow": true} //自定义元数据属性，判断Footer组件在底部是否显示
},
AI 代码解读
src/pages/Trade/index.vue
mounted() {
this.$store.dispatch('reqAddressInfo');
this.$store.dispatch('reqOrderInfo');
}
AI 代码解读
38.用户地址信息展示
由于API接口调不通没有数据，所以临时采用mock模拟接口返回数据！
修改代码：
src/pages/Trade/index.vue
<div class="address clearFix" v-for="(address, index) in addressInfo" :key="address.id">
<span class="username" :class="{ selected: address.isDefault == 1 }">{
{address.consignee}}</span>
<p @click="changeDefault(address, addressInfo)">
<span class="s1">{
{address.fullAddress}}</span>
<span class="s2">{
{address.phoneNum}}</span>
<span class="s3" v-show="address.isDefault == 1">默认地址</span>
</p>
</div>
<div class="receiveInfo">
寄送至:
<span>{
{userDefaultAddress.fullAddress}}</span>
收货人：<span>{
{userDefaultAddress.consignee}}</span>
<span>{
{userDefaultAddress.phoneNum}}</span>
</div>
import {mapState} from 'vuex';
computed: {
...mapState({
addressInfo: (state) => state.trade.addressInfo,
}),
//将来提交订单最终选中地址
userDefaultAddress() {
//find:查找数组当中符合条件的元素返回，最为最终结果
return this.addressInfo.find((item) => item.isDefault == 1) || {};
},
},
methods: {
//修改默认地址
changeDefault(address, addressInfo) {
//全部的isDefault为零
addressInfo.forEach((item) => (item.isDefault = 0));
address.isDefault = 1;
},
}
AI 代码解读
注意点1：
问题：报错如图
出错代码：
<span>{
{userDefaultAddress.fullAddress}}</span>
computed: {
//将来提交订单最终选中地址
userDefaultAddress() {
//find:查找数组当中符合条件的元素返回，最为最终结果
return this.addressInfo.find((item) => item.isDefault == 1);
},
}
AI 代码解读
答案：只需让userDefaultAddress无值时返回空对象即可，改为：return this.addressInfo.find((item) => item.isDefault == 1) || {};
39.交易信息展示及交易页面完成
由于API接口调不通没有数据，所以临时采用mock模拟接口返回数据！
修改代码：
src/pages/Trade/index.vue
<div class="detail">
<h5>商品清单</h5>
<ul class="list clearFix" v-for="(order, index) in orderInfo.detailArrayList" :key="order.skuId">
<li>
<img :src="order.imgUrl" alt="" style="width:100px;height:100px" >
</li>
<li>
<p>{
{ order.skuName }}</p>
<h4>7天无理由退货</h4>
</li>
<li>
<h3>￥{
{ order.orderPrice }}.00</h3>
</li>
<li>X{
{ order.skuNum }}</li>
<li>有货</li>
</ul>
</div>
<b><i>{
{ orderInfo.totalNum }}</i>件商品，总商品金额</b>
<span>¥{
{ orderInfo.totalAmount }}.00</span>
<div class="price">应付金额: <span>¥{
{ orderInfo.totalAmount }}.00</span></div>
data() {
return {
//收集买家的留言信息
msg: "",
};
},
computed: {
...mapState({
orderInfo: (state) => state.trade.orderInfo,
}),
}
AI 代码解读
40.提交订单
重难点说明
1) 提交订单
2) 支付二维码
3) 获取订单状态
从这里开始就不再写vuex了，改为直接掉接口使用返回数据，这里要开始练习不使用vuex情况下也能写代码功能！
修改代码：
src/api/index.js
//提交订单的接口
//URL:/api/order/auth/submitOrder?tradeNo={tradeNo} method:post
export const reqSubmitOrder = (tradeNo,data)=>requests({url:`/order/auth/submitOrder?tradeNo=${tradeNo}`,data,method:'post'});
AI 代码解读
src/router/routes.js
import Pay from '@/pages/Pay'
{
name: 'pay',
path: '/pay',
component: Pay,
meta:{"isShow": true} //自定义元数据属性，判断Footer组件在底部是否显示
},
AI 代码解读
src/pages/Trade/index.vue
<a class="subBtn" @click="submitOrder">提交订单</a>
AI 代码解读
src/pages/Trade/index.vue
data() {
return {
//订单号
orderId: "",
};
},
methods: {
//提交订单
async submitOrder() {
//交易编码
let { tradeNo } = this.orderInfo;
//其余的六个参数
let data = {
consignee: this.userDefaultAddress.consignee, //最终收件人的名字
consigneeTel: this.userDefaultAddress.phoneNum, //最终收件人的手机号
deliveryAddress: this.userDefaultAddress.fullAddress, //收件人的地址
paymentWay: "ONLINE", //支付方式
orderComment: this.msg, //买家的留言信息
orderDetailList: this.orderInfo.detailArrayList, //商品清单
};
//需要带参数的：tradeNo
let result = await this.$API.reqSubmitOrder(tradeNo, data);
console.log("******提交订单结果result:{}", result);
//提交订单成功
// if (result.code == 200) {
// this.orderId = result.data;
// //路由跳转 + 路由传递参数
// this.$router.push('/pay?orderId='+this.orderId);
// //提交的订单失败
// } else {
// alert(result.message);
// }
this.orderId = "10552";
//路由跳转 + 路由传递参数
this.$router.push('/pay?orderId='+this.orderId);
},
}
AI 代码解读
注意点1：
问题：现在所有接口全在src/api/index.js路径下，现在我想做只引入一次，在所有组件中都能使用，如何办到？
答案：在main.js主入口中一次性引入，并赋值给$API，这样就可以像全局事件总线一样使用了。
//统一接口api文件夹里面全部请求函数
//统一引入
import * as API from '@/api';
new Vue({
...
beforeCreate() {
Vue.prototype.$API = API;
},
}）
AI 代码解读
注意点2：
问题：router-link标签添加点击事件无效，哪怕是用.native修饰也无效。
答案：我也不知道为啥，网上博客说可以，但是我尝试了还是无效，因此只能改为a标签。
41.支付组件内获取订单号与展示支付信息
修改代码：
src/pages/Pay/index.vue
<span class="fl">请您在提交订单<em class="orange time">4小时</em>之内完成支付，超时订单会自动取消。订单号：<em>{
{orderId}}</em></span>
<span class="fr"><em class="lead">应付金额：</em><em class="orange money">￥{
{ payInfo.totalFee }}</em></span>
data() {
return {
payInfo: {},
};
},
computed: {
orderId() {
return this.$route.query.orderId;
},
},
//工作的时候：尽量别再生命周期函数中async|await
mounted() {
this.getPayInfo();
},
methods: {
//获取支付信息
async getPayInfo() {
let result = await this.$API.reqPayInfo(this.orderId);
//如果成功：组件当中存储支付信息
if (result.code == 200) {
this.payInfo = result.data;
}
},
}
AI 代码解读
本人其他相关文章链接
1.vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
2.vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
3.vue尚品汇商城项目-day06【43.微信支付业务】
