From edd4a3aa3b5c83fcabf0ad005ad5bb9e9e9df04e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Sat, 31 Jul 2021 11:54:49 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=8A=A0=E8=BD=BD=E6=94=AF=E4=BB=98=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../all-order/components/AllOrderTable.vue    | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/views/order/all-order/components/AllOrderTable.vue b/src/views/order/all-order/components/AllOrderTable.vue
index 972b98f..229309d 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 }">
+            <component :is="changeIcon(data)" />
+            <span>{{ orderPayMethod[data || 0].text }}</span>
           </span>
         </template>
         <template #productName="{ data }">
@@ -58,17 +58,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, inject, watch, toRefs, ref } from 'vue'
+import { defineComponent, reactive, inject, watch, toRefs, ref, createVNode } 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 { Attention, Alipay, Wechat, BankCard, Funds } from '@icon-park/vue-next'
 import { columns, filterBtns, rowTop, tableEnum1, tableEnum2, tableEnum3 } from './tableConfig'
 
 export default defineComponent({
   components: {
     OrderTable,
-    SafetyOutlined,
+    Attention,
+    Alipay,
+    Wechat,
+    BankCard,
+    Funds,
   },
   props: {
     tableRes: {
@@ -109,6 +113,12 @@ export default defineComponent({
       state.pageParams.size = size
       state.pageParams.current = 1
     }
+    // 根据数据动态显示图标组件
+    const icons = [Attention, Alipay, Wechat, BankCard, Funds]
+    const iconProps = { size: 14, theme: 'filled' }
+    const changeIcon = (data: number) => {
+      return createVNode(icons[data], iconProps)
+    }
     // 监听router区分加星订单页面
     watch(
       () => route.name,
@@ -157,6 +167,7 @@ export default defineComponent({
     return {
       starOrder,
       ...toRefs(state),
+      changeIcon,
       filterOrderType,
       handlePageChange,
       handleSizeChange,
@@ -190,18 +201,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%;
-- 
Gitee


From 962eae6c17ebea48a7674d6d91082b24f42af13f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Tue, 3 Aug 2021 14:47:17 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9icon=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=EF=BC=8C=E4=BD=BF=E5=85=B6=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=97antd=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Icon/index.vue                 | 59 ++++++++++++++++++-
 src/interface/icon.ts                         |  8 +++
 .../all-order/components/AllOrderTable.vue    | 24 +++-----
 3 files changed, 74 insertions(+), 17 deletions(-)
 create mode 100644 src/interface/icon.ts

diff --git a/src/components/Icon/index.vue b/src/components/Icon/index.vue
index 57da369..b0c2585 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 0000000..e32c086
--- /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 229309d..71fb7b7 100644
--- a/src/views/order/all-order/components/AllOrderTable.vue
+++ b/src/views/order/all-order/components/AllOrderTable.vue
@@ -15,7 +15,7 @@
       <OrderTable :columns="columns" :row-top="rowTop" :table-data="tableData">
         <template #payMethod="{ data }">
           <span class="paySpan" :style="{ color: orderPayMethod[data || 0].color }">
-            <component :is="changeIcon(data)" />
+            <icon :type="icons[data]" :style="{ fontSize: '14px' }" />
             <span>{{ orderPayMethod[data || 0].text }}</span>
           </span>
         </template>
@@ -58,21 +58,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, inject, watch, toRefs, ref, createVNode } from 'vue'
+import { defineComponent, reactive, inject, watch, toRefs, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { ParamsData } from '@/model/order/AllOrder'
 import OrderTable from '@/components/OrderTable/index.vue'
-import { Attention, Alipay, Wechat, BankCard, Funds } from '@icon-park/vue-next'
 import { columns, filterBtns, rowTop, tableEnum1, tableEnum2, tableEnum3 } from './tableConfig'
 
 export default defineComponent({
   components: {
     OrderTable,
-    Attention,
-    Alipay,
-    Wechat,
-    BankCard,
-    Funds,
   },
   props: {
     tableRes: {
@@ -97,6 +91,13 @@ export default defineComponent({
         current: 1,
         size: 5,
       },
+      icons: [
+        'ExclamationCircleFilled',
+        'AlipayCircleFilled',
+        'WechatFilled',
+        'CreditCardFilled',
+        'TransactionFilled',
+      ],
       slotName: 'name1',
     })
     const starOrder = ref(false)
@@ -113,12 +114,6 @@ export default defineComponent({
       state.pageParams.size = size
       state.pageParams.current = 1
     }
-    // 根据数据动态显示图标组件
-    const icons = [Attention, Alipay, Wechat, BankCard, Funds]
-    const iconProps = { size: 14, theme: 'filled' }
-    const changeIcon = (data: number) => {
-      return createVNode(icons[data], iconProps)
-    }
     // 监听router区分加星订单页面
     watch(
       () => route.name,
@@ -167,7 +162,6 @@ export default defineComponent({
     return {
       starOrder,
       ...toRefs(state),
-      changeIcon,
       filterOrderType,
       handlePageChange,
       handleSizeChange,
-- 
Gitee