抽离备案蒙层

src/components/RecordLayer.vue

+<template>
+  <cr-overlay class="user-mask" :show="value" @click="hide">
+    <cr-image class="user-mask-image" round width="86px" height="86px" fit="cover" :src="record" />
+    <p class="user-mask-title">平台备案中</p>
+    <p class="user-mask-desc">{{ desc }}</p>
+  </cr-overlay>
+</template>
+
+<script>
+import record from "@/assets/images/user/for_the_record@2x.png";
+
+export default {
+  name: "Tabbar",
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    desc: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      record
+    };
+  },
+  methods: {
+    hide() {
+      this.$emit("input", false);
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.user-mask {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 101;
+  &-image {
+    margin-bottom: 10px;
+  }
+  &-title {
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 600;
+    color: #ffffff;
+  }
+  &-desc {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 600;
+    color: #ffffff;
+  }
+}
+</style>

src/components/SvgIcon.vue

@@ -9,11 +9,11 @@ export default {
   name: "SvgIcon",
   props: {
     iconClass: {
-      type: String,
+      type: [String, Array],
       required: true
     },
     className: {
-      type: String,
+      type: [String, Array],
       default: ""
     }
   },

src/components/Tabbar.vue

@@ -69,6 +69,7 @@ export default {
 .mongo-tabbar {
   position: fixed;
   bottom: 0;
+  z-index: 100;
   box-sizing: border-box;
   height: 49px;
   padding: 5px 0 2px 0;

src/store/index.js

@@ -9,13 +9,11 @@ export default new Vuex.Store({
   },
   mutations: {
     setActiveIdx(state, value) {
-      console.log('setActiveIdx', value);
       state.activeIdx = value;
     }
   },
   actions: {
     setActiveIdx(state, value) {
-      console.log('setActiveIdx', value);
       state.activeIdx = value;
     }
   },

src/views/Goods/inform.vue

@@ -6,7 +6,7 @@
         为保证被保险人的保险权益在理赔时不受影响，请确认被保险人健康状况是否符合以下投保条件：
       </div>
     </div>
-    <card :title="true" class="inform-content">
+    <card title="true" class="inform-content">
       <span slot="title" class="inform-content-title">
         请如实告知
         <strong>被保人</strong> 是否有以下情形之一
@@ -30,19 +30,29 @@
       <cr-button @click="$router.back()">不符合</cr-button>
       <cr-button type="warning" @click="conform">符合，立即投保</cr-button>
     </div>
+    <record-layer v-model="showLayer" desc="敬请期待"></record-layer>
   </div>
 </template>
 
 <script>
 import card from "@/components/Card";
+import RecordLayer from "@/components/RecordLayer";
+
 export default {
   name: "GoodsInform",
   components: {
-    card
+    card,
+    RecordLayer
+  },
+  data() {
+    return {
+      showLayer: false
+    };
   },
   methods: {
     conform() {
-      this.$toast("平台备案中，不能支付，敬请期待");
+      // this.$toast("平台备案中，不能支付，敬请期待");
+      this.showLayer = true;
     }
   }
 };

src/views/Policy/index.vue

@@ -22,19 +22,19 @@
 <script>
 import "./index.less";
 import policyDefault from "@/assets/images/policy/policy-default@2x.png";
-import InsuranceRecommend from "./modules/InsuranceRecommend";
-import PolicyItem from "./modules/PolicyItem";
+// import InsuranceRecommend from "./modules/InsuranceRecommend";
+// import PolicyItem from "./modules/PolicyItem";
 
 export default {
   name: "PolicyList",
-  components: {
-    InsuranceRecommend,
-    PolicyItem,
-  },
+  // components: {
+  //   InsuranceRecommend,
+  //   PolicyItem
+  // },
   data() {
     return {
       active: 0,
-      policyDefault,
+      policyDefault
     };
   }
 };

src/views/User/index.less

@@ -279,25 +279,4 @@
 	  color: #CCCCCC;
   	}
   }
-  &-mask {
-  	display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    &-image {
-	  margin-bottom: 10px;
-    }
-    &-title {
-	  font-size: 15px;
-	  line-height:24px;
-	  font-weight: 600;
-	  color: #FFFFFF;
-    }
-    &-desc {
-      font-size: 20px;
-      line-height:24px;
-      font-weight: 600;
-      color: #FFFFFF;
-    }
-  }
 }

src/views/User/index.vue

@@ -43,18 +43,7 @@
       <svg-icon icon-class="logo" class-name="user-logo-svg" />
       <p class="user-logo-desc" @click="go('/introduction')">了解芒果保险</p>
     </div>
-    <cr-overlay class="user-mask" :show="show" @click="show = false">
-      <cr-image
-        class="user-mask-image"
-        round
-        width="86px"
-        height="86px"
-        fit="cover"
-        :src="record"
-      />
-      <p class="user-mask-title">平台备案中</p>
-      <p class="user-mask-desc">敬请期待</p>
-    </cr-overlay>
+    <record-layer v-model="showLayer" desc="敬请期待"></record-layer>
     <tabbar></tabbar>
   </div>
 </template>
@@ -63,30 +52,30 @@ import "./index.less";
 import customerService from "@/assets/images/user/customer-service@1x.png";
 import help from "@/assets/images/user/help@2x.png";
 import avatar from "@/assets/images/user/avatar@2x.png";
-import record from "@/assets/images/user/for_the_record@2x.png";
 import UserFamily from "./modules/UserFamily";
 import Tabbar from "@/components/Tabbar";
+import RecordLayer from "@/components/RecordLayer";
 
 export default {
   name: "User",
   components: {
     UserFamily,
-    Tabbar
+    Tabbar,
+    RecordLayer
   },
   data() {
     return {
       avatar,
       customerService,
       help,
-      record,
       isFixed: false,
-      show: false
+      showLayer: false
     };
   },
   methods: {
     go(path, isOverlay = false) {
       if (isOverlay) {
-        this.show = true;
+        this.showLayer = true;
       } else {
         this.$router.push(path);
       }