Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

background

Yesterday, the project team temporarily inserted a small demand for an activity advertising, I felt very interesting, so I shared it.

1. Specific function points

• The activity popup only popped up once that day
• Dynamic configuration of text and text (the emergency version is installed temporarily, so the interface is not connected temporarily)

2. Implementation idea

• LocalStorage Stores the card number information of the user
• Gets the current year, month and date
• The stored card number information is used to determine whether the card number is clear or not based on the current year, month and day

3. Code implementation

• Child components

<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>
Copy the code

<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 is similar to vue2's this
    const { proxy: ctx } = getCurrentInstance();
    const { $router: router, $store: store } = ctx;
  
    const methods = {
      // Popup display
      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>
Copy the code

• The parent component

<template>
  <section>
     <! -- Popover component -->
     <ad-change-card-dialog ref="adChangeCardDialog" v-if="isTipsGetCardPopup"></ad-change-card-dialog>
   </section>
</template>
Copy the code

import {
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs
} from "vue";
setup() {
    const state = reactive({
       cardInfo: {}, 
       isTipsGetCardPopup:false});// CTX is similar to vue2's this
    const { proxy: ctx } = getCurrentInstance();
    const { $router: router, $store: store } = ctx;
  
    const methods = {
         // Determine the AD popup based on the interface status
         ctx.changeCardPopup() 
    };
    onMounted(() = >{
      state.cardInfo = store.state.user.userInfo;
    })
    return{... toRefs(state), ... methods }; }changeCardPopup(){
    let date = new Date(a)let today =	'Current date :' + 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 } ); }}Copy the code

The final result