preliminary/src/common/Submit.vue

<template>
  <portal to="notification-outlet">
    <div>
      <div class="modalWrap"></div>
      <div
        v-if="showType=='success'"
        class="submitSuccess"
      >
        <img
          src="../images/complete.png"
          alt=""
        >
        <p class="success">{{msg}}</p>
        <p class="tip">{{tip}}</p>
        <span @click="goStart">完 成</span>
      </div>
      <div
        v-if="showType=='fail'"
        class="submitFail"
      >
        <p>{{fail}}</p>
      </div>
    </div>
  </portal>
</template>
<script>
export default {
  props: {
    showType:{
      default:'',
      type:String
    },
    fail:{
      default:'提交失败请稍后再试',
      type:String
    }
  },
  data() {
    return {
      msg: '提交成功',
      tip: '您的病历信息已提交至医生问诊系统，点击完成按钮结束本次预问诊服务。'
    }
  },
  methods: {
    goStart() {
      // this.$store.commit('initAllData') //已在患者页进行初始化
      let scan = localStorage.getItem('scan');
      let params = JSON.parse(localStorage.getItem('infoParam'));
      let param = JSON.parse(localStorage.getItem('loginParam'));
      let data = JSON.parse(localStorage.getItem('loginData'));
      let tmpArr = localStorage.getItem('recordTime')
      let tmpTime = tmpArr&&Array.isArray(JSON.parse(tmpArr))?JSON.parse(tmpArr):[];
      if(!scan){
        if(data.length>1){
          this.$router.replace({path:'/department'});
        }else{
          this.$router.replace({path:'/home',query:param});
        }
        tmpTime.push(param.time)
        localStorage.setItem('recordTime',JSON.stringify(tmpTime))
      }else{        
        this.$router.replace({path:'/home',query:Object.assign({}, params,{scan:true})});
        tmpTime.push(params.time)
        localStorage.setItem('recordTime',JSON.stringify(tmpTime))
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import "../less/base.less";
.modalWrap {
  .mask;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  height: 100%;
}
.submitSuccess {
  width: 6rem;
  height: 7rem;
  background: #fff;
  z-index: 999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.8rem 0.5rem 0.5rem 0.5rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
  text-align: center;
  img {
    width: 1.28rem;
    height: 1.28rem;
  }
  .success {
    font-size: 0.36rem;
    color: #333333;
    font-weight: bold;
    margin-top: 0.5rem;
    margin-bottom: 0.24rem;
  }
  .tip {
    font-size: 0.24rem;
    color: #666666;
    line-height: 0.44rem;
    margin-bottom: 0.5rem;
  }
  span {
    width: 4.9rem;
    height: 0.88rem;
    line-height: 0.88rem;
    font-size: 0.32rem;
    color: #ffffff;
    font-weight: bold;
    display: inline-block;
    background: -webkit-gradient(
      linear,
      right top,
      left top,
      from(#4f8bff),
      to(#4f4fff)
    );
    background: #colors[btn];
    border-radius: 0.2rem;
  }
}
.submitFail {
  width: 6rem;
  height: 0.88rem;
  font-size:.3rem;
  line-height: 0.88rem;
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border-radius: 0.2rem;
  text-align: center;
  padding: 0 .1rem;
  background-color: #fff;
}
</style>