在这里插入图片描述

文章目录

本人其他相关文章链接

37.获取交易数据

修改代码：

src/store/index.js

import trade from "@/store/trade"

modules:{
	...
    trade
    }

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
}

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

src/pages/ShopCart/index.vue

<router-link class="sum-btn" to="/trade">结算</router-link>

src/router/routes.js

{
        name: 'trade',
        path: '/trade',
        component: Trade,
        meta:{"isShow": true}   //自定义元数据属性，判断Footer组件在底部是否显示
},

src/pages/Trade/index.vue

mounted() {
      this.$store.dispatch('reqAddressInfo');
      this.$store.dispatch('reqOrderInfo');
    }

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

注意点1：

问题：报错如图

在这里插入图片描述

出错代码：

<span>{
   
   {userDefaultAddress.fullAddress}}</span>

computed: {
	//将来提交订单最终选中地址
      userDefaultAddress() {
        //find:查找数组当中符合条件的元素返回，最为最终结果
        return this.addressInfo.find((item) => item.isDefault == 1);
      },
}

答案：只需让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,
      }),
}

40.提交订单

重难点说明

提交订单
支付二维码
获取订单状态

从这里开始就不再写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'});

src/router/routes.js

import Pay from '@/pages/Pay'
{
        name: 'pay',
        path: '/pay',
        component: Pay,
        meta:{"isShow": true}   //自定义元数据属性，判断Footer组件在底部是否显示
},

src/pages/Trade/index.vue

<a class="subBtn" @click="submitOrder">提交订单</a>

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

注意点1：

问题：现在所有接口全在src/api/index.js路径下，现在我想做只引入一次，在所有组件中都能使用，如何办到？

答案：在main.js主入口中一次性引入，并赋值给$API，这样就可以像全局事件总线一样使用了。

//统一接口api文件夹里面全部请求函数
//统一引入
import * as API from '@/api';

new Vue({
	...
	beforeCreate() {
    	Vue.prototype.$API = API;
  },
}）

在这里插入图片描述

注意点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;
        }
      },
    }

vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】

文章目录

37.获取交易数据

38.用户地址信息展示

39.交易信息展示及交易页面完成

40.提交订单

41.支付组件内获取订单号与展示支付信息

本人其他相关文章链接

猜你喜欢