【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',
-    name: 'EvaluateResult',
-    component: evaluateResult,
+    path: '/common/productEvaResult',
+    name: 'productEvaResult',
+    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',
-    name: 'questionEvaluate',
-    component: questionEvaluate,
+    path: '/sale/productEvaluate',
+    name: 'productEvaluate',
+    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{
-        font-size:16px;
-        color:#5ca7de;
+        background:#ee0a24;
+        .van-button__content{
+          font-size:16px;
+          color:#fff;
+        }
       }
     }
   }

src/views/ebiz/sale/productEvaluate.vue

@@ -1,107 +1,123 @@
 <template>
   <div class="question-container">
-    <div class="question-header bg-white pt20 pb20 pr10 pl10" >
-      <h5 class="fs18 appntTitle">投保人信息</h5>
-      <div class="fieldContent">  
-        <van-cell-group :border="false">
-          <van-field v-model="saleInsuredInfo.name" label="姓名" readonly required/> 
-          <van-field :value="saleInsuredInfo.idType | idToText('insuredIdType')" label="证件类型" readonly required/> 
-          <van-field v-model="saleInsuredInfo.idNo" label="证件号码" readonly required/>
-          <van-field v-model="saleInsuredInfo.mobile" label="联系方式" readonly required/>
-          <van-field v-model="saleInsuredInfo.occupationName" label="职业" readonly required/>
-        </van-cell-group>
-      </div>
-      <!-- <button class="btn" @click="clickBtn">返回</button> -->
-      <div class="evalDesc" >  
-        <h5 class="fs18"> {{questionInfo.questionHeadDesc}}</h5>
-        <h5 class="fs18">{{questionInfo.question1Desc}}</h5>
-        <h5 class="fs18">{{questionInfo.question2Desc}}</h5>
-        <h5 class="fs18">{{questionInfo.question3Desc}}</h5>
-        <h5 class="fs18">{{questionInfo.question4Desc}}</h5>
-        <h5 class="fs18">{{questionInfo.questionTailDesc}}</h5>
-      </div>
-      <div class="question-detail">
-        <div v-for="(item,idx) in questionList">
-          <!-- 单选框 -->
-          <div v-if="item.type=='radio'">
-            <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 
-                @click="clickHandler"
-                class="mb15"
-                v-for="(itemRadio,idxRadio) in item.options" 
-                :name="itemRadio.option"
-                :key="idxRadio"
-                >{{itemRadio.item}}
-              </van-radio>
-            </van-radio-group>
+    <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>
-
-          <!-- 多选框 -->
-          <div v-if="item.type=='checkbox'">
-            <p style="margin:2vh 0">{{ item.title }}</p>
-            <van-checkbox-group 
-              :disabled='disableEdit'
-              v-model="answerList[idx]"                
-              @change="handlerCheckbox($event,item,idx)"
-            > 
-              <van-checkbox 
-                class="mb15"
-                @click="clickHandler"
-                v-for="(itemCheckbox,idxCheckbox) in item.options" 
-                :name="itemCheckbox.option" 
-                :key="idxCheckbox"
-                shape="square" 
-              >
-
-                {{itemCheckbox.item}}
-                <div class="question-detail-checkbox" v-if="showPurpose&&idxCheckbox==1" @click.stop>
-                  <p class="c-link mt10 mb10 fs12">除本次投保外，您是否已为被保险人投保过类似损失补偿型保险产品（如百万医疗险等以报销住院费用为保障的产品）且保单目前仍在有效中？</p>
-                  <van-radio-group  :disabled='disableEdit' v-model="CheckBoxExtraRadio" class="extraRadio flex pb10 fs10" direction="horizontal" @click.stop>
-                    <van-radio 
-                      @click="clickHandler"
-                      :name="part.option" 
-                      @click.stop v-for="(part,partIdx) in itemCheckbox.parts[0].options"
-                    >
-                    {{part.item}}
-                  </van-radio>
-                  </van-radio-group>
           
-                  <van-field class="extraInput"  :readonly='disableEdit' label-width="0" v-model="CheckBoxExtraDesc" placeholder="请说明险种名称、保额："  v-if="CheckBoxExtraRadio === 'Y'" @click.stop="clickHandler"/>
-                </div>
-              </van-checkbox>
-            </van-checkbox-group>
-        
+        </template>
+        <div class="fieldContent">  
+          <van-cell-group :border="false">
+            <van-field v-model="saleInsuredInfo.name" label="姓名" readonly required/> 
+            <van-field :value="saleInsuredInfo.idType | idToText('insuredIdType')" label="证件类型" readonly required/> 
+            <van-field v-model="saleInsuredInfo.idNo" label="证件号码" readonly required/>
+            <van-field v-model="saleInsuredInfo.mobile" label="联系方式" readonly required/>
+            <van-field v-model="saleInsuredInfo.occupationName" label="职业" readonly required/>
+          </van-cell-group>
+        </div>
+      </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>
-          <!-- 输入框 -->
-          <div v-if="item.type=='input'" class="mb15">
-            <p class="budget-text">
-              <template v-for="(segment, index) in item.title.split(/\___/)" >
-                <!-- 显示文本片段 -->
-                {{ segment }}
-                <!-- 除了最后一个片段外，每个文本片段后都添加输入框 -->
-                <input
-                  :readonly='disableEdit'
-                  v-if="index < item.title.split(/\___/).length - 1"
-                  type="number"
+        </template>
+        <div class="evalDesc" >  
+          <h5 class="fs18"> {{questionInfo.questionHeadDesc}}</h5>
+          <h5 class="fs18">{{questionInfo.question1Desc}}</h5>
+          <h5 class="fs18">{{questionInfo.question2Desc}}</h5>
+          <h5 class="fs18">{{questionInfo.question3Desc}}</h5>
+          <h5 class="fs18">{{questionInfo.question4Desc}}</h5>
+          <h5 class="fs18">{{questionInfo.questionTailDesc}}</h5>
+        </div>
+        <div class="question-detail">
+          <div v-for="(item,idx) in questionList" class="questionItemList">
+            <!-- 单选框 -->
+            <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 
                   @click="clickHandler"
