订单管理-外卖订单-表格

src/views/platform/order_management/delivery_order.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="app-container">
+        <el-tabs :activeName="activeName" type="card">
+            <el-tab-pane label="全部" name="all"></el-tab-pane>
+            <el-tab-pane label="待支付" name="pay"></el-tab-pane>
+            <el-tab-pane label="商家待接单" name="pending_order"></el-tab-pane>
+            <el-tab-pane label="正在召唤骑手" name="summoning_rider"></el-tab-pane>
+            <el-tab-pane label="骑手正在赶往商家" name="rider_en_route"></el-tab-pane>
+            <el-tab-pane label="配送中" name="delivering"></el-tab-pane>
+            <el-tab-pane label="已完成" name="finish"></el-tab-pane>
+            <el-tab-pane label="已取消" name="cancel"></el-tab-pane>
+        </el-tabs>
+
+        <el-form :inline="true">
+            <el-form-item>
+                <el-input placeholder="请输入用户昵称"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input placeholder="请输入订单号"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input placeholder="请选择门店"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd"
+                    type="daterange" range-separator="-" start-placeholder="开始日期"
+                    end-placeholder="结束日期"></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary">查询</el-button>
+                <el-button>重置</el-button>
+            </el-form-item>
+            <br />
+            <el-form-item>
+                <el-select v-model="queryParams.deliveryType" placeholder="全部配送类型" clearable>
+                    <el-option v-for="dict in dict.type.delivery_type" :key="dict.value" :label="dict.label"
+                        :value="dict.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <br />
+            <el-button>导出</el-button>
+        </el-form>
+
+
+
+        <el-table :data="dataList" border class="table">
+            <el-table-column align="center" type="selection"></el-table-column>
+            <el-table-column align="center" label="订单号">123131141</el-table-column>
+            <el-table-column align="center" label="用户">张三</el-table-column>
+            <el-table-column align="center" label="实际支付金额">￥120.00</el-table-column>
+            <el-table-column align="center" label="共计/件">5</el-table-column>
+            <el-table-column align="center" label="购买门店">门店名称</el-table-column>
+            <el-table-column align="center" label="订单状态">待支付</el-table-column>
+            <el-table-column align="center" label="配送类型">美团转送</el-table-column>
+            <el-table-column align="center" label="创建时间">2022-12-31 12:31</el-table-column>
+            <el-table-column align="center" label="收货地址">河南省郑州市金水区光明路125号</el-table-column>
+            <el-table-column align="center" label="操作">
+                <el-button type="text">订单详情</el-button>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" @pagination="getList" />
+    </div>
+</template>
+<script>
+export default {
+    name: 'DeliveryOrder',
+    dicts: ['delivery_type'],
+    data() {
+        return {
+            dataList: [{}],
+            total: 1,
+            activeName: "all",
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                dateRange: undefined,
+                deliveryType: undefined
+            },
+        }
+    },
+    methods: {
+        getList() {
+
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.table {
+    margin-top: 10px;
+}
+</style>

src/views/platform/product_management/unit.vue

@@ -30,6 +30,9 @@
             </el-table-column>
 
         </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" @pagination="getList" />
     </div>
 </template>
 <script>
@@ -46,6 +49,11 @@ export default {
                 dateRange: undefined
             },
         }
+    },
+    methods: {
+        getList() {
+
+        }
     }
 }
 </script>