vue写商品管理

推荐

这是template部分

<template>

 <!– 这是main内容 –>

  <div>

    <!– 面包屑导航–>

    <el-breadcrumb separator-custom-class=”el-icon-pink-heart”>

          <el-breadcrumb-item :to=”{ path: ‘/home’ }” class=’bread’>

            <i class=”el-icon-s-home” style=’font-size: 18px;’></i>

            <span style=’color:#FFC1C1;font-size:18px;’>首页</span>

          </el-breadcrumb-item>

          <el-breadcrumb-item>

            <i class=”el-icon-s-goods” style=’font-size: 18px;’></i>

            <span style=’color:#FFC1C1;font-size:18px;’>订单管理</span>

          </el-breadcrumb-item>

          <el-breadcrumb-item>

            <i class=”el-icon-user-solid” style=’font-size: 18px;’></i>

           <span style=’color:#FFC1C1;font-size:18px;’>订单列表</span>

          </el-breadcrumb-item>

    </el-breadcrumb>

    <el-card class=”girl-style-card”>

  <el-row :gutter=”20″>

    <el-col :span=”8″>

      <el-input placeholder=”请输入订单编号” v-model=”queryInfo.query” clearable @clear=”getOrderList”>

        <template #append>

          <el-button icon=”el-icon-search” @click=”getOrderList” class=”search-button”></el-button>

        </template>

      </el-input>

    </el-col>

    <el-button type=”danger” class=”batch-delete-button” @click=”handleBatchDelete” >批量删除</el-button>

  </el-row>

      <!–订单列表–>

      <el-table :data=”orderList” @selection-change=”handleSelectionChange” border stripe @expand-change=”getOrderDetail” style=”margin-top:10px;”>

         <el-table-column type=”selection” width=”40″></el-table-column>

        <el-table-column label=”明细” type=”expand”>

          <template slot-scope=”scope”>

            <!– 订单下明细的商品列表–>

            <el-table :data=”scope.row.detail” border stripe=””>

              <el-table-column label=”封面” width=”100px” header-align=”center” align=”center”>

                <template slot-scope=”sc”>

                  <el-popover placement=”top-start” trigger=”hover”>

                    <img :src=”sc.row.url” style=”width: 150px; height: 150px” />

                    <img :src=”sc.row.url” slot=”reference” style=”width: 50px; height: 50px” />

                  </el-popover>

                </template>

              </el-table-column>

              <el-table-column label=”商品名称” prop=”goods_name”></el-table-column>

              <el-table-column label=”商品重量” prop=”goods_weight” width=”100px”></el-table-column>

              <el-table-column label=”商品数量” prop=”goods_number” width=”100px”></el-table-column>

              <el-table-column label=”商品价格(元)” prop=”goods_price” width=”100px”></el-table-column>

              <el-table-column label=”总价” prop=”goods_total_price” width=”100px”></el-table-column>

            </el-table>

          </template>

        </el-table-column>

        <el-table-column label=”序号” type=”index”></el-table-column>

         <el-table-column label=”点单用户” prop=”order_user”></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=”是否付款”>

          <template slot-scope=”scope”>

            <el-tag effect=”dark” size=”mini” type=”success” v-if=”scope.row.pay_status === ‘1’”>已付款</el-tag>

            <el-tag effect=”dark” size=”mini” 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”></el-table-column>

        <el-table-column label=”操作”>

          <template slot-scope=”scope”>

            <el-tooltip effect=”dark” content=”修改订单信息” placement=”top” :enterable=”false”>

              <el-button type=”primary” size=”mini” icon=”el-icon-edit” @click=”editOrder(scope.row.order_id)”></el-button>

            </el-tooltip>

            <el-tooltip effect=”dark” content=”查看订单进度” placement=”top” :enterable=”false”>

              <el-button type=”warning” size=”mini” icon=”el-icon-location” @click=”showProgessDialog(scope.row.order_id)”></el-button>

            </el-tooltip>

          </template>

        </el-table-column>

      </el-table>

      <!– 分页–>

      <el-pagination

        @size-change=”handleSizeChange”

        @current-change=”handleCurrentChange”

        :current-page=”queryInfo.pagenum”

        :page-sizes=”[5, 10, 15]”

        :page-size=”queryInfo.pagesize”

        layout=”total, sizes, prev, pager, next, jumper”

        :total=”total”

      >

      </el-pagination>

    </el-card>

    <el-dialog title=”修改订单信息” :visible.sync=”addresVisible” width=”50%” @close=”addressDialogClosed” v-if=”currentOrder”>

  <el-form :model=”currentOrder” :rules=”addressFormRules” ref=”addressFormRef” label-width=”100px”>

    <el-form-item label=”订单编号”>

      <el-input v-model=”currentOrder.order_number”></el-input>

    </el-form-item>

    <el-form-item label=”订单价格(元)”>

      <el-input v-model=”currentOrder.order_price”></el-input>

    </el-form-item>

    <el-form-item label=”是否付款”>

      <el-switch v-model=”currentOrder.pay_status” active-color=”#13ce66″ inactive-color=”#ff4949″></el-switch>

    </el-form-item>

    <el-form-item label=”是否发货”>

      <el-switch v-model=”currentOrder.is_send” active-color=”#13ce66″ inactive-color=”#ff4949″></el-switch>

    </el-form-item>

  </el-form>

  <span slot=”footer” class=”dialog-footer”>

    <el-button @click=”addresVisible = false”>取 消</el-button>

    <el-button type=”primary” @click=”editAddress”>确 定</el-button>

  </span>

