快捷導(dǎo)航

uniapp+Vue實現(xiàn)App端用戶每日彈出簽到彈窗功能

更新時間：2026年05月21日 10:25:52 作者：Crystal328

用戶簽到這個功能是很多APP、小程序等都具備的,也是其成長體系中的重要環(huán)節(jié),這篇文章主要介紹了uniapp+Vue實現(xiàn)App端用戶每日彈出簽到彈窗功能的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

需求：

后端提供接口返回用戶簽到信息。
應(yīng)用啟動或重新展示時，若用戶未簽到，需要彈出簽到彈窗；已簽到則不彈。
簽到成功后自動關(guān)閉彈窗。

思路：

用 App.vue 的 onShow 生命周期做全局判斷，確保在任意頁面激活時都能檢查簽到狀態(tài)。
在簽到彈窗頁 pages/checkIn/checkIn.vue 中負責(zé)：拉取簽到詳情、渲染獎勵列表、調(diào)用簽到接口并在成功后自動關(guān)閉。

實現(xiàn)步驟：

封裝接口調(diào)用方法

 // 獲取簽到信息
  getSigninInfoApi(data) {
    return http.get("/api/sign_in/info", { params: data || {} });
  },
  // 執(zhí)行簽到
  signInApi(data) {
    return http.post("/api/sign_in/sign", { data: data || {} });
  },

全局入口檢查簽到狀態(tài) (App.vue)

import { loginApi } from '@/api/login.js';

const checkSigninStatus = async () => {
  // Step 1. 檢查 token 是否存在，沒有登錄用戶不觸發(fā)簽到邏輯
  const token = uni.getStorageSync('token');
  if (!token) return;

  try {
    // Step 2. 請求簽到狀態(tài)接口
    const res = await loginApi.getSigninInfoApi({});
    if (res?.code !== 1) return; // 接口異常直接退出

    const hasSignedToday = !!res?.data?.is_signed_today;
    if (hasSignedToday) return; // 已簽到則不彈窗

    // Step 3. 打開簽到彈窗（防止重復(fù)跳轉(zhuǎn)）
    const openPopup = () => {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      if (!currentPage || currentPage.route === 'pages/checkIn/checkIn') return;

      // 輕微延遲防止路由沖突
      uni.navigateTo({
        url: '/pages/checkIn/checkIn'
      });
    };

    setTimeout(openPopup, 300);
  } catch (e) {
    console.error('檢查簽到狀態(tài)失敗:', e);
  }
};

// 在 App.vue 的 onShow 生命周期中觸發(fā)
onShow(() => {
  checkSigninStatus();
});

簽到彈窗邏輯 (pages/checkIn/checkIn.vue)

頁面加載時展示簽到按鈕。
點擊“簽到”后調(diào)用 loginApi.signInApi()。
簽到成功后彈出提示并自動關(guān)閉彈窗。

// pages/checkIn/checkIn.vue
import { loginApi } from '@/api/login.js';

const loading = ref(false);       // 按鈕加載狀態(tài)
const isSignedToday = ref(false); // 是否已簽到

// 頁面加載時拉取簽到狀態(tài)
onShow(async () => {
  const res = await loginApi.getSigninInfoApi({});
  if (res?.code === 1) {
    isSignedToday.value = !!res.data.is_signed_today;
  }
});

// 點擊“立即簽到”按鈕
const handleSignIn = async () => {
  if (loading.value) return;
  loading.value = true;

  try {
    const res = await loginApi.signInApi({});
    if (res?.code === 1) {
      uni.showToast({
        title: '簽到成功',
        icon: 'success'
      });
      // 延遲關(guān)閉彈窗
      setTimeout(() => {
        uni.navigateBack(); // 返回上一個頁面（即關(guān)閉彈窗）
      }, 800);
    } else {
      uni.showToast({
        title: res?.msg || '簽到失敗，請稍后再試',
        icon: 'none'
      });
    }
  } catch (err) {
    console.error('簽到請求失敗:', err);
    uni.showToast({
      title: '網(wǎng)絡(luò)異常，請稍后再試',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};