Merge branch 'feature/user' into 'master'

Feature/user

See merge request !16

src/views/Policy/Detail/index.less

@@ -75,6 +75,7 @@
   	position: absolute;
   	left: 0;
   	right: 0;
+  	padding-bottom: 49px;
 	.Pdb-status {
 	  margin: 32px 0 5px 20px;
 	  font-size: 28px;
@@ -82,7 +83,7 @@
 	  color: #333333;
 	  line-height: 40px;
 	}
-	.Pdb-payment {
+	.Pdb-tips {
 	  display: flex;
 	  align-items: center;
 	  justify-content: center;
@@ -105,6 +106,50 @@
 	  	height: 12px;
 	  }
 	}
+	.Pdb-payment {
+	  margin: 0 16px 10px;
+	  padding: 20px;
+	  background: #FFFFFF;
+      box-shadow: 0px 5px 25px 0px rgba(0,0,0,0.07);
+	  border-radius: 14px;
+	  &-title {
+		margin-bottom: 16px;
+		font-size: 18px;
+		font-weight: 600;
+		color: #242629;
+		line-height: 24px;
+	  }
+	  &-content {
+	  	margin-bottom: 17px;
+	  	.Pdbp-content-item {
+	  	  display: flex;
+	  	  align-items: center;
+		  .Pdbpc-item-svg {
+		  	margin-right: 8px;
+			width: 12px;
+			height: 12px;
+			border-radius: 50%;
+			background: #FFC842;
+		  }
+		  .Pdbpc-item-text {
+		  	font-size: 14px;
+			font-weight: 400;
+			color: #999999;
+			line-height: 24px;
+		   }
+	  	}
+	  }
+	  &-button {
+	  	width: 303px;
+		height: 52px;
+		background: #FFC842;
+		border-radius: 14px;
+		font-size: 16px;
+		font-weight: 600;
+		color: #333333;
+		line-height: 22px;
+	  }
+	}
 	.Pdb-insurance {
 	  margin: 0 16px 10px;
 	  padding: 20px;
@@ -211,17 +256,24 @@
   	  }
 	}
 	.Pdb-operation {
-	  
+	  display: flex;
+	  justify-content: space-around;
+	  margin-bottom: 14px;
 	  &-item {
 	  	display: flex;
-	    justify-content: space-around;
-	    &-svg {
-	      margin-right: 12px;
+	    justify-content: space-between;
+	  	align-items: center;
+	  	width: 84px;
+	    .Pdbo-item-svg {
+	      // margin-right: 12px;
 	      width: 16px;
 	      height: 16px;
 	    }
-	    &-text {
-	      
+	    .Pdbo-item-text {
+	      font-size: 14px;
+		  font-weight: 400;
+		  color: #999999;
+		  line-height: 20px;
 	    }
 	  }
 	}

src/views/Policy/Detail/index.vue

@@ -2,9 +2,27 @@
   <div class="policy-detail">
     <div class="policy-detail-body">
       <p class="Pdb-status">保障中</p>
+      <div class="Pdb-tips">
+        <span class="Pdb-tips-text">缴费记录</span>
+        <svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" />
+      </div>
       <div class="Pdb-payment">
-        <span class="Pdb-payment-text">缴费记录</span>
-        <svg-icon class-name="Pdb-payment-svg" icon-class="payment-record" />
+        <p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p>
+        <div class="Pdb-payment-content">
+          <div class="Pdbp-content-item">
+            <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
+            <span class="Pdbpc-item-text">无需次年自己手动操作续保</span>
+          </div>
+          <div class="Pdbp-content-item">
+            <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
+            <span class="Pdbpc-item-text">本功能无额外费用，可随时取消</span>
+          </div>
+          <div class="Pdbp-content-item">
+            <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
+            <span class="Pdbpc-item-text">续保保费按照续保应交保费，自动扣款</span>
+          </div>
+        </div>
+        <cr-button class="Pdb-payment-button">立即缴费</cr-button>
       </div>
       <div class="Pdb-insurance">
         <p class="Pdb-insurance-name">国民保·百万医疗险</p>
@@ -111,7 +129,7 @@
           <span class="Pdbo-item-text">返回首页</span>
         </div>
       </div>
-      <insurance-recommend />
+      <insurance-recommend class="Pdb-recommend" />
     </div>
   </div>
 </template>

src/views/User/index.vue

@@ -12,7 +12,7 @@
           height=""
           round
           fit="cover"
-          :src="avatar"
+          src="@/assets/images/user/avatar@2x.png"
         />
         <!-- <svg-icon icon-class="certification" class-name="user-info-image-certification" /> -->
       </div>
@@ -38,7 +38,7 @@
     <div class="user-service">
       <p class="user-service-title">我的服务</p>
       <div class="user-service-main" @click="go('', true)">
-        <cr-cell title="帮助中" :icon="help" class="user-service-main-item">
+        <cr-cell title="帮助中心" :icon="help" class="user-service-main-item">
           <svg-icon slot="right-icon" icon-class="arrow" class-name="user-service-main-item-svg" />
         </cr-cell>
         <cr-cell title="客服电话" :icon="customerService" class="user-service-main-item">

src/views/User/modules/UserFamily.vue

@@ -27,13 +27,24 @@
         <cr-image round width="" height="" class="user-family-insurance-item-left" :src="medical" />
         <div class="user-family-insurance-item-middle">
           <div class="Ufii-middle-main">
-            <span class="Ufii-middle-main-title">国民保·百万医疗险</span>
+            <span class="Ufii-middle-main-title">医疗保障</span>
             <!-- <span class="status">保障中</span> -->
           </div>
           <div class="Ufii-middle-footer">看病报销医药费,最高600万</div>
         </div>
         <p class="user-family-insurance-item-right">开启保障</p>
       </div>
+      <div class="user-family-insurance-item">
+        <cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" />
+        <div class="user-family-insurance-item-middle">
+          <div class="Ufii-middle-main">
+            <span class="Ufii-middle-main-title">重疾保障</span>
+            <!-- <span class="status">保障中</span> -->
+          </div>
+          <div class="Ufii-middle-footer">100种重症+40种轻症</div>
+        </div>
+        <p class="user-family-insurance-item-right">开启保障</p>
+      </div>
       <div class="user-family-insurance-item">
         <cr-image
           round
@@ -45,7 +56,7 @@
         <!-- user-family-insurance-item-middle_enable 保障中 -->
         <div class="user-family-insurance-item-middle">
           <div class="Ufii-middle-main">
-            <span class="Ufii-middle-main-title">国民保·百万意外险</span>
+            <span class="Ufii-middle-main-title">意外保障</span>
             <!-- <span class="Ufii-middle-main-status">保障中</span> -->
           </div>
           <div class="Ufii-middle-footer">意外风险覆盖全,最高100万保额</div>
@@ -56,24 +67,13 @@
         <cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" />
         <div class="user-family-insurance-item-middle">
           <div class="Ufii-middle-main">
-            <span class="Ufii-middle-main-title">国民保·百万寿险</span>
+            <span class="Ufii-middle-main-title">人寿保障</span>
             <!-- <span class="status">保障中</span> -->
           </div>
           <div class="Ufii-middle-footer">最高350万保额,顶梁柱必备</div>
         </div>
         <p class="user-family-insurance-item-right">开启保障</p>
       </div>
-      <div class="user-family-insurance-item">
-        <cr-image round width="" height="" class="user-family-insurance-item-left" :src="illness" />
-        <div class="user-family-insurance-item-middle">
-          <div class="Ufii-middle-main">
-            <span class="Ufii-middle-main-title">国民保·百万重疾险</span>
-            <!-- <span class="status">保障中</span> -->
-          </div>
-          <div class="Ufii-middle-footer">100种重症+40种轻症</div>
-        </div>
-        <p class="user-family-insurance-item-right">开启保障</p>
-      </div>
     </div>
   </div>
 </template>

vue.config.js

@@ -35,6 +35,19 @@ module.exports = {
         symbolId: "icon-[name]"
       })
       .end();
+    // 组件静态资源引入
+    config.module
+      .rule("vue")
+      .use("vue-loader")
+      .loader("vue-loader")
+      .tap(options => {
+        return {
+          ...options,
+          transformAssetUrls: {
+            "cr-image": "src"
+          }
+        };
+      });
     // 分包优化
     config.optimization.splitChunks({
       chunks: "all",