新投保流程签名确认相关页面改造

src/api/ebiz/sale/sale.js

@@ -393,4 +393,13 @@ export function riskLevelCheck(data) {
     method: 'post',
     data
   })
+}
+
+// 新市民产品服务通知/安心保、爱心保产品提示
+export function sendServicePopup(data) {
+  return request({
+    url: getUrl('/sale/sendNotice/sendServicePopup', 1),
+    method: 'post',
+    data
+  })
 }

src/components/ebiz/oldVersionSwitch.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}" ref="div" @click="onBtnClicked">
+        <p class="p1">{{isActive === 0 ? '关怀' : '标准'}}</p>
+        <p class="p2">模式</p>
+    </div>
+</template>
+<script>
+  export default {
+    name: "FloatImgBtn",
+    props:{
+      itemWidth:{
+        type:Number,
+        default:56
+      },
+      itemHeight:{
+        type:Number,
+        default:56
+      },
+      gapWidth:{
+        type:Number,
+        default:6
+      },
+    
+      coefficientHeight:{
+        type:Number,
+        default:0.8
+      }
+    },
+    created(){
+      this.clientWidth = document.documentElement.clientWidth;
+      this.clientHeight = document.documentElement.clientHeight;
+      this.left = this.clientWidth - this.itemWidth - this.gapWidth;
+      this.top = 100;
+    },
+    mounted(){
+      this.$nextTick(()=>{
+        const div = this.$refs.div;
+        div.addEventListener("touchstart",(e)=>{
+                e.stopPropagation();
+          div.style.transition = 'none';
+        });
+        div.addEventListener("touchmove",(e)=>{
+                e.stopPropagation();
+          if (e.targetTouches.length === 1) {
+            let touch = event.targetTouches[0];
+            this.left = touch.clientX - this.itemWidth/2;
+            this.top = touch.clientY - this.itemHeight/2;
+          }
+        },
+        false
+        );
+        div.addEventListener("touchend",(e)=>{
+            e.stopPropagation();
+          div.style.transition = 'all 0.3s';
+           if(this.left>this.clientWidth/2){
+             this.left = this.clientWidth - this.itemWidth - this.gapWidth;
+           }else{
+             this.left = this.gapWidth;
+           }
+           if(this.top<=36)
+           {
+               this.top=36+this.gapWidth
+           }
+           else{
+               let bottom=this.clientHeight-50-this.itemHeight-this.gapWidth
+               console.log(bottom,this.top)
+               if(this.top>=bottom)
+               {
+                   this.top=bottom
+               }
+
+           }
+        });
+      });
+    },
+
+    methods:{
+      onBtnClicked(){
+       if (this.isActive === 0) {
+        this.isActive = 1
+        sessionStorage.setItem('oldVersionSwitch', 1)
+       } else if (this.isActive === 1) {
+        this.isActive = 0
+        sessionStorage.setItem('oldVersionSwitch', 0)
+       }
+        this.$emit("onFloatBtnClicked", this.isActive);
+      },
+  
+    },
+    data(){
+      return{
+        timer:null,
+        currentTop:0,
+        clientWidth:0,
+        clientHeight:0,
+        left:0,
+        top:0,
+        isActive: sessionStorage.getItem('oldVersionSwitch') ? Number(sessionStorage.getItem('oldVersionSwitch')) : ''
+      }
+    }
+  }
+</script>
+
+
+
+<style lang="scss" scoped>
+    .ys-float-btn{
+        background:RGBA(234, 52, 66, 0.8);
+        border-radius:50%;
+        color: #666666;
+        z-index: 20;
+        transition: all 0.3s;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: fixed;
+        bottom: 20vw;
+        p{
+            color: #fff;
+            font-weight: bold;
+            font-size: 14px;
+            &.p1{
+                margin-top: 4px;
+            }
+            &.p2{
+                margin-top: -6px;
+            }
+        }
+      }
+
+</style>

src/router/ebiz/saleFlowImprove.js

@@ -6,7 +6,6 @@ const result = () => import('@/views/ebiz/sale/Result')
 const beneficiary = () => import('@/views/ebiz/sale/Beneficiary')
 const attachmentManagement = () => import('@/views/ebiz/sale/AttachmentManagement')
 const addBeneficiaryInfo = () => import('@/views/ebiz/sale/AddBeneficiaryInfo')
-const signatureConfirmation = () => import('@/views/ebiz/sale/SignatureConfirmation')
 const notifyingMessage = () => import('@/views/ebiz/sale/NotifyingMessage')
 const universalRiskNotifyingMessage = () => import('@/views/ebiz/sale/universalRiskNotifyingMessage')
 const answerPage = () => import('@/views/ebiz/sale/answerPage')
@@ -35,8 +34,10 @@ const PayResultFail = () => import('@/views/ebiz/sale/PayResultFail')
 const apointValidDoc = () => import('@/views/ebiz/sale/apointValidDoc')
 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 signatureConfirmation = () => import('@/views/ebiz/saleFlowProImprove/SignatureConfirmation')
+const readDocuments = () => import('@/views/ebiz/saleFlowProImprove/readDocuments')
+const signDocuments = () => import('@/views/ebiz/saleFlowProImprove/signDocuments')
 
 let riskName = localStorage.riskName
 // console.log('sale/riskName==', riskName)

src/views/ebiz/saleFlowProImprove/SignatureConfirmation.vue

@@ -1,10 +1,7 @@
 <template>
-  <div class="signature-container">
+  <div class="signature-container" id="xx-signature-container">
     <div class="signature-content pb40">
-      <div v-if="!isWeixin">
-        <index-bar></index-bar>
-      </div>
-      <div v-if="isWeixin" class="bg-white mt10 p20 fs20 tips">
+      <div v-if="isWeixin" class="tips">
         <p>
           尊敬的
           <span>{{ tipsName }}</span
@@ -12,7 +9,7 @@
         </p>
         <p>该保单由国富人寿保险股份有限公司进行承保，具体确认信息如下：</p>
       </div>
-      <van-cell-group class="mt10 fs20">
+      <van-cell-group class="fs20 xxx-basics-info">
         <van-cell title="销售人员工号" :value="recmd.agentCode" />
         <van-cell title="销售人员姓名" :value="recmd.name" />
         <van-cell title="投保单号" :value="orderInfo.orderNo"></van-cell>
@@ -26,8 +23,9 @@
         <van-cell title="保费合计(元)" :value="orderInfo.orderAmount == undefined ? '' : orderInfo.orderAmount | moneyFormat" />
         <van-cell v-if="cvalidateStr" title="指定保单生效日" :value="cvalidateStr" />
       </van-cell-group>
-      <div v-if="!isWeixin">
+      <div v-if="!isWeixin" class="xxx-big-box">
         <!--  不再微信 -->
+        <!--代理人-->
         <van-collapse v-model="activeNames" class="mt10">
           <van-collapse-item name="0" v-if="showAgentView == 1">
             <div slot="title" class="fs20">
@@ -98,17 +96,20 @@
             <div class="text fs20" v-else>操作时间已失效，请联系销售人员！</div>
           </van-collapse-item>
         </van-collapse>
-
-        <van-collapse v-model="activeNames" class="mt10">
+        <!--投保人-->
+        <van-collapse v-model="activeNames" class="mt10 xxx-collapse">
           <van-collapse-item name="1">
-            <div slot="title" class="fs20">
+            <div slot="title" class="fs20 xxx-title">
               投保人
               <span class="ml20">{{ appnt.name }}</span>
             </div>
