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

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

1.jpeg

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:

问题:报错如图

image.png

出错代码:

<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.提交订单

重难点说明

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

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

image.png

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

本人其他相关文章链接

1.vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
2.vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
3.vue尚品汇商城项目-day06【43.微信支付业务】

目录
相关文章
|
4天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
10 2
|
4天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
10 2
|
4天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1044 0
|
5天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
8天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
5天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
24 9
|
4天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
4天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。
|
8天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
17 6