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端用户每日弹出签到弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue+elementUI实现简单日历功能

    vue+elementUI实现简单日历功能

    这篇文章主要为大家详细介绍了vue+elementUI实现简单日历功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • vue3利用store实现记录滚动位置的示例

    vue3利用store实现记录滚动位置的示例

    这篇文章主要介绍了vue3利用store实现记录滚动位置的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • 3种vue路由传参的基本模式

    3种vue路由传参的基本模式

    这篇文章主要为大家详细介绍了vue路由传参的3种基本模式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • vue中slot插槽的参数汇总及使用方案

    vue中slot插槽的参数汇总及使用方案

    Vue.js中的插槽(slot)是一种机制,允许你在组件的模板中预留一些位置,以便父组件可以将任意内容插入到这些位置,这使得组件更加灵活和可复用,本文主要介绍了vue中slot插槽的参数汇总及使用方案,需要的朋友可以参考下
    2024-03-03
  • Vue3.0实现无限级菜单

    Vue3.0实现无限级菜单

    这篇文章主要为大家详细介绍了基于Vue3.0实现无限级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue3实现对自定义组件自由拖动效果

    vue3实现对自定义组件自由拖动效果

    在数据可视化看板开发中,组件的自由拖拽功能能极大提升交互体验,本文将基于Vue3生态,从零开始解析如何实现一个支持自由拖拽的容器组件,感兴趣的朋友一起看看吧
    2025-04-04
  • vue 获取到数据但却渲染不到页面上的解决方法

    vue 获取到数据但却渲染不到页面上的解决方法

    这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue-router的beforeRouteUpdate不触发问题

    vue-router的beforeRouteUpdate不触发问题

    这篇文章主要介绍了vue-router的beforeRouteUpdate不触发问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中插件和组件的区别点及用法总结

    vue中插件和组件的区别点及用法总结

    在本篇文章里小编给大家分享的是一篇关于vue中插件和组件的区别点及用法总结内容,有兴趣的的朋友们可以学习下。
    2021-12-12
  • 解决vue中使用less/sass及使用中遇到无效的问题

    解决vue中使用less/sass及使用中遇到无效的问题

    这篇文章主要介绍了解决vue中使用less/sass及使用中遇到无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论