ebiz-h5/src/views/ebiz/common/EvaluateResult.vue

<template>
  <div class="fit-wrapper">
    <div v-if="assessResult == '1'" class="fit-container">
      <img src="@/assets/images/ebiz/evalImg.png" alt="">
      <div class="pt20 pb20 pr10 pl20">
        <div class="fs18 pb6" v-for="(item,idx) in evalDescList " >{{idx+1}}、{{ item }}</div>
        <p class="green fw400 fs18 quitDesc">根据以上与适当性问卷匹配结果，我司建议您终止投保，关注该产品的特征及风险，审慎作出投保决策。 如您坚持投保，请您确认和签署《投保风险警示确认书》。</p> 
      </div>
      <div class="footer-btn bottom-btn bg-white flex">
        <van-button type="danger" size="large" plain  square class="btn" @click="exitProcess"  v-no-more-click="1000">终止投保</van-button>
        <van-button type="danger" size="large" square class="btn" @click="showRisks = true"   v-no-more-click="1000">已知晓上述提示，本人仍继续投保</van-button>
      </div>
    </div>
    <div v-if="assessResult === '0'" class="fit-container">
      <img src="@/assets/images/ebiz/evalImg.png" alt="">
      <div class="pt20 pb20 pr10 pl20 fs18">{{evalDesc}}</div>
      <div class="bottom-btn bg-white flex">
        <van-button type="danger" size="large" square class="btn"  v-no-more-click="1000" @click="onConfirm">确认</van-button>
      </div>
    </div>

    <van-dialog 
      v-model="showRisks" 
      title="投保风险警示确认书"
      confirmButtonText="知晓并同意警示书，继续投保"
      @confirm="onConfirm"
      class="riskDialog"
    >
      <span>
          本人声明已了解及完全清楚产品责任、风险情况、保险利益不确定及不及时交纳保险费的风险，经审慎考虑后，仍坚持购买该产品，并愿意承担由此可能产生的损失和其他后果。购买该产品的决定，系本人独立、自主、真实的意思表示。
      </span>
    </van-dialog>
  </div>
</template>
<script>
import { getOrderDetail, saveEvalateAnswer } from '@/api/ebiz/sale/sale'
export default {
  name: 'EvaluateResult',
  data(){
    return {
      assessResult:null, //适应性问卷评估结果 0通过 1不通过
      showPopUp:true,
      showRisks:false,
      assessResultDescList:[],
      evalDesc:'',//测评结果描述  
      evalDescList:[]
    }
  },
  mounted(){
    this.$jump({
      flag: 'navigation',
      extra: {
        title: '评估结果'
      },
    })
    document.body.style.backgroundColor = '#fff'
    getOrderDetail({ orderNo: this.$route.query.orderNo,userAssessLogic:true }).then(res => {
      if (res.result == 0) {
        this.assessResultDescList = res.orderDTO.orderInfoDTO.assessResultDescMap
        this.assessResult = res.orderDTO.orderInfoDTO.assessResult
        if(Object.keys(this.assessResultDescList).includes('pass')&&this.assessResult==='0'){
          this.evalDesc = this.assessResultDescList['pass'] + '。'
        }else{
          this.handlerAssessResultDesc()
        }
        console.log('this.assessResultDescList',this.assessResultDescList)
      } else {
        this.$toast(res.resultMessage)
      }
    })
  },
  methods:{
  
    handlerAssessResultDesc(){
      // 获取所有以1开头的属性键
      let numStr = ['1','2','3','4']
      let evalDesc = ''
      //let evalDescList = []
      numStr.forEach(num=>{
        let keysStartWith = Object.keys(this.assessResultDescList).filter(key => key.startsWith(num));
        // 获取这些键对应的所有元素值组成的数组
        let filterValue = keysStartWith.map(key => {
          return JSON.parse(this.assessResultDescList[key]);
        });
        console.log('filterValue',filterValue)
        // if(filterValue.length==1){
        //   filterValue.forEach(item=>{
        //     let des = item[0]+'，'+item[1]+'。'
        //     this.evalDescList.push(des)
        //   })
        // }else if(filterValue.length>1){
        //   filterValue.forEach(item=>{
        //     let des = item[0]+'，'+item[1]+'。'
        //     this.evalDescList.push(des)
        //   })
        //   //evalDesc += filterValue.map(item => item[0]).join('，') +'，' +filterValue[0][1]+'。'
        //   //this.evalDescList.push(evalDesc)
        // }else return
        if(filterValue.length>=1){
          filterValue.forEach(item=>{
            let des = item[0]+'，'+item[1]+'。'
            this.evalDescList.push(des)
          })
        }
      }) 
      // this.evalDesc = evalDesc
      // console.log('this.evalDesc',this.evalDesc)
      console.log('this.evalDescList',this.evalDescList)
    },

    //终止投保
    exitProcess(){
      this.$dialog.confirm(
        {
          className: 'dialog-delete',
          title: '提示',
          message: '退出流程可能会丢失部分数据，是否确认退出？',
          cancelButtonColor: '#E9332E',
          confirmButtonColor: '#FFFFFF'
        })
        .then(() => {
          this.jumpList()
        })
        .catch(() => {
          return
        })
    },
    jumpList(){
      saveEvalateAnswer({
        operateType:'0',
        orderNo:this.$route.query.orderNo
      }).then(res=>{
        if(res.result=='0'){
          this.$jump({
            flag: 'h5',
            extra: {
              title: '电子投保单列表',
              forbidSwipeBack: 1, //当前页面禁止右滑返回
              url: location.origin + `/#/sale/list`
            },
            routerInfo: {
              path: `/sale/list`,
              type: '1'
            }
          })
        }else{
          this.$toast(res.resultMessage)
        }
      })
    },
    //继续投保
    onConfirm(){
      this.$jump({
        flag: 'h5',
        extra: {
          forbidSwipeBack: '1',
          url: location.origin + '/#' + '/sale/beneficiary?orderNo=' + this.$route.query.orderNo,
          needRefresh: '1'
        },
        routerInfo: {
          path: '/sale/beneficiary?orderNo=' + this.$route.query.orderNo,
        }
      }) 
    }
  }
}
</script>
<style lang="scss" scoped>
  .fit-wrapper{
    width:100%;
    height:100vh;
    display:flex;
    .fit-container{
      
        padding:50px 0;
        width:100%;
        display:flex;
        overflow: auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img{
          width:179px;
          height:126px;
          padding:20px 0;
        }
        .quitDesc{
          text-indent: 2em;
        }
      }
    .footer-btn{
      position:fixed;
      bottom:0;
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      .van-button:first-child{
        flex:1;
      }
      .van-button:last-child{
        flex:2;
      }
    }
    /deep/ .riskDialog{
      .van-dialog__header{
        padding:20px 0;
        font-size:16px;
      }
      .van-dialog__content{
        padding:0 20px;
        margin-bottom:10px;
        font-size:14px;
      }
      .van-dialog__confirm{
        font-size:16px;
        color:#5ca7de;
      }
    }
  }
</style>