feat: 增加公共提示组件

src/components/common/common-alert-tip.vue

+<!--
+ * @Descripttion : 当前组件信息
+ * @Author       : 无尘
+ * @Date         : 2020-02-13 14:02:40
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-23 11:20:07
+ * @FilePath     : j:\公司\haoban-4\src\components\company\common-alert-tip.vue
+ -->
+<!--
+
+  <common-alert-tip :tipContent="tipContent"></common-alert-tip>
+  import commonAlertTip from '@/components/company/common-alert-tip.vue';
+ -->
+<template>
+  <div class="common-alert-tip">
+    <div class="" style="min-width:645px;">
+      <div role="alert" class="el-alert el-alert--info flex flex-align-start">
+        <i class="el-alert__icon el-icon-info font-12 color-2f54eb"></i>
+        <div class="el-alert__content">
+          <span class="el-alert__title color-606266 font-13">
+            {{tipContent}}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'common-alert-tip',
+  components: {
+  },
+  props: {
+    tipContent: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+
+  },
+  watch: {
+
+  }
+
+};
+</script>
+<style lang="less" scoped>
+
+</style>

src/components/company/auth-tip.vue

+<!--
+ * @Descripttion : 当前组件信息
+ * @Author       : 无尘
+ * @Date         : 2020-02-13 14:02:40
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-23 10:28:34
+ * @FilePath     : j:\公司\haoban-4\src\components\company\auth-tip.vue
+ -->
+<!--
+
+  <auth-tip></auth-tip>
+  import authTip from '@/components/company/auth-tip.vue';
+ -->
+<template>
+  <div class="auth-tip">
+    <div class="" style="width:645px;">
+      <div role="alert" class="el-alert el-alert--info flex flex-align-start">
+        <i class="el-alert__icon el-icon-info font-12 color-2f54eb"></i>
+        <div class="el-alert__content">
+          <span class="el-alert__title color-606266 font-13">
+            商户授权须知：<br/>
+            1. 商户授权可以是多个商户授权到1个企业下，但是需保证使用的服务号或小程序在同一开放平台<br/>
+              下，否则绑定商户的客户获取的unionid会不一致，最终会无法识别企业微信客户与会员的绑定性;
+            2. 商户绑定后，可选择部分门店绑定，如商户有100家门店，可授权其中50家;<br/>
+            3. 绑定商户结束后，导购可通过企业微信好办小程序绑定导购账号后登录;<br/>
+            4. 进行门店绑定后，请勿随意操作门店绑定范围，如果门店范围取消，会导致用户关联的导购账号<br/>
+                解绑，<span class="color-f5222d">如果24小时内未恢复范围，会永久解绑。</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'auth-tip',
+  components: {
+  },
+  props: {
+
+  },
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+    /**
+     * 路由跳转
+     */
+    changeRoute(path) {
+      this.$router.push(path);
+    },
+  },
+  watch: {
+
+  }
+
+};
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/business/newAuthMerchant.vue

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2019-03-20 14:36:37
  * @LastEditors: 无尘
- * @LastEditTime: 2020-07-22 16:50:29
+ * @LastEditTime: 2020-07-23 10:27:36
  -->
 <template>
   <div class="my-customer-wrap common-set-wrap">
@@ -17,6 +17,9 @@
               <div>
                 <auth-step :activeStep="activeStep"></auth-step>
               </div>
+              <div class="auth-tip-body">
+                <auth-tip></auth-tip>
+              </div>
             </div>
           </div>
         </div>
@@ -28,6 +31,7 @@
 <script>
 import navCrumb from '@/components/nav/nav.vue';
 import authStep from '@/components/company/auth-step.vue';
+import authTip from '@/components/company/auth-tip.vue';
 import { getRequest, postRequest } from '@/api/api';
 import errMsg from '@/common/js/error';
 // import { _debounce } from '@/common/js/public';
@@ -128,7 +132,8 @@ export default {
   },
   components: {
     navCrumb,
-    authStep
+    authStep,
+    authTip
   }
 };
 </script>
@@ -147,13 +152,13 @@ export default {
     background: #f5222d;
   }
 }
-.bg-82C5FF {
+.bg-82c5ff {
   background: #82c5ff;
 }
-.color-508CEE {
+.color-508cee {
   color: #508cee;
 }
-.color-FF585C {
+.color-ff585c {
   color: #ff585c;
 }
 .line-h-18 {
@@ -164,27 +169,13 @@ export default {
   white-space: pre-wrap;
   word-break: break-all;
 }
-.w-293 {
-  width: 293px;
-}
-.w-191 {
-  width: 191px;
-}
-.el-alert--info {
-  background: rgba(240, 245, 255, 1);
-  border-radius: 2px;
-  border: 1px solid rgba(133, 165, 255, 1);
-  -webkit-box-align: flex-start;
-  -webkit-align-items: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  .el-alert__icon {
-    font-size: 12px;
-    padding-top: 3px;
-  }
-}
+
 .my-customer-wrap {
   height: 100%;
+  .auth-tip-body {
+    width: 645px;
+    margin: 0 auto;
+  }
 }
 .right-content {
   /*width: 100%;*/
@@ -199,17 +190,6 @@ export default {
         width: 100%;
         padding: 20px;
         background: #fff;
-        .overstore-body {
-          background: #fff;
-        }
-        .daily-set-wrap {
-          height: 100%;
-          background: #fff;
-        }
-        .app-detail-wrap {
-          height: 100%;
-          background: #fff;
-        }
         .common-set-wrap {
           height: 100%;
           background: #fff;