feat: 无权限MessageBox弹窗抽取成mixin

src/assets/style/reset-ele.scss

@@ -73,6 +73,28 @@
     }
   }
 }
+.custom-message-box {
+  width: 380px!important;
+  border-radius: 8px;
+  .custom-confirm-btn{
+    margin-top: 12px;
+    width: 132px;
+    height: 36px;
+    background: #2cb7ca;
+    border-radius: 6px;
+    border: 0;
+    font-size: 16px;
+    &:hover {
+      background: #2cb7ca;
+    }
+  }
+  .el-message-box__message,
+  .message-text{
+    font-size: 14px;
+    color: #686868;
+    line-height: 24px;
+  }
+}
 .el-popper {
   li{
     float: none;

src/components/common/TabHeader.vue

@@ -15,9 +15,11 @@
 
 <script>
 import { MessageBox } from 'element-ui'
+import { mixinNoPowerMessageTip } from '@/utils/mixins/no-power-message-box'
 import { mapState } from 'vuex'
 export default {
   name: 'bid-tab-header',
+  mixins: [mixinNoPowerMessageTip],
   props: {
     actived: {
       type: String
@@ -28,9 +30,6 @@ export default {
       power: state => state.user.info.power
     })
   },
-  components: {
-    [MessageBox.name]: MessageBox
-  },
   data () {
     return {}
   },
@@ -53,32 +52,7 @@ export default {
     },
     toPotential () {
       if (this.power.indexOf(7) === -1) {
-        const h = this.$createElement
-        MessageBox({
-          title: '暂无权限',
-          customClass: 'custom-message-box',
-          confirmButtonText: '我知道了',
-          confirmButtonClass: 'custom-confirm-btn',
-          message: h('div', { class: 'message-text', style: 'font-size: 14px;color: #686868;line-height: 24px;' }, [
-            h('span', null, '您未购买此服务，如需使用，您可拨打客服电话'),
-            h('br'),
-            h('span', null, '400-108-6670 或在线'),
-            h('span', {
-              class: 'highlight-text',
-              style: 'cursor: pointer',
-              on: {
-                click: () => {
-                  this.contactCustomer(this)
-                }
-              }
-            }, '联系客服'),
-            h('span', null, '谢谢')
-          ]),
-          showClose: false,
-          showCancelButton: false,
-          closeOnClickModal: false,
-          center: true
-        }).then(() => {})
+        this.showNoPowerMessageTip()
       } else {
         if (this.actived === 'cor') return
         this.$router.replace('/potential_rival_list/c')

src/utils/mixins/no-power-message-box.js

@@ -0,0 +1,34 @@
+import { MessageBox } from 'element-ui'
+
+export const mixinNoPowerMessageTip = {
+  methods: {
+    async showNoPowerMessageTip () {
+      const h = this.$createElement
+      return await MessageBox({
+        title: '暂无权限',
+        customClass: 'custom-message-box',
+        confirmButtonText: '我知道了',
+        confirmButtonClass: 'custom-confirm-btn',
+        message: h('div', { class: 'message-text', style: 'font-size: 14px;color: #686868;line-height: 24px;' }, [
+          h('span', null, '您未购买此服务，如需使用，您可拨打客服电话'),
+          h('br'),
+          h('span', null, '400-108-6670 或在线'),
+          h('span', {
+            class: 'highlight-text',
+            style: 'cursor: pointer',
+            on: {
+              click: () => {
+                this.contactCustomer(this)
+              }
+            }
+          }, '联系客服'),
+          h('span', null, '谢谢')
+        ]),
+        showClose: false,
+        showCancelButton: false,
+        closeOnClickModal: false,
+        center: true
+      })
+    }
+  }
+}