ebiz-h5/src/components/common/PopupQuesResult.vue

<template>
  <div class="popup-ques-result">
    <van-popup
        v-model="showResultPopup"
        position="bottom"
        class="result-popup"
        @click-overlay = "clickOverlay('overlay')"
      >
      <div class="result-popup-title">
        <span>您的适当性评估结果</span>
        <van-icon name="cross" @click="clickOverlay('icon')"/>
      </div>
      <div class="result-popup-content">
        <div class='content'>尊敬的{{appntInfo.name}}{{appntInfo.sex=='0'?'先生':'女士'}}：</div>
        <div class='content'>根据您填写的评估问卷，本公司对您的保险需求及财务支付水平进行了综合评估，结果反馈如下：</div>
        <div class='content'>您适合购买的产品类型为：
          <span class='product-type'>{{resultRiskType}}</span>
        </div>
        <div>
          <div v-for="(item,idx) in productLevel" :key="idx" class="itemLevel">
              {{ item }}
          </div>
        </div>
        <div class='tips'>特别提示：</div>
        <div class='tips'> 本次评估结果及匹配意见供您决策参考，并不代表本公司对上述产品的风险及收益作出实质性判断或者保证。若您提供的信息发生任何重大变化，建议您对所购买的产品及时进行重新审视，以确保您的购买决定与您可承受的风险程度等实际情况一致。</div>
        <div class='tips'>建议您充分考察该产品的特征，自行做出投保决定，请您确保您的决定是独立、自主、真实的。</div>
      </div>
      <!-- 未测评过底部按钮 -->
      <div class="bottom-btn bg-white flex">
        <van-button type="danger" square size="large" plain v-no-more-click="1000" @click="reTest" v-if="showRetest">重新测评</van-button>
        <van-button type="danger" square size="large"  v-no-more-click="1000"  @click="toInsure">我已知晓，继续投保</van-button>
      </div>

      <!-- 已测评过底部按钮 -->
      <!-- <div class="bottom-btn bg-white flex testBtn" v-if="showHasTested">
        <van-button type="danger" square size="large" plain v-no-more-click="1000" @click="goBack">上一步</van-button>
        <van-button type="danger" square size="large" class="btn"   v-no-more-click="1000"  @click="goNext">已知晓，继续投保</van-button>
        <van-button type="danger" square size="large"  v-no-more-click="1000"  @click="reStart">重新评估</van-button>
      </div> -->
  
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'PopupQuesResult',
  props: {
    showResultPopup: {
      type: Boolean,
      default: false
    },
    showRetest: {  //展示重新测评
      type: Boolean,
      default: false
    },
    appntInfo:{
      type: Object,
      default: () => {}
    },
    resultRiskType:{
      type:String,
      default:''
    },
    assessResultDescList:{
      type:Array,
      default: () => []
    }
  },
  data() {
    return {
      //showNoTested: false
      productLevel:[
      'P1分类：保险期限为一年期及以下的人身保险产品，包括人寿保险、健康保险、意外伤害保险等',
      'P2分类：保险期限为一年期以上的普通型人身保险，包括人寿保险、年金保险、健康保险、意外伤害保险等',
      'P3分类：专属商业养老保险、分红型人身保险、万能型人身保险，其他符合本级特征描述的人身保险产品，包括人寿保险、年金保险等',
      'P4分类：投资连结型人身保险、变额年金保险，其他符合本级特征描述的人身保险产品，包括人寿保险、年金保险等',
      'P5分类：符合本级特征描述的人身保险产品']
    }
  },
  methods: {
    clickOverlay(extra){
      this.$emit('clickOverlayHandler',extra)
    },

    //1.未测评过弹窗按钮
    //1.1 重新测评
    reTest(){
      this.$emit('reTestHandler')
    },
    
    //1.2 我已知晓，继续投保
    toInsure(){
      this.$emit('toInsureHandler')
    },
  }
}
</script>

<style lang="scss" scoped>
.popup-ques-result{
  .result-popup{
   
    .result-popup-title{
      padding:10px 10px 0; 
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      font-weight: bolder;
      color:#000;
    }
    .result-popup-content{
      padding:10px 10px 60px; 
      box-sizing:border-box;
      .content{
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
        .product-type{
          color: #ee0a24;
          font-weight: bold;
        }
      }
      .tips{
        font-size: 14px;
        color: #000;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .tips:nth-child(5){
        padding:10px 0;
        margin-bottom: 0;
        color: #000;
        font-weight: bold;
      }
      
    }
    .result-popup-btn{

    }
    /deep/ .testBtn{
      .van-button:first-child{
        flex:1;
      } 
      .van-button:nth-child(2){
        flex:1.3;
        border-right:1px solid #fff !important;
      }
      .van-button:nth-child(3){
        flex:1;
      }
    }
   
    .itemLevel{
      font-size: 12px;
      color:#999;
      margin-bottom:5px;
    }
  }
}
</style>