GFRS-454【0326】 建议书优化2.0 --页面调整bug 修改 --提交人：阳华祥

src/views/ebiz/proposal/ProposalInfo.vue

@@ -28,47 +28,48 @@
           <div>
             <!-- 险种信息 -->
             <div class="pt15 bg-white relative div_3">
-              <div class="fs14 flex justify-content-a align-items-c">
+              <div :class="pageShowType.productCheckStatus ? '' : 'hideInfo_insure'">
-                <div class="text-center">
+                <div class="fs14 flex justify-content-a align-items-c">
-                  <label class="fs14 color_3A81F6 fw600 lh24">被保人</label><br />
+                  <div class="text-center">
-                  <label class="fs13 color_666666 lh20"
+                    <label class="fs14 color_3A81F6 fw600 lh24">被保人</label><br />
-                    >{{ pageShowInfo.showInsuredDTO.sex == '0' ? '男' : '女' }}&nbsp;{{ pageShowInfo.showInsuredDTO.age }}周岁</label
+                    <label class="fs13 color_666666 lh20"
+                      >{{ pageShowInfo.showInsuredDTO.sex == '0' ? '男' : '女' }}&nbsp;{{ pageShowInfo.showInsuredDTO.age }}周岁</label
+                    >
+                  </div>
+                  <div class="line_gray"></div>
+                  <div class="text-center">
+                    <label class="fs14 color_3A81F6 fw600 lh24">投保人</label><br />
+                    <label class="fs13 color_666666 lh20">{{ pageShowInfo.appntDTO.sex == '0' ? '男' : '女' }}&nbsp;{{ pageShowInfo.appntDTO.age }}周岁</label>
+                  </div>
+                  <div class="line_gray"></div>
+                  <div class="text-center">
+                    <label class="fs14 color_3A81F6 fw600 lh24">首年保费</label><br />
+                    <label class="fs13 color_FFA42F lh20">{{ pageShowInfo.showInsuredDTO.totalPrem }}元</label>
+                  </div>
+                </div>
+                <div class="fs15 line_title">产品计划</div>
+                <div class="fs12 div_4">
+                  <div class="risk_head flex text-center line-height table fs12 bg_DBEFFE">
+                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7">投保险种</div>
+                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">保额(元）</div>
+                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">保险期间</div>
+                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">交费期间</div>
+                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">首年保费(元)</div>
+                  </div>
+                  <div
+                    class="risk_body flex text-center bg-green-base c-gray-darker table bg_f7fbff"
+                    v-for="(riskItem, index) in pageShowInfo.showInsuredDTO.riskDTOLst"
+                    :key="index"
                   >
+                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7">{{ riskItem.riskName }}</div>
+                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">{{ riskItem.amt ? riskItem.amt : '--' }}</div>
+                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">{{ riskItem.insureName }}</div>
+                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">{{ riskItem.payName }}</div>
+                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">{{ riskItem.showPrem ? riskItem.showPrem : '--' }}</div>
+                  </div>
                 </div>
-                <div class="line_gray"></div>
+                <div class="h20">&ensp;</div>
-                <div class="text-center">
-                  <label class="fs14 color_3A81F6 fw600 lh24">投保人</label><br />
-                  <label class="fs13 color_666666 lh20">{{ pageShowInfo.appntDTO.sex == '0' ? '男' : '女' }}&nbsp;{{ pageShowInfo.appntDTO.age }}周岁</label>
-                </div>
-                <div class="line_gray"></div>
-                <div class="text-center">
-                  <label class="fs14 color_3A81F6 fw600 lh24">首年保费</label><br />
-                  <label class="fs13 color_FFA42F lh20">{{ pageShowInfo.showInsuredDTO.totalPrem }}元</label>
-                </div>
               </div>
-              <div class="fs15 line_title">产品计划</div>
-
-              <div :class="pageShowType.productCheckStatus ? '' : 'hideInfo'" class="fs12 div_4">
-                <div class="risk_head flex text-center line-height table fs12 bg_DBEFFE">
-                  <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7">投保险种</div>
-                  <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">保额(元）</div>
-                  <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">保险期间</div>
-                  <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">交费期间</div>
-                  <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">首年保费(元)</div>
-                </div>
-                <div
-                  class="risk_body flex text-center bg-green-base c-gray-darker table bg_f7fbff"
-                  v-for="(riskItem, index) in pageShowInfo.showInsuredDTO.riskDTOLst"
-                  :key="index"
-                >
-                  <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7">{{ riskItem.riskName }}</div>
-                  <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">{{ riskItem.amt }}</div>
-                  <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">{{ riskItem.insureName }}</div>
-                  <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">{{ riskItem.payName }}</div>
-                  <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">{{ riskItem.showPrem }}</div>
-                </div>
-              </div>
-              <div class="h20">&ensp;</div>
               <div class="up_down_div">
                 <img src="@/assets/images/proposal/proposal_down.png" :class="pageShowType.productCheckStatus ? '' : 'img180'" @click="testProductCheck" />
               </div>
@@ -150,7 +151,7 @@
                 :key="index"
               >
                 <div class="text-center pl5 pr5 calue_name">《{{ riskItem.riskName }}条款》</div>
