From 1967871c75fee39363a99b654d3561d3f7e075d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Mon, 26 Jul 2021 18:26:00 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E7=AE=A1=E7=90=86->=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E8=AE=A2=E5=8D=95=E9=A1=B5=E9=9D=A2=E7=89=881?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |   1 +
 src/api/order/order.ts                   |   9 +
 src/assets/icons/table-nodata.svg        |   2 +
 src/router/asyncRoutes.ts                |   2 +-
 src/styles/common.scss                   |   5 +-
 src/views/order/all-order/FilterForm.vue | 200 +++++++++++++++++++
 src/views/order/all-order/OrderTable.vue | 157 +++++++++++++++
 src/views/order/all-order/Table.vue      | 237 +++++++++++++++++++++++
 src/views/order/all-order/allOrder.ts    |  62 ++++++
 src/views/order/all-order/index.vue      |  65 +++++++
 10 files changed, 738 insertions(+), 2 deletions(-)
 create mode 100644 src/api/order/order.ts
 create mode 100644 src/assets/icons/table-nodata.svg
 create mode 100644 src/views/order/all-order/FilterForm.vue
 create mode 100644 src/views/order/all-order/OrderTable.vue
 create mode 100644 src/views/order/all-order/Table.vue
 create mode 100644 src/views/order/all-order/allOrder.ts
 create mode 100644 src/views/order/all-order/index.vue

diff --git a/package.json b/package.json
index 5724666..39faf5d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "ant-design-vue": "^2.2.0-beta.6",
     "dayjs": "^1.10.5",
     "js-cookie": "^2.2.1",
+    "moment": "^2.29.1",
     "nprogress": "^0.2.0",
     "qs": "^6.10.1",
     "screenfull": "^5.1.0",