-            <p class="mb20 fs20" style="color: #323233">以下内容需要您按照顺序阅读并签字确认:</p>
+            <p class="mb20 fs20 p1" style="color: #323233">以下内容需要您按照顺序阅读并签字确认:</p>
 
-            <div v-if="changeCard">
-              <div v-for="(item, index) in appntSign" :key="index">
+            <div v-if="changeCard" class="xxx-item-box">
+              <div v-for="(item, index) in appntSign" :key="index" class="item">
+                <p class="mb20 fs20" @click="gosomefile(item, index, saleInsuredPersonInfo.relationToAppnt == '1' ? '2' : '0')">
+                  <span class="text" style="color: red; opacity: 0.7">{{ item.documentName }}</span>
+                </p>
                 <p style="display: flex; align-items: center; justify-content: space-between" class="fs20">
                   <span style="color: #323233">需阅读</span>
                   <span style="display: flex; align-items: center">
@@ -116,46 +117,39 @@
                     <span v-if="item.documentStatus == '1'" style="margin-left: 15px; color: #03ceaf" class="fs20">已阅读</span>
                   </span>
                 </p>
-                <p class="mb20 fs20" @click="gosomefile(item, index, saleInsuredPersonInfo.relationToAppnt == '1' ? '2' : '0')">
-                  <span class="text" style="color: red; opacity: 0.7">{{ item.documentName }}</span>
-                </p>
               </div>
             </div>
-            <div v-else>
-              <div v-for="(item, index) in appntSign" :key="index">
-                <p style="display: flex; align-items: center; justify-content: space-between" class="fs20">
-                  <span style="color: #323233">{{
-                    item.documentCode == '1' ||
-                    item.documentCode == '3' ||
-                    item.documentCode == '8' ||
-                    item.documentCode == '9' ||
-                    item.documentCode == '12' ||
-                    item.documentCode == '13' ||
-                    item.documentCode == '14'
-                      ? '需阅读'
-                      : '需阅读并签署'
-                  }}</span>
-                  <span style="display: flex; align-items: center">
-                    <img v-if="item.documentStatus == '1' || item.documentStatus == '3'" style="width: 16px" :src="src" />
-                    <span v-if="item.documentStatus == '1'" style="margin-left: 15px; color: #03ceaf" class="fs20">已阅读</span>
-                    <span v-if="item.documentStatus == '3'" style="margin-left: 15px; color: #03ceaf">签署完成</span>
-                  </span>
-                </p>
-                <p class="mb20 fs20" @click="gosomefile(item, index, saleInsuredPersonInfo.relationToAppnt == '1' ? '2' : '0')">
+            <div v-else class="xxx-item-box">
+              <div v-for="(item, index) in appntSign" :key="index" class="item">
+                <p style="color: #323233" class="p3">{{
+                  item.documentCode == '1' ||
+                  item.documentCode == '3' ||
+                  item.documentCode == '8' ||
+                  item.documentCode == '9' ||
+                  item.documentCode == '12' ||
+                  item.documentCode == '13' ||
+                  item.documentCode == '14'
+                    ? '需阅读'
+                    : '需阅读并签署'
+                }}</p>
+                <p class="mb20 fs20 p1" @click="gosomefile(item, index, saleInsuredPersonInfo.relationToAppnt == '1' ? '2' : '0')">
                   <span class="text" style="color: red; opacity: 0.7">{{ item.documentName }}</span>
                 </p>
+                <p v-if="item.documentStatus == '1' || item.documentStatus == '3'" style="display: flex; align-items: center; justify-content: space-between" class="fs20 p2" :class="[item.documentStatus == '1' || item.documentStatus == '3' ? 'active' : '']">
+                  <span class="fs20 span1">{{ item.documentStatus == '1' ?'已阅读' : '签署完成'}}</span>
+                </p>
               </div>
             </div>
             <p
               v-if="signMap.appntSign && !changeCard"
               style="display: flex; align-items: center; border-top: 1px solid #eee; margin-bottom: 15px; padding-top: 10px"
-              class="fs20"
+              class="fs20 xxx-qianmin"
             >
               <span style="color: #323233">投保人签名：</span>
               <img :src="signImgUrl + signMap.appntSign" style="height: 50px; margin-left: 20px; width: auto" />
             </p>
-            <p class="fs20" style="color: #323233" v-if="airSign != '1' && appntSignStatus != '3'">点击【分享签名】、【立即阅读签名】按钮，进行相关操作</p>
-            <p class="fs20" style="color: #323233" v-if="airSign != '1' && appntSignStatus == '3'">点击【分享重签】、【面对面重签】按钮，进行相关操作</p>
+            <p class="fs20 xxx-qianmin-tips" style="color: #323233" v-if="airSign != '1' && appntSignStatus != '3'">点击【分享签名】、【立即阅读签名】按钮，进行相关操作</p>
+            <p class="fs20 xxx-qianmin-tips" style="color: #323233" v-if="airSign != '1' && appntSignStatus == '3'">点击【分享重签】、【面对面重签】按钮，进行相关操作</p>
             <div v-if="!isInvalid" class="flex justify-content-a mt20 mb20 fs20">
               <van-button
                 v-if="isShow"
@@ -185,49 +179,47 @@
             <div class="text fs20" v-else>操作时间已失效，请联系销售人员！</div>
           </van-collapse-item>
         </van-collapse>
-
-        <div v-if="relationToAppnt != '1' && !changeCard" class="mt10 fs20">
+        <!--被保险人-->
+        <div v-if="relationToAppnt != '1' && !changeCard" class="mt10 fs20 xxx-collapse">
           <van-collapse v-model="activeNames" v-for="(item, index) in insured" :key="index">
             <van-collapse-item :name="index + 2">
-              <div slot="title" class="fs20">
+              <div slot="title" class="fs20 xxx-title">
                 被保险人
                 <span class="ml20">{{ item.name }}</span>
               </div>
-              <p class="mb20 fs20" style="color: #323233">以下内容需要您按照顺序阅读并签字确认:</p>
-              <div v-for="(item, index) in insuredSign" :key="index">
-                <p style="display: flex; align-items: center; justify-content: space-between" class="fs20">
-                  <span style="color: #323233">{{
-                    item.documentCode == '1' ||
-                    item.documentCode == '3' ||
-                    item.documentCode == '8' ||
-                    item.documentCode == '9' ||
-                    item.documentCode == '12' ||
-                    item.documentCode == '13' ||
-                    item.documentCode == '14'
-                      ? '需阅读'
-                      : '需阅读并签署'
-                  }}</span>
-                  <span style="display: flex; align-items: center">
-                    <img v-if="item.documentStatus == '1' || item.documentStatus == '3'" style="width: 16px" :src="src" />
-                    <span v-if="item.documentStatus == '1'" style="margin-left: 15px; color: #03ceaf">已阅读</span>
-                    <span v-if="item.documentStatus == '3'" style="margin-left: 15px; color: #03ceaf">签署完成</span>
-                  </span>
-                </p>
-                <p class="mb20 fs20" @click="gosomefile(item, index, '1')">
-                  <span class="text" style="color: red; opacity: 0.7">{{ item.documentName }}</span>
-                </p>
+              <p class="mb20 fs20 p1" style="color: #323233">以下内容需要您按照顺序阅读并签字确认:</p>
+              <div class="xxx-item-box">
+                 <div v-for="(item, index) in insuredSign" :key="index" class="item">
+                  <p class="p3">{{
+                        item.documentCode == '1' ||
+                        item.documentCode == '3' ||
+                        item.documentCode == '8' ||
+                        item.documentCode == '9' ||
+                        item.documentCode == '12' ||
+                        item.documentCode == '13' ||
+                        item.documentCode == '14'
+                          ? '需阅读'
+                          : '需阅读并签署'
+                    }}</p>
+                    <p class="mb20 fs20 p1" @click="gosomefile(item, index, '1')">
+                      <span class="text" style="color: red; opacity: 0.7">{{ item.documentName }}</span>
+                    </p>
+                    <p v-if="item.documentStatus == '1' || item.documentStatus == '3'" style="display: flex; align-items: center; justify-content: space-between" class="fs20 p2" :class="[item.documentStatus == '1' || item.documentStatus == '3' ? 'active' : '']">
+                      <span class="span1">{{item.documentStatus == '1' || item.documentStatus == '3' ? '已阅读' : '签署完成'}}</span>
+                    </p>
+                  </div>
               </div>
               <p
                 v-if="signMap.insuredSign"
                 style="display: flex; align-items: center; border-top: 1px solid #eee; margin-bottom: 15px; padding-top: 10px"