-                <div class="calue_button" @click="goCaluePDF(riskItem)">查看</div>
+                <van-button class="calue_button" @click="goCaluePDF(riskItem)" v-no-more-click="1000">查看</van-button>
               </div>
               <div class="div_9"></div>
             </div>
@@ -219,8 +220,8 @@
         </div>
         <div class="div_14"></div>
         <div v-show="!isWeixin" class="fixed div_13">
-          <img @click="goToCompanyProfile" class="img_11" src="@/assets/images/proposal/proposal_company.png" />
+          <van-button class="img_11" @click="goToCompanyProfile" v-no-more-click="1000"></van-button>
-          <img @click="goPDF" class="img_12" src="@/assets/images/proposal/proposal_pdf.png" />
+          <van-button class="img_12" @click="goPDF" v-no-more-click="1000"></van-button>
         </div>
         <div v-show="!isWeixin" class="fixed fs15 flex text-centerjustify-content-c last_fix_div">
           <div class="color_3A81F6 bg-white text-center" @click="insure">转投保</div>
@@ -233,7 +234,7 @@
           </div>
           <div class="fix_bottom_sub" @click="callPhone">
             <img src="@/assets/images/sharePhone.png" />
-            <div>{{ agent.mobile }}</div>
+            <div>{{ agent.phoneNo }}</div>
           </div>
         </div>
         <van-popup v-model="popupShow" position="bottom">
@@ -283,7 +284,8 @@ import {
   SwipeItem,
   Sticky,
   Tab,
-  Tabs
+  Tabs,
+  Button
 } from 'vant'
 import SelectRadio from '@/components/ebiz/SelectRadio'
 import { getDemo, toInsurance, getDemoByProposalNo } from '@/api/ebiz/proposal/proposal.js'
@@ -320,13 +322,13 @@ export default {
         showInsuredDTO: {} //页面显示配保人数据
       },
       headPicture: {
-        '1_1': require('@/assets/images/proposal/person_br.png'),
+        '1_1': require('@/assets/images/proposal/person_po.png'),
         '1_0': require('@/assets/images/proposal/person_br.png'),
         '4_0': require('@/assets/images/proposal/person_ez.png'),
         '3_0': require('@/assets/images/proposal/person_fq.png'),
         '3_1': require('@/assets/images/proposal/person_mq.png'),
         '4_1': require('@/assets/images/proposal/person_nr.png'),
-        '2_0': require('@/assets/images/proposal/person_po.png'),
+        '2_0': require('@/assets/images/proposal/person_br.png'),
         '2_1': require('@/assets/images/proposal/person_po.png'),
         '5_1': require('@/assets/images/proposal/person_qt.png'),
         '5_0': require('@/assets/images/proposal/person_qt.png')
@@ -396,7 +398,7 @@ export default {
     /*end*/
     callPhone() {
       console.log('callPhone')
-      window.location.href = 'tel://' + this.agent.mobile
+      window.location.href = 'tel://' + this.agent.phoneNo
     },
     checkInsure(insureId) {
       let that = this
@@ -672,12 +674,6 @@ export default {
     },
     // 跳转到公司介绍
     goToCompanyProfile() {
-      this.$toast.loading({
-        duration: 0, // 持续展示 toast
-        forbidClick: true, // 禁用背景点击
-        loadingType: 'spinner',
-        message: '加载中……'
-      })
       this.$jump({
         flag: 'h5',
         extra: {
@@ -690,12 +686,6 @@ export default {
     },
     //跳转到pdf 进入建议书后 根据建议书编码来查找相应的pdf
     async goPDF() {
-      this.$toast.loading({
-        duration: 0, // 持续展示 toast
-        forbidClick: true, // 禁用背景点击
-        loadingType: 'spinner',
-        message: '加载中……'
-      })
       this.$jump({
         flag: 'h5',
         extra: {
@@ -757,6 +747,7 @@ export default {
     [Sticky.name]: Sticky,
     [Tab.name]: Tab,
     [Tabs.name]: Tabs,
+    [Button.name]: Button,
     SelectRadio
   }
 }
@@ -823,7 +814,11 @@ export default {
     background-color: none;
   }
   .hideInfo {
-    height: 40px;
+    height: 140px;
+    overflow: hidden;
+  }
+  .hideInfo_insure {
+    height: 60px;
     overflow: hidden;
   }
   .insured_item {
@@ -955,12 +950,13 @@ export default {
   .calue_button {
     width: 20%;
     height: 26px;
-    line-height: 28px;
+    line-height: 26px;
     border-radius: 13px;
     text-align: center;
     border: 1px solid #3a81f6;
     margin-top: 5px;
     margin-bottom: 5px;
+    color: #3a81f6;
   }
   .customer_button {
     width: 20px;
@@ -1105,14 +1101,27 @@ export default {
 .div_13 {
   right: 0px;
   top: 40%;
-  width: 23px;
+  width: 30px;
+  /*width: 23px;*/
 }
 .img_11 {
-  width: 23px;
+  width: 22px;
+  height: 80px;
+  background-image: url('../../../assets/images/proposal/proposal_company.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  border: 0;
 }
 .img_12 {
-  width: 23px;
+  width: 22px;
+  height: 80px;
   margin-top: -2px;
+  background-image: url('../../../assets/images/proposal/proposal_pdf.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  border: 0;
 }
 .div_14 {
   height: 40px;