diff --git a/src/components/Icon/index.vue b/src/components/Icon/index.vue
index 57da369ca1a03ee71c70e8b2f63eb6229936c7d4..a742e8717895039b089e5f5a907a7753c48cf8f9 100644
--- a/src/components/Icon/index.vue
+++ b/src/components/Icon/index.vue
@@ -1,17 +1,88 @@
 <script lang="ts">
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, reactive, UnwrapRef } from 'vue'
+import { IconOption } from '@/interface/icon'
 import * as Icons from '@ant-design/icons-vue'
+import * as IconPark from '@icon-park/vue-next'
 
 export default defineComponent({
   name: 'Icon',
   props: {
-    type: {
-      type: String,
-      default: () => '',
-    },
+    // 共有参数
+    icon: { type: String, default: () => 'antd' },
+    type: { type: String, default: () => '', required: true },
+    spin: { type: Boolean, default: () => false },
+    option: { type: Object, default: () => {} },
+    // antd图标参数
+    style: { type: Object, default: () => null },
+    rotate: { type: Number, default: () => null },
+    twoToneColor: { type: String, default: () => '' },
+    // icon-park参数
+    size: { type: Number, default: () => null },
+    theme: { type: Number, default: () => null },
+    strokeWidth: { type: Number, default: () => null },
+    strokeLinecap: { type: String, default: () => null },
+    strokeLinejoin: { type: String, default: () => null },
+    fill: { type: String, default: () => null },
+  },
+  setup(props) {
+    const antdKeys: string[] = ['type', 'style', 'rotate', 'twoToneColor', 'spin']
+    const parkKeys: string[] = ['size', 'theme', 'strokeWidth', 'strokeLinecap', 'spin']
+    const params: UnwrapRef<IconOption> = reactive(props.option || {}) // 最终参数
+    let iconCompontent: any = Icons
+    let optionKeys: string[] = []
+    // 初始化图标库参数
+    const initIconFrame = () => {
+      switch (props.icon) {
+        case 'antd':
+          optionKeys = antdKeys
+          iconCompontent = Icons
+          break
+        case 'park':
+          optionKeys = parkKeys
+          iconCompontent = IconPark
+          break
+        default:
+          optionKeys = antdKeys
+          iconCompontent = Icons
+      }
+    }
+    // 标签参数获取
+    const setParams = () => {
+      optionKeys.forEach((key: string) => {
+        if (props[key]) {
+          params[key] = props[key]
+        }
+      })
+    }
+    // 校验参数，抛出错误
+    // const checkParams = () => {
+    //   const { rotate, twoToneColor } = params
+    //   if (rotate && (rotate < 0 || rotate > 360)) {
+    //     delete params.rotate
+    //     console.log(
+    //       '%c [ 警告, icon旋转参数错误 ]',
+    //       'font-size:13px; background:pink; color:#bf2c9f;',
+    //     )
+    //   }
+    //   const colorReg = /^#([a-fA-F\d]{6}|[a-fA-F\d]{3})$/
+    //   if (twoToneColor && !colorReg.test(twoToneColor)) {
+    //     delete params.twoToneColor
+    //     console.log(
+    //       '%c [ 警告, icon参数"twoToneColor"格式错误 ]',
+    //       'font-size:13px; background:pink; color:#bf2c9f;',
+    //     )
+    //   }
+    // }
+    initIconFrame()
+    setParams()
+    // checkParams()
+    return {
+      params,
+      iconCompontent,
+    }
   },
   render() {
-    return h(Icons[this.type])
+    return h(this.iconCompontent[this.type], this.params)
   },
 })
 </script>
diff --git a/src/interface/icon.ts b/src/interface/icon.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e32c086b871b26996eea7eb021eec32e9867b3f1
--- /dev/null
+++ b/src/interface/icon.ts
@@ -0,0 +1,8 @@
+export interface IconOption {
+  type?: string // 图标类型
+  style?: object // 图标的样式
+  spin?: boolean // 旋转动画
+  rotate?: number // 旋转角度
+  twoToneColor?: string // 十六进制字符串 双色图标主要颜色
+  [propName: string]: any // 动态类型
+}
diff --git a/src/views/order/all-order/components/AllOrderTable.vue b/src/views/order/all-order/components/AllOrderTable.vue
index 972b98fcb95036fbf1ad4dbabdb7c0e7858ad84a..3fc49e64b75bc49e0a5ebf2fcf36ee3cba4e2d56 100644
--- a/src/views/order/all-order/components/AllOrderTable.vue
+++ b/src/views/order/all-order/components/AllOrderTable.vue
@@ -14,9 +14,9 @@
     <div class="table-contain">
       <OrderTable :columns="columns" :row-top="rowTop" :table-data="tableData">
         <template #payMethod="{ data }">
-          <span :style="{ color: orderPayMethod[data || 0].color }">
-            <SafetyOutlined />
-            {{ orderPayMethod[data || 0].text }}
+          <span class="paySpan" :style="{ color: orderPayMethod[data || 0].color }">
+            <icon :type="orderPayMethod[data || 0].icon" :style="{ fontSize: '14px' }" />
+            <span>{{ orderPayMethod[data || 0].text }}</span>
           </span>
         </template>
         <template #productName="{ data }">
