diff --git a/src/api/order/order.ts b/src/api/order/order.ts
index e6c21ea3a9de2433d807a2883b1d1a69ec59a99c..761d0fc3651d596b045cefebb3c36671f4a8031b 100644
--- a/src/api/order/order.ts
+++ b/src/api/order/order.ts
@@ -1,9 +1,44 @@
 import request from '@/utils/request'
+import { ParamsData, orderTableRes } from '@/model/order/AllOrder'
+import { AfterSaleParams } from '@/model/order/AfterSale'
+
+// 枚举接口地址
 
 enum Api {
   ORDER_TABLE = '/api/order/page',
+  AFTER_SALE_TABLE = '/api/order/afterSale/page',
+  AFTER_SALE_EXPORT = '/api/order/afterSale/export',
+  AFTER_SALE_REIMBURSE = '/api/order/afterSale/reimburse',
 }
 
-// 获取订单表格数据
+/**
+ * @description: 获取订单表格数据
+ * @param {ParamsData} data
+ * @return {orderTableRes}
+ */
+export const getOrderTableData = (data: ParamsData) =>
+  request.get<orderTableRes>(Api.ORDER_TABLE, data)
+
+/**
+ * @description: 获取售后订单表格数据
+ * @param {AfterSaleParams} data
+ * @return {*}
+ */
+export const getAfterSaleTableData = (data: AfterSaleParams) =>
+  request.get(Api.AFTER_SALE_TABLE, data)
+
+/**
+ * @description: 导出订单
+ * @param {AfterSaleParams} data
+ * @return {*}
+ */
+export const exportAfterSaleOrder = (data: AfterSaleParams) =>
+  request.get(Api.AFTER_SALE_EXPORT, data)
 
-export const getOrderTableData = (data: any) => request.get(Api.ORDER_TABLE, data)
+/**
+ * @description: 退款操作
+ * @param {object} data
+ * @return {*}
+ */
+export const judgeReimburse = (data: object | undefined) =>
+  request.patch(Api.AFTER_SALE_REIMBURSE, data)
diff --git a/src/views/order/all-order/Table.vue b/src/components/OrderTable/index.vue
similarity index 95%
rename from src/views/order/all-order/Table.vue
rename to src/components/OrderTable/index.vue
index b8fbf665c75b65d5b4f5064b20a4d67057138ea0..256f60f944bb0a1783a57419a4b2b933738f14f1 100644
--- a/src/views/order/all-order/Table.vue
+++ b/src/components/OrderTable/index.vue
@@ -32,8 +32,8 @@
         </li>
       </div>
     </ul>
-    <div v-if="tableData?.length == 0" class="table-nodata">
-      <img class="nodata-img" src="../../../assets/icons/table-nodata.svg" alt="" />
+    <div v-if="!tableData.length" class="table-nodata">
+      <img class="nodata-img" src="../../assets/icons/table-nodata.svg" alt="" />
       <span class="nodata-text">暂无数据</span>
     </div>
   </div>
