需求:
首次进入首页出现弹窗,设置多久后再次显示时间(比如 24 小时) 则·在这个时间段内不会再显示弹窗,24小时之后,再次进入,则弹出弹窗

显示:
在这里插入图片描述
代码:

弹窗样式组件
<home-Pop-Up
      :ad="PopUpAd"  传值弹窗内数据
      :showFullAd="show['popUp']"  设置true 或者 false
      @close="close" 传值点击关闭事件
></home-Pop-Up>
data() {
    return {
    show: {
        popUp: false,  //设置初始值不显示
      },
    }
 },

methods: {
  close(name) {
    console.log("case", name);
    if (name === "popUp") {
        this.checkHomePopup();
    }
  },


checkHomePopup() {
      // console.log("再次进去,case");
    uni.getStorage({
        key: "popUp-show-time",
    success: (res) => {
          // console.log("case 第二次进入,checkHomePopup有");
          // 24小时超时
     if (
            !res.data ||
            new Date().getTime() - res.data > 1000 * 60 * 60 * 24
      ) {
            uni.setStorage({
              key: "popUp-show-time",
              data: new Date().getTime(),
      });
            // console.log("case 二次进入,超时,checkHomePopup");
            this.show.popUp = true;
      } else {
            console.log("case er   else");
      }
    },
    fail: (err) => {
          // console.log("case 创建。fail");
         uni.setStorage({ 
            key: "popUp-show-time",
            data: new Date().getTime(),
          });
      },
   });
},

openPopAd() {
  this.show.popUp = true;
     uni.setStorage({
        key: "popUp-show-time",
        data: new Date().getTime(),
  });
     // console.log("case 本地无,或超时重新创建");
},


getPopUp() {
   uni.getStorage({
      key: "popUp-show-time",
      success: (res) => {
          // 24小时超时
       if (
            !res.data ||
            new Date().getTime() - res.data > 1000 * 60 * 60 * 24
       ) {
            // console.log("刚进入,本地有,且超时", "case");
            this.show.popUp = true;
            this.openPopAd();
       } else {
            // console.log("刚进入,时间没到", "case");
            this.checkHomePopup();
          }
       },
       fail: (err) => {
          // console.log("刚进入,本地无", "case");
          this.openPopAd();
       },
  });
},
},
mounted() {
   this.getPopUp();
},

弹窗组件内部的设置

<ta-modal :value="showPopUp" :type="'custom'">
  <slot>
     <div>弹窗样式</div>
     <button class="close" @tap.stop="closePopUp">关闭弹窗</button>
   </slot>
</ta-modal>
  props: {
    ad: {
      type: Object,
      default() {
        return {};
      },
    },
    showFullAd: {
      type: Boolean,
      default: false,
    }
  },
  
data() {
    return {
      showPopUp: false,
    };
},

 methods: {
    closePopUp() {
      this.showPopUp = false;
      this.$emit("close","popUp");
      //弹窗组件内部 接收 close
    },
  },

  watch: {
    showFullAd() {
      this.showPopUp = this.showFullAd;
    },
  },
Logo

前往低代码交流专区

更多推荐