自营商城-物流订单/订单管理

src/views/platform/self-operated-mall/index.vue

@@ -1,22 +1,22 @@
 <template>
-    <el-tabs v-model="activeName" type="border-card" class="custom-tab" v-if="showList">
-        <el-tab-pane label="全部商品（120）" name="all">
-            全部商品
-            <base-form @show-add="showList = false" />
-        </el-tab-pane>
-        <el-tab-pane label="上架商品（120）" name="on-shelf">
-            上架商品
-            <base-form @show-add="showList = false" />
-        </el-tab-pane>
-        <el-tab-pane label="下架商品（120）" name="off-shelf">
-            下架商品
-            <base-form @show-add="showList = false" />
-        </el-tab-pane>
-        <el-tab-pane label="库存预警（120）" name="warn">
-            库存预警
-            <base-form @show-add="showList = false" />
-        </el-tab-pane>
-    </el-tabs>
+    <div v-if="showList">
+        <el-tabs v-model="activeName" type="border-card" class="custom-tab">
+            <el-tab-pane label="全部商品（120）" name="all">
+                全部商品
+
+            </el-tab-pane>
+            <el-tab-pane label="上架商品（120）" name="on-shelf">
+                上架商品
+            </el-tab-pane>
+            <el-tab-pane label="下架商品（120）" name="off-shelf">
+                下架商品
+            </el-tab-pane>
+            <el-tab-pane label="库存预警（120）" name="warn">
+                库存预警
+            </el-tab-pane>
+        </el-tabs>
+        <base-form @show-add="showList = false" />
+    </div>
     <add-product v-else @close="showList = true" />
 </template>
 <script>

src/views/platform/self-operated-mall/order.vue

@@ -0,0 +1,111 @@
+<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="shipping"></el-tab-pane>
+            <el-tab-pane label="待收货" name="dispatch"></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-row type="flex">
+                <el-col>
+                    <el-form-item>
+                        <el-input placeholder="请输入用户昵称"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-input placeholder="请输入订单号"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col class="right">
+                    <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>
+                </el-col>
+            </el-row>
+            <el-form-item>
+                <el-input placeholder="全部物流"></el-input>
+            </el-form-item>
+        </el-form>
+
+        <el-button>导出</el-button>
+
+        <el-table :data="dataList" class="table">
+            <el-table-column type="selection" align="center"></el-table-column>
+            <el-table-column label="订单号" align="center">
+                12313141
+            </el-table-column>
+            <el-table-column label="用户" align="center">
+                张三
+            </el-table-column>
+            <el-table-column label="实际支付金额" align="center">
+                ￥120.00
+            </el-table-column>
+            <el-table-column label="共计/件" align="center">
+                5
+            </el-table-column>
+            <el-table-column label="购买门店" align="center">
+                门店名称
+            </el-table-column>
+            <el-table-column label="订单状态" align="center">
+                待支付
+            </el-table-column>
+            <el-table-column label="物流" align="center">
+                顺丰
+            </el-table-column>
+            <el-table-column label="创建时间" align="center">
+                2022-12-31 12:31
+            </el-table-column>
+            <el-table-column label="收货地址" align="center">
+                河南省郑州市金水区光明路125号
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+                <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: "Order",
+    data() {
+        return {
+            dataList: [undefined],
+            activeName: "all",
+            total: 1,
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                dateRange: undefined
+            }
+        }
+    },
+    methods: {
+        getList() {
+
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.table {
+    margin-top: 10px;
+}
+
+.right {
+    display: flex;
+    justify-content: right;
+}
+</style>