小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

背景

昨天项目组临时插入了一个小需求，需要上一个活动宣传广告，觉着挺有意思的，遂分享一番。

1.具体功能点

• 当天仅弹出活动弹窗一次
• 图文动态配置(临时上了紧急版本、故接口方面暂无接入)

2.实现思路

• localStorage存储用户对应的卡号信息
• 获取当前年月日
• 存储的卡号信息结合当前年月日判断显隐

3.代码实现

• 子组件

<template>
  <van-popup
    v-model:show="show"
    round
    closeable
    teleport="body"
    class="modifyPopup"
  >
    <div class="adDialog">
      <img
        class="img"
        @click="toChangeCard"
        :src="require('_ASSETS_/image/personal/changeCardAd.png')"
        alt=""
      />
    </div>
  </van-popup>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs
} from "vue";
import { advertLog } from "_API_/api.services";
export default defineComponent({
  name: "adChangeCardDialog",
  setup() {
    const state = reactive({
      show: false,
      info:{}
    });
    // 这里的ctx 类似于vue2的this
    const { proxy: ctx } = getCurrentInstance();
    const { $router: router, $store: store } = ctx;
  
    const methods = {
      // 弹窗展示
      init() {
        state.show = true;
      },
      toChangeCard() {
        advertLog({
          param: state.info.iccid,
          type:15,
          browserType: state.info.device
        })
        router.push({
          name: "personal-changecard"
        });
      }
    };
    onMounted(()=>{
      state.info = store.state.user.userInfo;
    })
    return { ...toRefs(state), ...methods };
  }
});
</script>
<style lang="scss">
.modifyPopup{
    background-color:transparent !important;
}
</style>

• 父组件

<template>
  <section>
     <!-- 弹窗组件 -->
     <ad-change-card-dialog ref="adChangeCardDialog" v-if="isTipsGetCardPopup"></ad-change-card-dialog>
   </section>
</template>

import {
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs
} from "vue";
setup() {
    const state = reactive({
       cardInfo: {}, 
       isTipsGetCardPopup:false, 
    });
    // 这里的ctx 类似于vue2的this
    const { proxy: ctx } = getCurrentInstance();
    const { $router: router, $store: store } = ctx;
  
    const methods = {
         //这里根据接口状态来判断广告弹窗
         ctx.changeCardPopup() 
    };
    onMounted(()=>{
      state.cardInfo = store.state.user.userInfo;
    })
    return { ...toRefs(state), ...methods };
  }
changeCardPopup(){
    let date = new Date()
    let today =	'当前日期:' + date.getFullYear().toString() + '/' + (date.getMonth()+1).toString() + '/' + date.getDate().toString()
    let currentDay =  localStorage.getItem({ name: `${state.cardInfo.iccid} - changeCardDialog` })
    if(!currentDay ||  currentDay != today){
        localStorage.removeItem({ name: `${state.cardInfo.iccid} - changeCardDialog` });
        state.isTipsGetCardPopup = true
        ctx.$nextTick(()=>{
            ctx.$refs['adChangeCardDialog'].init()
        })
        localStorage.setItem(
         {
           name: `${state.cardInfo.iccid} - changeCardDialog`,
           content: today
         }
        );
     }
}

最终效果