优化：后台会员列表页注册来源图标整合为组件

src/components/PlatformIcon/PlatformIcon.vue

@@ -4,27 +4,34 @@
       <template v-if="showTips" slot="title">
         <span class="f-12">{{ tipsPrefix }}{{ PlatformName[name] }}</span>
       </template>
-      <a-icon class="icon" :class="[name]" :component="PlatformIcons[name]" />
+      <a-icon
+        class="icon"
+        :class="[name]"
+        :component="PlatformIcons[name]"
+        :style="{ fontSize: `${iconSize}px` }"
+      />
     </a-tooltip>
   </span>
 </template>
 
 <script>
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
-import { mpWeixin, h5, app } from '@/core/icons'
+import { mpWeixin, h5, app, h5Weixin } from '@/core/icons'
 
-// 客户端图标
+// 注册来源名称
+const PlatformName = {
+  'MP-WEIXIN': '微信小程序',
+  'H5-WEIXIN': '微信公众号',
+  'H5': 'H5',
+  'APP': 'APP'
+}
+
+// 注册来源图标
 const PlatformIcons = {
   'MP-WEIXIN': mpWeixin,
+  'H5-WEIXIN': h5Weixin,
   'H5': h5,
-  'APP': app
-}
-
-// 客户端名称
-const PlatformName = {
-  'MP-WEIXIN': '微信小程序',
-  'H5': 'H5网页',
-  'APP': '手机APP'
+  'APP': app,
 }
 
 export default {
@@ -36,6 +43,8 @@ export default {
     showTips: PropTypes.bool.def(false),
     // 文字提示前缀
     tipsPrefix: PropTypes.string.def(''),
+    // 图标大小
+    iconSize: PropTypes.integer.def(16)
   },
   data () {
     return {
@@ -76,6 +85,10 @@ export default {
     color: #04be02;
   }
 
+  .H5-WEIXIN {
+    color: #04be02;
+  }
+
   .H5 {
     color: #e44c27;
   }

src/views/user/Index.vue

@@ -68,12 +68,7 @@
       </span>
       <!-- 注册来源 -->
       <span slot="platform" class="platform" slot-scope="text">
-        <p v-if="PlatformIcons[text]">
-          <a-tooltip>
-            <template slot="title">{{ PlatformName[text] }}</template>
-            <a-icon class="icon" :class="[text]" :component="PlatformIcons[text]" />
-          </a-tooltip>
-        </p>
+        <platform-icon :name="text" :showTips="true" :iconSize="17" />
       </span>
       <!-- 操作 -->
       <span class="actions" slot="action" slot-scope="item">
@@ -92,35 +87,18 @@ import * as Api from '@/api/user'
 import * as GradeApi from '@/api/user/grade'
 import { STable } from '@/components'
 import { GradeForm, RechargeForm } from './modules'
-import { mpweixin, h5, app } from '@/core/icons'
-
-// 注册来源名称
-const PlatformName = {
-  'MP-WEIXIN': '微信小程序',
-  'H5': 'H5',
-  'APP': 'APP'
-}
-
-// 注册来源图标
-const PlatformIcons = {
-  'MP-WEIXIN': mpweixin,
-  'H5': h5,
-  'APP': app
-}
+import PlatformIcon from '@/components/PlatformIcon'
 
 export default {
   name: 'Index',
   components: {
     STable,
     GradeForm,
-    RechargeForm
+    RechargeForm,
+    PlatformIcon
   },
   data () {
     return {
-      // 注册来源名称
-      PlatformName,
-      // 注册来源图标
-      PlatformIcons,
       // 当前表单元素
       searchForm: this.$form.createForm(this),
       // 查询参数
@@ -176,9 +154,7 @@ export default {
       // 加载数据方法 必须为 Promise 对象
       loadData: param => {
         return Api.list({ ...param, ...this.queryParam })
-          .then(response => {
-            return response.data.list
-          })
+          .then(response => response.data.list)
       },
       // 会员等级列表
       gradeList: []
@@ -221,9 +197,7 @@ export default {
               app.$message.success(result.message, 1.5)
               app.handleRefresh()
             })
-            .finally(result => {
-              modal.destroy()
-            })
+            .finally(result => modal.destroy())
         }
       })
     },
@@ -255,16 +229,4 @@ export default {
 .ant-card-body {
   padding: 22px 29px 25px;
 }
-.platform {
-  .icon {
-    font-size: 17px;
-  }
-
-  .MP-WEIXIN {
-    color: #04be02;
-  }
-  .H5 {
-    color: #e44c27;
-  }
-}
 </style>