加油站小程序实战教程10开通会员

news2025/4/13 14:12:40

目录

  • 1 修改用户登录逻辑
  • 2 创建变量
  • 3 调用API
  • 总结

我们上一篇搭建了开通会员的界面,有了界面的时候就需要加入一些逻辑来控制界面显示。我们的逻辑是当用户打开我的页面的时候,在页面加载完毕后调用API看用户是否已经开通会员了,如果未开通就显示我们已经搭建好的界面。

1 修改用户登录逻辑

在用户登录教程中,我们已经实现了用户登录的API。但是在会员管理中,我们又增加了一张会员表,并且将会员的信息和用户信息进行了关联,因此需要完善一下登录逻辑,加入是否是会员的判断,输入如下代码

const ErrorCode = {
    SUCCESS: 0,
    PARAM_ERROR: 1001,
    SYSTEM_ERROR: 1003,
    USER_NOT_FOUND: 1005 // (Optional, if using the second return style below)
};

module.exports = async function (params, context) {

    const { openid } = params;

    if (!openid) {
        return { code: ErrorCode.PARAM_ERROR, message: '参数错误: openid 不能为空' };
    }

    try {
        // 1. 查询用户基础信息
        const user = await context.callModel({
            name: "users",
            methodName: "wedaGetItemV2",
            params: {
                filter: { where: { $and: [{ openid: { $eq: openid } }] } },
                select: { $master: true } // Or specify fields including _id
            },
        });

        // 2. **修正后的用户存在检查**
        // 检查 user 是否为 null/undefined 或者是一个空对象 {}
        // 方法一:检查对象是否有 key (推荐)
        const userExists = user && Object.keys(user).length > 0;
        // 方法二:检查是否存在关键字段 (例如 _id), 如果 _id 总是存在的话
        // const userExists = user && user._id;

        if (!userExists) {
            // 用户不存在
            console.log(`用户不存在或返回空对象: openid=${openid}, user=`, user);
            return {
                code: ErrorCode.SUCCESS,
                data: {
                    userExists: false,
                    isMember: false
                }
            };
            // 或者如果你想明确区分错误码:
            // return { code: ErrorCode.USER_NOT_FOUND, message: '用户不存在' };
        }

        // 3. 用户存在,查询会员信息
        const member = await context.callModel({
            name: "members", // *** 修改为你的会员表名 ***
            methodName: "wedaGetItemV2",
            params: {
                filter: { where: { $and: [{ user_id: { $eq: user._id } }] } }, // *** 确认关联字段 ***
                select: { $master: true } // Or specify needed member fields
            }
        });

        // 4. **修正后的会员存在检查**
        // 检查 member 是否为 null/undefined 或者是一个空对象 {}
        // 方法一:检查对象是否有 key (推荐)
        const isMember = member && Object.keys(member).length > 0;
        // 方法二:检查是否存在关键字段 (例如 _id), 如果 _id 总是存在的话
        // const isMember = member && member._id;


        // 5. 构建返回结果
        if (isMember) {
            // 用户存在且是会员
            return {
                code: ErrorCode.SUCCESS,
                data: {
                    userExists: true,
                    isMember: true,
                    userInfo: user,
                    memberInfo: member
                }
            };
        } else {
            // 用户存在但不是会员 (member 为 null/undefined 或 {})
             console.log(`用户存在但非会员或会员信息为空对象: openid=${openid}, member=`, member);
            return {
                code: ErrorCode.SUCCESS,
                data: {
                    userExists: true,
                    isMember: false,
                    userInfo: user,
                    memberInfo: null // 保持返回 null 表示无会员信息
                }
            };
        }

    } catch (error) {
        console.error("查询用户及会员信息时出错:", error);
        return {
            code: ErrorCode.SYSTEM_ERROR,
            message: '系统查询出错,请稍后重试'
        };
    }
};

在这里插入图片描述
在现有的用户管理模块的登录方法,我们增加了是否是会员的判断

2 创建变量

有了API之后,就需要考虑如果接收调用结果的问题,我们在我的页面创建变量用来接收API的返回结果

先创建一个布尔值变量用来存储用户是否存在
在这里插入图片描述
再定义一个变量用来存储会员是否存在
在这里插入图片描述
再添加一个变量用来存储用户信息
在这里插入图片描述
再添加一个变量用来存储会员信息
在这里插入图片描述

3 调用API

变量创建好了之后,我们再创建一个javascript方法,用来调用我们的API,输入如下代码

