抽离备案蒙层

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,43 +6,53 @@
         为保证被保险人的保险权益在理赔时不受影响，请确认被保险人健康状况是否符合以下投保条件：
       </div>
     </div>
-    <card :title="true" class="inform-content">
+    <card title="true" class="inform-content">
       <span slot="title" class="inform-content-title">
         请如实告知
         <strong>被保人</strong> 是否有以下情形之一
       </span>
       <p>以下情况全为“否”，即符合投保条件：</p>
       <!-- eslint-disable-next-line -->
-      <p>1.被保险人职业是否属于以下职业：接触放射线或放射性物质，接触化学、易燃或易爆物质，有毒及危险物质生产运输，参与矿物或煤炭开采，暴露于烟尘或粉尘，参加高空、海洋、水下、地下、隧道、桥梁作业或活动，从事渔业捕捉，森林砍伐业或相关作业，森林防火，建筑施工，机械设备制造加工操作，金属/合金冶炼，3吨及3吨以上重型卡车、砂石车、液化气化油罐车驾驶及随车工作，高压电、电缆作业，拆船工作，私人保镖，战地记者，驯兽师，无固定职业，消防队员、特种兵、军事院校学生、入伍受训新兵、消防爆破、缉毒及防爆警察，参与镇暴或军警行动，前线军人。</p>
+      <p>1.被保险人职业是否属于以下职业：接触放射线或放射性物质，接触化学、易燃或易爆物质，有毒及危险物质生产运输，参与矿物或煤炭开采，暴露于烟尘或粉尘，参加高空、海洋、水下、地下、隧道、桥梁作业或活动，从事渔业捕捉，森林砍伐业或相关作业，森林防火，建筑施工，机械设备制造加工操作，金属/合金冶炼，3吨及3吨以上重型卡车、砂石车、液化气化油罐车驾驶及随车工作，高压电、电缆作业，拆船工作，私人保镖，战地记者，驯兽师，无固定职业，消防队员、特种兵、军事院校学生、入伍受训新兵、消防爆破、缉毒及防爆警察，参与镇暴或军警行动，前线军人。</p>
       <!-- eslint-disable-next-line -->
-      <p>2. 被保险人过去 1 年内是否发现健康检查异常（包括但不限于血液、超声、影像检查、内镜、病理检查等）,过去 2 年内是否住院或被要求进一步检查、手术或治疗（不包括剖腹产/顺产/急性胃肠炎/单次发作已痊愈的肺炎/上呼吸道感染住院）。</p>
+      <p>2. 被保险人过去 1 年内是否发现健康检查异常（包括但不限于血液、超声、影像检查、内镜、病理检查等）,过去 2 年内是否住院或被要求进一步检查、手术或治疗（不包括剖腹产/顺产/急性胃肠炎/单次发作已痊愈的肺炎/上呼吸道感染住院）。</p>
       <!-- eslint-disable-next-line -->
-      <p>3. 被保险人目前或过往是否患有下列疾病：良、恶性肿瘤（含原位癌），2 级或以上高血压（收缩压大于 160mmHg，或舒张压大于 100mmHg），心脏疾病，主动脉疾病，脑梗死（脑栓塞或脑血栓），脑出血，脑外伤后遗症，肾脏疾病，慢性肝脏疾病，血友病，重型再障性贫血，系统性红斑狼疮，类风湿性关节炎，风湿热，糖尿病，阿尔茨海默病，帕金森氏病，运动神经元病，多发性硬化，重症肌无力，硬皮病，克隆病，溃疡性结肠炎，慢性胰腺炎，癫痫，精神病，先天性疾病，法定传染病（包含甲类及乙类），慢性阻塞性肺病，瘫痪，性病，艾滋病及 HIV 阳性，慢性酒精中毒。是否曾经或正在使用毒品或违禁药物、是否有智能障碍或痴呆、失明、聋哑、身体任何部位缺失、畸形及功能障碍、重听、视力障碍（近视1000度以上）。</p>
+      <p>3. 被保险人目前或过往是否患有下列疾病：良、恶性肿瘤（含原位癌），2 级或以上高血压（收缩压大于 160mmHg，或舒张压大于 100mmHg），心脏疾病，主动脉疾病，脑梗死（脑栓塞或脑血栓），脑出血，脑外伤后遗症，肾脏疾病，慢性肝脏疾病，血友病，重型再障性贫血，系统性红斑狼疮，类风湿性关节炎，风湿热，糖尿病，阿尔茨海默病，帕金森氏病，运动神经元病，多发性硬化，重症肌无力，硬皮病，克隆病，溃疡性结肠炎，慢性胰腺炎，癫痫，精神病，先天性疾病，法定传染病（包含甲类及乙类），慢性阻塞性肺病，瘫痪，性病，艾滋病及 HIV 阳性，慢性酒精中毒。是否曾经或正在使用毒品或违禁药物、是否有智能障碍或痴呆、失明、聋哑、身体任何部位缺失、畸形及功能障碍、重听、视力障碍（近视1000度以上）。</p>
       <!-- eslint-disable-next-line -->
-      <p>4. 过去 1 年内是否存在下列症状：反复头痛、晕厥、胸痛、气急、紫绀、持续反复发热、抽搐、不明原因出血、皮下出血点、咯血、反复呕吐、进食梗噎感或吞咽困难、呕血、浮肿、腹痛、黄疸、便血、血尿、蛋白尿、性质不明的肿块、消瘦（非健身原因所致的体重减轻 5公斤以上） 。</p>
+      <p>4. 过去 1 年内是否存在下列症状：反复头痛、晕厥、胸痛、气急、紫绀、持续反复发热、抽搐、不明原因出血、皮下出血点、咯血、反复呕吐、进食梗噎感或吞咽困难、呕血、浮肿、腹痛、黄疸、便血、血尿、蛋白尿、性质不明的肿块、消瘦（非健身原因所致的体重减轻 5公斤以上） 。</p>
       <!-- eslint-disable-next-line -->
-      <p>5. 适用于女性被保险人：是否曾患有葡萄胎或其他妊娠滋养细胞疾病、宫颈不典型增生；是否有半年内存在阴道异常出血、乳头异常溢液、疼痛、糜烂或回缩、乳房表面皮肤凹陷、皱褶或皮肤收缩等症状。</p>
+      <p>5. 适用于女性被保险人：是否曾患有葡萄胎或其他妊娠滋养细胞疾病、宫颈不典型增生；是否有半年内存在阴道异常出血、乳头异常溢液、疼痛、糜烂或回缩、乳房表面皮肤凹陷、皱褶或皮肤收缩等症状。</p>
       <p>6. 2 周岁以下被保险人出生时体重是否低于 2.5 公斤，是否早产，窒息，发育迟缓，脑瘫。</p>
       <!-- eslint-disable-next-line -->
-      <p>7.被保险人是否曾被保险公司解除合同或投保时被拒绝、延期、附加条款承保或有过任何形式的人身索赔？被保险人最近一年内是否已在其它保险公司申请累计重大疾病保险保额达50万以上？</p>
+      <p>7.被保险人是否曾被保险公司解除合同或投保时被拒绝、延期、附加条款承保或有过任何形式的人身索赔？被保险人最近一年内是否已在其它保险公司申请累计重大疾病保险保额达50万以上？</p>
     </card>
     <div class="inform-btns">
       <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);
       }