Vue实现订单列表【用户端】

最新推荐文章于 2024-04-21 13:00:00 发布
最新推荐文章于 2024-04-21 13:00:00 发布
阅读量2k 收藏 12
点赞数 3
分类专栏： Vue 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Windyluna/article/details/113255307
版权

一、效果图
在这里插入图片描述
二、实现原理
在这里插入图片描述
代码：

<table style="margin-top:20px;">
<thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Month</th>
    <th>Savings</th>
    <th>Month</th>
    <th>Savings</th>
  </tr>
</thead>
<tbody>
  <br />
  <tr>
    <td colspan="" rowspan="" headers="">1</td>
    <td colspan="" rowspan="" headers="">11</td>
    <td colspan="" rowspan="2" headers="">2</td>
    <td colspan="" rowspan="2" headers="">3</td>
    <td colspan="" rowspan="2" headers="">4</td>
    <td colspan="" rowspan="2" headers="">5</td>
  </tr>
  <tr>
    <td colspan="" rowspan="" headers="">1</td>
    <td colspan="" rowspan="" headers="">11</td>
  </tr>
</tbody>

<tbody>
  <br />
  <tr>
    <td colspan="" rowspan="" headers="">1</td>
    <td colspan="" rowspan="" headers="">11</td>
    <td colspan="" rowspan="2" headers="">2</td>
    <td colspan="" rowspan="2" headers="">3</td>
    <td colspan="" rowspan="2" headers="">4</td>
    <td colspan="" rowspan="2" headers="">5</td>
  </tr>
  <tr>
    <td colspan="" rowspan="" headers="">1</td>
    <td colspan="" rowspan="" headers="">11</td>
  </tr>
</tbody>
</table>

td,
th {
  padding: 10px 0;
  border: 1px solid #e5e5e5;
  vertical-align: top;
}

三、效果图实现代码

