Vue+ElementUI电商项目(六)

2023-11-16

订单列表

创建订单列表路由组件并添加路由规则

//在view中新建orderManagement文件夹,新建Order.vue组件,组件中添加代码如下
<template>
  <div>
    <Breadcrumb :item="item" :subItem="subItem"></Breadcrumb>
    <OrdersList></OrdersList>
  </div>
</template>

<script>
  import Breadcrumb from '../../components/Breadcrumb.vue'
  import OrdersList from '../../components/OrdersList.vue'
  export default {
    data() {
      return {
        item: '订单管理',
        subItem: '订单列表'
      }
    },
    components: {
        Breadcrumb,
        OrdersList
    }
  }
</script>

<style>
</style>
//打开router.js导入Order.vue并添加规则
import Order from './components/order/Order.vue'

path: '/home', component: Home, redirect: '/welcome', children: [
  ... ...
  { path: "/orders", component: Order  }
]

实现数据展示及分页

<template>
  <div class="main">
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索栏 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 订单表格 -->
      <el-table class="table" :data="orderList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="订单编号" prop="order_number"></el-table-column>
        <el-table-column label="订单价格" prop="order_price"></el-table-column>
        <el-table-column label="是否付款" prop="pay_status">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
            <el-tag type="danger" v-else>未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send"></el-table-column>
        <el-table-column label="下单时间" prop="create_time">
          <template slot-scope="scope">
            {{scope.row.create_time | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="125px">
          <template>
            <el-button size="mini" type="primary" icon="el-icon-edit"></el-button>
            <el-button size="mini" type="success" icon="el-icon-location"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination class="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[3, 5, 10, 15]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  import { getOrdersList } from '../api/order.js'
  export default {
    data() {
      return {
        // 查询条件
        queryInfo: {
          query: '',
          pagenum: 1,
          pagesize: 10
        },
        // 订单列表数据
        orderList: [],
        // 数据总条数
        total: 0
      }
    },
    created() {
      this.getOrderList()
    },
    methods: {
      getOrderList() {
        getOrdersList(this.queryInfo).then(res => {
          const data = res.data
          if (data.meta.status !== 200) {
            return this.$message.error(data.meta.msg)
          }
          this.total = data.data.total
          this.orderList = data.data.goods
        })
      },
      handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize
        this.getOrderList()
      },
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage
        this.getOrderList()
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>

修改订单状态

          <template v-slot="scope">
            <el-button size="mini" type="warning" icon="el-icon-edit" @click="showEdit(scope.row.order_id)"></el-button>
            <el-button size="mini" type="success" icon="el-icon-location"></el-button>
            <el-button size="mini" type="primary" icon="el-icon-more" ></el-button>
         </template>


<!-- 修改订单状态对话框 -->
    <el-dialog title="修改订单状态" :visible.sync="editDialogVisible" width="50%">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="订单发货状态" prop="is_send">
          <el-select v-model="editForm.is_send" placeholder="请选择" style="width: 100%;">
            <el-option label="未发货" value=""></el-option>
            <el-option label="已发货" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单支付状态" prop="pay_status">
          <el-select v-model="editForm.pay_status" placeholder="请选择" style="width: 100%;">
            <el-option label="未支付" value="0"></el-option>
            <el-option label="已支付" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单支付方式" prop="order_pay">
          <el-select v-model="editForm.order_pay" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in order_pay_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单价格" prop="order_price">
          <el-input v-model="editForm.order_price"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
<script>
   ... ...
		editDialogVisible: false,
        editForm: {
          order_id: '',
          is_send: '',
          order_pay: '',
          order_price: '',
          pay_status: ''
        },
        order_pay_options: [{
          value: '0',
          label: '未支付'
        }, {
          value: '1',
          label: '支付宝'
        }, {
          value: '2',
          label: '微信'
        }, {
          value: '3',
          label: '银行卡'
        }]
   ... ...
    showEdit(id) {
        getOrders(id).then(res => {
          this.editForm = res.data.data
          this.editDialogVisible = true
        })
      },
      save() {
        this.editForm.is_send = (this.editForm.is_send === '是' ? 1 : 0)
        updateOrderState(this.editForm.order_id, this.editForm).then(res => {
          const data = res.data
          if (data.meta.status !== 201) {
            return this.$message.error(data.meta.msg)
          }
          this.$message.success(data.meta.msg)
          this.getOrderList()
          this.editDialogVisible = false
        })
      }
</script>

查看订单详情

 <el-button size="mini" type="primary" icon="el-icon-more" @click="details(scope.row.order_id)"></el-button>

<!-- 商品详情对话框 -->
    <el-dialog title="订单详情信息" :visible.sync="dialogVisible" width="35%">
      <el-card>
        <div class="receiving-icon">
          <i class="el-icon-location"></i>
        </div>
        <div class="receiving-info">
          <el-descriptions>
            <el-descriptions-item label="收货人">{{orders.user_id}}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions>
            <el-descriptions-item label="收货地址">{{orders.consignee_addr}}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-card class="orders">
        <div v-for="goods in orders.goods" :key="goods.goods_id">
          <div class="goods_img">
            <el-image style="width: 100px; height: 80px" :src="goods.goods_img" fit="contain"></el-image>
          </div>
          <div class="goods_info">
            <div><span>{{goods.goods_name}}</span> <span>实付:{{goods.goods_total_price}} ¥</span></div>
            <div>{{goods.goods_price}}</div>
            <div>x{{goods.goods_number}}</div>
          </div>
          <el-divider></el-divider>
        </div>
        <div class="goods_count">
          <h3>共计:{{orders.order_price}}</h3>
        </div>
      </el-card>
      <el-card>
        <el-descriptions>
          <el-descriptions-item label="订单编号">{{orders.order_number}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="下单时间">{{orders.create_time|dateFormat}}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-dialog>
<script>
	... ...
    // 订单详情信息
    orders: '',
    // 订单详情对话框
    dialogVisible: false
    ... ...
    details(id) {
        getOrders(id).then(res => {
          const data = res.data
          if (data.meta.status !== 200) {
            return this.$message.error(data.meta.msg)
          }
          this.orders = data.data
          // 根据商品编号获取商品详情信息
          this.orders.goods.forEach((item, index) => {
            getGoods(item.goods_id).then(res => {
              this.$set(this.orders.goods[index], 'goods_name', res.data.data.goods_name)
              this.$set(this.orders.goods[index], 'goods_img', res.data.data.pics[0].pics_sma)
            })
          })
        })
        this.dialogVisible = true
      }
</script>
<style lang="scss">
    .orders {
    margin: 5px 0px
  }

  .receiving-icon {
    width: 20%;
    font-size: 4rem;
    color: #F56C6C;
    float: left;
  }

  .receiving-info {
    width: 80%;
    display: inline-block;
    color: #606266;
  }

  .goods_img {
    width: 20%;
    float: left;
  }

  .goods_info {
    width: 75%;
    height: 80px;
    display: inline-block;

    div {
      text-align: right;
      color: #909399;
      margin-bottom: 5px;

      span:first-child {
        display: inline-block;
        overflow: hidden;
        width: 60%;
        color: #000000;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      span:last-child {
        width: 30%;
        color: #000000;
        display: inline-block;
      }
    }
  }

  .goods_count {
    text-align: right;
  }
</style>

制作省市区县联动

打开今天的资料,找到素材文件夹,复制citydata.js文件到components/order文件夹中
然后导入citydata.js文件

<script>
  import cityData from "./citydata.js"
</script>

具体代码如下:

//给修改地址按钮添加点击事件
<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditAddress"></el-button>
<!-- 修改地址对话框 -->
    <el-dialog title="修改收货地址" :visible.sync="addressVisible" width="50%" @close="addressDialogClosed">
      <el-alert title="已经发货,收货地址无法修改" type="error" :closable="false">
      </el-alert>
      <!-- 添加表单 -->
      <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
        <el-form-item label="省市区县" prop="address1">
          <el-cascader :options="cityData" v-model="addressForm.address1" :disabled="isDisable"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="addressForm.address2" :disabled="isDisable"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addressVisible = false">取 消</el-button>
        <el-button type="primary" @click="addressVisible = false">确 定</el-button>
      </span>
    </el-dialog>

//js部分的代码
<script>
import cityData from "./citydata.js"
export default {
  data() {
    return {
      ......
      // 控制修改地址对话框的显示和隐藏
        addressVisible: false,
        isDisable: false,
        // 修改收货地址的表单
        addressForm: {
          address1: [],
          address2: ''
        },
        addressFormRules: {
          address1: [{
            required: true,
            message: '请选择省市区县',
            trigger: 'blur'
          }],
          address2: [{
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }]
        },
        // 将导入的cityData数据保存起来
        cityData: cityData
        }
  },methods: {
    ......
    showEditAddress() {
      // 当用户点击修改收货地址按钮时触发
      this.addressVisible = true;
    },
    addressDialogClosed(){
        this.$refs.addressFormRef.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-cascader{
    width: 100%;
}
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue+ElementUI电商项目(六) 的相关文章

  • Vuetify:v-ripple 只能用于块级元素

    我今天刚开始收到此错误 它破坏了我的整个网站 因为我像个傻瓜一样在页面加载时加载 Vuetify 有谁知道这意味着什么或如何解决它 谷歌搜索没有发现任何有用的信息 Edit 对于因网站也损坏而发现此问题的任何人 这可能是因为您加载的位置vu
  • workbox webpack 插件从预缓存清单中排除文件夹

    我正在将 workbox webpack 插件与 vue cli 3 一起使用 并且我想将文件夹中的文件排除在外 以免添加到预缓存清单中 请参阅下面我当前的文件结构 src 资产 CSS 壳文件1 svg文件2 svg文件3 svg svg
  • Vue 组件方法未在动态 HTML 中的事件上运行

    我正在尝试动态创建一些 HTML 内容并将 Vue 组件方法绑定到元素上的事件 然而这不起作用 下面是问题的描述和测试用例的片段 重现问题的步骤 Click 点我1 观察控制台 Click 切换工具提示的弹出框 Click 点我2 观察控制
  • 如何更改 Vuetify 日历日期格式

    我正在尝试在以下 Vuetify 日历上启用输入事件 https github com vuetifyjs vuetify blob master packages docs src examples calendars complex e
  • 如何突出显示 Vuetify 菜单中的所选项目?

    我的侧边栏中有一个菜单 使用 vue router
  • 如何在卡组bootstrap vue上设置行列?

    我的 vue 组件是这样的
  • 如何在 Nuxt 中点击链接下载文件?

    我遇到了一个边缘情况问题 如果用户浏览几条 Nuxt 路线 单击网站 徽标 这是一个锚标记返回主页 然后单击浏览器本机后退按钮 最后单击一个应该的链接要打开 pdf 它会重定向到我的 404 页面 如果用户在页面加载时单击 pdf 链接 它
  • 如何以编程方式添加 Vue 3 组件?

    Vue 3 没有 Vue extend 方法 因此这里的示例不起作用 https css tricks com creating vue js component instances programmatically https css t
  • Vue.js 动态图像路径未加载

    我试图在单个文件组件中动态加载图像 但收到错误消息 指出无法找到该模块 我想我正在尝试做同样的事情这个帖子 https stackoverflow com questions 40491506 vue js dynamic images n
  • 如何隔离 Vuetify 全局样式

    我已经开始在旧的现有项目中将 Vue js 与 Vuetify 结合使用 所以我没有重写所有前端 我只是导入了Vue并替换了一些部分 然后我注意到一个非常意想不到的行为 Vuetify 具有常见类的全局样式 例如 title它不仅影响整个页
  • 使用 vue.js 显示 json 结果

    您好 我尝试使用 vue js 显示 json 文件结果 目标是结果将显示在值上 这是我的代码 data return fetchData function var self this self http get api casetotal
  • Asyncdata 与 Fetch 之间的区别

    获取数据和异步数据之间的确切区别是什么 官方文档是这么说的 异步数据 您可能想要获取数据并在服务器端呈现它 Nuxt js 添加 asyncData 方法 让您可以在之前处理异步操作 设置元件数据 异步数据每次在加载组件之前调用 仅适用于
  • { ...obj1, obj2 } 到底做什么[重复]

    这个问题在这里已经有答案了 假设我们有两个对象 const state fishes some obj data animals some obj data const animals some NEW data 在Vuex中有一个方法re
  • 如何在 vuex nuxt 中获取嵌套 getter

    i have store index js像这样 new Vuex Store modules nav namespaced true modules message namespaced true state count 0 conver
  • 未向导出的模块提供此上下文

    我对问题的提出感到不满意 受到鼓励提出改进建议 另外 请记住 由于无知 无知导致烦恼 我对问题的诊断可能有缺陷 对于那个很抱歉 In 这个答案 https stackoverflow com a 40893583 1525840建议使用th
  • 在新窗口中打开 VueJS 组件

    我有一个只有一页的基本 VueJS 应用程序 它不是 SPA 而且我不使用 vue router 我想实现一个按钮 单击该按钮时会使用我的 Vue 组件之一的内容执行 window open 函数 查看来自的文档window open ht
  • 如何将 Jitsi Meet 添加到 Vuejs

    我已在 public html 的正文中加载了 jitsi meet 脚本 并且我有一个组件 如下所示
  • FontAwesome SVG 图标与 Vuetify - 如何在 v-icon/prepend-icon 中使用?

    我是 Vue 新手 找不到如何在 v icon 和 prepend icon 中使用 FA SVG 图标的确切答案 如果我使用
  • 如何以编程方式启动 Vuetify 对话框并等待响应

    我对 Vue js 和 Vuetify 相当陌生 使用 AngularJS 好几年了 但我们公司正在转向 Vue js 我想要完成的是 当用户单击 登录 按钮时 它会执行一些检查 即用户名不能为空 并启动 Vuetify 对话框来提醒用户
  • Vue中有类似React.Fragment的东西吗?

    在 React 中我可以做这样的事情 parent component export default return div div 1 div div

随机推荐

  • RabbitMQ图文详解

    重新整理了涉及资料的一些语言描述 排版而使用了自己的描述 对一些地方做了补充说明 比如解释专有名词 类比说明 对比说明 注意事项 提升了总结归纳性 尽可能在每个知识点上都使用一句话 关键词概括 更注重在实际上怎么应用 提出并回答了一些问题
  • C++ 函数重载(overroad) 覆盖(override) 隐藏(hide) 的区别

    C 函数重载 overroad 覆盖 override 隐藏 hide 的区别 原文转自 http blog chinaunix net u 15921 showart 227111 html 成员函数被重载的特征 1 相同的范围 在同一个
  • 2020年数学建模国赛C题题目和解题思路

    2020年数学建模国赛C题题目 在实际中 由于中小微企业规模相对较小 也缺少抵押资产 因此银行通常是依据信贷政策 企业的交易票据信息和上下游企业的影响力 向实力强 供求关系稳定的企业提供贷款 并可以对信誉高 信贷风险小的企业给予利率优惠 银
  • 安全防御——防火墙一

    安全防御 防火墙一 1 什么是防火墙 2 互联网为什么会出现防火墙 3 状态防火墙工作原理 4 防火墙如何处理双通道协议 5 防火墙如何处理nat 6 你知道哪些防火墙 以及防火墙的技术分类 防火墙种类 1 硬件防火墙 2 软件防火墙 个人
  • Qt入门(12)——Qt国际化

    应用的国际化就是使应用成为能被非本国的人使用的过程 有的情况下 国际化很简单 例如 使一个US应用可被Australian或者British用户理解 工作可能少于几个拼写修正 但是使一个US应用可以被Japanese用户使用 或者一个Kor
  • React 在componentDidMount使用 echarts,样式未加载导致Echart自适应div出错

    只需要修改componentDidMount中加入setTimeout gt echarts代码 import React Component from react import Main css 引入 ECharts 主模块 ts ign
  • 创建聚集索引

    一 ibuf init at db start Creates the insert buffer data structure at a database startup and initializes the data structur
  • 深度学习(十九)——FCN, SegNet, DeconvNet, DeepLab, ENet, GCN

    前DL时代的语义分割 续 Grab cut Grab cut是微软剑桥研究院于2004年提出的著名交互式图像语义分割方法 与N cut一样 grab cut同样也是基于图划分 不过grab cut是其改进版本 可以看作迭代式的语义分割算法
  • JDBC操作

    目录 一 实现JDBC步骤 1 注册驱动 1 1导入驱动包 1 1异常处理 2 创建连接 2 1导包 2 2处理异常 3 得到执行sql语句的Statement对象 3 1修改数据操作 3 2删除数据操作 3 3插入数据操作 3 4查询数据
  • vue-quill-editor富文本编辑器的汉化版 及 使用心得

    现在网上上有很多的富文本编辑器 但我个人还是非常喜欢Vue家族的vue quill deitor 虽然说它只支持IE10 好 废话不多说直接上代码 现在是见证奇迹的时刻 在vue中使用quill呢 我们需要npm进行安装 安装命令如下 第一
  • spring security 实现免登陆功能

    spring security 实现免登陆功能大体也是基于COOKIE来实现的 主要配置信息
  • Spring Boot系列之修改内置Tomcat版本

    背景 在 spring boot 出来之前 或者没有使用 spring boot 时 Java EE 开发时如果选择 tomcat servlet 需要自己指定 tomcat 版本 此处没有考虑那种直接把打包的 war 直接扔到本地安装的任
  • oracle云避坑小记

    前言 最近白嫖oracle云 用于评估arm64 架构的服务器 发现 oracle 云系统和国内的主要云服务厂商 如 阿里云或者腾讯云 默认的一些策略有所不同 以下是一些避坑指南 一 避坑小记 基于 oracle linux 8 关闭 fi
  • 《代码大全2》第3章 三思而后行,前期准备

    目录 前言 本章主题 3 1 前期准备的重要性 3 1 1 处于不同阶段强调质量 3 1 2 前期准备对 构建活动 的影响 3 1 3 准备不周全的诱因 3 1 4 我理解的准备周全 纯属个人理解 3 2 辨明你所从事的软件的类型 3 2
  • vue.config.js

    vue config js相关的知识信息 一 vue config js是vue打包管理的配置文件 旨在给开发者们自定义自己的配置 1 该文件的根式统一 为导出配置项选项 例如 在对象里面书写我们自己的配置项目 二 具体的配置内容 项目中常
  • 0x00007FFD33144F99处(位于xx.exe中)引发的异常:Microsoft C++异常 查处方法

    一般这样的异常都是try catch语句有异常抛出 比如新建一个工程 int main try throw 1 catch int excep if excep 1 printf throw 1 n return 0 运行就会在输出的调试信
  • CAD球体密堆积3D插件 随机紧密堆积 球体堆积结构

    插件简介 CAD球体密堆积3D插件可用于生成随机紧密堆积的球体模型 插件可指定投放区域 球体集料的粒径范围 球体数量等信息 插件采用模拟重力作用下球体的碰撞堆积行为 实现球体集料的随机紧密堆积模型 插件通过AutoCAD软件进行绘图 生成的
  • CloudCompare——点云标注

    目录 1 概述 2 软件实现 3 合并点云 1 概述 对给定的点云添加分类标签 2 软件实现 1 裁剪点云 裁剪出需要标注的部分 并选中 2 进行标注 工具栏操作 Edit gt Scalar fields gt Add constant
  • [Python入门系列之十]Python 中的类和对象

    Python 中的类和对象 类和对象是面向对象编程 Object Oriented Programming 的基础 类是一种用户定义的数据类型 它封装了属性和方法 用于描述某一类对象的行为和特征 而对象则是类的实例化 是具体的 实际存在的实
  • Vue+ElementUI电商项目(六)

    订单列表 创建订单列表路由组件并添加路由规则 在view中新建orderManagement文件夹 新建Order vue组件 组件中添加代码如下