diff --git a/src/components/Icon/index.vue b/src/components/Icon/index.vue
index 57da369ca1a03ee71c70e8b2f63eb6229936c7d4..b0c2585adac564d6e3587cf05c369dabccb404b0 100644
--- a/src/components/Icon/index.vue
+++ b/src/components/Icon/index.vue
@@ -1,5 +1,6 @@
 <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'
 
 export default defineComponent({
@@ -9,9 +10,63 @@ export default defineComponent({
       type: String,
       default: () => '',
     },
+    style: {
+      type: Object,
+      default: () => null,
+    },
+    option: {
+      type: Object,
+      default: () => {},
+    },
+    spin: {
+      type: Boolean,
+      default: () => false,
+    },
+    rotate: {
+      type: Number,
+      default: () => null,
+    },
+    twoToneColor: {
+      type: String,
+      default: () => '',
+    },
+  },
+  setup(props) {
+    const params: UnwrapRef<IconOption> = reactive(props.option || {})
+    const optionKeys: string[] = Object.keys(props)
+    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;',
+        )
+      }
+    }
+    setParams()
+    checkParams()
+    return {
+      params,
+    }
   },
   render() {
-    return h(Icons[this.type])
+    return h(Icons[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..71fb7b75bc733a0678c1404ce62827dbdfe58864 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="icons[data]" :style="{ fontSize: '14px' }" />
+            <span>{{ orderPayMethod[data || 0].text }}</span>
           </span>
         </template>
         <template #productName="{ data }">
@@ -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: {
@@ -93,6 +91,13 @@ export default defineComponent({
         current: 1,
         size: 5,
       },
+      icons: [
+        'ExclamationCircleFilled',
+        'AlipayCircleFilled',
+        'WechatFilled',
+        'CreditCardFilled',
+        'TransactionFilled',
+      ],
       slotName: 'name1',
     })
     const starOrder = ref(false)
@@ -190,18 +195,16 @@ export default defineComponent({
       background: #fff;
     }
   }
+  .table-contain {
+    .paySpan {
+      .i-icon {
+        // border: 1px solid red;
+      }
+    }
+  }
   .table-bottom {
     text-align: right;
   }
-  .alipay-color {
-    color: #3a78f6;
-  }
-  .wechat-color {
-    color: #63c742;
-  }
-  .bank-color {
-    color: #ce4646;
-  }
   .frist-td {
     display: flex;
     width: 100%;