export default async function ({ event, data }) {
  try {
    const userInfo = await $w.auth.getUserInfo()
    const openid = userInfo.openId


    if (!openid) {
      console.error("OpenID 未获取");
      // 可能需要引导用户登录或授权
      $w.utils.showToast({
        title: "请先登录",
        icon: "error",
        duration: 1000
      });
      return;
    }

    // 调用你修改后的云函数/API
    const res = await $w.cloud.callDataSource({
      dataSourceName: 'userManagement_nqq7c6l',
      methodName: 'login',
      params: {
        openid: openid
      }, // 方法入参
    });


    if (res.code === 0) { // ErrorCode.SUCCESS
      const { userExists, isMember, userInfo, memberInfo } = res.data;

      if (!userExists) {
        // 用户在系统中完全不存在,可能需要特殊处理,比如跳转到登录/注册页
        console.log("用户不存在于系统中");
        // 根据你的业务逻辑决定是否显示“开通会员”视图,或者其他操作
        $w.page.dataset.state.userExists = false
        $w.page.dataset.state.isMember = false
      } else {
        // 用户存在,根据是否是会员来设置视图
        $w.page.dataset.state.userExists = true
        $w.page.dataset.state.userInfo = userInfo

        if (isMember) {
          // 可以在这里做一些会员视图的额外初始化(如果需要)
          console.log("用户是会员,余额:", memberInfo.balance); // 假设有 balance 字段
          $w.page.dataset.state.isMember = true
          $w.page.dataset.state.memberInfo = memberInfo
        } else {
          // 可以在这里做一些非会员视图的额外初始化
          console.log("用户非会员");
          $w.page.dataset.state.isMember = false
        }
      }

    } else {
      // API 返回错误
      console.error("获取用户会员状态失败:",res.code, res.message);
      $w.utils.showToast({
        title: (res.message || "加载失败,请稍后重试"), // 显示错误提示
        icon: 'error',
        duration: 1000
      })
      // 根据情况,可能也需要设置 showMemberView 为 false 或显示一个错误状态
      $w.page.dataset.state.isMember = false

    }
  } catch (err) {
    console.error("调用 API 出错:", err);
    $w.utils.showToast({
      title: "网络或服务异常,请重试",
      icon: "error",
      duration: 1000
    });
    $w.page.dataset.state.isMember = false
  } finally {
    // 可能需要在这里隐藏加载中的提示 (loading)
    // hideLoading();
  }
}

选中页面组件,设置onShow事件,调用我们的自定义方法
在这里插入图片描述
然后给我们会员开通的视图绑定条件展示即可
在这里插入图片描述

总结

本篇我们介绍了控制会员开通视图是否展示的功能。先修改了我们用户登录的逻辑,然后创建变量用来接收API返回结果。接着创建了自定义方法调用我们的API,最后给会员开通视图绑定了条件展示。

总体上像这种有权限判断的功能都是要写前后端逻辑的,这就要求你具备全栈的开发能力,否则是做不出来的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2331505.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

没有他的“变换”,就没有今天的人工智能

从ChatGPT发布以来,大语言模型(LLM)是所有人追逐的方向,无论是将其看作“万能神”或是人工智能应用的基础构件,其重要性毋庸置疑。而随着大语言模型扩展到多模态领域,就需要更多的工具来帮助其进行处理。 例…

MCP 实战:实现server端,并在cline调用

本文动手实现一个简单的MCP服务端的编写,并通过MCP Server 实现成绩查询的调用。 一、配置环境 安装mcp和uv, mcp要求python版本 Python >3.10; pip install mcppip install uv 二、编写并启用服务端 # get_score.py from mcp.server.fastmcp import…

关于C++日志库spdlog

关于C日志库spdlog spdlog是一个高性能、易于使用的C日志库,广泛应用于现代C项目中。它支持多线程、异步日志记录、多种日志格式、以及灵活的输出方式(如控制台、文件、甚至自定义输出)。下面将就常用功能方面介绍spdlog的安装、配置和使用方…

回归预测 | Matlab实现RIME-CNN-GRU-Attention霜冰优化卷积门控循环单元注意力机制多变量回归预测

回归预测 | Matlab实现RIME-CNN-GRU-Attention霜冰优化卷积门控循环单元注意力机制多变量回归预测 目录 回归预测 | Matlab实现RIME-CNN-GRU-Attention霜冰优化卷积门控循环单元注意力机制多变量回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现RIME…

液氮恒温器是做什么的

‌液氮恒温器‌是一种利用液氮作为冷源的恒温装置,主要用于提供低温、恒温或变温环境,广泛应用于科研、工业和医疗等领域。液氮恒温器通过液氮的低温特性来实现降温效果,具有效率高、降温速度快、振动小、成本低等优点。 液氮恒温器应用场景和…

`mpi4py` 是什么; ModuleNotFoundError: No module named ‘mpi4py

mpi4py 是什么 目录 `mpi4py` 是什么ModuleNotFoundError: No module named mpi4pyModuleNotFoundError: No module named mpi4py mpi4py 是一个 Python 模块,它提供了对 MPI(Message Passing Interface)标准的接口,使得 Python 程序能够利用 MPI 进行并行计算。其作用主要…

大数据 - 1. 概述