<template>
  <div class="orderList">
    <div class="page-wrap w">
      <div class="orderList-table">
        <table class="order-head">
          <tbody>
            <tr>
              <th class="order_info">商品信息</th>
              <th class="order_price">单价</th>
              <th class="order_num">数量</th>
              <th class="goods_handle">商品操作</th>
              <th class="real_pay">实付款</th>
              <th class="order_status">订单状态</th>
              <th class="order_handle">交易操作</th>
            </tr>
          </tbody>
        </table>
        <div v-for="(item, index) in list" :key="index" class="order-body">
          <table class="body_top">
            <tbody>
              <br />
              <div class="body_top_con">
                <div class="top_con_shop">
                  <span class="top_con_time">{{ item.create_time }}</span>
                  <span class="top_con_num">订单号：{{ item.id }}</span>
                  <span>店铺：{{ item.shop_name }}</span>
                </div>
                <div class="top_con_del">
                  <i class="el-icon-delete"></i>
                </div>
              </div>
            </tbody>
          </table>
          <table>
            <tbody>
              <tr class="body_content">
                <div v-for="(work, ind) in item.goods" :key="ind">
                  <td colspan="" rowspan="" headers="" class="body_content_info">
                    <div class="info_box">
                      <div class="info_box_img" @click="viewGood(work)">
                        <img :src="work.img" alt="" />
                      </div>
                      <div class="info_describe">
                        <p class="text" @click="viewGood(work)">
                          <span>{{ work.text }}</span>
                        </p>
                        <p class="attr">
                          <span v-for="(itm, iid) in work.goodsAttr" :key="iid">
                            <span>{{ itm.attrName }}：{{ itm.attrValue }}</span>
                          </span>
                        </p>
                      </div>
                    </div>
                  </td>
                  <td colspan="" rowspan="" headers="" class="order_price body_content_price">
                    <p>￥{{ work.price }}</p>
                  </td>
                  <td colspan="" rowspan="" headers="" class="order_num body_content_num">
                    <p>{{ work.num }}</p>
                  </td>
                </div>

                <td colspan="" :rowspan="item.goods.length" headers="" class="goods_handle body_content_handle">
                  <p>申请售后</p>
                  <p>投诉卖家</p>
                </td>
                <td colspan="" :rowspan="item.goods.length" headers="" class="real_pay body_content_pay">
                  <p class="price">￥{{ item.total_payment }}</p>
                  <p class="postage">(含运费：￥{{ item.postage }})</p>
                </td>
                <td colspan="" :rowspan="item.goods.length" headers="" class="order_status body_content_status">
                  <p>
                    <span v-if="item.status === 0">订单已取消</span>
                    <span v-if="item.status === 1">等待买家付款</span>
                    <span v-if="item.status === 2">待发货</span>
                    <span v-if="item.status === 3">待确认</span>
                    <span v-if="item.status === 4">退货</span>
                    <span v-if="item.status === 5">退货邮寄</span>
                    <span v-if="item.status === 6">退货完成</span>
                    <span v-if="item.status === 7">订单完成</span>
                  </p>
                  <p class="detail">
                    <span>订单详情</span>
                  </p>
                </td>
                <td colspan="" :rowspan="item.goods.length" headers="" class="order_handle body_content_ohandle">
                  <p v-if="item.status === 1">
                    <el-button size="mini" type="danger">立即付款</el-button>
                  </p>
                  <p v-if="item.status === 1" class="order_cancel">
                    <span>取消订单</span>
                  </p>
                  <p class="order_cancel">
                    <!-- <span>再次购买</span> -->
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'orderList',
  components: {},
  data() {
    return {
      list: [
        {
          create_time: '2021-01-27 14:17:06',
          id: 16117282260421,
          postage: '0.00',
          shop_name: '手机专卖店',
          status: 1,
          total_payment: '444.00',
          goods: [
            {
              goodsAttr: [
                {
                  attrName: '1',
                  attrValue: '1'
                },
                {
                  attrName: '2',
                  attrValue: '2'
                }
              ],
              goods_id: 1609983892472866,
              img: 'http://120.76.98.119:1224/upload/shop/9438863192/20210107/160998902823.jpg',
              num: 1,
              price: '444.00',
              text: '小米 11 xiaomi'
            }
          ]
        },
        {
          create_time: '2021-01-22 16:27:36',
          id: 16113040562157,
          postage: '0.00',
          shop_name: '梅友人',
          status: 1,
          total_payment: '283666.00',
          goods: [
            {
              goodsAttr: [
                {
                  attrName: '选择颜色',
                  attrValue: '亮黑色'
                },
                {
                  attrName: '运行内存',
                  attrValue: '8GB'
                },
                {
                  attrName: '机身存储',
                  attrValue: '512GB'
                }
              ],
              goods_id: 1609914198055593,
              img: 'http://120.76.98.119:1224/upload/shop/8936718382/20210106/16099141986.jpg',
              num: 5,
              price: '39995.00',
              text: '华为mate40pro 5G手机 亮黑色 8+256G全网通（碎屏险套餐）'
            },
            {
              goodsAttr: [
                {
                  attrName: '选择颜色',
                  attrValue: '迷雾金'
                },
                {
                  attrName: '运行内存',
                  attrValue: '12GB'
                },
                {
                  attrName: '机身存储',
                  attrValue: '512GB'
                }
              ],
              goods_id: 1609984862086794,
              img: 'http://120.76.98.119:1224/upload/shop/8936718382/20210107/160998486230.jpg',
              num: 3,
              price: '27897.00',
              text: '三星Galaxy Note20 Ultra 5G(SM-N9860)S Pen&三星笔记 120Hz自适应屏幕 5G手机游戏手机 12GB+256GB 初露白'
            }
          ]
        }
      ]
    }
  },

  methods: {},
  created() {}
}
</script>
<style lang="scss" scoped>
.orderList-table {
  margin-top: 20px;
  .order_info {
    width: 460px;
  }
  .order_price {
    width: 107px;
  }
  .order_num {
    width: 55px;
  }
  .goods_handle {
    width: 110px;
  }
  .real_pay {
    width: 128px;
  }
  .order_status {
    width: 110px;
  }
  .order_handle {
    width: 110px;
  }

  // 表格数据
  .order-body {
    .body_top {
      .body_top_con {
        background: #f5f5f5;
        border: 1px solid #e5e5e5;
        width: 1080px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        .top_con_shop {
          .top_con_time {
            color: #3c3c3c;
            font-weight: bold;
            margin: 0 10px 0 0;
          }
          .top_con_num {
            margin: 0 50px 0 0;
          }
        }
        .top_con_del {
          cursor: pointer;
          .el-icon-delete:before {
            content: '\e6d7';
            font-size: 15px;
          }
        }
      }
    }
    .body_content {
      p {
        margin: 4px 0;
      }
    }
    // 商品信息
    .body_content_info {
      width: 460px;
      border-top: unset;
      .info_box {
        display: flex;
        align-items: center;
        margin: 0 10px;
        .info_box_img {
          cursor: pointer;
          width: 80px;
          flex: 0 0 80px;
          margin-right: 10px;
          img {
            width: 80px;
            height: 80px;
          }
        }
        .info_describe {
          .text {
            margin-bottom: 6px;
            cursor: pointer;
            :hover {
              color: red;
            }
          }
          .attr {
            color: #9e9e9e;
            span {
              margin-right: 6px;
            }
          }
        }
      }
    }
    // 单价
    .body_content_price {
      text-align: center;
      border-top: unset;
    }
    // 数量
    .body_content_num {
      text-align: center;
      border-top: unset;
      border-right: unset;
    }
    //商品操作
    .body_content_handle {
      text-align: center;
      border-top: unset;
    }
    // 实际付款
    .body_content_pay {
      text-align: center;
      border-top: unset;
      .price {
        color: #3c3c3c;
        font-weight: bold;
      }
      .postage {
        color: #6c6c6c;
      }
    }
    .body_content_status {
      text-align: center;
      border-top: unset;
      .detail {
        cursor: pointer;
        :hover {
          color: red;
        }
      }
    }
    .body_content_ohandle {
      text-align: center;
      border-top: unset;
      .order_cancel {
        cursor: pointer;
        :hover {
          color: red;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.orderList {
  .order-body {
    td,
    th {
      padding: 10px 0;
      border: 1px solid #e5e5e5;
      vertical-align: top;
    }
  }
}
</style>
Windyluna
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue项目实战：订单列表页面实现
林夏天的博客
04-09 1万+
目录 调整Order父组件结构（解决Bug） 订单列表数据渲染 Loading 和 NoData优化 订单列表分页 - 分页器 订单列表分页 - 加载更多 订单列表分页 - 滚动加载 （1）调整Order父组件结构（解决Bug） 之前在Vue项目实战：订单确认页面实现中关于订单父组件结构封装里写到：在order.vue中引入<order-header></order-hea...
vue项目第六阶段
码化疼
10-26 568
###今日目标 1.完成商品添加 2.完成订单列表 3.完成数据统计展示 ###1.添加商品 ####A.完成图片上传 使用upload组件完成图片上传 在element.js中引入upload组件，并注册 因为upload组件进行图片上传的时候并不是使用axios发送请求 所以，我们需要手动为上传图片的请求添加token，即为upload组件添加headers属性 //在页面中添加upload组...
旅游网后台管理系统（二）订单操作
bm1998
10-30 2319
文章目录1. 创建表1.1 表之间的关系1.2 会员表1.3 旅客表1.4 订单表1.5 订单与旅客中间表2. 实现查询订单操作2.1 编写实体类2.2 编写持久层接口2.3 编写业务层接口和实现类2.4 编写控制层2.5 编写 JSP 页面3. 实现分页查询订单操作3.1 PageHelper 介绍3.2 PageHelper 的使用4. 实现查询订单详情操作4.1 编写持久层接口4.2 编写业...
vuecli实战商城后台管理系统
03-07
适用人群具有一定javaScript基础具有一定Vuejs基础课程概述本季度基于Vuecli + elementUI实战开发商城后台管理系统完整视频教程，其中包括vuex模块化管理、Vue-router二次封装、使用element-ui库、支付模块、多权限管理、商品多规格实现、对象存储、api接口安全以及部署服务器上线等知识等。课程大纲见以下图！
【uView】u-list-item 添加自定义样式 背景颜色 大小布局
最新发布
ranmaxli的博客
04-21 896
但是官网提供的代码并没有对u-list-item进行样式赋值，所以这里我们修改u-list-item源文件即可。使用的uView2.0的List列表，可以对u-list的处理，可以实现背景颜色的改变。小程序-支付宝(仅适用于uni-app)小程序-字节跳动(适用于uni-app)小程序-360(仅适用于uni-app)小程序-微信(仅适用于uni-app)小程序-百度(仅适用于uni-app)快应用-华为(仅适用于uni-app)快应用-联盟(仅适用于uni-app)小程序-快手(适用于uni-app)
Vue电商项目—订单管理—订单列表模块-10
weixin_44549096的博客
03-16 3909
Vue电商项目—订单管理—订单列表模块 1.1 订单管理概述 订单管理模块用于维护商品的订单信息， 可以查看订单的商品信息、物流信息， 并且可以根据实际的运营情况对订单做适当的调整。 1.2 订单列表 1. 订单列表展示  订单数据加载  订单列表布局 // 订单请求参数 queryInfo: { query: '', pagenum: 1, pagesize: 10 } // 获取订单列表数据 async getOrderLi
Vue项目实战之电商后台管理系统(八) 订单管理及数据统计模块
小陈工的博客
09-02 3618
订单管理及数据统计模块。
订单页丨2023前端最新项目Vue3小兔鲜
黑马程序员官方博客
06-09 535
基础思想：记录当前点击项，通过动态class判断当前div是否有激活类名。
Vue结合SignalR实现前后端实时消息同步
01-21
最近业务中需要实现服务器端与客户端的实时通信功能，对Signalr做了一点总结和整理。 SignalR 作为 ASP.NET 的一个库，能够简单方便地为应用提供实时的服务器端与客户端双向通信功能。 SignalR 在客户端方面有两种...
订单列表暂无订单-VUE模板-UNIAPP模板
04-04
在"订单列表暂无订单-VUE模板-UNIAPP模板"这个项目中，开发者提供了一个针对这种场景的模板，即当用户没有任何订单时，应用会显示一个相应的提示。这个模板适合用于快速构建具有类似功能的Vue或UniApp应用程序。 ...
SpringBoot+Vue实现汽车销售管理系统前后端分离项目.zip
05-08
本项目——"SpringBoot+Vue实现汽车销售管理系统前后端分离项目"，旨在利用现代Web技术为汽车销售业务提供一套高效、便捷的解决方案。以下是该项目的核心知识点和实现细节： 一、SpringBoot框架的应用 SpringBoot是...
java基于SpringBoot-Vue框架实现的前后端分离的酒店管理系统源码+数据库
02-06
酒店管理系统后台,供管理员管理系统之用 ...客户订单信息管理 客户入住信息管理 结账： 通过房间号码进行退房结账 酒店管理系统系统供酒店客户使用前台 用户管理 预订客房 找回个人密码 调用支付宝接口进行支付
10.5 Vue电商后台管理完善--订单详情页面显示商品信息，添加备注
weixin_47505105的博客
03-31 3996
Vue电商后台管理系统，对订单详情页面进行再次完善，使得显示商品信息，商品图片等，并且可以为客户添加备注信息。
Vue-后台管理项目005---订单列表
初遇我ㄖ寸の热情呢？
07-08 260
【代码】Vue-后台管理项目005---订单列表。
Vue 订单(查询+展示+收货地址)
weixin_47906106的博客
03-03 9617
1. 获取订单列表数据 新建文件 index.js中配置路由 { path: '/orders', component: () => import ('../components/order/Orders.vue') }, 是否付款列使用elemenui =》Tab标签 提示信息是否可移入 :enterable="false" <template>
Spring Boot + Vue + Element UI的网上商城后台管理之订单管理系统
qq_22593423的博客
09-14 1459
在网上商城后台管理系统中，订单管理是一个非常重要的模块。管理员需要对订单进行管理，包括查看订单列表、处理订单、取消订单等操作。本文将使用Spring Boot作为后端框架，Vue作为前端框架，Element UI作为UI组件库，实现一个简单的订单管理系统。通过以上步骤，我们成功实现了一个简单的订单管理系统。使用Spring Boot作为后端框架，Vue作为前端框架，Element UI作为UI组件库，实现了订单列表展示、订单详情查看和订单处理等功能。
SpringBoot+Vue前后端分离项目——订单模块——订单管理页面设计
roydon
05-24 1314
分析返回数据格式：请求是分页查询，这里测试用只有一个订单，一个订单包含了订单基本信息和关联的收货地址表和订单商品表，一个订单包含多个订单商品。Vue源码：（未给全，可自行扩展）
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-订单列表
weixin_48884617的博客
04-19 4181
黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-订单列表
2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）商品列表篇
超逸の学习技术博客
01-23 2029
文章目录1、引言2、商品列表篇2.1 通过路由加载商品列表组件2.2 渲染商品列表数据2.3 自定义格式化时间的全局过滤器2.4 实现商品列表的分页功能2.5 实现搜索与清空的功能2.6 根据id删除商品数据2.7 通过编程式导航跳转到商品添加页面2.8 渲染添加页面的基本结构2.9 实现步骤条和tab栏的数据联动效果2.10 绘制基本信息面板的UI结构2.11 绘制商品分类的级联选择器2.12 ...
使用vue实现一个手机端外卖饿了么app
05-24
7. 实现下单流程：实现订单确认、支付等流程，调用支付接口完成支付操作。 8. 优化性能：使用Vue提供的优化技术，如异步组件、懒加载、缓存等，提高应用性能和用户体验。 以上仅是一个简单的实现步骤，具体实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Windyluna

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

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

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

打赏作者

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

抵扣说明：

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

余额充值