diff --git a/src/model/order/AfterSale.ts b/src/model/order/AfterSale.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bff7d0b0202eadfd16400f8be4abb31f78d0516
--- /dev/null
+++ b/src/model/order/AfterSale.ts
@@ -0,0 +1,32 @@
+// 售后表格请求参数,导出售后表格参数
+export interface AfterSaleParams {
+  current: number // 当前页码
+  size: number // 每页条数
+  orderNo?: string // 订单编号
+  createStart?: string // 申请开始时间
+  createEnd?: string // 申请结束时间
+  afterSaleNo?: string // 售后编号
+  refundType?: number // 退款类型 (1:售中退款 2:售后退款)
+  interveneStatus?: number // 有赞客服介入状态 (1:未介入 2:介入中 3:介入结束)
+  manner?: number // 售后方式 (1:仅退款 2:退货退款 3:换货)
+  deliveryStatus?: number // 发货状态 (1:未发货 2:已发货)
+  status?: number // 售后状态 (1:售后处理中 2:售后申请待商家同意 3:商家不同意售后申请，待买家处理 4:商家同意售后申请，待买家处理 5:买家已退货 6:待商家确认收货 7:商家拒绝收货，待买家处理 8:商家已发货，待买家确认收货，9:售后成功 10:售后关闭)
+  tackingNo?: string // 物流编号
+  tackingStatus?: number // 物流状态 (1:未签收 2:已签收 3:无物流信息)
+  productName?: string // 商品名称
+  sort?: number // 排序 (1:按最近申请排序,按临近超时排序)
+  [props: string]: any // 额外类型
+}
+// 售后表格请求响应数据
+
+// 售后表格数据
+
+// 退款请求参数
+export interface ReimburseParams {
+  id: number // 售后id
+  isAgree: boolean // 是否同意
+  receiverProvince?: string // 收货人省
+  receiverCity?: string // 收货人市
+  receiverArea?: string // 收货人区
+  receiverAddress?: string // 收货人详细地址
+}
diff --git a/src/views/order/all-order/allOrder.ts b/src/model/order/AllOrder.ts
similarity index 100%
rename from src/views/order/all-order/allOrder.ts
rename to src/model/order/AllOrder.ts
diff --git a/src/router/asyncRoutes.ts b/src/router/asyncRoutes.ts
index 8b73f3fa3a5853271c82208b702b6832f71e26b4..6b0784d6a0bc4e36825d5afd3c30b8c7a74327e3 100644
--- a/src/router/asyncRoutes.ts
+++ b/src/router/asyncRoutes.ts
@@ -3,6 +3,8 @@ export default {
   overview: () => import('@/views/dashboard/index.vue'),
   authUser: () => import('@/views/user/index.vue'),
   orderAll: () => import('@/views/order/all-order/index.vue'),
+  orderStar: () => import('@/views/order/all-order/index.vue'),
+  orderAftersales: () => import('@/views/order/after-sale/index.vue'),
   code4: () => import('@/views/dashboard/index.vue'),
   code5: () => import('@/views/dashboard/index.vue'),
   code6: () => import('@/views/dashboard/index.vue'),
diff --git a/src/views/order/after-sale/components/AfterSaleTable.vue b/src/views/order/after-sale/components/AfterSaleTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b3902d53d640149d249a4329393eade7f25bb966
--- /dev/null
+++ b/src/views/order/after-sale/components/AfterSaleTable.vue
@@ -0,0 +1,224 @@
+<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="filterStatus(btn.key)"
+      >
+        {{ btn.label }}
+      </div>
+    </div>
+    <div class="table-contain">
+      <a-table
+        :data-source="tableData"
+        :scroll="{ x: 1500 }"
+        :columns="columns"
+        :pagination="pagination"
+        row-key="id"
+        bordered
+      >
+        <template #manner="{ text: manner }">
+          <span>{{ afterSaleManner[manner || 0] }}</span>
+        </template>
+        <template #status="{ text: status }">
+          <span>{{ afterSaleStatus[status || 0] }}</span>
+        </template>
+        <template #action="{ record }">
+          <a-popconfirm
+            title="请确认是否同意退款？"
+            ok-text="确认"
+            cancel-text="取消"
+            @confirm="changeReimburse(record, true)"
+          >
+            <a-button type="primary" size="small" style="margin-right: 4px; font-size: 12px">
+              同意
+            </a-button>
+          </a-popconfirm>
+          <a-popconfirm
+            title="请确认是否拒绝退款？"
+            ok-text="确认"
+            cancel-text="取消"
+            @confirm="changeReimburse(record, false)"
+          >
+            <a-button type="danger" size="small" style="font-size: 12px"> 拒绝 </a-button>
+          </a-popconfirm>
+        </template>
+      </a-table>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, inject, watch, toRefs } from 'vue'
+import { AfterSaleParams, ReimburseParams } from '@/model/order/AfterSale'
+import { judgeReimburse } from '@/api/order/order'
+import { message } from 'ant-design-vue'
+
+export default defineComponent({
+  props: {
+    tableRes: {
+      type: Object,
+      default: null,
+    },
+  },
+  emits: ['getTable'],
+  setup(props, { emit }) {
+    const params: AfterSaleParams = inject('params')!
+    const state = reactive({
+      filterBtns: [
+        { label: '全部', key: 0 },
+        { label: '退款处理中', key: 1 },
+        { label: '退款关闭', key: 2 },
+      ],
+      columns: [
+        { title: '售后编号', dataIndex: 'afterSaleNo', align: 'center' },
+        {
+          title: '售后方式 ',
+          dataIndex: 'manner',
+          width: 100,
+          align: 'center',
+          slots: { customRender: 'manner' },
+        },
+        { title: '订单编号', dataIndex: 'orderNo', align: 'center' },
+        { title: '商品名称', dataIndex: 'productName', align: 'center' },
+        { title: '订单金额', dataIndex: 'orderDetailAmount', align: 'center', width: 100 },
+        { title: '退款金额', dataIndex: 'refundAmount', align: 'center', width: 100 },
+        { title: '申请时间', dataIndex: 'createTime', align: 'center' },
+        {
+          title: '退款状态',
+          dataIndex: 'status',
+          align: 'center',
+          slots: { customRender: 'status' },
+        },
+        {
+          title: '操作',
+          key: 'status',
+          fixed: 'right',
+          width: 130,
+          align: 'center',
+          slots: { customRender: 'action' },
+        },
+      ],
+      afterSaleManner: ['未查询到售后方式', '仅退款', '退货退款', '换货'],
+      afterSaleStatus: [
+        '未查询到售后状态',
+        '售后处理中',
+        '售后申请待商家同意',
+        '商家不同意售后申请，待买家处理',
+        '商家同意售后申请，待买家处理',
+        '买家已退货',
+        '待商家确认收货',
+        '商家拒绝收货，待买家处理',
+        '商家已发货，待买家确认收货',
+        '售后成功',
+        '售后关闭',
+      ],
+      activeKey: 0,
+      tableData: [],
+      total: 0,
+    })
+    const pagination = {
+      showSizeChanger: true,
+      showQuickJumper: true,
+      size: 'small',
+      showTotal: () => `共${state.total}条`,
+      pageSize: params.size,
+      total: state.total,
+      pageSizeOptions: ['5', '10', '15', '20'],
+      onChange: (current: number) => handleSizeChange(current),
+      onShowSizeChange: (current: number, pageSize: number) => {
+        handlePageChange(current, pageSize)
+      },
+    }
+    const reimburseParams: ReimburseParams = {
+      id: 1,
+      isAgree: false,
+    }
+    const handlePageChange = (page: number, pageSize: number) => {
+      params.current = 1
+      params.size = pageSize
+      emit('getTable')
+    }
+    const handleSizeChange = (current: number) => {
+      params.current = current
+      emit('getTable')
+    }
+    const filterStatus = (key: number) => {
+      if (key) {
+        params.status = key
+      } else {
+        delete params.status
+      }
+      state.activeKey = key
+      emit('getTable')
+    }
+    const reimburseChange = async () => {
+      try {
+        await judgeReimburse(reimburseParams)
+        message.success('操作成功')
+        // emit('getTable')
+      } catch (err) {
+        console.log(err)
+      }
+    }
+    // any类型 需要更改为ref的表格数据类型 mark一下
+    const changeReimburse = (record: any, isAgree: boolean) => {
+      reimburseParams.id = record.id
+      reimburseParams.isAgree = isAgree
+      reimburseParams.receiverProvince = record.receiverProvince
+      reimburseParams.receiverCity = record.receiverCity
+      reimburseParams.receiverArea = record.receiverArea
+      reimburseParams.receiverAddress = record.receiverAddress
+      reimburseChange()
+    }
+    watch(
+      () => props.tableRes,
+      (value) => {
+        state.tableData = value.records
+        console.log(state.tableData)
+        state.total = value.total
+      },
+    )
+    return {
+      pagination,
+      ...toRefs(state),
+      changeReimburse,
+      filterStatus,
+    }
+  },
+})
+</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-contain {
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/src/views/order/after-sale/components/FilterForm.vue b/src/views/order/after-sale/components/FilterForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33c9b882f0180bf3db278b4f121244f5162074b3
--- /dev/null
+++ b/src/views/order/after-sale/components/FilterForm.vue
@@ -0,0 +1,228 @@
+<template>
+  <section class="section-filter">
+    <a-form
+      :model="params"
+      class="filter-form"
+      :label-col="{ span: 8 }"
+      :wrapper-col="{ span: 16 }"
+    >
+      <a-form-item label="订单号">
+        <a-input v-model:value="params.orderNo" allow-clear />
+      </a-form-item>
+      <a-form-item label="售后编号">
+        <a-input v-model:value="params.afterSaleNo" allow-clear />
+      </a-form-item>
+      <a-form-item label="商品名称">
+        <a-input v-model:value="params.productName" allow-clear />
+      </a-form-item>
+      <a-form-item label="退款类型">
+        <a-select v-model="params.refundType" @change="(val) => handleChange(val, 'refundType')">
+          <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="params.status" @change="(val) => handleChange(val, 'status')">
+          <a-select-option v-for="item in statusOptions" :key="item.value" :value="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="客服介入">
+        <a-select
+          v-model="params.interveneStatus"
+          @change="(val) => handleChange(val, 'interveneStatus')"
+        >
+          <a-select-option
+            v-for="item in interveneStatusOptions"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="售后方式">
+        <a-select v-model="params.manner" @change="(val) => handleChange(val, 'manner')">
+          <a-select-option v-for="item in mannerOptions" :key="item.value" :value="item.value">
+            {{ 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 @click="exportData">批量导出</a-button>
+      <a-button>查看已生成报表</a-button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Moment } from 'moment'
+import { defineComponent, inject, ref, watch } from 'vue'
+import { AfterSaleParams } from '@/model/order/AfterSale'
+import { exportAfterSaleOrder } from '@/api/order/order'
+
+export default defineComponent({
+  emits: ['searchTable'],
+  setup(props, { emit }) {
+    const params: AfterSaleParams = inject('params')!
+    // 退款类型选项
+    const typeOptions = [
+      { label: '售中退款', value: 1 },
+      { label: '售后退款', value: 2 },
+    ]
+    // 售后状态选项
+    const statusOptions = [
+      { 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 },
+    ]
+    // 客服介入选项
+    const interveneStatusOptions = [
+      { label: '未介入', value: 1 },
+      { label: '介入中', value: 2 },
+      { label: '介入结束', value: 3 },
+    ]
+    // 售后方式选项
+    const mannerOptions = [
+      { label: '仅退款', value: 1 },
+      { label: '退货退款', value: 2 },
+      { label: '换货', value: 3 },
+    ]
+    // 定义两个时间选择器变量
+    const startDate = ref<Moment | undefined>()
+    const endDate = ref<Moment>()
+    watch(startDate, () => {
+      params.createStart = startDate.value?.format('YYYY-MM-DD')
+    })
+    watch(endDate, () => {
+      params.createEnd = 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) => {
+      params[attr] = value
+    }
+    // 筛选按钮
+    const searchData = () => {
+      emit('searchTable')
+    }
+    const saveFile = (data: any) => {
+      const content = data
+      const blob = new Blob([content])
+      const fileName = '售后表格.xls'
+      // const disposition = data.headers['content-disposition']
+      // const fileName = disposition.split(';')[1].split('filename=')[1]
+      if ('download' in document.createElement('a')) {
+        // 非IE下载
+        const elink = document.createElement('a')
+        elink.download = fileName
+        elink.style.display = 'none'
+        elink.href = URL.createObjectURL(blob)
+        document.body.appendChild(elink)
+        elink.click()
+        URL.revokeObjectURL(elink.href) // 释放URL 对象
+        document.body.removeChild(elink)
+      } else {
+        // IE10+下载
+        navigator.msSaveBlob(blob, fileName)
+      }
+    }
+    const exportData = async () => {
+      try {
+        const data = await exportAfterSaleOrder(params)
+        saveFile(data)
+      } catch (err) {
+        // console.log(err)
+        saveFile(err)
+      }
+    }
+    return {
+      typeOptions,
+      params,
+      statusOptions,
+      interveneStatusOptions,
+      mannerOptions,
+      startDate,
+      endDate,
+      exportData,
+      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/after-sale/index.vue b/src/views/order/after-sale/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1000270a492ee0f6a08193047425938de477fef6
--- /dev/null
+++ b/src/views/order/after-sale/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="app-all-order">
+    <FilterForm @searchTable="getAfterSaleTable" />
+    <AfterSaleTable :table-res="tableRes" @getTable="getAfterSaleTable" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, provide, toRefs, onMounted } from 'vue'
+import { getAfterSaleTableData } from '@/api/order/order'
+import FilterForm from './components/FilterForm.vue'
+import AfterSaleTable from './components/AfterSaleTable.vue'
+
+export default defineComponent({
+  components: {
+    FilterForm,
+    AfterSaleTable,
+  },
+  setup() {
+    const state = reactive({
+      params: {
+        current: 1,
+        size: 5,
+      },
+      tableRes: {},
+    })
+    const getAfterSaleTable = async () => {
+      try {
+        const data = await getAfterSaleTableData(state.params)
+        state.tableRes = data
+      } catch (err) {
+        throw err
+      }
+    }
+    provide('params', state.params)
+    onMounted(() => {
+      getAfterSaleTable()
+    })
+    return {
+      ...toRefs(state),
+      getAfterSaleTable,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.app-all-order {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  padding: 15px;
+}
+</style>
diff --git a/src/views/order/all-order/OrderTable.vue b/src/views/order/all-order/components/AllOrderTable.vue
similarity index 68%
rename from src/views/order/all-order/OrderTable.vue
rename to src/views/order/all-order/components/AllOrderTable.vue
index 516c2352556d5def7a71985015ff42d562f211d5..ff3e1e8a54ecd4d93dc4c8014e9d6cf28fcf3381 100644
--- a/src/views/order/all-order/OrderTable.vue
+++ b/src/views/order/all-order/components/AllOrderTable.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="order-table-box">
-    <div class="order-filter-btns">
+    <div v-if="!starOrder" class="order-filter-btns">
       <div
         v-for="btn in filterBtns"
         :key="btn.key"
@@ -12,12 +12,12 @@
       </div>
     </div>
     <div class="table-contain">
-      <Table :columns="columns" :row-top="rowTop" :table-data="tableData">
+      <OrderTable :columns="columns" :row-top="rowTop" :table-data="tableData">
         <template #payMethod="{ data }">
-          <span v-if="data === 1" class="alipay-color"> <SafetyOutlined />支付宝支付</span>
-          <span v-else-if="data === 2" class="wechat-color"> <SafetyOutlined />微信支付</span>
-          <span v-else-if="data === 3" class="bank-color"> <SafetyOutlined />银联支付</span>
-          <span v-else>其他</span>
+          <span :style="{ color: orderPayMethod[data || 0].color }">
+            <SafetyOutlined />
+            {{ orderPayMethod[data || 0].text }}
+          </span>
         </template>
         <template #productName="{ data }">
           <div class="frist-td">
@@ -30,25 +30,15 @@
           </div>
         </template>
         <template #rightsProtectionStatus="{ data }">
-          <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>
+          <span>{{ orderRights[data.rightsProtectionStatus || 0] }}</span>
         </template>
         <template #status="{ data }">
-          <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>
+          <span>{{ orderStatus[data.status || 0] }}</span>
         </template>
         <template #paidAmount="{ data }">
           <span>￥{{ data.paidAmount }}</span>
         </template>
-      </Table>
+      </OrderTable>
       <div class="table-bottom">
         <a-pagination
           v-model:current="pageParams.current"
@@ -68,14 +58,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, inject, watch, toRefs } from 'vue'
-import { ParamsData, tableColumns } from './allOrder.js'
+import { defineComponent, reactive, inject, watch, toRefs, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { ParamsData, tableColumns } from '@/model/order/AllOrder'
 import { SafetyOutlined } from '@ant-design/icons-vue'
-import Table from './Table.vue'
+import OrderTable from '@/components/OrderTable/index.vue'
 
 export default defineComponent({
   components: {
-    Table,
+    OrderTable,
     SafetyOutlined,
   },
   props: {
@@ -86,10 +77,11 @@ export default defineComponent({
   },
   emits: ['getTable'],
   setup(props, { emit }) {
+    const route = useRoute()
     const state = reactive({
       filterBtns: [
         // 1:待付款2:待发货3:已发货4:已完成5:已关闭6:售后中7:退款中8:订单关闭
-        { label: '全部', key: undefined },
+        { label: '全部', key: 0 },
         { label: '待付款', key: 1 },
         { label: '待发货', key: 2 },
         { label: '已发货', key: 3 },
@@ -98,7 +90,26 @@ export default defineComponent({
         { label: '售后中', key: 6 },
         { label: '退款中', key: 7 },
       ],
-      activeKey: undefined,
+      orderPayMethod: [
+        { text: '未查询到支付信息', color: 'red' },
+        { text: '支付宝支付', color: '#3a78f6' },
+        { text: '微信支付', color: '#63c742' },
+        { text: '银联支付', color: '#ce4646' },
+        { text: '其他', color: '#efefef' },
+      ],
+      orderStatus: [
+        '未获取到订单状态',
+        '待付款',
+        '待发货',
+        '已发货',
+        '已完成',
+        '已关闭',
+        '售后中',
+        '退款中',
+        '订单关闭',
+      ],
+      orderRights: ['未获取到售后信息', '未维权', '维权中', '维权结束'],
+      activeKey: 0,
       tableData: [],
       total: 0,
       pageParams: {
@@ -107,7 +118,7 @@ export default defineComponent({
       },
       slotName: 'name1',
     })
-
+    const starOrder = ref(false)
     const columns: tableColumns[] = [
       { title: '商品', key: 'productName', width: 300 },
       { title: '单价/数量', key: 'qty' },
@@ -125,7 +136,11 @@ export default defineComponent({
     ]
     const orderParams: ParamsData = inject('orderParams')!
     const filterOrderType = (key: number) => {
-      orderParams.orderStatus = key
+      if (key) {
+        orderParams.orderStatus = key
+      } else {
+        delete orderParams.orderStatus
+      }
       state.activeKey = key
       emit('getTable')
     }
@@ -136,6 +151,33 @@ export default defineComponent({
       state.pageParams.size = size
       state.pageParams.current = 1
     }
+    // 监听router区分加星订单页面
+    watch(
+      () => route.name,
+      (value) => {
+        let starVal = 1
+        switch (value) {
+          case 'orderAll':
+            starOrder.value = false
+            starVal = 1
+            break
+          case 'orderStar':
+            starOrder.value = true
+            delete orderParams.orderStatus // 删除订单状态参数
+            starVal = 2
+            break
+          default:
+            break
+        }
+        orderParams.size = 5 // 重置表格size
+        orderParams.current = 1 // 表格页初始化为1
+        orderParams.payStarredStatus = starVal // 加星参数赋值
+        emit('getTable')
+      },
+      {
+        immediate: true,
+      },
+    )
     watch(
       () => props.tableRes,
       (value) => {
@@ -157,6 +199,7 @@ export default defineComponent({
     return {
       columns,
       rowTop,
+      starOrder,
       ...toRefs(state),
       filterOrderType,
       handlePageChange,
diff --git a/src/views/order/all-order/FilterForm.vue b/src/views/order/all-order/components/FilterForm.vue
similarity index 94%
rename from src/views/order/all-order/FilterForm.vue
rename to src/views/order/all-order/components/FilterForm.vue
index bc062149e96d94035dbe22265b2317c8aeaeffd0..a1e9c13d98f7c8dd755c3654a6e835867ca0366c 100644
--- a/src/views/order/all-order/FilterForm.vue
+++ b/src/views/order/all-order/components/FilterForm.vue
@@ -40,19 +40,14 @@
         </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')"
-          >
+        <a-select v-model="orderParams.payMethod" @change="(val) => handleChange(val, 'payMethod')">
+          <a-select-option v-for="item in payOptions" :key="item.value" :value="item.value">
             {{ item.label }}
           </a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="下单时间">
-        <a-row style="min-width: 280px;">
+        <a-row style="min-width: 280px">
           <a-col :span="11">
             <a-date-picker
               v-model:value="startDate"
@@ -84,7 +79,7 @@
 <script lang="ts">
 import { Moment } from 'moment'
 import { defineComponent, inject, ref, watch } from 'vue'
-import { ParamsData } from './allOrder'
+import { ParamsData } from '@/model/order/AllOrder'
 
 export default defineComponent({
   emits: ['searchTable'],
diff --git a/src/views/order/all-order/index.vue b/src/views/order/all-order/index.vue
index 3ff9ecd380b749fff1d991ab5b5d6cbf2834b051..cba4179585d9973eda5ee1141039a79f2f6610f6 100644
--- a/src/views/order/all-order/index.vue
+++ b/src/views/order/all-order/index.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="app-all-order">
     <FilterForm @searchTable="getOrderTable" />
-    <OrderTable :table-res="orderTableRes" @getTable="getOrderTable" />
+    <AllOrderTable :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'
+import { defineComponent, reactive, provide, toRefs } from 'vue'
+import { getOrderTableData } from '@/api/order/order'
+import FilterForm from './components/FilterForm.vue'
+import AllOrderTable from './components/AllOrderTable.vue'
 
 export default defineComponent({
   components: {
     FilterForm,
-    OrderTable,
+    AllOrderTable,
   },
   setup() {
     const state = reactive({
@@ -37,15 +37,16 @@ export default defineComponent({
         current: 1,
         size: 5,
       },
-      orderTableRes: null,
+      orderTableRes: {},
     })
     const getOrderTable = async () => {
-      const data = await getOrderTableData(state.orderParams)
-      state.orderTableRes = data
+      try {
+        const data = await getOrderTableData(state.orderParams)
+        state.orderTableRes = data
+      } catch (err) {
+        throw err
+      }
     }
-    onMounted(() => {
-      getOrderTable()
-    })
     provide('orderParams', state.orderParams)
     return {
       ...toRefs(state),