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

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

1 修改用户登录逻辑

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

bash 复制代码

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，输入如下代码

bash 复制代码

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，最后给会员开通视图绑定了条件展示。

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

目录

1 修改用户登录逻辑

2 创建变量

3 调用API

总结