@@ -41,8 +41,8 @@
       </OrderTable>
       <div class="table-bottom">
         <a-pagination
-          v-model:current="pageParams.current"
-          v-model:pageSize="pageParams.size"
+          v-model:current="orderParams.current"
+          v-model:pageSize="orderParams.size"
           size="small"
           :total="total"
           :page-size-options="['5', '10', '15', '20']"
@@ -61,14 +61,12 @@
 import { defineComponent, reactive, inject, watch, toRefs, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { ParamsData } from '@/model/order/AllOrder'
-import { SafetyOutlined } from '@ant-design/icons-vue'
 import OrderTable from '@/components/OrderTable/index.vue'
 import { columns, filterBtns, rowTop, tableEnum1, tableEnum2, tableEnum3 } from './tableConfig'
 
 export default defineComponent({
   components: {
     OrderTable,
-    SafetyOutlined,
   },
   props: {
     tableRes: {
@@ -89,25 +87,22 @@ export default defineComponent({
       activeKey: 0,
       tableData: [],
       total: 0,
-      pageParams: {
-        current: 1,
-        size: 5,
-      },
       slotName: 'name1',
     })
     const starOrder = ref(false)
     const orderParams: ParamsData = inject('orderParams')!
     const filterOrderType = (key: number) => {
       orderParams.orderStatus = key
+      orderParams.current = 1
       state.activeKey = key
       emit('getTable')
     }
     const handlePageChange = (page: number, pageSize: number) => {
-      state.pageParams.size = pageSize
+      orderParams.size = pageSize
     }
     const handleSizeChange = (current: number, size: number) => {
-      state.pageParams.size = size
-      state.pageParams.current = 1
+      orderParams.size = size
+      orderParams.current = 1
     }
     // 监听router区分加星订单页面
     watch(
@@ -144,10 +139,10 @@ export default defineComponent({
       },
     )
     watch(
-      () => state.pageParams,
-      (newVal) => {
-        orderParams.size = newVal.size
-        orderParams.current = newVal.current
+      () => [orderParams.current, orderParams.size],
+      ([currentVal, sizeVal]) => {
+        orderParams.size = sizeVal
+        orderParams.current = currentVal
         emit('getTable')
       },
       {
@@ -156,6 +151,7 @@ export default defineComponent({
     )
     return {
       starOrder,
+      orderParams,
       ...toRefs(state),
       filterOrderType,
       handlePageChange,
@@ -193,15 +189,6 @@ export default defineComponent({
   .table-bottom {
     text-align: right;
   }
-  .alipay-color {
-    color: #3a78f6;
-  }
-  .wechat-color {
-    color: #63c742;
-  }
-  .bank-color {
-    color: #ce4646;
-  }
   .frist-td {
     display: flex;
     width: 100%;
diff --git a/src/views/order/all-order/components/FilterForm.vue b/src/views/order/all-order/components/FilterForm.vue
index ff5f1cabba0e5af9ae366b5cf4a1aa10dea14b10..ceff017e8bf509d4e8977e35f9f1fc45a7bb7389 100644
--- a/src/views/order/all-order/components/FilterForm.vue
+++ b/src/views/order/all-order/components/FilterForm.vue
@@ -124,6 +124,7 @@ export default defineComponent({
       orderParams.productName = ''
       orderParams.deliveryMethod = 0
       orderParams.type = 0
+      orderParams.current = 1
       orderParams.rightProtectionStatus = 0
       orderParams.payMethod = 0
       orderParams.createTimeStart = undefined
diff --git a/src/views/order/all-order/components/tableConfig.ts b/src/views/order/all-order/components/tableConfig.ts
index 1b0fe3f6aa71494e706541e4484aff2cd7dd8299..2ff68d174d2eea89acd1485e873c4880893ac848 100644
--- a/src/views/order/all-order/components/tableConfig.ts
+++ b/src/views/order/all-order/components/tableConfig.ts
@@ -33,11 +33,11 @@ const opt3: string[] = ['全部', '快递发货', '上门自提', '同城配送'
 const opt4: string[] = ['全部', '支付宝', '微信', '银联', '其他']
 // 表格显示的枚举信息配置
 export const tableEnum1: Array<Object> = [
-  { text: '未查询到支付信息', color: 'red' },
-  { text: '支付宝支付', color: '#3a78f6' },
-  { text: '微信支付', color: '#63c742' },
-  { text: '银联支付', color: '#ce4646' },
-  { text: '其他', color: '#efefef' },
+  { text: '未查询到支付信息', color: 'red', icon: 'ExclamationCircleFilled' },
+  { text: '支付宝支付', color: '#3a78f6', icon: 'AlipayCircleFilled' },
+  { text: '微信支付', color: '#63c742', icon: 'WechatFilled' },
+  { text: '银联支付', color: '#ce4646', icon: 'CreditCardFilled' },
+  { text: '其他', color: '#efefef', icon: 'TransactionFilled' },
 ]
 export const tableEnum2: Array<string> = [
   '未获取到订单状态',
@@ -72,7 +72,7 @@ export const rowTop: Array<tableColumns> = [
 ]
 
 // get请求筛选参数
-export const filterKeys = [
+export const filterKeys: string[] = [
   'rightProtectionStatus',
   'type',
   'deliveryMethod',