【FIX】投保流程优化

src/components/common/PopupProductEva.vue

@@ -7,7 +7,10 @@
         @click-overlay = "clickOverlay('overlay')"
       >
       <div class="result-popup-title">
-        <span>您的适当性评估结果</span>
+        <div>
+          <span></span>
+          <span>您的风险能力测评结果</span>
+        </div>
         <van-icon name="cross" @click="clickOverlay('icon')"/>
       </div>
       <div class="result-popup-content">
@@ -16,7 +19,7 @@
         <div class='content'>您适合购买的产品类型为：
           <span class='product-type'>{{resultRiskType}}</span>
         </div>
-        <div>
+        <div class="levelList">
           <div v-for="(item,idx) in productLevel" :key="idx" class="itemLevel">
               {{ item }}
           </div>
@@ -99,21 +102,36 @@ export default {
 <style lang="scss" scoped>
 .popup-ques-result{
   .result-popup{
-   
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
     .result-popup-title{
-      padding:10px 10px 0; 
+      padding:10px 15px 10px 0; 
       display: flex;
       justify-content: space-between;
       align-items: center;
-      font-size: 20px;
+      font-size: 18px;
       font-weight: bolder;
       color:#000;
+      border-bottom: 1px solid #ebe7e7;
+      div{
+        display:flex;
+        align-items: center;
+        span:first-child{
+          display:block;
+          height:20px;
+          width: 5px;
+          background-color: red;
+          border-radius: 2px;
+          margin-right:15px;
+        }
+      }
+
     }
     .result-popup-content{
       padding:10px 10px 60px; 
       box-sizing:border-box;
       .content{
-        font-size: 18px;
+        font-size: 16px;
         font-weight: bold;
         color: #333;
         margin-bottom: 5px;
@@ -121,9 +139,16 @@ export default {
           color: #ee0a24;
           font-weight: bold;
         }
+        &:nth-child(2){
+          text-indent: 2em;
+        }
+        &:nth-child(3){
+          text-indent: 2em;
+          margin-bottom:5px;
+        }
       }
       .tips{
-        font-size: 14px;
+        font-size: 12px;
         color: #000;
         font-weight: bold;
         margin-bottom: 5px;
@@ -152,10 +177,17 @@ export default {
       }
     }
    
+    .levelList{
+      border:1px #DA7C43 solid;
+      border-radius:10px;
+      padding:10px;
+      background-color: #F5EAE4;
+    }
     .itemLevel{
       font-size: 12px;
-      color:#999;
+      color:#DA7C43;
       margin-bottom:5px;
+      line-height:1.8;
     }
   }
 }

src/main.js

@@ -42,7 +42,9 @@ import {
   Collapse,
   CollapseItem,
   RadioGroup,
-  Radio
+  Radio,
+  Checkbox,
+  CheckboxGroup
 } from 'vant'
 
 
@@ -74,6 +76,8 @@ Vue.use(PullRefresh)
 Vue.use(List)
 Vue.use(VanImage)
 Vue.use(Sticky)
+Vue.use(Checkbox) 
+Vue.use(CheckboxGroup)
 Vue.use(animated)
 
 Vue.prototype.$assetsUrl = config.assetsUrl

src/router/ebiz/common.js

@@ -5,7 +5,7 @@ const addRiskList = () => import('@/views/ebiz/common/AddRiskList')
 const calculatePremium = () => import('@/views/ebiz/common/CalculatePremium')
 const defalut = () => import('@/views/ebiz/common/Defalut')
 const companyIntroduce = () => import('@/views/ebiz/common/CompanyIntroduce')
-const evaluateResult = () => import('@/views/ebiz/common/EvaluateResult')
+const productEvaResult = () => import('@/views/ebiz/common/productEvaResult')
 
 export default [
   {
@@ -69,9 +69,9 @@ export default [
     }
   },
   {
-    path: '/common/evaluateResult',
+    path: '/common/productEvaResult',
-    name: 'EvaluateResult',
+    name: 'productEvaResult',
-    component: evaluateResult,
+    component: productEvaResult,
     meta: {
       title: '评估结果',
       index: 1

src/router/ebiz/sale.js

@@ -37,7 +37,7 @@ const shortPeriodProduct = () => import('@/views/ebiz/sale/shortPeriodProduct')
 const commitmentSelfProtect = () => import('@/views/ebiz/sale/commitmentSelfProtect')
 const readDocuments = () => import('@/views/ebiz/sale/readDocuments')
 const signDocuments = () => import('@/views/ebiz/sale/signDocuments')
-const questionEvaluate = () => import('@/views/ebiz/sale/questionEvaluate')
+const productEvaluate = () => import('@/views/ebiz/sale/productEvaluate')
 
 let riskName = localStorage.riskName
 /**@type {import("vue-router").RouteRecord[]} */
@@ -348,9 +348,9 @@ export default [
     }
   },
   {
-    path: '/sale/questionEvaluate',
+    path: '/sale/productEvaluate',
-    name: 'questionEvaluate',
+    name: 'productEvaluate',
-    component: questionEvaluate,
+    component: productEvaluate,
     meta: {
       title: '保险产品适当性评估问卷'
     }

src/views/ebiz/common/productEvaResult.vue

@@ -25,6 +25,7 @@
       confirmButtonText="知晓并同意警示书，继续投保"
       @confirm="onConfirm"
       class="riskDialog"
+      close-on-click-overlay="true"
     >
       <span>
           本人声明已了解及完全清楚产品责任、风险情况、保险利益不确定及不及时交纳保险费的风险，经审慎考虑后，仍坚持购买该产品，并愿意承担由此可能产生的损失和其他后果。购买该产品的决定，系本人独立、自主、真实的意思表示。
@@ -194,6 +195,9 @@ export default {
           padding:20px 0;
         }
         .quitDesc{
+          padding:10px;
+          border:1px dotted red;
+          border-radius:10px;
           text-indent: 2em;
         }
       }
@@ -213,6 +217,7 @@ export default {
     }
     /deep/ .riskDialog{
       .van-dialog__header{
+        color:#ee0a24;
         padding:20px 0;
         font-size:16px;
       }
@@ -222,8 +227,11 @@ export default {
         font-size:14px;
       }
       .van-dialog__confirm{
+        background:#ee0a24;
+        .van-button__content{
           font-size:16px;
-        color:#5ca7de;
+          color:#fff;
+        }
       }
     }
   }

src/views/ebiz/sale/productEvaluate.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="question-container">
-    <div class="question-header bg-white pt20 pb20 pr10 pl10" >
+    <van-collapse v-model="activeNames" class="collapse">
+      <van-collapse-item  name="1"  >
+        <template #title>
+          <div class="collapseItemTitle">
+            <span class="appntTitleIcon"></span>        
             <h5 class="fs18 appntTitle">投保人信息</h5>
+          </div>
+          
+        </template>
         <div class="fieldContent">  
           <van-cell-group :border="false">
             <van-field v-model="saleInsuredInfo.name" label="姓名" readonly required/> 
@@ -11,7 +18,14 @@
             <van-field v-model="saleInsuredInfo.occupationName" label="职业" readonly required/>
           </van-cell-group>
         </div>
-      <!-- <button class="btn" @click="clickBtn">返回</button> -->
+      </van-collapse-item>
+      <van-collapse-item  name="2" class="collapse-item">
+        <template #title>
+          <div class="collapseItemTitle">
+            <span class="appntTitleIcon"></span>        
+            <h5 class="fs18 appntTitle">适当性评估问卷</h5>
+          </div>
+        </template>
         <div class="evalDesc" >  
           <h5 class="fs18"> {{questionInfo.questionHeadDesc}}</h5>
           <h5 class="fs18">{{questionInfo.question1Desc}}</h5>
@@ -21,9 +35,9 @@
           <h5 class="fs18">{{questionInfo.questionTailDesc}}</h5>
         </div>
         <div class="question-detail">
-        <div v-for="(item,idx) in questionList">
+          <div v-for="(item,idx) in questionList" class="questionItemList">
             <!-- 单选框 -->
-          <div v-if="item.type=='radio'">
+            <div v-if="item.type=='radio'" class="questionItem">
               <p style="margin:2vh 0">{{ item.title }}</p>
               <van-radio-group  :disabled='disableEdit' class="mb15" v-model="answerList[idx]" @change="handlerRadio($event,item,idx)">
                 <van-radio 
@@ -38,7 +52,7 @@
             </div>
 
             <!-- 多选框 -->
-          <div v-if="item.type=='checkbox'">
+            <div v-if="item.type=='checkbox'" class="questionItem">
               <p style="margin:2vh 0">{{ item.title }}</p>
               <van-checkbox-group 
                 :disabled='disableEdit'
@@ -74,7 +88,7 @@
           
             </div>
             <!-- 输入框 -->
-          <div v-if="item.type=='input'" class="mb15">
+            <div v-if="item.type=='input'" class="mb15 questionItem">
               <p class="budget-text">
                 <template v-for="(segment, index) in item.title.split(/\___/)" >
                   <!-- 显示文本片段 -->
@@ -97,11 +111,13 @@
             </div>
           </div>
         </div>
-    </div>
+      </van-collapse-item>
+    </van-collapse>
+    
     <div class="question-btn bottom-btn bg-white">
       <van-button type="danger" size="large"  :disabled="disabled" class="bottom-btn" @click="submitAnswer" v-no-more-click="1000">提交</van-button>
     </div>
-    <PopupQuesResult 
+    <PopupProductEva 
       @reTestHandler="reTest" 
       @toInsureHandler="toInsure"
       @clickOverlayHandler="clickOverlay"
@@ -114,11 +130,11 @@
 </template>
 <script>
 import { getOrderDetail, saveEvalateAnswer } from '@/api/ebiz/sale/sale'
-import PopupQuesResult from '@/components/common/PopupQuesResult'
+import PopupProductEva from '@/components/common/PopupProductEva'
 export default {
   name: 'Question',
   components: {
-    PopupQuesResult
+    PopupProductEva
   },
   data() {
     return {
@@ -142,6 +158,7 @@ export default {
       showRetest:true,
       assessUpdateLimitFlag :null,
       disableEdit:false,  //禁用选项框
+      activeNames:['1','2']
     }
   },
   watch: {
@@ -917,10 +934,10 @@ export default {
       this.$jump({
         flag: 'h5',
         extra: {
-          url: location.origin +`/#/common/evaluateResult?orderNo=${this.$route.query.orderNo}`
+          url: location.origin +`/#/common/productEvaResult?orderNo=${this.$route.query.orderNo}`
         },
         routerInfo: {
-          path: `/common/evaluateResult?orderNo=${this.$route.query.orderNo}`
+          path: `/common/productEvaResult?orderNo=${this.$route.query.orderNo}`
         }
       })    
     }
@@ -931,27 +948,28 @@ export default {
 .question-container {
   width: 100%;
   padding-bottom:50px;
-  /deep/.question-detail{
+  /deep/ .question-detail{
     margin-top:10px;
     .van-checkbox{
       align-items: flex-start;
     }
-    // .question-detail-checkbox{
+    .questionItem{
-    //   padding: 10px;
+      margin-bottom:15px;
-    // }
+      padding-bottom: 5px;
+      border-bottom: 1px #ebe7e7 solid;
     }
-  .question-header{
+    .questionItemList:nth-child(7){
-   // height:calc(100vh - 40px);
+      .questionItem {
-    //padding-bottom:20px;
+        border:none;
-    overflow-y: auto;
+      }
-    /deep/ .fieldContent{
+    }
-      margin:5px 0;
+  }
+
 
   .van-cell__title,input{
     color:#999;
     font-size:14px;
   }
-    }
   .appntTitle{
     color:#333;
   }
@@ -961,7 +979,7 @@ export default {
     }
   
   }
-  }
+  
   .question-btn{
     height:50px;
   }
@@ -984,6 +1002,60 @@ export default {
     }
 
   }
+  .van-collapse-item{
+    margin-top:10px;
+  }
+  /deep/ .firstCollapseItem{
+    .van-collapse-item__content{
+      padding-top:0;
+    }
+  }
+
+
+    // .appntTitleIcon{
+    //   display:block;
+    //   height:20px;
+    //   width: 5px;
+    //   background-color: red;
+    //   border-radius: 2px;
+    //   margin-right:15px;
+    // }
+  
+
+  // /deep/ .collapse{
+  //   .van-cell__title  :before{
+  //     content:'';
+  //     position:absolute;
+  //     left:0;
+  //     height: 10px;
+  //     width:5px;
+  //     background-color:red;
+
+  //   }
+
+  // }
+  /deep/ .collapse{
+    .van-collapse-item__title{
+      padding-left:0;
+    }
+  }
+
+  .collapseItemTitle{
+    display:flex;
+    align-items: center;
+    padding-left:0;
+    span:first-child{
+      display:block;
+      height:20px;
+      width: 5px;
+      background-color: red;
+      border-radius: 2px;
+      margin-right:15px;
+    }
+  }
+
+
+
  
 }