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
  • 如何在 Vuejs 中加载 Pixi 实例?

    我正在 VueJS 组件中学习 PixiJS 如下所示Pixi教程 https github com kittykatattack learningPixi我控制台显示此错误 vue runtime esm js 2b0e 619 Vue
  • Vue Router - 使用 Vue 2 Composition API 获取路由参数

    我正在使用Vue 2 组合 API https github com vuejs composition api并想从我的 Vue Router 访问路由参数setup method 如中所述Vue 路由器文档 https next rou
  • workbox webpack 插件从预缓存清单中排除文件夹

    我正在将 workbox webpack 插件与 vue cli 3 一起使用 并且我想将文件夹中的文件排除在外 以免添加到预缓存清单中 请参阅下面我当前的文件结构 src 资产 CSS 壳文件1 svg文件2 svg文件3 svg svg
  • 每次页面重新启动时,Firebase.auth().currentUser 都会变为 null

    我正在使用 firebase 身份验证与 vue 应用程序 每次登录用户后重新启动页面时 currentUser 都会变为 null firebase auth signInWithEmailAndPassword this email t
  • 如何更改 Vuetify 日历日期格式

    我正在尝试在以下 Vuetify 日历上启用输入事件 https github com vuetifyjs vuetify blob master packages docs src examples calendars complex e
  • Vue js按钮冻结dom

    我试图在按下按钮时切换包含加载动画的跨度 直到使用 v if 函数完成 但是当我按下按钮时 DOM 冻结并且 span 元素保持不变 直到函数调用结束 如何让 DOM 不冻结并显示加载图标 非阻塞按钮按下可能是一个解决方案 HTML
  • 将 VueJs 组件添加到 Django 模板中

    我正在开发一个 Django 网站 我希望将一些 Vue 组件 散布 到 Django 渲染的模板中 我正在单个存储库中工作 并使用 webpack 设置来创建我在 Django 模板中使用的 style js 包 我正在努力让功能按照我想
  • 在vue中提交表单。如何引用表单元素?

    我想从我的 Vue 页面通过一种方法进行经典的表单提交 我不想使用
  • 如何在Vue3中对setup的内部函数(不是返回)进行单元测试?

    我想这样测试 情况1 错误 无法监视内部属性 因为它不是函数 改为未定义 组件 vue export default setup function outer inner function inner do something for on
  • node.js、vue.js 和express.js 堆栈开发

    我正在尝试使用 Linux 上的 Visual Studio Code IDE 使用 vue js express js 和 node js 创建一个 Web 应用程序 根据网上的一些文档 我读到安装 vue js 后 可以创建一个vue
  • 模拟安装挂钩 Jest 测试装置

    我正在对组件进行一些单元测试 但是 在某些组件中 我有一些东西在运行mounted使我的测试失败的钩子 我设法模拟了我不需要的方法 但是 我想知道是否有一种解决方法可以模拟mounted钩住自己 components attendeesLi
  • 如何修复套接字 io 中的 400 错误错误请求?

    我有一个前端应用程序 VUE JS 我有一个后端 Nest JS Vue JS 应用程序使用 vue socket io extended 库通过 websockets 从后端获取数据 当 Vue JS 应用程序启动时 我在浏览器中看到错误
  • Vue js - 在同一级别的两个组件内传递数据

    我有需要从一个传递的数据component1到另一个component2 我不使用vuex or router 组件树 Parent Component1 Component2 从一开始component1我发出 ajax 请求 检索信息并
  • 无法使用Vue获取灵活元素的CSS属性值

    我正在尝试获取 CSSwidth灵活元素的属性 但由于某种原因它不起作用 代码笔 https codepen io anon pen pLEwdp editors 1010 https codepen io anon pen pLEwdp
  • 在新窗口中打开 VueJS 组件

    我有一个只有一页的基本 VueJS 应用程序 它不是 SPA 而且我不使用 vue router 我想实现一个按钮 单击该按钮时会使用我的 Vue 组件之一的内容执行 window open 函数 查看来自的文档window open ht
  • 有没有V型斗篷的反面?

    根据VueJS 文档 https v2 vuejs org v2 api v cloak v cloak 指令可用于隐藏未编译的 Mustache 绑定 直到 Vue 实例准备就绪 换句话说 我可以隐藏一个div或类似的东西 当 vue 准
  • 个人Vue 3组件包缺少模板或渲染函数

    我最近将自己的 Vue 3 组件上传到 NPM 以供其他人使用 当在其他项目中使用它时 它会发出以下警告 Vue warn Component is missing template or render function at
  • 从组件传递数据

    我对 Vue 相当陌生 我正在尝试将数据从组件传递到视图 我不确定我是否在使用props正确的 我有一个对话框 当我保存时 我想将数据插入数据库 我也想重复使用addCustomer function 这就是为什么我没有将该函数放置在组件中
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过

随机推荐

  • 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组件 组件中添加代码如下