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
    }
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:

问题:报错如图

image.png

出错代码:

<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 代码解读

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;
        }
      },
    }
AI 代码解读

本人其他相关文章链接

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

目录
打赏
0
0
0
0
230
分享
相关文章
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
118 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
102 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
模拟Vue数据的双向绑定
Vue的数据双向绑定功能一直为人称道, Vue数据的双向数据绑定主要依赖了Object.defineProperty,这里尝试用最简单的代码, 实现数据的双向绑定Demo MVVM ViewModel基本实现原理 Gi...
958 0
|
3月前
|
vue使用iconfont图标
vue使用iconfont图标
177 1
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
117 12

热门文章

最新文章