</el-dialog>

    <!– 查看物流进度的对话框–>

    <el-dialog title=”物流进度” :visible.sync=”progessVisible” width=”50%”>

      <el-table :data=”selectedOrderDetails.detail” style=”margin-top: 20px;”>

    <el-table-column prop=”goods_name” label=”商品名称” ></el-table-column>

    <el-table-column prop=”goods_weight” label=”商品重量”></el-table-column>

    <el-table-column prop=”goods_number” label=”商品数量”></el-table-column>

    <el-table-column prop=”goods_price” label=”商品价格(元)”></el-table-column>

    <el-table-column prop=”goods_total_price” label=”总价”></el-table-column>

    <el-table-column label=”状态”>

      <template slot-scope=”scope”>

         <div :style=”{ backgroundColor: getStatusColor(scope.row.goods_status), padding: ‘5px’, borderRadius: ‘5px’}”>

          <img :src=”getStatusImage(scope.row.goods_status)” :alt=”scope.row.goods_status” style=”height: 20px; width: 20px;”>

          {{ scope.row.goods_status }}

        </div>

        <el-tag type=”success” v-if=”scope.row.goods_status === ‘已完成'”>已完成</el-tag>

        <el-tag type=”warning” v-else-if=”scope.row.goods_status === ‘待取餐'”>待取餐</el-tag>

        <el-tag type=”warning” v-else-if=”scope.row.goods_status === ‘进行中'”>进行中</el-tag>

        <el-tag type=”info” v-else>未付款</el-tag>

      </template>

    </el-table-column>

  </el-table>

    </el-dialog>

  </div>

</template>

这是script

<script>

import axios from ‘axios’

import { pcaTextArr  } from ‘element-china-area-data’