diff --git a/src/api/order/order.ts b/src/api/order/order.ts
new file mode 100644
index 0000000..e6c21ea
--- /dev/null
+++ b/src/api/order/order.ts
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+enum Api {
+  ORDER_TABLE = '/api/order/page',
+}
+
+// 获取订单表格数据
+
+export const getOrderTableData = (data: any) => request.get(Api.ORDER_TABLE, data)
diff --git a/src/assets/icons/table-nodata.svg b/src/assets/icons/table-nodata.svg
new file mode 100644
index 0000000..bee87c3
--- /dev/null
+++ b/src/assets/icons/table-nodata.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1626923927719" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1398" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M958.660364 288.642956l0.024559 0L511.996418 65.304332 66.119395 288.23568l-0.830925 0L65.28847 735.350904l446.707948 223.344764 446.714088-223.344764L958.710506 288.642956 958.660364 288.642956 958.660364 288.642956 958.660364 288.642956zM511.996418 119.41267l335.906399 168.380942-127.914298 64.48671L382.46939 184.402847 511.996418 119.41267 511.996418 119.41267 511.996418 119.41267zM323.935252 216.08543l341.852832 164.712389-153.816225 74.501808L176.095135 288.642956 323.935252 216.08543 323.935252 216.08543 323.935252 216.08543zM121.126196 345.139691l17.753339 0-17.753339-0.652869 0-27.915793L484.086765 498.05643l0 390.871245L121.126196 707.446367 121.126196 345.139691 121.126196 345.139691 121.126196 345.139691zM902.86664 372.414895l0 335.031473L539.905048 888.927675 539.905048 498.05643 902.86664 316.571029 902.86664 372.414895 902.86664 372.414895 902.86664 372.414895z" p-id="1399" fill="#dbdbdb"></path></svg>
\ No newline at end of file
diff --git a/src/router/asyncRoutes.ts b/src/router/asyncRoutes.ts
index 2495a07..8990dd3 100644
--- a/src/router/asyncRoutes.ts
+++ b/src/router/asyncRoutes.ts
@@ -10,5 +10,5 @@ export default {
   code8: () => import('@/views/demo/index.vue'),
   code9: () => import('@/views/dashboard/index.vue'),
   code10: () => import('@/views/demo/index.vue'),
-  code24: () => import('@/views/dashboard/index.vue'),
+  code24: () => import('@/views/order/all-order/index.vue'),
 }
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 3cf2b31..55d7a83 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -19,4 +19,7 @@ a:hover {
 	visibility: hidden;
 	display: block;
 	clear: both;
-}
\ No newline at end of file
+}
+ ol, ul {
+		list-style: none;
+ }
\ No newline at end of file
diff --git a/src/views/order/all-order/FilterForm.vue b/src/views/order/all-order/FilterForm.vue
new file mode 100644
index 0000000..bc06214
--- /dev/null
+++ b/src/views/order/all-order/FilterForm.vue
@@ -0,0 +1,200 @@
+<template>
+  <section class="section-filter">
+    <a-form
+      :model="orderParams"
+      class="filter-form"
+      :label-col="{ span: 8 }"
+      :wrapper-col="{ span: 16 }"
+    >
+      <a-form-item label="订单号">
+        <a-input v-model:value="orderParams.orderNo" allow-clear />
+      </a-form-item>
+      <a-form-item label="商品名称">
+        <a-input v-model:value="orderParams.productName" allow-clear />
+      </a-form-item>
+      <a-form-item label="订单类型">
+        <a-select v-model="orderParams.type" @change="(val) => handleChange(val, 'type')">
+          <a-select-option v-for="item in typeOptions" :key="item.value" :value="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="维权状态">
+        <a-select
+          v-model="orderParams.rightProtectionStatus"
+          @change="(val) => handleChange(val, 'rightProtectionStatus')"
+        >
+          <a-select-option v-for="item in rightOptions" :key="item.value" :value="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="物流方式">
+        <a-select
+          v-model="orderParams.deliveryMethod"
+          @change="(val) => handleChange(val, 'deliveryMethod')"
+        >
+          <a-select-option v-for="item in deliveryOptions" :key="item.value" :value="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="付款方式">
+        <a-select v-model="orderParams.payMethod">
+          <a-select-option
+            v-for="item in payOptions"
+            :key="item.value"
+            :value="item.value"
+            @change="(val) => handleChange(val, 'payMethod')"
+          >
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="下单时间">
+        <a-row style="min-width: 280px;">
+          <a-col :span="11">
+            <a-date-picker
+              v-model:value="startDate"
+              :disabled-date="checkStartDate"
+              format="YYYY-MM-DD"
+              placeholder="订单起始时间"
+            />
+          </a-col>
+          <a-col :span="2" style="text-align: center"> ~ </a-col>
+          <a-col :span="11">
+            <a-date-picker
+              v-model:value="endDate"
+              :disabled-date="checkEndDate"
+              format="YYYY-MM-DD"
+              placeholder="订单结束时间"
+            />
+          </a-col>
+        </a-row>
+      </a-form-item>
+    </a-form>
+    <div class="button-box">
+      <a-button type="primary" @click="searchData">筛选</a-button>
+      <a-button>批量导出</a-button>
+      <a-button>查看已生成报表</a-button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Moment } from 'moment'
+import { defineComponent, inject, ref, watch } from 'vue'
+import { ParamsData } from './allOrder'
+
+export default defineComponent({
+  emits: ['searchTable'],
+  setup(props, { emit }) {
+    const orderParams: ParamsData = inject('orderParams')!
+    // 订单类型选项
+    const typeOptions = [
+      { label: '普通订单', value: 1 },
+      { label: '代付订单', value: 2 },
+      { label: '送礼订单', value: 3 },
+      { label: '送礼社群版订单', value: 4 },
+      { label: '心愿订单', value: 5 },
+      { label: '扫码付款', value: 6 },
+      { label: '酒店订单', value: 7 },
+      { label: '维权订单', value: 8 },
+      { label: '周期购订单', value: 9 },
+      { label: '多人拼团订单', value: 10 },
+      { label: '知识付费订单', value: 11 },
+    ]
+    // 维权状态选项
+    const rightOptions = [
+      { label: '未维权', value: 1 },
+      { label: '维权中', value: 2 },
+      { label: '维权结束', value: 3 },
+    ]
+    // 配送方式选项
+    const deliveryOptions = [
+      { label: '快递发货', value: 1 },
+      { label: '上门自提', value: 2 },
+      { label: '同城配送', value: 3 },
+    ]
+    // 付款方式选项
+    const payOptions = [
+      { label: '支付宝', value: 1 },
+      { label: '微信', value: 2 },
+      { label: '银联', value: 3 },
+      { label: '其他', value: 4 },
+    ]
+    // 定义两个时间选择器变量
+    const startDate = ref<Moment | undefined>()
+    const endDate = ref<Moment>()
+    watch(startDate, () => {
+      orderParams.createTimeStart = startDate.value?.format('YYYY-MM-DD')
+    })
+    watch(endDate, () => {
+      orderParams.createTimeEnd = endDate.value?.format('YYYY-MM-DD')
+    })
+    // 时间校验规则
+    const checkStartDate = (startDate: Moment) => {
+      if (!startDate || !endDate.value) {
+        return false
+      }
+      return startDate.valueOf() > endDate.value.valueOf()
+    }
+    const checkEndDate = (endDate: Moment) => {
+      if (!endDate || !startDate.value) {
+        return false
+      }
+      return startDate.value.valueOf() >= endDate.valueOf()
+    }
+    // 选择框变化函数
+    const handleChange = (value: number, attr: string) => {
+      orderParams[attr] = value
+    }
+    // 筛选按钮
+    const searchData = () => {
+      emit('searchTable')
+    }
+    return {
+      typeOptions,
+      orderParams,
+      rightOptions,
+      deliveryOptions,
+      payOptions,
+      startDate,
+      endDate,
+      handleChange,
+      searchData,
+      checkStartDate,
+      checkEndDate,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.section-filter {
+  background-color: #f3f3f3;
+  border: 1px solid #e7e7e7;
+  padding: 10px;
+
+  .filter-form {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    .ant-form-item {
+      width: 33%;
+      max-width: 450px;
+      padding: 0 20px;
+    }
+  }
+
+  .button-box {
+    display: inline-block;
+    margin-left: 40px;
+
+    .ant-btn {
+      margin: 10px 5px;
+    }
+  }
+}
+</style>
diff --git a/src/views/order/all-order/OrderTable.vue b/src/views/order/all-order/OrderTable.vue
new file mode 100644
index 0000000..7e2e432
--- /dev/null
+++ b/src/views/order/all-order/OrderTable.vue
@@ -0,0 +1,157 @@
+<template>
+  <section class="order-table-box">
+    <div class="order-filter-btns">
+      <div
+        v-for="btn in filterBtns"
+        :key="btn.key"
+        class="filter-btn"
+        :class="btn.key === activeKey ? 'active-btn' : ''"
+        @click="filterOrderType(btn.key)"
+      >
+        {{ btn.label }}
+      </div>
+    </div>
+    <div class="table-contain">
+      <Table :title="theadArr" :table-data="tableData" />
+      <div class="table-bottom">
+        <a-pagination
+          v-model:current="pageParams.current"
+          v-model:pageSize="pageParams.size"
+          size="small"
+          :total="total"
+          :page-size-options="['5', '10', '15', '20']"
+          :show-total="(total) => `共 ${total} 页`"
+          show-size-changer
+          show-quick-jumper
+          @change="handlePageChange"
+          @showSizeChange="handleSizeChange"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, inject, watch, toRefs } from 'vue'
+import { ParamsData } from './allOrder.js'
+import Table from './Table.vue'
+
+export default defineComponent({
+  components: {
+    Table,
+  },
+  props: {
+    tableRes: {
+      type: Object,
+      default: null,
+    },
+  },
+  emits: ['getTable'],
+  setup(props, { emit }) {
+    const state = reactive({
+      filterBtns: [
+        // 1:待付款2:待发货3:已发货4:已完成5:已关闭6:售后中7:退款中8:订单关闭
+        { label: '全部', key: undefined },
+        { label: '待付款', key: 1 },
+        { label: '待发货', key: 2 },
+        { label: '已发货', key: 3 },
+        { label: '已完成', key: 4 },
+        { label: '已关闭', key: 5 },
+        { label: '售后中', key: 6 },
+        { label: '退款中', key: 7 },
+      ],
+      activeKey: undefined,
+      tableData: [],
+      total: 0,
+      pageParams: {
+        current: 1,
+        size: 5,
+      },
+    })
+
+    const theadArr: string[] = [
+      '商品',
+      '单价/数量',
+      '售后',
+      '买家',
+      '下单时间',
+      '订单状态',
+      '实付金额',
+      '订单号',
+      '',
+      '外部订单号',
+      '支付流水号',
+    ]
+    const orderParams: ParamsData = inject('orderParams')!
+    const filterOrderType = (key: number) => {
+      orderParams.orderStatus = key
+      state.activeKey = key
+      emit('getTable')
+    }
+    const handlePageChange = (page: number, pageSize: number) => {
+      state.pageParams.size = pageSize
+      console.log(page, pageSize)
+    }
+    const handleSizeChange = (current: number, size: number) => {
+      state.pageParams.size = size
+      state.pageParams.current = 1
+    }
+    watch(
+      () => props.tableRes,
+      (value) => {
+        state.tableData = value.records
+        state.total = value.total
+      },
+    )
+    watch(
+      () => state.pageParams,
+      (newVal) => {
+        orderParams.size = newVal.size
+        orderParams.current = newVal.current
+        emit('getTable')
+      },
+      {
+        deep: true,
+      },
+    )
+    return {
+      theadArr,
+      ...toRefs(state),
+      filterOrderType,
+      handlePageChange,
+      handleSizeChange,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.order-table-box {
+  margin-top: 20px;
+
+  .order-filter-btns {
+    display: flex;
+
+    .filter-btn {
+      width: 80px;
+      cursor: pointer;
+      text-align: center;
+      color: #505050;
+      background: rgba(243, 243, 243, 1);
+      border: 1px solid rgba(229, 229, 229, 1);
+      padding: 8px 0;
+
+      &:hover {
+        background: #d9d9d9;
+      }
+    }
+
+    .active-btn {
+      background: #fff;
+    }
+  }
+  .table-bottom {
+    text-align: right;
+  }
+}
+</style>
diff --git a/src/views/order/all-order/Table.vue b/src/views/order/all-order/Table.vue
new file mode 100644
index 0000000..b08a64d
--- /dev/null
+++ b/src/views/order/all-order/Table.vue
@@ -0,0 +1,237 @@
+<template>
+  <div class="order-table">
+    <ul class="thead">
+      <li v-for="(item, index) in titleArr" :key="index" class="thead-td">
+        <span v-if="index < 7">{{ item }}</span>
+      </li>
+    </ul>
+    <ul v-for="(data, index) in tableData" :key="index" class="tbody">
+      <div class="tbody-top">
+        <div class="li-item">
+          <span class="item-label">{{ tbodyTitleArr[0] }}: </span>
+          <span class="item-data">{{ data.orderNo }}</span>
+          <span class="item-label">{{ tbodyTitleArr[1] }}</span>
+          <span class="item-data">
+            <span v-if="data.payMethod === 1" class="alipay-color">
+              <SafetyOutlined />支付宝支付
+            </span>
+            <span v-else-if="data.payMethod === 2" class="wechat-color">
+              <SafetyOutlined />微信支付
+            </span>
+            <span v-else-if="data.payMethod === 3" class="bank-color">
+              <SafetyOutlined />银联支付
+            </span>
+            <span v-else>其他</span>
+          </span>
+        </div>
+        <div class="li-item">
+          <span class="item-label">{{ tbodyTitleArr[2] }}: </span>
+          <span class="item-data">{{ data.externalPayNo }}</span>
+          <span class="item-label">{{ tbodyTitleArr[3] }}: </span>
+          <span class="item-data">{{ data.externalPayNo }}</span>
+        </div>
+      </div>
+      <div class="tbody-body">
+        <li class="tbody-td frist-td">
+          <div class="left-img">
+            <img
+              class="thumbnail"
+              src="https://img2.baidu.com/it/u=2420744160,4087949052&fm=26&fmt=auto&gp=0.jpg"
+              alt="商品缩略图"
+            />
+          </div>
+          <div class="right-msg">
+            <a href="">{{ data.productName }}</a>
+          </div>
+        </li>
+        <li class="tbody-td">{{ data.qty }}</li>
+        <li class="tbody-td">
+          <span v-if="data.rightsProtectionStatus === 1">未维权</span>
+          <span v-else-if="data.rightsProtectionStatus === 2">维权中</span>
+          <span v-else-if="data.rightsProtectionStatus === 3">维权结束</span>
+          <span v-else>无售后数据</span>
+        </li>
+        <li class="tbody-td">{{ data.receiverName }}</li>
+        <li class="tbody-td">{{ data.createTime }}</li>
+        <li class="tbody-td">
+          <span v-if="data.status === 1">待付款</span>
+          <span v-else-if="data.status === 2">待发货</span>
+          <span v-else-if="data.status === 3">已发货</span>
+          <span v-else-if="data.status === 4">已完成</span>
+          <span v-else-if="data.status === 5">已关闭</span>
+          <span v-else-if="data.status === 6">售后中</span>
+          <span v-else-if="data.status === 7">退款中</span>
+          <span v-else-if="data.status === 8">订单关闭</span>
+        </li>
+        <li class="tbody-td">￥{{ data.paidAmount }}</li>
+      </div>
+    </ul>
+    <div v-if="tableData?.length == 0" class="table-nodata">
+      <img class="nodata-img" src="../../../assets/icons/table-nodata.svg" alt="" />
+      <span class="nodata-text">暂无数据</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from 'vue'
+import { SafetyOutlined } from '@ant-design/icons-vue'
+
+export default defineComponent({
+  components: { SafetyOutlined },
+  props: {
+    title: {
+      type: Array,
+      required: true,
+    },
+    tableData: {
+      type: Array,
+      default: () => [],
+      required: false,
+    },
+  },
+  setup(props) {
+    const titleArr = [...props.title]
+    const state = reactive({
+      showImgTd: false,
+    })
+    const tbodyTitleArr = titleArr.splice(7)
+    return {
+      tbodyTitleArr,
+      titleArr,
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.order-table {
+  margin-top: 10px;
+
+  .thead {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    font-size: 12px;
+
+    .thead-td {
+      width: 100%;
+      background: rgba(243, 243, 243, 1);
+      color: #505050;
+      text-align: center;
+      height: 36px;
+      line-height: 36px;
+
+      &:nth-child(1) {
+        min-width: 300px;
+        text-align: left;
+
+        span {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .tbody {
+    font-size: 12px;
+    display: flex;
+    flex-direction: column;
+
+    .tbody-top {
+      border: 1px solid rgba(229, 229, 229, 1);
+      background: rgba(241, 241, 241, 1);
+      padding: 8px;
+
+      .li-item {
+        .item-data {
+          margin-right: 10px;
+          color: gray;
+          .alipay-color {
+            color: #3a78f6;
+          }
+          .wechat-color {
+            color: #63c742;
+          }
+          .bank-color {
+            color: #ce4646;
+          }
+        }
+      }
+    }
+
+    .tbody-body {
+      text-align: center;
+      display: flex;
+
+      &:hover {
+        background: #e9f6fe;
+        cursor: pointer;
+      }
+
+      .tbody-td {
+        flex: 1;
+        border: 1px solid rgba(229, 229, 229, 1);
+        margin-top: -1px;
+        overflow: scroll;
+        padding: 10px;
+        min-height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:nth-child(n + 2) {
+          margin-left: -1px;
+        }
+      }
+
+      .frist-td {
+        display: flex;
+        min-width: 300px;
+        align-items: flex-start;
+        justify-content: flex-start;
+
+        .left-img {
+          .thumbnail {
+            width: 80px;
+            height: 80px;
+          }
+        }
+
+        .right-msg {
+          text-align: left;
+          margin: 10px 0 0 10px;
+          max-height: 80px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 4;
+
+          a {
+            color: rgba(42, 130, 228, 1);
+          }
+        }
+      }
+    }
+  }
+  .table-nodata {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+    border: 1px solid #f0f0f0;
+
+    .nodata-img {
+      height: 40px;
+    }
+
+    .nodata-text {
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+}
+</style>
diff --git a/src/views/order/all-order/allOrder.ts b/src/views/order/all-order/allOrder.ts
new file mode 100644
index 0000000..d7a936a
--- /dev/null
+++ b/src/views/order/all-order/allOrder.ts
@@ -0,0 +1,62 @@
+// 订单请求 筛选条件参数
+export interface ParamsData {
+  orderNo: string // 订单编号
+  externalPayNo: string // 外部支付编号
+  receiverName: string // 收货人姓名
+  receiverPhone: string // 收货人手机号
+  receiverPhoneLastFour?: string // 收货人手机号后四位
+  createTimeStart?: string // 下单开始时间
+  createTimeEnd?: string // 下单结束时间
+  productName?: string // 商品名称
+  orderStatus?: number // 订单状态(1:待付款2:待发货3:已发货4:已完成5:已关闭6:售后中7:退款中8:订单关闭)
+  rightProtectionStatus?: number // 维权状态(1:未维权2:维权中3:维权结束)
+  type?: number // 订单类型(1:普通订单2:代付订单3:送礼订单4:送礼社群版订单5:心愿订单6:扫码付款7:酒店订单8:维权订单9:周期购订单10:多人拼团订单11:知识付费订单)
+  source?: number // 订单来源(1:浏览器2:支付宝3:浏览器4:商家自有app5:微信小程序6:其他)
+  deliveryMethod?: number // 配送方式(1:快递发货2:上门自提3:同城配送)
+  payMethod?: number // 支付方式(1:支付宝2:微信3:银联4:其他)
+  payStarredStatus?: number // 加星状态(1:不加星2:加星)
+  current: number // 当前页码
+  size: number // 每页条数
+  [propsName: string]: any // 额外类型
+}
+// 订单接口返回类型
+export interface orderTableRes {
+  countId?: string | null
+  current: number // 当前页码
+  total: number // 数据总量
+  searchCount?: boolean //
+  pages: number //
+  hitCount?: boolean //
+  size: number // 每页数据量
+  order: Array<any> //
+  records: Array<orderTableItem> // 订单列表
+  [propsName: string]: any // 额外类型适配
+}
+interface orderTableItem {
+  createTime: string // 创建时间
+  deliveryMethod: number // 物流方式
+  externalPayNo: string // 外部订单号
+  favorableAmount: number // 优惠金额
+  orderDetailId: number // 订单详情id
+  orderId: number // 订单ID
+  orderNo: string // 订单编号
+  paidAmount: number // 实付金额
+  payMethod: number // 支付方式
+  payStarred: number // 订单加星数
+  productId: number // 商品ID
+  productName: string // 商品名称
+  productNo: string // 商品编号
+  productSku: string // 商品sku信息
+  qty: number // 商品数量
+  receivableAmount: number // 应收金额
+  receiverName: string // 收货人姓名
+  receiverPhone: string // 手机号
+  receiverPhoneLastFour: string // 手机号后四位
+  rightsProtectionStatus: number // 维权状态
+  shipmentId: number // 物流记录ID
+  shipmentNo: string // 物流记录编号
+  source: number // 订单来源
+  status: number // 订单状态
+  trackingNo: string // 物流编号
+  type: number // 订单类型
+}
diff --git a/src/views/order/all-order/index.vue b/src/views/order/all-order/index.vue
new file mode 100644
index 0000000..3ff9ecd
--- /dev/null
+++ b/src/views/order/all-order/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="app-all-order">
+    <FilterForm @searchTable="getOrderTable" />
+    <OrderTable :table-res="orderTableRes" @getTable="getOrderTable" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, provide, onMounted, toRefs } from 'vue'
+import { getOrderTableData } from '../../../api/order/order'
+import FilterForm from './FilterForm.vue'
+import OrderTable from './OrderTable.vue'
+
+export default defineComponent({
+  components: {
+    FilterForm,
+    OrderTable,
+  },
+  setup() {
+    const state = reactive({
+      orderParams: {
+        orderNo: '',
+        externalPayNo: '',
+        receiverName: '',
+        receiverPhone: '',
+        receiverPhoneLastFour: '',
+        createTimeStart: '',
+        createTimeEnd: '',
+        productName: '',
+        orderStatus: undefined,
+        rightProtectionStatus: undefined,
+        type: undefined,
+        source: undefined,
+        deliveryMethod: undefined,
+        payMethod: undefined,
+        payStarredStatus: 1,
+        current: 1,
+        size: 5,
+      },
+      orderTableRes: null,
+    })
+    const getOrderTable = async () => {
+      const data = await getOrderTableData(state.orderParams)
+      state.orderTableRes = data
+    }
+    onMounted(() => {
+      getOrderTable()
+    })
+    provide('orderParams', state.orderParams)
+    return {
+      ...toRefs(state),
+      getOrderTable,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.app-all-order {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  padding: 15px;
+}
+</style>
-- 
Gitee