-                class="fs20"
+                class="fs20 xxx-qianmin"
               >
                 <span v-if="insuredAge >= 18" style="color: #323233">被保险人签名：</span>
                 <span v-if="insuredAge < 18" style="color: #323233">被保险人/监护人签名：</span>
                 <img :src="signImgUrl + signMap.insuredSign" style="height: 50px; margin-left: 20px; width: auto" />
               </p>
-              <p class="fs20" style="color: #323233" v-if="airSign != '1' && insuredSignStatus != '3'">点击【分享签名】、【立即阅读签名】按钮，进行相关操作</p>
-              <p class="fs20" style="color: #323233" v-if="airSign != '1' && insuredSignStatus == '3'">点击【分享重签】、【面对面重签】按钮，进行相关操作</p>
+              <p class="fs20 xxx-qianmin-tips" style="color: #323233" v-if="airSign != '1' && insuredSignStatus != '3'">点击【分享签名】、【立即阅读签名】按钮，进行相关操作</p>
+              <p class="fs20 xxx-qianmin-tips" style="color: #323233" v-if="airSign != '1' && insuredSignStatus == '3'">点击【分享重签】、【面对面重签】按钮，进行相关操作</p>
               <div v-if="!isInvalid" class="flex justify-content-a mt20 mb20 fs20">
                 <van-button
                   v-if="isShow"
@@ -261,13 +253,13 @@
       <div v-else>
         <!-- 在微信 -->
         <div v-if="shareCode != '1'" class="mt10">
-          <van-collapse v-model="activeNames">
+          <van-collapse v-model="activeNames" class="xxx-collapse">
             <van-collapse-item name="1">
-              <div slot="title" class="fs20">
+              <div slot="title" class="fs20 xxx-title">
                 投保人
                 <span class="ml20">{{ appnt.name }}</span>
               </div>
-              <p class="mb20 fs20" style="color: #323233">以下内容需要您按照顺序阅读并签字确认:</p>
+              <p class="mb20 fs20 p1" style="color: #323233">以下内容需要您按照顺序阅读并签字确认:</p>
               <div v-if="changeCard" class="fs20">
                 <p style="color: #323233">需阅读</p>
                 <p style="display: flex; align-items: center; justify-content: space-between">
@@ -282,10 +274,9 @@
                   <span class="text" style="color: red; opacity: 0.7">{{ agentSign.documentName }}</span>
                 </p>
               </div>
-              <div v-else>
-                <div v-for="(item, index) in appntSign" :key="index">
-                  <p style="display: flex; align-items: center; justify-content: space-between" class="fs20">
-                    <span style="color: #323233">{{
+              <div v-else class="xxx-item-box">
+                <div v-for="(item, index) in appntSign" :key="index" class="item">
+                  <p style="color: #323233" class="p3">{{
                       item.documentCode == '1' ||
                       item.documentCode == '3' ||
                       item.documentCode == '8' ||
@@ -295,27 +286,25 @@
                       item.documentCode == '14'
                         ? '需阅读'
                         : '需阅读并签署'
-                    }}</span>
-                    <span style="display: flex; align-items: center">
-                      <img v-if="item.documentStatus == '1' || item.documentStatus == '3'" style="width: 16px" :src="src" />
-                      <span v-if="item.documentStatus == '1'" style="margin-left: 15px; color: #03ceaf">已阅读</span>
-                      <span v-if="item.documentStatus == '3'" style="margin-left: 15px; color: #03ceaf">签署完成</span>
-                    </span>
-                  </p>
-                  <p class="mb20 fs20" @click="gosomefile(item, index, saleInsuredPersonInfo.relationToAppnt == '1' ? '2' : '0')">
+                    }}</p>
+                    <p class="mb20 fs20 p1" @click="gosomefile(item, index, saleInsuredPersonInfo.relationToAppnt == '1' ? '2' : '0')">
                     <span class="text" style="color: red; opacity: 0.7">{{ item.documentName }}</span>
                   </p>
+                  <p style="display: flex; align-items: center; justify-content: space-between" class="fs20 p2" :class="[item.documentStatus == '1' || item.documentStatus == '3' ? 'active' : '']">
+                    <span v-if="item.documentStatus == '1' || item.documentStatus == '3'" class="fs20 span1">{{ item.documentStatus == '1' ?'已阅读' : '签署完成'}}</span>
+                  </p>
+                  
                 </div>
               </div>
               <p
                 v-if="signMap.appntSign"
                 style="display: flex; align-items: center; border-top: 1px solid #eee; margin-bottom: 15px; padding-top: 10px"
-                class="fs20"
+                class="fs20 xxx-qianmin"
               >
                 <span style="color: #323233">投保人签名：</span>
                 <img :src="signImgUrl + signMap.appntSign" style="height: 50px; margin-left: 20px; width: auto" />
               </p>
-              <p class="fs20" style="color: #323233" v-if="airSign != '1'">点击【立即阅读签名】按钮，进行相关操作</p>
+              <p class="fs20 xxx-qianmin-tips" style="color: #323233" v-if="airSign != '1'">点击【立即阅读签名】按钮，进行相关操作</p>
               <div v-if="!isInvalid" class="flex justify-content-a mt20 mb20 fs20">
                 <van-button
                   type="danger"
@@ -330,7 +319,7 @@
                   立即阅读签名
                 </van-button>
               </div>
-              <div class="text fs20" v-else>操作时间已失效，请联系销售人员！</div>
+              <div class="text fs20" style="padding-left: 28px;margin-top: 10px;" v-else>操作时间已失效，请联系销售人员！</div>
             </van-collapse-item>
           </van-collapse>
         </div>
@@ -411,7 +400,8 @@
       </div>
       <div v-else>
         <!--判断代理人自保件承诺书是否签名  或者不是自保件 投保人是否都签名-->
-        <div class="bottom-btn bg-white" v-if="(agentSignStatus == '3' && appntSignStatus == '3') || (agentSignStatus == '' && appntSignStatus == '3')">
+        <div class="bottom-btn bg-white xxx-bottom-btn" v-if="(agentSignStatus == '3' && appntSignStatus == '3') || (agentSignStatus == '' && appntSignStatus == '3')">
+          <van-button plain type="primary">修改投保信息</van-button>
           <van-button
             class="fs16"
             type="danger"
@@ -420,7 +410,7 @@
             @click="next"
             v-no-more-click="1000"
           >
-            提交
+            提交核保
           </van-button>
         </div>
       </div>