export default {

  data() {

    return {

      pcaTextArr,

      selectedOrders: [], // 存放选中的订单ID

      selectedOptions: [],

      queryInfo: {

        query: ”,

        pagenum: 1,

        pagesize: 10,

      },

      detail: {},

      selectedOrderDetails: { detail: [] },

      // 添加模拟的订单列表数据

      orderList: [],

      total: 2, // 总订单数更新为2

      addresVisible: false,

      // 省市区数据保持不变

      currentOrder: null, // 当前正在编辑的订单

      addressForm: {

        address1: [],

        address2: ”,

      },

      addressFormRules: {

        address1: [{ required: true, message: ‘请选择省市区/县’, trigger: ‘blur’ }],

        address2: [{ required: true, message: ‘请输入详细地址’, trigger: ‘blur’ }],

      },

      order_id: null,

      progessVisible: false,

      progressInfo: [],

    }

  },

  created() {

    this.getOrderList(); // 组件创建后立即获取订单列表

  },

  methods: {

     editOrder(orderId) {

          const order = this.orderList.find(order => order.order_id === orderId);

          if (order) {

            this.currentOrder = JSON.parse(JSON.stringify(order)); // 深拷贝订单数据

            this.addresVisible = true; // 显示编辑对话框

          }

        },

     async editAddress() {

              if (!this.currentOrder) {

                console.error(“没有当前订单信息”);

                return;

              }

              try {

                // 直接传递布尔值,不进行字符串转换

                const updatedOrder = {

                  order_number: this.currentOrder.order_number,

                  order_price: this.currentOrder.order_price.toString(), // 转换为字符串

                  pay_status: this.currentOrder.pay_status.toString(), // 将布尔值转换为字符串

                  is_send: this.currentOrder.is_send.toString(), // 将布尔值转换为字符串

                };

                const orderId = this.currentOrder.order_id;

                const url = `http://localhost:8081/api/orders/update/${orderId}`;

                await axios.put(url, updatedOrder);

                this.addresVisible = false;

                this.addressDialogClosed();

                this.getOrderList();

                this.$message.success(‘订单更新成功!’);

              } catch (error) {

                console.error(“更新订单失败:”, error);

                this.$message.error(‘更新订单失败,无对应用户!’);

              }

            },

     getStatusColor(status) {

            switch (status) {

              case ‘进行中’:

                return ‘#007bff’; // 蓝色

              case ‘已完成’:

                return ‘#28a745’; // 绿色

              case ‘待取餐’:

                return ‘#ffc107’; // 黄色

              default:

                return ‘#FF6A6A’; // 未付款

            }

          },

     getStatusImage(status) {

        switch (status) {

          case ‘进行中’:

            return ‘https://img.tukuppt.com/png_preview/00/21/98/iHZCxBFz4r.jpg!/fw/780’;

          case ‘已完成’:

            return ‘https://img.ixintu.com/download/jpg/20200814/db658ac370f4886f32474c5ffd22c743_512_362.jpg!ys’;

          case ‘待取餐’:

            return ‘https://tse3-mm.cn.bing.net/th/id/OIP-C.bm6j7XfidV4cWivlxhy9GgHaFO?w=236&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7’;

          default:

            return ‘https://qiniu.staykoi.asia/%E6%94%AF%E4%BB%98%E5%AE%9D.svg’;

        }

      },

      async getOrderList() {

          try {

            // 获取所有订单数据

            const response = await axios.get(‘http://localhost:8081/api/orders’);

            // 假设后端直接返回了订单列表数据

            let allOrders = response.data;

            // 根据用户输入的订单编号进行过滤,如果用户没有输入,则显示全部订单

            if (this.queryInfo.query.trim()) {

              this.orderList = allOrders.filter(order => 

                order.order_number.includes(this.queryInfo.query.trim())

              );

            } else {

              this.orderList = allOrders;

            }

          } catch (error) {

            console.error(“获取订单列表失败:”, error);

          }

        },

    async getOrderDetail(row) {

        try {

          const response = await axios.get(`http://localhost:8081/api/order/detail/${row.order_id}`);

          // 直接使用response.data更新detail属性

          row.detail = response.data; // 此处修改为直接赋值response.data

          console.log(“获取订单详情成功:”, response.data);

        } catch (error) {

          console.error(“获取订单详情失败:”, error);

        }

      },

     handleSizeChange(pagesize) {

      this.queryInfo.pagesize = pagesize;

      this.getOrderList();

    },

    handleCurrentChange(pagenum) {

      this.queryInfo.pagenum = pagenum;

      this.getOrderList();

    },

    addressDialogClosed() {

      this.$refs.addressFormRef.resetFields();

    },

     handleSelectionChange(val) {

    this.selectedOrders = val.map(item => item.order_id); // 假设每个订单对象都有一个唯一的 order_id 字段

  },

  async handleBatchDelete() {

    if (this.selectedOrders.length === 0) {

      this.$message.error(‘请至少选择一个订单进行删除’);

      return;

    }

    // 调用API进行批量删除,这里假设你的API需要一个包含订单ID的数组

    try {

      await axios.post(‘http://localhost:8081/api/orders/delete’, { orderIds: this.selectedOrders });

      this.$message.success(‘订单删除成功’);

      this.getOrderList(); // 组件创建后立即获取订单列表

      // 刷新订单列表或做其他操作

    } catch (error) {

      this.$message.error(‘删除失败,请稍后重试’);

      console.error(‘Batch delete error:’, error);

    }

  },

    async showProgessDialog(order_id) {

      // 根据order_id找到对应的订单

      const order = this.orderList.find(order => order.order_id === order_id);

      this.selectedOrderDetails = order;

      // 显示物流进度对话框

      this.progessVisible = true;

      },

  },

}

</script>

这是css样式

<style scoped>

.el-card {

  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

  border-radius: 10px;

  border: 1px solid #f9dada;

}

/* 按钮样式调整,圆角和渐变色彩增加少女风 */

.el-button {

  border-radius: 20px;

  font-weight: bold;

  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);

  border: none;

  color: white;

}

/* 输入框样式调整,更加圆润和温柔 */

.el-input__inner {

  border-radius: 20px;

  border: 1px solid #f9dada;

  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);

}

