GFRS-454【0326】 建议书优化2.0 初版代码备份提交_3 --提交人：阳华祥

src/views/ebiz/proposal/ProposalInfo.vue

@@ -5,18 +5,18 @@
       <div class="white fw500 fs18" style="margin-top: 37px;margin-left: 17px;">家庭保障计划</div>
       <van-sticky @scroll="testSticky">
         <div class="pl15 pt15 flex justify-content-fs align-items-c sticky_div" :class="pageShowType.isFixed ? 'divbg_1' : 'divbg_2'">
-          <div class="mr9 title_item" v-for="(item, index) in pageShowInfo.insuredDTOs" :key="index">
+          <div class="mr9 title_item" v-for="(item, index) in pageShowInfo.insuredDTOs" :key="index" @click="checkInsure(item.insuredId)">
             <div class="relative">
               <div class="bg-white insured_item">
                 <div class="insured_item_1">
                   <img :src="headPicture[item.relationToAppnt]" />
                 </div>
-                <div class="text-center fs12" :class="item.relationToAppnt == '1' ? 'color_3A81F6' : ''">
+                <div class="text-center fs12" :class="item.insuredId == pageShowInfo.showInsuredDTO.insuredId ? 'color_3A81F6' : ''">
                   {{ relationToAppntType[item.relationToAppnt] }}<br />
                   {{ item.name }}
                 </div>
               </div>
-              <div class="triangle" v-if="item.relationToAppnt == '1'"></div>
+              <div class="triangle" v-if="item.insuredId == pageShowInfo.showInsuredDTO.insuredId"></div>
             </div>
           </div>
         </div>
@@ -131,6 +131,13 @@
               </div>
             </div>
           </div>
+          <div class="text-center flex justify-content-e align-items-c fs14 check_age">
+            <div>当被保人在</div>
+            <div class="check_one flex justify-content-fe align-items-c" @click="popupShow = true">
+              {{ pageShowInfo.showInsuredDTO.checkAge }}&emsp;<img style="width: 18px;height: 18px;" src="@/assets/images/proposal/proposal_down.png" />
+            </div>
+            <div>岁时</div>
+          </div>
           <div class="flex justify-content-s align-items-c mt15 mb20 ml15 mr15">
             <img class="w20" src="@/assets/images/lessen.png" @click="reduce(pageShowInfo.showInsuredDTO)" />
             <van-slider
@@ -187,11 +194,36 @@
         <div>代理人手机号</div>
       </div>
     </div>
+
+    <van-popup v-model="popupShow" position="bottom">
+      <van-picker show-toolbar :columns="pageShowInfo.showInsuredDTO.ageColums" @confirm="checkAge" @cancel="popupShow = false" />
+    </van-popup>
   </div>
 </template>
 
 <script>
-import { Cell, RadioGroup, Radio, CellGroup, Collapse, CollapseItem, Slider, Row, Col, Tag, Divider, Toast, Swipe, SwipeItem, Sticky, Tab, Tabs } from 'vant'
+import {
+  Field,
+  Popup,
+  Picker,
+  Cell,
+  RadioGroup,
+  Radio,
+  CellGroup,
+  Collapse,
+  CollapseItem,
+  Slider,
+  Row,
+  Col,
+  Tag,
+  Divider,
+  Toast,
+  Swipe,
+  SwipeItem,
+  Sticky,
+  Tab,
+  Tabs
+} from 'vant'
 import SelectRadio from '@/components/ebiz/SelectRadio'
 import { getDemo, toInsurance, getDemoByProposalNo } from '@/api/ebiz/proposal/proposal.js'
 import { haveTap, getTapIndex, relevanceByInsure } from './js/exhibitionMethod.js'
@@ -200,13 +232,15 @@ import { weixinShare } from '@/assets/js/utils/wxShare.js'
 import { getAgentInfo } from '@/api/ebiz/my/my.js'
 import getAge from '@/assets/js/utils/age.js'
 import filters from '@/filters'
