supplier-dispatch-h5/src/views/liabilityInsurance/insuredPage.vue

<template>
  <div class="wrap">
    <div class="navBar">
      <van-nav-bar
          title="参保救援职业责任险"
          left-arrow
          left-arrow-color="#FFFFFF"
          :border="false"
          :fixed="true"
          :safe-area-inset-top="true"
          @click-left="goBack"
      />
    </div>
    <div class="contentWrap">
      <div>
        为降低日常救援工作中的不可预期的车损赔付带来的运营风险和资金压力，减少由此衍生而来的投诉，顺应行业服务标准不断增长的局势，中道救援自有车辆已全部投保了救援职业责任险。
      </div>
      <div>
        通过交流了解，我们的合作服务商日常运营中会遇到责任险或者货物险的“投保难、理赔难”的问题，为此我们与保司沟通协调，特为与中道救援合作紧密的服务商，提供救援职业责任险参保渠道，解决大家的实际困难，实现共同进步。
      </div>
      <div>一、救援职业责任险简介：</div>
      <div> 1、保额有50万和100万两套方案可选。</div>
      <div> 2、保费支付可采用救援服务费抵扣的方式，降低资金压力。</div>
      <div> 3、其他详情如需了解，请与辖区区域经理联系。</div>
      <div> 二、如有好的建议需要交流，请与18621558505曲仁杰联系。</div>
      <div> 三、如有参保需要，请点击下方“参保”按钮，我们会与您联系。</div>
    </div>
    <div class="upload_btn_wrap">
      <div class="btn_save" :style="{'backgroundColor':used ? '#cccccc' : '#354D93'}" @click="showPoup = true">参保</div>
    </div>
    <div class="poupCommon" v-if="showPoup">
      <div class="showPoupContainer">
        <img class="insured" src="@/assets/insured-jianbian.png">
        <img class="insure" src="@/assets/insured.png">
        <div class="con">
          <template v-if="used">
            <div class="title">您已成功申请参保，请等待</div>
            <div class="title">专人与贵司联系。</div>
          </template>
          <template v-else>
            <div class="title">请确认</div>
            <div class="title">是否参保救援职业责任险</div>
          </template>
          <div class="btnWrap">
            <div v-if="used" class="btn confirmBtn" @click="showPoup = false">确认</div>
            <div v-else class="btn confirmBtn" @click="saveHandle">确认</div>
            <div class="btn closeBtn" @click="showPoup = false">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import {sendInsuranceEmail,isSendInsuranceEmail} from "@/api/mine"
export default {
  name: "insuredPage",
  mixins: [myMixins],
  data() {
    return {
      showPoup: false,
      used:false,
      saveLoading: true,
    }
  },
  async mounted() {
    let res=await isSendInsuranceEmail()
    this.used=res.data
  },
  methods: {
    async saveHandle() {
      if( this.saveLoading ) {
        try {
          this.saveLoading = false;
          await sendInsuranceEmail();
          this.$toast('操作成功');
          this.showPoup = false
          setTimeout(() => {
            this.goBack()
          }, 1500)
        } finally {
          this.saveLoading = true;
        }
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";

.wrap {
  @include wh(100%, 100%);
  background-color: #F4F5F7;
  overflow-y: auto;
  position: relative;
}

.navBar {
  height: 46px;
}

.contentWrap {
  padding-top: 15px;

  div {
    padding: 0 18px;
    line-height: 22px;

  }
}

.upload_btn_wrap {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  bottom: 10px;
  left: 0;
  padding: 15px 30px;
  display: flex;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  line-height: 40px;
  div {
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    flex: 1;
  }
  .btn_save {
    //background: #354D93;
    margin-right: 4px;
  }
}


.poupCommon {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  position: absolute;
  top: 0;
  left: 0;
  .showPoupContainer {
    width: 290px;
    height: 242px;
    background-color: #FFFFFF;
    border-radius: 12px;
    position: absolute;
    z-index: 11;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .con {
      top: 80px !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 60px;
    }
    .title {
      font-weight: 500;
      font-size: 16px;
      color: #040404;
      line-height: 28px;
    }
    .insure {
      width: 78px;
      height: 78px;
      position: absolute;
      z-index: 11;
      top: -34px;
      left: 50%;
      transform: translateX(-50%);
    }
    .insured {
      width: 100%;
      position: absolute;
      z-index: -1;
    }
    .btnWrap {
      margin-top: 36px;
      text-align: center;
      .btn{
        width: 174px;
        height: 42px;
        line-height: 42px;
        border-radius: 23px;
      }
      .closeBtn {
        font-weight: 400;
        font-size: 14px;
        color: #2C4155;
        opacity: .6;
      }
      .confirmBtn {
        font-weight: 500;
        font-size: 15px;
        background: #F1BA63;
        color: #FFFFFF;
      }
    }
  }
}
</style>