优化

src/components/pages/PaymentManagement/AccountManagement.vue

@@ -40,11 +40,13 @@
           {{ cardNo }}
         </span>
         <span slot="cardStatus" slot-scope="cardStatus, record">
-          {{ record.cardNo ? cardStatus === 'UNACTIVE' ? '已冻结' : '已绑卡' : '未绑卡'}}
+          <a-badge v-if="record.cardNo != '' && cardStatus !== 'UNACTIVE'" status="success" text="已帮卡" />
+          <a-badge v-else-if="record.cardNo != '' && cardStatus === 'UNACTIVE'" status="error" text="已冻结" />
+          <a-badge v-else status="default" text="未绑卡" />
         </span>
         <span slot="status" slot-scope="status">
-          <!-- {{ status === MINGPAY_ACCOUNT_STATUS.ACTIVE ? '正常' : '已注销并结现' }} -->
-          {{ status === MINGPAY_ACCOUNT_STATUS.ACTIVE ? '正常' : '已注销' }}
+          <a-badge v-if="status === MINGPAY_ACCOUNT_STATUS.ACTIVE" status="success" text="正常" />
+          <a-badge v-else status="error" text="已注销" />
         </span>
         <span slot="action" slot-scope="text, record, index" class="operationTable">
           <a href="javascript:;" @click="ToViewAllowances(record)">查看津贴</a>

src/components/pages/PaymentManagement/RechargeRecord.vue

@@ -35,7 +35,9 @@
         </span>
         <span slot="orderNo">单号</span>
         <span slot="orderStatus" slot-scope="orderStatus">
-          {{ returnStatus(orderStatus)}}
+          <a-badge v-if="orderStatus === MINGPAY_CHARGE_ORDERSTATUS.WAITING_PERMIT" status="processing" text="审批中" />
+          <a-badge v-else-if="orderStatus === MINGPAY_CHARGE_ORDERSTATUS.SUCCESS" status="success" text="已完成" />
+          <a-badge v-else-if="orderStatus === MINGPAY_CHARGE_ORDERSTATUS.FAILED" status="error" text="审批未通过" />
         </span>
         <span slot="createTime" slot-scope="createTime">
           {{ createTime }}
@@ -54,6 +56,7 @@ export default {
   components: {},
   data () {
     return {
+      MINGPAY_CHARGE_ORDERSTATUS: MINGPAY_CHARGE_ORDERSTATUS,
       data: [],
       columns: [{
         title: '成员',
@@ -121,24 +124,24 @@ export default {
       })
     },
     // 充值状态
-    returnStatus (str) {
-      let status = ''
-      switch (str) {
-        case MINGPAY_CHARGE_ORDERSTATUS.WAITING_PERMIT:
-          status = '审批中'
-          break
-        case MINGPAY_CHARGE_ORDERSTATUS.SUCCESS:
-          status = '已完成'
-          break
-        case MINGPAY_CHARGE_ORDERSTATUS.FAILED:
-          status = '审批未通过'
-          break
-        case MINGPAY_CHARGE_ORDERSTATUS.WAITING_PAYMENT:
-          status = '等待支付'
-          break
-      }
-      return status
-    },
+    // returnStatus (str) {
+    //   let status = ''
+    //   switch (str) {
+    //     case MINGPAY_CHARGE_ORDERSTATUS.WAITING_PERMIT:
+    //       status = '审批中'
+    //       break
+    //     case MINGPAY_CHARGE_ORDERSTATUS.SUCCESS:
+    //       status = '已完成'
+    //       break
+    //     case MINGPAY_CHARGE_ORDERSTATUS.FAILED:
+    //       status = '审批未通过'
+    //       break
+    //     case MINGPAY_CHARGE_ORDERSTATUS.WAITING_PAYMENT:
+    //       status = '等待支付'
+    //       break
+    //   }
+    //   return status
+    // },
     // 表格时间格式处理
     createTimeToStr (time) {
       let timeData = new Date(parseInt(time))

src/components/pages/PaymentManagement/RecordsOfConsumption.vue

@@ -32,7 +32,9 @@
         <span slot="consumptionSubsidyAmount">津贴消费</span>
         <!-- <span slot="orderNo">单号</span> -->
         <span slot="orderStatus" slot-scope="orderStatus">
-          {{ orderStatus === MINGPAY_RECORDS_STATUS.SUCCESS ? '已消费' : orderStatus === MINGPAY_RECORDS_STATUS.WAITING_PERMIT ? 'WAITING_PERMIT' : '已退款'}}
+          <a-badge v-if="orderStatus === MINGPAY_RECORDS_STATUS.SUCCESS" status="success" text="已消费" />
+          <a-badge v-else-if="orderStatus === MINGPAY_RECORDS_STATUS.WAITING_PERMIT" status="processing" text="审批中" />
+          <a-badge v-else status="error" text="已退款" />
         </span>
         <span slot="remark">备注</span>
         <span slot="createTime" slot-scope="createTime">

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import { Menu, Layout, Breadcrumb, Icon, Button, DatePicker, Input, Table, Tag, Divider, Dropdown, Modal, Form, Select, message, Pagination, LocaleProvider, Spin } from 'ant-design-vue'
+import { Menu, Layout, Breadcrumb, Icon, Button, DatePicker, Input, Table, Tag, Divider, Dropdown, Modal, Form, Select, message, Pagination, LocaleProvider, Spin, Badge } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import { config } from './api/config'
 import axios from 'axios'
@@ -11,6 +11,7 @@ import qs from 'qs'
 Vue.use(Layout)
 Vue.use(LocaleProvider)
 Vue.use(Menu)
+Vue.use(Badge)
 Vue.use(Spin)
 Vue.use(Breadcrumb)
 Vue.use(Icon)