早期的计算机(上世纪70年代前) 是相互独立的,各自处理各自的数据上世纪70年代后,出现了基于TCP/IP协议的小规模的计算机互联互通。上世纪90年代后,全球互联的互联网出现。当全球互联网逐步建成(2000年左右&…

Java基础下

一、Map Map常用的API //map常用的api//1.添加 put: 如果map里边没有key&#xff0c;则会添加&#xff1b;如果有key&#xff0c;则会覆盖&#xff0c;并且返回被覆盖的值Map<String,String> mnew HashMap<>();m.put("品牌","dj");m.put("…

数据结构和算法(十二)--最小生成树

一、有向图 定义: 有向图是一副具有方向性的图&#xff0c;是由一组顶点和一组有方向的边组成的&#xff0c;每条方向的边都连着一对有序的顶点。 出度: 由某个顶点指出的边的个数称为该顶点的出度。 入度: 指向某个顶点的边的个数称为该顶点的入度。 有向路径: 由一系列顶点组…

TK广告素材优化:提升投放效果的核心策略

在广告投放领域&#xff0c;决定投放效果的三大关键要素是&#xff1a;产品、素材和人群。由于产品相对固定且人群多采用通投策略&#xff0c;因此素材质量成为影响投放效果的决定性因素。 为什么素材如此重要&#xff1f; 素材质量直接影响广告的点击率&#xff0c;进而影响…

8.3.1 MenuStrip(菜单)控件

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的 MenuStrip控件提供了程序窗体的主菜单&#xff0c;即显示于窗体顶端部分的菜单。 MenuStrip常用属性&#xff1a; ImageScalingSize…

STM32单片机入门学习——第29节: [9-5] 串口收发HEX数据包串口收发文本数据包

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难&#xff0c;但我还是想去做&#xff01; 本文写于&#xff1a;2025.04.09 STM32开发板学习——第29节: [9-5] 串口收发HEX数据包&串口收发文本数据包 前…

Skyline配置指南-微信小程序

Skyline 是微信小程序推出的新一代渲染引擎&#xff0c;提供了更强大的渲染能力和更流畅的性能体验。以下是配置 Skyline 的详细步骤&#xff1a; 一、app.json文件配置 "componentFramework": "glass-easel", "lazyCodeLoading": "requi…

Spring MVC 重定向(Redirect)详解

Spring MVC 重定向&#xff08;Redirect&#xff09;详解 1. 核心概念与作用 重定向&#xff08;Redirect&#xff09; 是 Spring MVC 中一种客户端重定向机制&#xff0c;通过 HTTP 302 状态码&#xff08;默认&#xff09;将用户浏览器重定向到指定 URL。 主要用途&#xf…

window上 docker使用ros2开发并usbip共享usb设备

曾经参考 https://blog.csdn.net/laoxue123456/article/details/138339029 来共享windows上的usb 发现没有办法成功总是出现 tcp 错误。telnet测试能够正常连接 很是奇怪&#xff0c;window上换成低版本的usbipd仍然是同样的错误&#xff0c;没有办法的情况下参考了docker官方文…

基于MATLAB/simulink的信号调制仿真--AM调制

实验内容&#xff1a; 假设y(t)(20.5*2cos&#xff08;2*pi*1000*t&#xff09;)*5cos&#xff08;2*pi*2*1e4*t&#xff09;调幅系统&#xff0c;请将一个频率为1000HZ的余弦波信号&#xff0c;通过进行AM调制&#xff0c;载波信号频率为20kHZ的余弦波&#xff0c;调制度ma0.…

Vue3+Ts封装ToolTip组件(2.0版本)

本组件支持hover和click两种触发方式&#xff0c;需要更多的触发方式&#xff0c;可自行去扩展&#xff01;&#xff01;&#xff01; 1.传递三个参数&#xff1a; content&#xff1a;要展示的文本 position&#xff1a;文本出现的位置&#xff08;"top" | "t…

Latex语法入门之数学公式

Latex是一种高质量的排版系统&#xff0c;尤其擅长于数学公式的排版。本文我将带大家深入了解Latex在数学公式排版中的应用。从基础的数学符号到复杂的公式布局&#xff0c;我们都会一一讲解&#xff0c;通过本文的学习&#xff0c;你将能够轻松编写出清晰、美观的数学公式&…

shell脚本 - Linux定时温度监控-软硬件检测 - 服务器温度监控 - 写入日志

效果图 脚本 vi auto.sh (chmod x ./auto.sh) #!/bin/bash # 按照日期创建一个文件或目录 https://blog.csdn.net/shoajun_5243/article/details/83539069 datetimedate %Y%m%d-%H%M%S |cut -b1-20 dirpath/systemMonitor/$datetime file1$dirpath/sensors.log file2$dirpa…

Linux驱动开发进阶(六)- 多线程与并发

文章目录 1、前言2、进程与线程3、内核线程4、底半步机制4.1、软中断4.2、tasklet4.3、工作队列4.3.1、普通工作项4.3.2、延时工作项4.3.3、工作队列 5、中断线程化6、进程6.1、内核进程6.2、用户空间进程 7、锁机制7.1、原子操作7.2、自旋锁7.3、信号量7.4、互斥锁7.5、comple…