-import dataDictionary from '@/assets/js/utils/data-dictionary' //使用数据字典中的险种类型
+import dataDictionary from '@/assets/js/utils/data-dictionary'
+import Layout from '../../app/layout/Layout' //使用数据字典中的险种类型
 
 export default {
   data() {
     let isWeixin = this.$utils.device().isWeixin //判断环境
     return {
       isWeixin,
+      popupShow: false,
       chooseProductCodes: [],
       // 页面显示配置
       pageShowType: {
@@ -216,6 +250,7 @@ export default {
       },
       // 页面显示详细数据
       pageShowInfo: {
+        checkAgeColumns: [], //年龄选择
         insuredSlider: {}, // 滑动条
         appntDTO: {}, //投保人信息
         insuredDTOs: [{}], //被保人信息
@@ -271,6 +306,21 @@ export default {
     next()
   },
   methods: {
+    checkInsure(insureId) {
+      let that = this
+      this.pageShowInfo.showInsuredDTO
+      this.pageShowInfo.insuredDTOs.map(item => {
+        if (item.insuredId == insureId) {
+          this.pageShowInfo.showInsuredDTO = item
+          that.$forceUpdate()
+          return
+        }
+      })
+    },
+    checkAge(value) {
+      this.checkAgeForRate(value - Number(this.pageShowInfo.showInsuredDTO.ageColums[0]) + 1)
+      this.popupShow = false
+    },
     // 粘性配置
     testSticky(scrollTop) {
       this.pageShowType.isFixed = scrollTop.isFixed
@@ -476,10 +526,22 @@ export default {
       if (demoLabel) {
         demoLabel.forEach(label => {
           label.value = demoValue[index][label.content]
+          if (label.content == 'currentAge') {
+            this.pageShowInfo.showInsuredDTO.checkAge = label.value
+          }
         })
       }
     },
-
+    // 选择年龄
+    checkAgeForRate(index) {
+      let risk = this.pageShowInfo.showInsuredDTO
+      if (risk.sliderValue == risk.policyYear) {
+        return
+      }
+      risk.sliderValue = index
+      this.$forceUpdate()
+      this.slideChange(risk)
+    },
     // 点击增加
     exhibitionAdd(risk) {
       if (risk.sliderValue == risk.policyYear) {
@@ -503,6 +565,9 @@ export default {
       let index = String(risk.sliderValue)
       risk.demoLabel.forEach(label => {
         label.value = risk.demoValue[index][label.content]
+        if (label.content == 'currentAge') {
+          this.pageShowInfo.showInsuredDTO.checkAge = label.value
+        }
       })
     },
     // 跳转到公司介绍
@@ -565,6 +630,10 @@ export default {
     }
   },
   components: {
+    Layout,
+    [Field.name]: Field,
+    [Popup.name]: Popup,
+    [Picker.name]: Picker,
     [Cell.name]: Cell,
     [RadioGroup.name]: RadioGroup,
     [Radio.name]: Radio,
@@ -835,5 +904,16 @@ export default {
     height: 30px;
     line-height: 30px;
   }
+  .check_age {
+    height: 20px;
+    line-height: 20px;
+    width: 15em;
+    margin: 5px auto;
+    .check_one {
+      border-bottom: 1px solid gray;
+      width: 5em;
+      text-align: right;
+    }
+  }
 }
 </style>

src/views/ebiz/proposal/js/exhibitionMethod.js

@@ -116,25 +116,28 @@ export function relevance(insured, insuredLabelResult, insuredResult, insuredInf
 //将被保人与利益演示相关联(被保人维度)
 export function relevanceByInsure(insured, insuredLabelResult, insuredResult, insuredInfoResult) {
   insured.forEach(insure => {
-    insure.radios = []
-    insure.demoLabel = insuredLabelResult[insure.insuredId]['GFRS_M0017']
-    if (!insure.demoLabel) {
-      insure.demoLabel = insuredLabelResult[insure.insuredId]['GFRS_M0016']
+    for (let key in insuredLabelResult[insure.insuredId]) {
+      insure.demoLabel = insuredLabelResult[insure.insuredId][key]
     }
-    insure.demoValue = insuredResult[insure.insuredId]['GFRS_M0017']
-    if (!insure.demoValue) {
-      insure.demoValue = insuredResult[insure.insuredId]['GFRS_M0016']
+    for (let key in insuredResult[insure.insuredId]) {
+      insure.demoValue = insuredResult[insure.insuredId][key]
     }
     insure.demoLabel.forEach(v => {
       v.value = insure.demoValue['1'][v.content] //设置初始值
     })
     insure.sliderValue = 1
+    insure.radios = []
     let policyYear = 1 //初始化保单年度  确定滑动条最大值
+    let ageColums = []
     for (let key in insure.demoValue) {
+      ageColums.push(insure.demoValue[key]['currentAge'])
       if (Number(key) > policyYear) {
         policyYear = key
+        // chuli
       }
     }
+    insure.ageColums = ageColums
+    insure.checkAge = ageColums[0]
     insure.policyYear = Number(policyYear)
 
     insure.riskDTOLst.forEach(risk => {