@@ -465,12 +455,12 @@ import {
   autchCodeCheck,
   getRecognitionUrl,
   getRecognitionResult,
-  saveCustomerRid
+  saveCustomerRid,
+  sendServicePopup
 } from '@/api/ebiz/sale/sale'
 import { getAgentInfo } from '@/api/ebiz/my/my.js'
 import { checkPhone } from '@/api/ebiz/customer/customer'
 import { weixinShare } from '@/assets/js/utils/wxShare.js'
-import IndexBar from '@/components/ebiz/sale/IndexBar'
 import Formatter from '@/assets/js/utils/date-utils.js'
 import { getWhitelist } from '@/api/ebiz/whitelist'
 import isChoose from '@/assets/images/u20257.png'
@@ -479,6 +469,7 @@ import utilsAge from '@/assets/js/utils/age'
 export default {
   data() {
     let isWeixin = this.$utils.device().isWeixin //判断环境
+    // let isWeixin = true //判断环境
     return {
       signImgUrl: 'data:image/gif;base64,',
       isInsuYearFlag: false, //是否为长期险
@@ -575,6 +566,34 @@ export default {
     }
   },
   async created() {
+    // 安心保/爱心保弹窗提示 开始
+    if (!localStorage.getItem('anxinaixinPopFlag')) {
+      sendServicePopup({ "orderDTO": {
+        "orderInfoDTO": {
+            "orderNo": localStorage.getItem('orderNo'),
+            // "orderNo": '8186270000128471',
+            "productCode": localStorage.getItem('productCode')
+            // "productCode": 'GFRS_M0077'
+        }
+      }}).then(res => {
+        if (res.result === '0') {
+          if (res.content.promptFlag === '1') {
+            Dialog.confirm({
+              title: '提示',
+              messageAlign: 'left',
+              message: '<p>尊敬的客户您好！</p><p style="text-indent: 2em;">感谢您投保我公司“爱心保/安心保”产品，在本保险合同生效后被保险人将获得一份专属的健康管理服务，详情请登录公司官方微信公众号“国富人寿保险”>发现国富>新市民专区 查询或拨打公司客服热线400-694-6688咨询，本服务为无偿提供。</p>',
+              showCancelButton: false,
+              confirmButtonText: '确定',
+              className: 'anxinaixinPopStyle',
+              getContainer: '#xx-signature-container'
+            }).then(() => {
+              window.localStorage.setItem('anxinaixinPopFlag', true)
+            })
+          }
+        }
+      })
+    }
+    // 安心保/爱心保弹窗提示 结束
     if(window.localStorage.getItem('branchType')) {
       this.branchType = window.localStorage.getItem('branchType')
     } else if(this.$route.query.branchType){
@@ -1140,69 +1159,96 @@ export default {
             }
           }
         } else {
-          window.localStorage.setItem('sign-val', val)
-          window.localStorage.setItem('sign-insured', JSON.stringify(that.insuredSign))
+          // 非微信环境
           let thismyage = ''
           if (this.saleInsuredPersonInfo.age === 0 || this.saleInsuredPersonInfo.age === '0' || this.saleInsuredPersonInfo.age) {
             thismyage = this.saleInsuredPersonInfo.age
           } else {
             thismyage = this.saleInsuredPersonInfo.insuredAge
           }
-          if (this.saleInsuredPersonInfo.idType != '1' || thismyage < '18') {
-            that.goUrl()
-          } else {
-            //RID 状态--有效
-            if (this.realPeopleRidInfo.insureRidFlag && this.realPeopleRidInfo.insureRidFlag == '0') {
-              // 手机号鉴权 --通过
-              let res = await this.realPeopleCheckMobile('insured')
-              if (res && res.result == '0') {
-                that.goUrl()
-                return
-              }
-            }
-
-            // 白名单校验
-            const res = await getWhitelist({
-              idNo: this.saleInsuredPersonInfo.idNo,
-              name: this.saleInsuredPersonInfo.name,
-              whiteType: 'sale_face_show'
+          // 若被保险人为未成年人时,非微信环境点击【立即阅读签名】按钮进行弹窗提示 开始
+          console.log(thismyage)
+          if (thismyage < 18) {
+            Dialog.confirm({
+              title: '提示',
+              message: `被保险人为未成年人，由监护人${that.appnt.name}进行人脸识别`,
+              showCancelButton: false,
+              confirmButtonText: '确定',
+              className: 'anxinaixinPopStyle',
+              getContainer: '#xx-signature-container'
+            }).then(() => {
+              this.isNoWXInsureReadClick(val)
             })
-            console.log('白名单查询结果: ', res)
-            if (res.result === '0') {
-              // 用户在白名单内
-              if (res.content && res.content.length) {
-                this.goUrl()
-                return
-              }
-            } else {
-              this.$toast(res.resultMessage)
-            }
-
-            // 人脸识别
-            if (this.faceAuthCount.insured < this.smsAuthNum) {
-              // 调原生人脸识别
-              const authRes = await EWebBridge.webCallAppInJs('face_auth', {
-                businessSource: '1', //业务来源:1-电投，2-入司，3-理赔，4-保全
-                number: that.saleInsuredPersonInfo.idNo, //身份证号码
-                name: that.saleInsuredPersonInfo.name, //姓名
-                orderNo: this.$CacheUtils.getLocItem('orderNo') //订单号
-              }).then((data) => {
-                if (JSON.parse(data).state == '1') {
-                  that.saveCustomerRidInfo('insured_rid', 'B')
-                  that.goUrl()
-                } else {
-                  that.faceAuthCount.insured++
-                  if (this.faceAuthCount.insured >= this.smsAuthNum) {
-                    this.operaFlag = 'insured'
-                    this.realPeopelCheck()
-                  }
-                }
-              })
-            } else {
-              this.operaFlag = 'insured'
-              this.realPeopelCheck()
-            }
           }
+          // 若被保险人为未成年人时,非微信环境点击【立即阅读签名】按钮进行弹窗提示 结束
+        }
+      }
+    },
+    /**
+     * @name: 非微信环境，被保险人点击【立即阅读签名】按钮
+     */
+    async isNoWXInsureReadClick(val) {
+      let that = this
+      window.localStorage.setItem('sign-val', val)
+      window.localStorage.setItem('sign-insured', JSON.stringify(that.insuredSign))
+      let thismyage = ''
+      if (this.saleInsuredPersonInfo.age === 0 || this.saleInsuredPersonInfo.age === '0' || this.saleInsuredPersonInfo.age) {
+        thismyage = this.saleInsuredPersonInfo.age
+      } else {
+        thismyage = this.saleInsuredPersonInfo.insuredAge
+      }
+      if (this.saleInsuredPersonInfo.idType != '1' || thismyage < '18') {
+        that.goUrl()
+      } else {
+        //RID 状态--有效
+        if (this.realPeopleRidInfo.insureRidFlag && this.realPeopleRidInfo.insureRidFlag == '0') {
+          // 手机号鉴权 --通过
+          let res = await this.realPeopleCheckMobile('insured')
+          if (res && res.result == '0') {
+            that.goUrl()
+            return
+          }
+        }
+
+        // 白名单校验
+        const res = await getWhitelist({
+          idNo: this.saleInsuredPersonInfo.idNo,
+          name: this.saleInsuredPersonInfo.name,
+          whiteType: 'sale_face_show'
+        })
+        console.log('白名单查询结果: ', res)
+        if (res.result === '0') {
+          // 用户在白名单内
+          if (res.content && res.content.length) {
+            this.goUrl()
+            return
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+        // 人脸识别
+        if (this.faceAuthCount.insured < this.smsAuthNum) {
+          // 调原生人脸识别
+          const authRes = await EWebBridge.webCallAppInJs('face_auth', {
+            businessSource: '1', //业务来源:1-电投，2-入司，3-理赔，4-保全
+            number: that.saleInsuredPersonInfo.idNo, //身份证号码
+            name: that.saleInsuredPersonInfo.name, //姓名
+            orderNo: this.$CacheUtils.getLocItem('orderNo') //订单号
+          }).then((data) => {
+            if (JSON.parse(data).state == '1') {
+              that.saveCustomerRidInfo('insured_rid', 'B')
+              that.goUrl()
+            } else {
+              that.faceAuthCount.insured++
+              if (this.faceAuthCount.insured >= this.smsAuthNum) {
+                this.operaFlag = 'insured'
+                this.realPeopelCheck()
+              }
+            }
+          })
+        } else {
+          this.operaFlag = 'insured'
+          this.realPeopelCheck()
         }
       }
     },
@@ -1343,7 +1389,7 @@ export default {
                   url: location.origin + '/#/sale/' + path + '?orderNo=' + this.$route.query.orderNo
                 },
                 routerInfo: {
-                  path: '/sale/' + path + '?orderNo=' + this.$route.query.orderNo
+                  path: '/flow-improve/sale/' + path + '?orderNo=' + this.$route.query.orderNo
                 }
               })
             }
@@ -1434,7 +1480,7 @@ export default {
             content: '签字进行',
             url:
               location.origin +
-              '/#/sale/signatureConfirmation?orderNo=' +
+              '/#/flow-improve/sale/signatureConfirmation?orderNo=' +
               this.$route.query.orderNo +
               '&token=' +
               localStorage.token +
@@ -1459,7 +1505,7 @@ export default {
             content: '签字进行',
             url:
               location.origin +
-              '/#/sale/signatureConfirmation?orderNo=' +
+              '/#/flow-improve/sale/signatureConfirmation?orderNo=' +
               this.$route.query.orderNo +
               '&token=' +
               localStorage.token +
@@ -2053,8 +2099,7 @@ export default {
     [CollapseItem.name]: CollapseItem,
     [NoticeBar.name]: NoticeBar,
     [Dialog.name]: Dialog,
-    [Field.name]: Field,
-    [IndexBar.name]: IndexBar
+    [Field.name]: Field
   },
   beforeRouteLeave(to, from, next) {
     document.body.style.backgroundColor = ''
@@ -2072,10 +2117,14 @@ export default {
   color: #4fc6b3;
 }
 .tips {
-  line-height: 30px;
-}
-.tips {
-  line-height: 30px;
+  // line-height: 30px;
+  padding: 6px 10px;
+  background-color: #f2dbdd;
+  line-height: 1.6;
+  p{
+    font-size: 12px;
+    color: #E50113;
+  }
 }
 /deep/ .fs16 {
   font-size: 16px !important;
@@ -2086,4 +2135,161 @@ export default {
     font-size: 16px;
   }
 }
+.signature-container{
+  .xxx-basics-info{
+    /deep/ .van-cell{
+      .van-cell__title{
+        font-size: 14px;
+        font-weight: bold;
+        color: #000000;
+        flex:none;
+        width: 7.4em;
+        padding-left: 10px;
+      }
+      .van-cell__value{
+        font-size: 14px;
+        font-weight: 400;
+        color: #000000;
+        text-align: left;
+      }
+    }
+  }
+  /deep/ .xxx-collapse{
+      .xxx-title{
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+        &::before{
+          content: '';
+          display: block;
+          width: 4px;
+          height: 16px;
+          border-radius: 2px;
+          background-color: #E50113;
+          margin-right: 6px;
+        }
+        span{
+          margin-left: 56px !important;
+          font-weight: 400;
+          font-size: 14px;
+        }
+      }
+      .van-cell::after{
+        display: none;
+      }
+      .van-collapse-item__content{
+        background-color: initial;
+        padding: 0;
+        &>.p1{
+          background-color: #fff;
+          border-top: 1px solid #dadada;
+          font-size: 14px;
+          padding: 12px 0px 12px 20px !important;
+          margin-bottom: 0 !important;
+        }
+        .xxx-item-box{
+          width: 92%;
+          margin: 0 auto;
+          .item{
+            margin-top: 8px;
+            background-color: #fff;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            padding: 13px 0px;
+            .p3{
+             width: 100%;
+             box-sizing: border-box;
+             padding-left: 10px;
+             font-size: 14px;
+            }
+            .p1{
+              margin-bottom: 0 !important;
+              max-width: 70%;
+              span{
+                font-size: 14px;
+                font-weight: bold;
+                color: #000 !important;
+                opacity: 1 !important;
+                display: inline-block;
+                margin-left: 10px;
+              }
+            }
+            .p2{
+              width: auto;
+              height: 16px;
+              border-radius: 4px;
+              background-color: #E5E5E5;
+              margin-left: 10px;
+              span{
+                font-weight: 400;
+                font-size: 9px;
+                color: #000000;
+                box-sizing: border-box;
+                padding: 0 4px;
+              }
+              .span1{
+                color: #fff;
+              }
+              &.active{
+                background-color: #3574FB;
+              }
+            }
+          }
+        }
+        .xxx-qianmin{
+          margin-bottom: 0 !important;
+          span{
+            padding-left: 26px;
+            font-size: 16px;
+          }
+        }
+        .xxx-qianmin-tips{
+          font-size: 14px;
+          width: 86%;
+          margin: 0 auto;
+          margin-top: 10px;
+        }
+        .van-button--round{
+          border-radius: 6px;
+        }
+      }
+      &:last-child{
+        .justify-content-a:last-child{
+          margin-bottom: 80px !important;
+        }
+      }
+  }
+  .xxx-bottom-btn{
+    width: 100%;
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    button{
+      width: 43%;
+      height: 40px;
+      margin-top: 10px;
+      &:nth-child(1){
+        color: #E9332E;
+        border-color: #E9332E;
+        margin-right: 16px;
+      }
+    }
+  }
+}
+
+/deep/ .anxinaixinPopStyle{
+  .van-dialog__header{
+    color: #E9332E;
+  }
+  .van-dialog__message{
+    line-height: 1.8;
+  }
+  .van-button{
+    background-color: #E9332E;
+    .van-button__text{
+      color: #fff;
+    }
+  }
+}
 </style>

src/views/ebiz/saleFlowProImprove/readDocuments.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class='insuranceInformation-container redRadioCheckbox'>
-    <div style="padding: 10px;overflow-x: auto;overflow-y: hidden;display: flex" v-if="!isPreview">
+  <div class='insuranceInformation-container redRadioCheckbox' :class="[isGuanhuaiBiaozhun === 0 ? '' : 'active1']">
+    <!--文件导航 开始-->
+    <div class="xxx-fileList" v-if="!isPreview">
       <p :key="index" v-for="(item, index) in fileList" :class="{ active: index+1 == current }"
          @click="fileListClick(item,index)"
          style="white-space: nowrap;display: flex;align-items: center;">
@@ -8,48 +9,53 @@
         <van-icon v-if="index != fileList.length - 1" name="arrow" style="margin: 0px 5px;"/>
       </p>
     </div>
-    <!-- 普通渠道的读秒提示 -->
-    <van-notice-bar :scrollable='false' v-if='branchType != "14" && !Time' class='notice'>
-      {{ `提示：阅读时长需在${this.Time ? this.time : this.number}秒以上` }}
-    </van-notice-bar>
-    <div id="pdf" style="overflow: scroll;background: #eee;" :style="[{height:isPreview ? '100vh' : '75vh'}]" @scroll="handleScroll">
+    <!--文件导航 结束-->
+
+    <!-- 顶部提示 开始 -->
+    <p v-if='branchType != "14"' class="xxx-notice-bar">文件滑动至底部完成阅读</p>
+    <!-- 顶部提示 结束 -->
+
+    <!-- 一键置底 开始 --> 
+    <div class="xxx-yijianzhidi" @click="scrollToBottom">
+      <img src="@/assets/images/ebiz/yijianzhidi.png" />
+    </div>
+    <!-- 一键置底 结束 -->
+
+    <!--文件内容 开始-->
+    <div id="pdf" ref="scrollableContent" @scroll="updateScrollProgress">
       <div id="pdfH5ID"></div>
 	    <div ref="activeButtonEle"></div>
-      <!-- 银保渠道右侧标注提示 -->
-      <div v-if='branchType == "14" && !isScrollToBottom' class='scroll-tip'>
-        请下滑至底部完成阅读
-      </div>
     </div>
-    <div style="height: 20vh;" v-if="!isPreview">
-      <van-radio-group v-model='radio' class='pb10 pt10 pl10 fs20'>
-        <van-radio name='1' @click='click' :disabled="branchType == '14' && !isScrollToBottom">
-          本人确认已阅读<span>{{documentName}}</span>
-        </van-radio>
-      </van-radio-group>
-      <div v-if="fileList.length != 0 && fileList[this.current - 1].documentCode == '2' && signVal == '2' && (productType == '1' || productType == '2')" style="display: flex;align-items: center;margin-left: 40px;margin-top: 10px;font-size: 14px;">
-        <span class="fs20">投保人抄录：</span>
-        <van-button type='danger' class="fs20" style="height: 30px;" size='mini' :disabled="chaoluButtonDisabled" round @click="gochaolu">
-          {{chaoluStatus ? '已抄录' : '抄录' }}
-        </van-button>
-      </div>
+    <!--文件内容 结束-->
+
+    <!--底部提示和按钮 开始-->
+    <div class="xxx-bottom">
+      <p class="xxx-isread">
+        本人已阅读确认，理解并同意<span>{{documentName}}</span>各项内容
+      </p>
       <div class='bg-white bottom-btn' v-if="current != '1'">
         <van-button style="width: 30%;font-size: 16px;" plain type='danger' size='large' v-no-more-click='1000' @click="prevStep">上一步
         </van-button>
-        <van-button style="width: 70%;font-size: 16px;" type='danger' size='large' :disabled='isDisabledComplite' @click='goNext' v-no-more-click='1000'>
+        <van-button style="width: 70%;font-size: 16px;" type='danger' size='large' :disabled='scrollProgress <  90' @click='goNext' v-no-more-click='1000'>
           我已阅读确认并理解，继续
         </van-button>
       </div>
       <div class='bg-white bottom-btn' v-if="current == '1'">
-        <van-button class="fs20" type='danger' size='large'  :disabled='isDisabledComplite' @click='goNext' v-no-more-click='1000'>我已阅读确认并理解，继续
+        <van-button class="fs20" type='danger' size='large'  :disabled='scrollProgress < 90' @click='goNext' v-no-more-click='1000'>我已阅读确认并理解，继续
         </van-button>
       </div>
     </div>
+    <!--底部提示和按钮 结束-->
+    <!--关怀标准切换 开始-->
+    <oldVersionSwitch @onFloatBtnClicked="onFloatBtnClicked" />
+    <!--关怀标准切换 结束-->
   </div>
 </template>
 <script>
   import { RadioGroup, Radio, Dialog, NoticeBar } from 'vant'
   import Pdfh5 from "pdfh5";
   import { saveInformation } from '@/api/ebiz/sale/sale'
+  import oldVersionSwitch  from '@/components/ebiz/oldVersionSwitch.vue'
   export default {
     data() {
       return {
@@ -67,20 +73,22 @@
         fileList:[],
         mainRiskCodes: '',
         chaoluButtonDisabled: true,
-        chaoluStatus: false,
         productType: '',
         branchType: '',
         // 银保渠道滚动检测相关
         isScrollToBottom: false,
         scrollTimer: null,
-	      pdfStatus: void 0
+	      pdfStatus: void 0,
+        scrollProgress: 0,
+        isGuanhuaiBiaozhun: Number(sessionStorage.getItem('oldVersionSwitch'))
       }
     },
     components: {
       [RadioGroup.name]: RadioGroup,
       [Radio.name]: Radio,
       [Dialog.name]: Dialog,
-      [NoticeBar.name]: NoticeBar
+      [NoticeBar.name]: NoticeBar,
+      oldVersionSwitch
     },
     created(){
       if(window.localStorage.getItem('branchType')) {
@@ -130,9 +138,34 @@
         }
         this.getOrderDetail()
       // })
-
     },
     methods: {
+      onFloatBtnClicked(active) {
+        this.isGuanhuaiBiaozhun = active
+      },
+      scrollToBottom() {
+          const container = this.$refs.scrollableContent;
+          container.scrollTo({
+            top: container.scrollHeight,
+            behavior: 'smooth'
+          });
+        },
+        
+        scrollToTop() {
+          const container = this.$refs.scrollableContent;
+          container.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
+        },
+        updateScrollProgress() {
+          const container = this.$refs.scrollableContent;
+          const scrollTop = container.scrollTop;
+          const scrollHeight = container.scrollHeight - container.clientHeight;
+          this.scrollProgress = (scrollTop / scrollHeight) * 100;
+          console.log(this.scrollProgress)
+        },
+        
       // 处理滚动事件
       handleScroll(event) {
         if (this.branchType != '14') return
@@ -169,13 +202,6 @@
             }
           }
         }
-        if(this.fileList[this.current - 1].documentCode == '2') {
-          if(window.sessionStorage.getItem('signH5Img')){
-            if(JSON.parse(window.sessionStorage.getItem('signH5Img')).type == '抄录' && JSON.parse(window.sessionStorage.getItem('signH5Img')).val){
-              this.chaoluStatus = true
-            }
-          }
-        }
         if(this.$route.query.currentIndex){
           this.changeFile(1)
         } else {
@@ -242,12 +268,6 @@
         }, 1000)
       },
       goNext(){
-        if(this.fileList[this.current - 1].documentCode == '2' && this.signVal == '2' && (this.productType == '1' || this.productType == '2')){
-          if(!this.chaoluStatus){
-            this.$toast('请先完成抄录')
-            return false
-          }
-        }
         let params = {
           orderType: 'SIGN_ORDER',
           orderDTO: {
@@ -267,18 +287,6 @@
             ]
           }
         }
-        /**
-         * @Author: LiuXiaoFeng
-         * @Description: documentCode为2 代表的是人身保险电子投保单
-         * 人身保险电子投保单文件需要抄录 保存时修改入参数据 copyValue是抄录的base64字符串 signOrRead需要变更为sign
-         * @Date: 2023/11/20
-         **/
-        if(this.fileList[this.current - 1].documentCode == '2' && this.signVal == '2' && (this.productType == '1' || this.productType == '2')){
-          params.orderDTO.ebizSignDTOS[0].caType = 'copy'
-          params.orderDTO.ebizSignDTOS[0].copyValue = JSON.parse(window.sessionStorage.getItem('signH5Img')).val
-          params.orderDTO.ebizSignDTOS[0].signOrRead = 'sign'
-          params.orderType = 'SIGN_COPY'
-        }
         saveInformation(params).then(res=>{
           if(res.result == 0) {
             window.sessionStorage.removeItem('currentFile')
@@ -290,7 +298,7 @@
             }
             if(this.fileList[this.current - 1].documentCode == '5') {
               this.$router.push({
-                path: '/sale/SignatureConfirmation',
+                path: '/flow-improve/sale/SignatureConfirmation',
                 query: {
                   orderNo: this.$route.query.orderNo
                 }
@@ -298,7 +306,7 @@
             } else {
               if(this.current == this.fileList.length) {
                 this.$router.push({
-                  path: '/sale/signDocuments',
+                  path: '/flow-improve/sale/signDocuments',
                   query: {
                     orderNo: this.$route.query.orderNo
                   }
@@ -312,16 +320,6 @@
           }
         })
       },
-      gochaolu(){
-        let signInfo = {
-          type:'抄录',
-          // text:'本人已阅'
-          text:'本人已阅读保险条款、产品说明书和投保提示书，了解本产品的特点和保单利益的不确定性'
-        }
-        window.sessionStorage.setItem('signInfo',JSON.stringify(signInfo))
-        window.location.href = this.$mainUrl + '/signH5/1.html'
-        // window.location.href = 'http://'+window.location.host + '/signH5/1.html'
-      },
       changeFile(readStatus){
         this.documentName = this.fileList[this.current - 1].documentName
         // 银保渠道
@@ -400,7 +398,6 @@
       prevStep(){
         window.sessionStorage.removeItem('signH5Img')
         this.fileList[this.current - 2].documentStatus = '0'
-        this.chaoluStatus = false
         if(window.localStorage.getItem('sign-val') == '3'){
           window.localStorage.setItem('agentSignFile',JSON.stringify(this.fileList))
         } else if(window.localStorage.getItem('sign-val') == '0' || window.localStorage.getItem('sign-val') == '2'){
@@ -622,4 +619,108 @@
       color: #c8c9cc;
     }
   }
+  .xxx-fileList{
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: flex;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 999;
+    height: 40px;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 0 10px;
+  }
+  .xxx-notice-bar{
+    width: 100%;
+    height: 26px;
+    position: fixed;
+    top: 40px;
+    left: 0;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, 0.596);
+     color: #fff;
+      font-weight: bold;
+      font-size: 13px;
+      text-align: center;
+      line-height: 27px;
+  }
+  .xxx-yijianzhidi{
+    position: fixed;
+    right: 0;
+    bottom: 120px;
+    z-index: 999;
+    width: 50px;
+    height: 50px;
+    img{
+      width: 100%;
+      height: 100%;
+      opacity: 0.7;
+    }
+  }
+  #pdf{
+    overflow: scroll;
+    background: #eee;
+    width: 100%;
+    height: calc(100vh - 170px) !important;
+    position: relative;
+    top: 66px;
+    // 
+  }
+  .xxx-bottom{
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    .xxx-isread{
+      position: fixed;
+      left: 0;
+      bottom: 58px;
+      z-index: 999;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0 10px;
+      color: rgb(255, 69, 34);
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+  .insuranceInformation-container.active1{
+    .xxx-fileList{
+      height: 50px;
+      p{
+        font-size: 18px;
+      }
+    }
+    .xxx-notice-bar{
+      top: 50px;
+      height: 34px;
+      line-height: 34px;
+      font-size: 16px;
+    }
+    #pdf{
+      height: calc(100vh - 240px) !important;
+      top: 84px;
+    }
+    .xxx-isread{
+      font-size: 18px;
+      bottom: 70px;
+    }
+    .xxx-yijianzhidi{
+      width: 66px;
+      height: 66px;
+      bottom: 140px;
+    }
+    .bottom-btn{
+       button{
+        height: 60px;
+        span{
+          font-size: 20px !important;
+        }
+      }
+    }
+  }
 </style>

src/views/ebiz/saleFlowProImprove/signDocuments.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class='insuranceInformation-container' style="padding: 15px;">
-    <div style="display: flex;align-items: center;font-weight: bold;" class="fs20">
-      <span style="width: 3px;background: red;height: 25px;"></span>
+  <div class='insuranceInformation-container' :class="[isGuanhuaiBiaozhun === 0 ? '' : 'active']">
+    <div style="display: flex;align-items: center;font-weight: bold;" class="fs20 div1">
+      <span class="span1" style="width: 3px;background: red;height: 25px;"></span>
       <span v-if="signVal == '0' || signVal == '2'" style="margin-left: 5px;">
         投保人：{{signName}}
       </span>
@@ -12,7 +12,7 @@
         代理人：{{signName}}
       </span>
     </div>
-    <div style="margin-top: 15px;font-weight: bold;line-height: 32px;font-size: 16px;" class="fs20">
+    <div style="margin-top: 15px;font-weight: bold;line-height: 32px;font-size: 16px;" class="fs20 div2">
       <span v-if="signVal == '3'">
         1.接下来您作为代理人将进行投保文件的签字，请在签字前确保您已仔细阅读投保文件并了解投保文件的内容和含义，确定投保单各项信息准确无误。签字完成并成功提交说明您正式向我司提交投保申请。
       </span>
@@ -26,7 +26,7 @@
         1.接下来您作为被保险人/监护人将进行投保文件的签字，请在签字前确保您已仔细阅读投保文件并了解投保文件的内容和含义，确定投保单各项信息准确无误。签字完成并成功提交说明您正式向我司提交投保申请。
       </span>
     </div>
-    <div style="border-bottom: 1px dashed #eee;padding-bottom: 15px;margin-top: 15px;">
+    <div class="div3" style="border-bottom: 1px dashed #eee;padding-bottom: 15px;margin-top: 15px;">
       <p style="font-size: 16px;font-weight: bold;">2.您将为以下文件进行统一签名：</p>
       <div v-for="item in fileList" style="margin-top: 15px;display: flex;justify-content: space-between;">
         <span style="font-size: 16px;color: red;opacity: 0.7;width: 60%;display: inline-block;">{{item.name}}</span>
@@ -36,7 +36,15 @@
         </span>
       </div>
     </div>
-    <div style="margin-top: 15px;display: flex;align-items: center;" class="fs20">
+    <!--触发抄录 开始-->
+    <div v-if="(signVal == '0' || signVal == '2') && (productType == '1' || productType == '2')" style="margin-top: 15px;display: flex;align-items: center;margin-bottom: 0px;" class="fs20 div4">
+      <span style="font-size: 16px;font-weight: bold;">投保人抄录：</span>
+      <van-button type="danger" size="small" round style="margin-left: 20px;height: 32px;font-size: 16px;" @click="yiChaoLu" class="fs20">
+        {{chaoLuObj.btnText1}}
+      </van-button>
+    </div>
+    <!--触发抄录 结束-->
+    <div style="margin-top: 15px;display: flex;align-items: center;" class="fs20 div4">
       <span v-if="signVal == '3'" style="font-size: 16px;font-weight: bold;">代理人签名：</span>
       <span v-if="signVal == '0' || signVal == '2'" style="font-size: 16px;font-weight: bold;">投保人签名：</span>
       <span v-if="signVal == '1' && insuredAge >= 18" style="font-size: 16px;font-weight: bold;">被保险人签名：</span>
@@ -65,11 +73,27 @@
         <van-button round type="danger" size="small" style="padding:0px 35px;font-size: 14px;" @click="gosign">确定</van-button>
       </div>
     </van-dialog>
+    <!--关怀标准切换 开始-->
+    <oldVersionSwitch @onFloatBtnClicked="onFloatBtnClicked" />
+    <!--关怀标准切换 结束-->
+    <!--抄录弹窗 开始-->
+    <van-popup round position="bottom" :close-on-click-overlay="false" v-model="chaoLuObj.isShowChaoluPop" class="xxxChaoLuPoPStyle">
+      <div class="head">
+        <span @click="chaoLuObj.isShowChaoluPop = false">关闭</span>
+      </div>
+      <div class="content">
+        <p class="p1">若投保分红、万能或投连保险产品，为保障您的利益，请您在认真阅读保险条款、产品说明书和投保提示书后，由投保人在下方表格中亲自抄录<span>“本人已阅读保险条款、产品说明书和投保提示书，了解本产品的特点和保单利益的不确定性。”</span>。</p>
+        <van-field v-model="chaoLuObj.inputText" rows="1" type="textarea" readonly />
+        <van-button type="danger" size="small" round style="height: 40px;font-size: 16px;" class="fs20" @click="yijanChaoLu">{{chaoLuObj.btnText}}</van-button>
+      </div>
+    </van-popup>
+    <!--抄录弹窗 结束-->
   </div>
 </template>
 <script>
   import { saveInformation } from '@/api/ebiz/sale/sale'
   import isChoose from '@/assets/images/u20257.png'
+  import oldVersionSwitch  from '@/components/ebiz/oldVersionSwitch.vue'
   export default {
     data() {
       return {
@@ -83,9 +107,20 @@
         guardianshow: false,
         guardianName: '',
         nextDisabled:true,
+        productType: window.localStorage.getItem('productType'),
+        chaoLuObj: {
+          isShowChaoluPop: false, // 控制抄录弹窗是否展示
+          inputText: '', // 抄录内容
+          btnText: '一键抄录',
+          btnText1: '抄录',
+          timer: null
+        },
+        isGuanhuaiBiaozhun: Number(sessionStorage.getItem('oldVersionSwitch'))
       }
     },
-    components: {},
+    components: {
+      oldVersionSwitch
+    },
     created(){
       setTimeout(() => {
         // eslint-disable-next-line no-undef
@@ -131,7 +166,46 @@
       }
     },
     methods: {
+      onFloatBtnClicked(active) {
+        this.isGuanhuaiBiaozhun = active
+      },
+      /**
+       * @name: 点击抄录和已抄录
+       */
+      yiChaoLu() {
+        this.chaoLuObj.isShowChaoluPop = true
+        this.chaoLuObj.inputText = ''
+        this.chaoLuObj.btnText = '一键抄录'
+        clearInterval(this.chaoLuObj.timer)
+      },
+      /**
+       * @name: 抄录弹窗点击一键抄录和抄录完成
+       */
+      yijanChaoLu() {
+        if (this.chaoLuObj.btnText === '一键抄录') {
+          let currentIndex = 0
+          let textToType = '本人已阅读保险条款、产品说明书和投保提示书，了解本产品的特点和保单利益的不确定性。'
+
+          this.chaoLuObj.timer = setInterval(() => {
+            if (currentIndex < textToType.length) {
+              this.chaoLuObj.inputText = textToType.substring(0, currentIndex + 1);
+              currentIndex++;
+              this.chaoLuObj.btnText = `正在抄录（${currentIndex}）`
+            } else {
+              clearInterval(this.chaoLuObj.timer)
+              this.chaoLuObj.btnText = '抄录完成'
+            }
+          }, 200)
+        } else if (this.chaoLuObj.btnText === '抄录完成') {
+          this.$toast('保存成功')
+          this.chaoLuObj.isShowChaoluPop = false
+          this.chaoLuObj.btnText1 = '已抄录'
+        }
+      },
       gosign(){
+        if ((this.signVal == '0' || this.signVal == '2') && (this.productType == '1' || this.productType == '2') && this.chaoLuObj.btnText1 !== '已抄录') {
+          return this.$toast('您还未完成抄录，请先抄录')
+        }
         window.localStorage.setItem('orderNo',this.$route.query.orderNo)
         let signInfo = {
           type:'签名',
@@ -200,11 +274,11 @@
           if(res.result == '0') {
             if(window.sessionStorage.getItem('shareUrl')){
               this.$router.push({
-                path: '/sale/SignatureConfirmation'+window.sessionStorage.getItem('shareUrl')
+                path: '/flow-improve/sale/SignatureConfirmation'+window.sessionStorage.getItem('shareUrl')
               })
             } else {
               this.$router.push({
-                path: '/sale/SignatureConfirmation',
+                path: '/flow-improve/sale/SignatureConfirmation',
                 query: {
                   orderNo: this.$route.query.orderNo
                 }
@@ -281,4 +355,145 @@
       padding: 8px 16px;
     }
   }
+  .xxxChaoLuPoPStyle{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    .head{
+      width: 100%;
+      padding: 16px 0px;
+      display: flex;
+      justify-content: flex-end;
+      position: relative;
+      margin-bottom: 20px;
+      span{
+        color: red;
+        padding-right: 20px;
+        font-size: 16px;
+      }
+      &::after{
+        content: '';
+        display: block;
+        width: 98%;
+        height: 1px;
+        background-color: #e7e9f7;
+        position: absolute;
+        left: 1%;
+        bottom: 0px;
+      }
+    }
+    .content{
+      width: 96%;
+      display: flex;
+      flex-wrap: wrap;
+      .p1{
+        width: 90%;
+        font-size: 14px;
+        color: rgb(51, 51, 51);
+        line-height: 32px;
+        text-align: justify;
+        margin-left: 3%;
+        margin-bottom: 40px;
+        span{
+          font-weight: 500;
+        }
+      }
+      /deep/ .van-field{
+        padding: 0;
+        width: 90%;
+        height: 110px;
+        margin-left: 3%;
+        border:1px solid #e7e9f7;
+        border-radius: 10px;
+        .van-field__body{
+          width: 100%;
+          height: 100%;
+          textarea{
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            padding: 4px;
+            color: red;
+            font-weight: 500;
+          }
+        }
+      }
+      /deep/ .van-cell::after{
+        border: none !important;
+      }
+      button{
+        margin-top: 20px;
+        margin-left: 3%;
+        margin-bottom: 40px;
+      }
+    }
+  }
+  .insuranceInformation-container{
+    padding: 10px 10px 0px;
+    height: 100vh;
+    box-sizing: border-box;
+    width: 100%;
+    overflow: auto;
+  }
+  .insuranceInformation-container.active{
+    .div1{
+      .span1{
+        width: 6px !important;
+        height: 30px !important;
+      }
+      span{
+        font-size: 18px !important;
+      }
+    }
+    .div2{
+      font-size: 20px !important;
+    }
+    .div3{
+      p,span{
+        font-size: 20px !important;
+      }
+      img{
+        width: 20px !important;
+        position: relative;
+        top: 3px;
+      }
+    }
+    .div4{
+      margin-bottom: 160px;
+      span{
+        font-size: 20px !important;
+      }
+      button{
+        width: 140px;
+        height: 38px !important;
+      }
+    }
+    .bottom-btn{
+      button{
+        height: 60px;
+        span{
+          font-size: 20px !important;
+        }
+      }
+    }
+    /deep/ .xxxChaoLuPoPStyle{
+      .head{
+        span{
+          font-size: 18px;
+        }
+      }
+      .content{
+        .p1{
+          font-size: 17px;
+        }
+        .van-field .van-field__body textarea{
+          font-size: 16px;
+        }
+        button{
+          height: 40px;
+          font-size: 18px;
+        }
+      }
+    }
+  }
 </style>