/* 面包屑样式 */

.el-breadcrumb i{

   color: #f06292; /* 粉红色 */

  height:20px; /* 字体大小 */

}

/* 分页组件样式 */

.el-pagination .el-pager li:not(.active) {

  background-color: #f9dada;

}

.el-pagination .el-pager li.active {

  background-color: #f783ac;

  color: white;

}

.batch-delete-button{

  position: absolute;

  right:20px;

}

::v-deep .el-table,

::v-deep .el-table__expanded-cell {

  background-color: #FFF0F5;

  color: #F78FB3; /* 柔和的粉色 */

  font-size: 12px; /* 稍微减小字体大小以适应更柔和的风格 */

}

::v-deep .el-table th,

::v-deep .el-table tr,

::v-deep .el-table td {

  background-color: #FFF0F5;

  border: solid 1px #FFFFE0; 

  color: #F78FB3;

  font-size: 16px;

  height: 5px;

  font-weight: bold;

}

::v-deep .el-table tbody tr:hover > td {

  background: #F0F8FF !important; /* 淡粉色的悬浮效果 */

}

::v-deep .el-table__header-wrapper {

  border: solid 2px #EEDC82; /* 浅粉色边框 */

  box-sizing: border-box;

}

/* 修改el-form的整体背景色和内边距 */

::v-deep .el-form {

  background-color: #FFF0F5; /* 淡粉红背景色 */

  padding: 20px;

  border-radius: 8px; /* 轻微的圆角边框 */

  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); /* 细微的阴影增添层次感 */

}

/* 自定义输入框样式 */

::v-deep .el-form .el-input__inner,

::v-deep .el-form .el-select .el-input__inner {

  border-color: #FFC0CB; /* 边框颜色 */

  background-color: #FFFFFF; /* 背景色 */

  font-weight: bold;

  color: #FF69B4; /* 输入文字颜色 */

}

/* 当输入框获得焦点时的样式 */

::v-deep .el-form .el-input__inner:focus,

::v-deep .el-form .el-select .el-input__inner:focus {

  border-color: #FF69B4; /* 焦点状态下的边框颜色 */

  box-shadow: 0 0 5px #FF69B4; /* 添加细微的发光效果 */

}

/* 修改标签(label)的样式 */

::v-deep .el-form label {

  color: #FF1493; /* 标签字体颜色 */

  font-weight: bold; /* 加粗字体 */

}

/* 自定义按钮样式 */

::v-deep .el-form .el-button {

  background-color: #FFB6C1; /* 按钮背景色 */

  border-color: #FFB6C1; /* 按钮边框颜色 */

  color: #FFFFFF; /* 按钮字体颜色 */

  border-radius: 20px; /* 圆润的按钮边框 */

  font-weight: bold; /* 字体加粗 */

}

/* 按钮hover和active状态样式 */

::v-deep .el-form .el-button:hover {

  background-color: #FF69B4;

  border-color: #FF69B4;

}

::v-deep .el-form .el-button:active {

  background-color: #FF1493;

  border-color: #FF1493;

}

</style>

最终效果

vue写商品管理
vue写商品管理
vue写商品管理
vue写商品管理

并且有删除,搜索过滤,添加商品,重置功能,并且显示商品详情,全部代码已经放在上面了,使用的vue2加element

给TA打赏
共{{data.count}}人
人已打赏
黑科技

宝塔开心版

2024-2-27 9:19:25

快速写真

《偶像大师闪耀色彩》 黛冬优子cosplay

2024-2-16 22:24:19

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 2580996608@qq.com 或点击右侧 私信:许天娱乐 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  • 18 用户总数(个)
  • 1824 文章总数(篇)
  • 浏览总数(PV)
  • 今日发布(篇)
  • 1564 运行天数(天)
立即加入

  • 波浪
  • 波浪
  • 波浪
  • 波浪