vue提交订单以及状态分类

最新推荐文章于 2023-04-14 15:49:59 发布
最新推荐文章于 2023-04-14 15:49:59 发布
阅读量2.5k 收藏 12
点赞数 2
分类专栏： 笔记 vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44706619/article/details/104870662
版权
vue 同时被 2 个专栏收录
79 篇文章 5 订阅
订阅专栏
笔记
20 篇文章 0 订阅
订阅专栏

提交订单就是，把选择好的地址，物品，生成一个唯一订单id，甚至还有用户名等一同插入订单数据列表中。
但是一条订单可能会有很多个状态，比如到了支付界面，如果点击了返回，他的状态可以是1，未支付。如果点击了支付，他的状态就是2，待收货。如果在待支付界面，点击支付，也可以改变状态1为2。如果在待收货界面，点击确认收货，他的状态就变成3，已完成或者待评价。
在这里插入图片描述
然后在页面上，分四个子组件，利用订单的类型进行分别渲染数据。
在这里插入图片描述

vuex
在这里插入图片描述

_小郑有点困了
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
vue订单状态码进行分类
m0_56054312的博客
10-13 411
vue订单状态分类根据状态码进行分类
vue仿淘宝订单状态的tab切换效果
01-21
前几天刚开始使用vue 做项目，然后自己就在项目中摸索写了一个tab切换的小dome，仿淘宝订单状态的tab切换。 HTML 代码： <div class=navigation> //这里是通过循环遍历出来的数据，你需要根据index的值来判断你现在点击的是第几个tab栏导航，同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 <span v-for=(item, index) in navItems v-touch:tap= { event: navChange, params: [in
vue filters 显示各种订单状态
chaosama的博客
09-27 1368
普通做法就是 <li v-if="list.refundStatus==0">申请中</li> <li v-else-if="list.refundStatus==1">服务商同意退款</li> <li v-else-if="list.refundStatus==2">服务商拒绝退款</li> 但是嘛，这样写的话多几次你...
vue 项目级别工程搭建-vuex的status，vue选中数据（七）
丿灬安之若死
03-20 1641
官网：https://vuex.vuejs.org/zh/ Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功...
实现多种状态的数据判断（vue）
明天的博客
09-09 673
效果图： handleSmsType (type) { switch (type) { case 1: return '下单成功通知' case 2: return '发货通知' case 3: return '到店通知' } } 第二种：
vue+Element UI根据状态码判断状态值
文龙刚的博客
10-11 469
vue+Element UI根据状态码判断状态值
Vue实现表格批量审核功能实例代码
10-16
首先，前端部分的实现主要涉及到Vue组件的使用，包括表格（`el-table`）、按钮（`el-button`）以及事件监听器。`el-table`是Element UI库中的表格组件，它提供了一种方便的方式来展示和操作数据。在HTML部分，我们...
Vue实战教程之仿肯德基宅急送App
10-16
6. **文件结构**：项目遵循标准的Vue项目结构，包括`App.vue`作为主组件，`main.js`作为入口文件，以及`components`、`pages`、`router`和`vuex`等目录，分别存放组件、页面、路由和状态管理模块。 7. **组件定义**...
基于Vue+Nodejs+Express在线购物商城设计
最新发布
11-03
设计一个基于vue数据驱动的在线购物商城，一个有2个身份，前端用户注册登录后可以查询商品，可以挑选喜欢的商品加入购物车，修改购物车的商品数量，提交自己的收货地址后提交订单付款；管理员后台登录后可以添加...
基于Vue+express+mongodb外卖点餐收银app系统
10-24
用户选择就近的餐饮店进入后按照菜品分类选择自己喜欢的菜品加入购物车，然后提交订单付款，提交订单的时候可以选择是店铺内就餐或者是打包带走。店铺管理员查询到订单后叫厨师开始干起来，厨师干好了管理员修改订单...
Vue展示待支付、已支付、代发货界面
06-01
通过Vue展示部分待支付、待发货、已发货界面
vue电商后台管理系统--订单管理篇
zyyyyyy24的博客
08-15 1587
渲染订单table表格 <!-- 订单列表数据 --> <el-table :data="orderList" border stripe> <el-table-column type="index" label="#"></el-table-column> <el-table-column label="订单编号" prop="order_number"></el-table
vue根据条件实现动态样式绑定（改变状态）
薛增辉的博客
07-24 7667
vue做管理系统中经常会遇到这样的需求： 根据获取数据中不同的值让页面显示不同的样式。 如图中状态值的颜色，如果获取的status值为"0"，则显示绿色；如果获取的status值为"1"，则显示红色。 步骤： 给标签使用:绑定样式，如颜色 :color="error" 使用三元表达式判断获取的值然后给样式赋值，例如： <v-icon :color="props.item.status=...
前端学习之vue+element-ui电商项目（九）订单管理
CathyleeQ的博客
03-25 2315
文章目录0. 准备工作1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.3 方法实现4.搜索与添加4.1 界面样式4.2 数据添加4.3 方法实现5.搜索与添加5.1 界面样式5.2 数据添加5.3 方法实现6.搜索与添加6.1 界面样式6.2 数据添加6.3 方法实现7.搜索与添加7.1 界面样式7.2 数据添加7.3 方法实现 0. 准备工作 component下新建文件夹powe
vue界面的数据的提交
monicateacat的博客
04-14 1157
当用户点击提交按钮时，会触发 @submit 事件，我们在事件处理函数 handleSubmit() 中获取表单数据，并将其使用 axios 发送到服务器。服务器返回数据后，我们可以在 then() 方法中处理返回的结果，或在 catch() 方法中捕获异常并进行错误处理。在 Vue 中，我们可以通过 v-model 指令绑定表单元素实现数据的双向绑定，方便地将用户输入的数据与组件中的数据进行同步。当用户在表单中输入数据后，可以通过事件监听器获取最新的数据，并将其提交到服务器或其他目标。
html中使用vue-router创建3个子路由，分别是“待付款”、“待发货”、“待收货”页面
e5bb96的博客
11-24 2785
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <scrip
【VUE项目实战】57、订单管理功能介绍和基本结构搭建
程序猿之洞
07-02 2062
接上篇《56、商品添加功能（六）-提交添加的商品》 上一篇我们完成了商品列表及商品添加的所有功能功能。本篇我们开启新模块“订单管理”的开发，先进行模块的介绍和基本结构的搭建。开发新的模块，我们需要创建新的git分支，在VScode打开终端，在控制台输入“git branch”查看我们所在的分支（可以看到是在master主分支上），然后我们使用“git checkout -b order”创建一个名为“order”的分支，可以看到自动切换到了新的分支上： 然后我们通过“git push -u origin
vue移动端项目提交订单
06-10
提交订单需要进行以下步骤： 1. 用户在移动端填写订单信息，包括商品名称、数量、价格、收货地址、联系方式等。 2. 用户点击提交订单按钮，前端会将订单信息通过 AJAX 请求发送到后端 API 接口。 3. 后端接收到订单信息后，进行校验和处理，包括订单金额校验、库存检查、生成订单号等。 4. 后端将处理后的订单信息保存到数据库中，并返回一个包含订单号、支付金额等信息的 JSON 对象给前端。 5. 前端根据后端返回的订单信息，调用第三方支付平台的 SDK 进行支付。 6. 支付成功后，前端会向后端发送一个确认支付的请求，后端会根据订单号查询数据库，将订单状态更新为已支付。 7. 前端显示支付成功的提示信息，并提供订单详情页面给用户查看。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值