-                  @input="handlerInput($event,item,idx,index)"
-                  :value="answerList[idx] && answerList[idx][index] ? answerList[idx][index] : ''"
-                  step="0.01"
-                  min="0"
-                  class="budget-input"
+                  class="mb15"
+                  v-for="(itemRadio,idxRadio) in item.options" 
+                  :name="itemRadio.option"
+                  :key="idxRadio"
+                  >{{itemRadio.item}}
+                </van-radio>
+              </van-radio-group>
+            </div>
+
+            <!-- 多选框 -->
+            <div v-if="item.type=='checkbox'" class="questionItem">
+              <p style="margin:2vh 0">{{ item.title }}</p>
+              <van-checkbox-group 
+                :disabled='disableEdit'
+                v-model="answerList[idx]"                
+                @change="handlerCheckbox($event,item,idx)"
+              > 
+                <van-checkbox 
+                  class="mb15"
+                  @click="clickHandler"
+                  v-for="(itemCheckbox,idxCheckbox) in item.options" 
+                  :name="itemCheckbox.option" 
+                  :key="idxCheckbox"
+                  shape="square" 
                 >
-              </template>
-              <div class="fs12 c-gray-base">请填写0-10000之间的整数</div>
-            </p>
+
+                  {{itemCheckbox.item}}
+                  <div class="question-detail-checkbox" v-if="showPurpose&&idxCheckbox==1" @click.stop>
+                    <p class="c-link mt10 mb10 fs12">除本次投保外，您是否已为被保险人投保过类似损失补偿型保险产品（如百万医疗险等以报销住院费用为保障的产品）且保单目前仍在有效中？</p>
+                    <van-radio-group  :disabled='disableEdit' v-model="CheckBoxExtraRadio" class="extraRadio flex pb10 fs10" direction="horizontal" @click.stop>
+                      <van-radio 
+                        @click="clickHandler"
+                        :name="part.option" 
+                        @click.stop v-for="(part,partIdx) in itemCheckbox.parts[0].options"
+                      >
+                      {{part.item}}
+                    </van-radio>
+                    </van-radio-group>
+            
+                    <van-field class="extraInput"  :readonly='disableEdit' label-width="0" v-model="CheckBoxExtraDesc" placeholder="请说明险种名称、保额："  v-if="CheckBoxExtraRadio === 'Y'" @click.stop="clickHandler"/>
+                  </div>
+                </van-checkbox>
+              </van-checkbox-group>
+          
+            </div>
+            <!-- 输入框 -->
+            <div v-if="item.type=='input'" class="mb15 questionItem">
+              <p class="budget-text">
+                <template v-for="(segment, index) in item.title.split(/\___/)" >
+                  <!-- 显示文本片段 -->
+                  {{ segment }}
+                  <!-- 除了最后一个片段外，每个文本片段后都添加输入框 -->
+                  <input
+                    :readonly='disableEdit'
+                    v-if="index < item.title.split(/\___/).length - 1"
+                    type="number"
+                    @click="clickHandler"
+                    @input="handlerInput($event,item,idx,index)"
+                    :value="answerList[idx] && answerList[idx][index] ? answerList[idx][index] : ''"
+                    step="0.01"
+                    min="0"
+                    class="budget-input"
+                  >
+                </template>
+                <div class="fs12 c-gray-base">请填写0-10000之间的整数</div>
+              </p>
+            </div>
           </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,37 +948,38 @@ 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{
-    //   padding: 10px;
-    // }
-  }
-  .question-header{
-   // height:calc(100vh - 40px);
-    //padding-bottom:20px;
-    overflow-y: auto;
-    /deep/ .fieldContent{
-      margin:5px 0;
-  
-      .van-cell__title,input{
-        color:#999;
-        font-size:14px;
+    .questionItem{
+      margin-bottom:15px;
+      padding-bottom: 5px;
+      border-bottom: 1px #ebe7e7 solid;
+    }
+    .questionItemList:nth-child(7){
+      .questionItem {
+        border:none;
       }
     }
-    .appntTitle{
+  }
+
+
+  .van-cell__title,input{
+    color:#999;
+    font-size:14px;
+  }
+  .appntTitle{
+    color:#333;
+  }
+  .evalDesc{
+    h5{
       color:#333;
     }
-    .evalDesc{
-      h5{
-        color:#333;
-      }
-   
-    }
+  
   }
+  
   .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;
+    }
+  }
+
+
+
  
 }