learning-system-portal/src/components/AlertPopup.vue

<template>
  <!--弹出窗口设置-->
  <div>
    <div v-for="pop in popupList" :key="pop.id">
      <el-dialog :close-on-press-escape="false" :close-on-click-modal="false"  class="medalbox"  :visible.sync="pop.show"  :append-to-body="true" >
        <div style="text-align: center;position: relative;">
          <!-- <span style="float: right;" @click="pop.show = false"><i style="font-size: 28px;color: #000000;" class="el-icon-close"></i></span> -->
          <el-image :src="baseUrl+pop.bgImage"></el-image>
          <div style="margin-top: 30px;">
            <span v-if="pop.closeable" class="dlg-close" @click="pop.show = false"><i style="font-size: 28px;color: #999;" class="el-icon-close"></i></span>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import apiPopup from '@/api/modules/popup.js';
  export default{
    props:{
      page: {
        type:String,
        default:''
      }
    },
    data() {
      return {
        showGonggao:true,
        baseUrl:process.env.VUE_APP_FILE_BASE_URL,
        popupList:[],//需要弹出的窗口
        sessionKey:'alertpopup',
        localTimesKey:'popuptimes'
      };
    },
    mounted() {
      //获取用户需要弱出的窗口信息，放在状态中
      let has =  sessionStorage.getItem(this.sessionKey);
      //has=false;
      if(!has){
        apiPopup.findByNoDevice(2).then(rs=>{
          if(rs.status==200){
              rs.result.forEach(item=>{
                item.show=true;
              })
              this.popupList=rs.result;
              if(rs.result.length>0){
                sessionStorage.setItem(this.sessionKey,"1");
                this.countPopup();
              }else{
                sessionStorage.removeItem(this.sessionKey);
              }

          }
        });
      }else{
          //this.popupList=JSON.parse(has);
          //this.countPopup();
      }


       // let loadNum =  localStorage.getItem(this.sessionKey);
       // let hasFlag = sessionStorage.getItem(this.sessionKey);
       // let $this=this;
       // if(!hasFlag){
       //   let times=0;
       //   if(loadNum){
       //     times=Number(loadNum);
       //   }
       //   if(times<3){
       //     let now=new Date();
       //     let min=new Date(2022,10,9,0,0,0);
       //     let max=new Date(2022,11,1,0,0,0);
       //     //console.log(now,min,max);
       //     //console.log(now.getTime(),min.getTime(),max.getTime());
       //     if(now.getTime()>min.getTime() && now.getTime()<max.getTime()){
       //        //console.log('open')
       //        this.showGonggao=true;
       //        times++;
       //        localStorage.setItem(this.sessionKey,times);
       //        sessionStorage.setItem(this.sessionKey,1);
       //     }
       //   }

       // }
    },
    methods:{
        countPopup(){
          //let  newLogin = localStorage.getItem(this.$xpage.constants.newLoginKey);
          this.popupList.forEach(item=>{
            //次数检查
            if(item.times>0){
              var localKey=this.localTimesKey+item.id;
              var curLocal=localStorage.getItem(localKey);
              if(curLocal){
                 let times=parseInt(curLocal);
                 if(item.times< times){
                    item.show=false;
                 }else{
                   localStorage.setItem(localKey,curLocal+1);
                 }
              }else{
                 localStorage.setItem(localKey,1);
              }

            }
          })
        }
    }
  }
</script>

<style scoped lang="scss">

  .dlg-box{
    text-align: center;
    margin: 0 auto;
    //background: transparent !important;
    padding:120px 60px 20px 50px;
  }
  .dlg-title{
    color: #333333;
    font-size: 26px;
    padding: 30px 0px;
    text-align: center;
    font-weight: 600;
  }
  .dlg-content{
    color: #333333;font-size: 18px;height: 150px;
  }
  .dlg-button{
      border-radius: 22px;
      display: inline-block;
      font-size: 18px;
      padding: 10px;
      width: 300px;
      height: 46px;
      text-align: center;
      color: #fff;

  }
  .dlg-close{
    //float: right;
    //margin-top: -90px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    padding: 20px 10px 10px 10px;
    cursor: pointer;
  }
  .medalbox {

    ::v-deep .el-dialog{
      background: transparent !important;
      box-shadow:none !important;
      .el-dialog__header{
         display: none !important;
      }
      .el-dialog__body{
        //  width: 320px !important;
        //  height: 420px !important;
        background: transparent !important;
      }
    }
  }
</style>