uniapp+Vue实现App端用户每日弹出签到弹窗功能

 更新时间:2026年05月21日 10:25:52   作者:Crystal328  
用户签到这个功能是很多APP、小程序等都具备的,也是其成长体系中的重要环节,这篇文章主要介绍了uniapp+Vue实现App端用户每日弹出签到弹窗功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

需求:

  • 后端提供接口返回用户签到信息。
  • 应用启动或重新展示时,若用户未签到,需要弹出签到弹窗;已签到则不弹。
  • 签到成功后自动关闭弹窗。

思路:

  1. App.vueonShow 生命周期做全局判断,确保在任意页面激活时都能检查签到状态。
  2. 在签到弹窗页 pages/checkIn/checkIn.vue 中负责: 拉取签到详情、渲染奖励列表、调用签到接口并在成功后自动关闭。

实现步骤:

  1. 封装接口调用方法
 // 获取签到信息
  getSigninInfoApi(data) {
    return http.get("/api/sign_in/info", { params: data || {} });
  },
  // 执行签到
  signInApi(data) {
    return http.post("/api/sign_in/sign", { data: data || {} });
  },
  1. 全局入口检查签到状态 (App.vue)
import { loginApi } from '@/api/login.js';

const checkSigninStatus = async () => {
  // Step 1. 检查 token 是否存在,没有登录用户不触发签到逻辑
  const token = uni.getStorageSync('token');
  if (!token) return;

  try {
    // Step 2. 请求签到状态接口
    const res = await loginApi.getSigninInfoApi({});
    if (res?.code !== 1) return; // 接口异常直接退出

    const hasSignedToday = !!res?.data?.is_signed_today;
    if (hasSignedToday) return; // 已签到则不弹窗

    // Step 3. 打开签到弹窗(防止重复跳转)
    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('检查签到状态失败:', e);
  }
};

// 在 App.vue 的 onShow 生命周期中触发
onShow(() => {
  checkSigninStatus();
});
  1. 签到弹窗逻辑 (pages/checkIn/checkIn.vue)
  • 页面加载时展示签到按钮。
  • 点击“签到”后调用 loginApi.signInApi()
  • 签到成功后弹出提示并自动关闭弹窗。
// pages/checkIn/checkIn.vue
import { loginApi } from '@/api/login.js';

const loading = ref(false);       // 按钮加载状态
const isSignedToday = ref(false); // 是否已签到

// 页面加载时拉取签到状态
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'
      });
      // 延迟关闭弹窗
      setTimeout(() => {
        uni.navigateBack(); // 返回上一个页面(即关闭弹窗)
      }, 800);
    } else {
      uni.showToast({
        title: res?.msg || '签到失败,请稍后再试',
        icon: 'none'
      });
    }
  } catch (err) {
    console.error('签到请求失败:', err);
    uni.showToast({
      title: '网络异常,请稍后再试',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

总结 

到此这篇关于uniapp+Vue实现App端用户每日弹出签到弹窗功能的文章就介绍到这了,更多相关App端用户每日弹出签到弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3+El-Plus实现表格行拖拽功能完整代码

    Vue3+El-Plus实现表格行拖拽功能完整代码

    在vue3+elementPlus网站开发中,详细完成el-table表格的鼠标拖拽/拖曳/拖动排序,下面这篇文章主要给大家介绍了关于Vue3+El-Plus实现表格行拖拽功能的相关资料,需要的朋友可以参考下
    2024-05-05
  • vue-extend和vue-component注册一个全局组件方式

    vue-extend和vue-component注册一个全局组件方式

    这篇文章主要介绍了vue-extend和vue-component注册一个全局组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 基于element-ui的rules中正则表达式

    基于element-ui的rules中正则表达式

    今天小编就为大家分享一篇基于element-ui的rules中正则表达式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中关于trigger的用法

    vue中关于trigger的用法

    这篇文章主要介绍了vue中关于trigger的用法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue + element-plus自定义表单验证(修改密码业务)的示例

    vue + element-plus自定义表单验证(修改密码业务)的示例

    这篇文章主要介绍了vue + element-plus自定义表单验证(修改密码业务),本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2025-04-04
  • vue3页面加载完成后如何获取宽度、高度

    vue3页面加载完成后如何获取宽度、高度

    这篇文章主要介绍了vue3页面加载完成后如何获取宽度、高度问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue非单文件组件使用详解

    Vue非单文件组件使用详解

    Vue单文件组件通常使用.vue文件扩展名,下面这篇文章主要给大家介绍了关于Vue非单文件组件使用的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 手把手教你使用vue-cli脚手架(图文解析)

    手把手教你使用vue-cli脚手架(图文解析)

    本篇文章主要介绍了手把手教你使用vue-cli脚手架(图文解析),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 面试官常问的题之说一下Vue中setup的props和context

    面试官常问的题之说一下Vue中setup的props和context

    setup是一个组件选项,在组件被创建之前,props被解析之后执行,这篇文章主要介绍了Vue中setup的props和context的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2026-04-04
  • Vue Router之router.push和router.resolve页面跳转方式

    Vue Router之router.push和router.resolve页面跳转方式

    这篇文章主要介绍了Vue Router之router.push和router.resolve页面跳转方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04

最新评论