Vue+ElementUI电商项目（六）

订单列表

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

//在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>