目录

少儿舞蹈小程序9校区信息展示

少儿舞蹈小程序(9)校区信息展示

https://i-operation.csdnimg.cn/images/cf31225e169b4512917b2e77694eb0a2.png低代码搭建校区信息展示功能

前言

上一篇我们介绍了校区信息的后台管理功能,后台功能通常是提供给机构校长日常维护信息使用的。校长在后台将基础信息维护好之后,就需要在小程序的首页上进行展示,本篇我们介绍一下前端信息展示的搭建过程。
https://i-blog.csdnimg.cn/direct/285c563cb26148e0a0802a30845e75d8.png

1 搭建API

要想在前端展示校区信息,需要先从数据库中取出数据。在低代码中,我们是通过API来完成数据的获取。在前边章节中,我们已经将机构信息取出。校区信息和机构是有关联的,我们在现有API的基础上增加校区信息的获取。

找到我们已经创建好的机构信息API,点击编辑进行修改
https://i-blog.csdnimg.cn/direct/4faa121e925c4cf393906e5b693b3877.png

/**
 * 获取机构信息API - 完全基于官方文档语法
 * 严格按照微搭官方文档的语法编写
 * 参考:https://docs.cloudbase.net/lowcode/api/model_crud
 */

module.exports = async function (params, context) {
  try {
    // 第一步:获取机构表的数据 - 使用官方确认的语法
    const institutionResult = await context.callModel({
      dataSourceName: 'institutions',
      methodName: 'wedaGetRecordsV2',
      params: {
        select: { $master: true }
      }
    });

    // 检查查询结果
    if (!institutionResult.records || institutionResult.records.length === 0) {
      return {
        code: 404,
        message: '未找到机构信息',
        data: null,
        timestamp: Date.now()
      };
    }

    // 取第一条记录
    const institution = institutionResult.records[0];
    const institutionId = institution._id;

    // 第二步:根据机构ID获取机构优势信息
    const advantagesResult = await context.callModel({
      dataSourceName: 'dance_advantages',
      methodName: 'wedaGetRecordsV2',
      params: {
        filter: {
          where: {
            institution_id: { $eq: institutionId }
          }
        },
        select: { $master: true }
      }
    });

    const campuses = await context.callModel({
      dataSourceName: 'dance_campuses',
      methodName: 'wedaGetRecordsV2',
      params: {
        filter: {
          where: {
            institution_id: { $eq: institutionId }
          }
        },
        select: { $master: true }
      }
    })

    // 对优势信息进行排序(在代码中处理,避免使用不确定的orderBy语法)
    const sortedAdvantages = advantagesResult.records.sort((a, b) => {
      return (a.sort_order || 0) - (b.sort_order || 0);
    });

    // 构建返回的数据结构
    const responseData = {
      institution: {
        id: institution._id,
        name: institution.name,
        logo: institution.logo,
        description: institution.description,
        contactPhone: institution.contact_phone,
        email:institution.email,
        businessHours: institution.business_hours,
        status: institution.status,
        createdTime: institution.created_time,
        updatedTime: institution.updated_time
      },
      advantages: sortedAdvantages.map(advantage => ({
        id: advantage._id,
        title: advantage.title,
        description: advantage.description,
        sortOrder: advantage.sort_order,
        createdTime: advantage.created_time,
        updatedTime: advantage.updated_time
      })),
      campuses:campuses.records
    };

    return {
      code: 200,
      message: '获取机构信息成功',
      data: responseData,
      timestamp: Date.now()
    };

  } catch (error) {
    console.error('获取机构信息错误:', error);
    return {
      code: 500,
      message: '服务器内部错误',
      data: null,
      timestamp: Date.now()
    };
  }
};

代码修改好了之后,点击出参自动映射更新API
https://i-blog.csdnimg.cn/direct/dd5dae443b05494a984dac11d6910404.png

2 前端调用API

后端API修改好之后,需要在页面上进行调用。先打开我们的小程序应用
https://i-blog.csdnimg.cn/direct/cca95a79f12946ddad5269f862f6ba98.png

3 搭建布局

API配置好之后,我们的数据已经通过API获取到了,现在需要先搭建页面的布局。

先在页面组件下添加普通容器,作为我们整体内容的容器
https://i-blog.csdnimg.cn/direct/d7eba61278414ebb8b58a782f48c9877.png
给容器设置10px的内边距
https://i-blog.csdnimg.cn/direct/84b992520a414d748338bab8b1a7c722.png
里边继续添加一个普通容器,作为校区信息的背景
https://i-blog.csdnimg.cn/direct/df284f0b3032463c97558b12fd177334.png
设置白色的背景色
https://i-blog.csdnimg.cn/direct/13c24d4a213a4ea7bb589196d960ce7a.png
继续添加普通容器,作为我们的标题背景
https://i-blog.csdnimg.cn/direct/fde0d3c337b44a5da2b2c41525538eb6.png
设置如下样式

:root {
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

里边添加文本组件和按钮组件
https://i-blog.csdnimg.cn/direct/f782738dab64423f98b0ec0632f47764.png
文本组件的文本内容修改为📍 校区信息
https://i-blog.csdnimg.cn/direct/a823f6aa3a1b49a68c9f9674b7fad055.png
样式设置为

:root {
  font-size: var(--font-size-lg);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

按钮内容修改为更多,类型修改为链接
https://i-blog.csdnimg.cn/direct/e665bc2f988f495b868528a29900b8f5.png
设置样式

:root {
  color: white;
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

在标题下继续添加普通容器作为内容区域
https://i-blog.csdnimg.cn/direct/bf7431b5caf94ea6b822fb7bf0e44e34.png
设置样式

:root {
  padding: var(--spacing-sm);
}

因为校区是有多个的,所以我们需要循环展示每个校区的信息,我们先把一个校区的布局搭建好。

先分析一下具体的布局
https://i-blog.csdnimg.cn/direct/99bf88f71e5b42d78c8d551df904f2fe.png
可以看到是一个一行三列的布局,中间的内容区域要占满,这种的我们可以考虑用普通容器来构造,先添加一个普通容器,里边增加三个普通容器,表示我们一行三列布局

https://i-blog.csdnimg.cn/direct/5c907914e0f744d18a8a7dda54da51d8.png
设置外层的普通容器的布局为横向排列,垂直居中
https://i-blog.csdnimg.cn/direct/571e0e195ad243df9832c0d3d8136880.png
内层的普通容器,第一个里边放置一个文本组件,文本内容改为🏢
https://i-blog.csdnimg.cn/direct/007b2f0bce06479abb5d10756ef4a88e.png
样式改为

:root {
  width: 50px;
  height: 50px;
  background: var(--primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--primary-color);
}

内层的第二个普通容器里边放置两个文本组件,样式改为
https://i-blog.csdnimg.cn/direct/c41e9fa38f8548a8b2a2e61fc3b48fae.png

:root {
  flex: 1;
}

内层第三个普通容器,里边放置两个按钮组件,按钮的内容改为电话和导航
https://i-blog.csdnimg.cn/direct/aea92397a04a44c195855d453916e218.png
将按钮改为纯图标展示,配置合适的图标
https://i-blog.csdnimg.cn/direct/ee6c050aaa594cc695db64f550683919.png

4 绑定数据

布局搭建好了之后就需要进行数据绑定,我们的校区是有多个的,在我们搭建好的布局的外层添加一个循环展示组件
https://i-blog.csdnimg.cn/direct/43be759f5c5d46728690aa9dd47bca62.png
点击数据,绑定为我们API的校区属性
https://i-blog.csdnimg.cn/direct/a266c6706825474d82abddd99a97ff45.png
然后把搭建好的布局移入循环展示中
https://i-blog.csdnimg.cn/direct/cc572366b41146a6b6b8bce03d3ed0d7.png
第一个文本组件绑定校区的名称
https://i-blog.csdnimg.cn/direct/2ab1b29e721747f8b19eb7d3fd8d2b1e.png
第二个文本组件绑定校区的地址
https://i-blog.csdnimg.cn/direct/62a3abe8c4734e5f8013f1a3e88f4c2a.png
选中第一个按钮组件,设置点击事件
https://i-blog.csdnimg.cn/direct/f4c5491f21dc444c999d85ed2dc7e02e.png
选择拨打电话
https://i-blog.csdnimg.cn/direct/438314c9b8c546118310913d5f6a4102.png
绑定机构的电话
https://i-blog.csdnimg.cn/direct/0ce78345fe2543439c9fc9f1ad944b47.png
第二个按钮绑定地图导航
https://i-blog.csdnimg.cn/direct/02443921a9f7496e9328ea84251b8ec6.png
绑定机构的经纬度信息
https://i-blog.csdnimg.cn/direct/e95028cfe1134e7c8395200af637eb41.png
https://i-blog.csdnimg.cn/direct/7804c37a131749e4ab9d665bbf8209b3.png

大功告成

一切配置好之后,点击实时预览就可以看到搭建后的效果
https://i-blog.csdnimg.cn/direct/7504088ee6bb4658be882601b42a1929.png
https://i-blog.csdnimg.cn/direct/b18f3380a9c147539634ac1c2f392191.png

总结

本篇我们带着大家一步步搭建了机构信息展示的功能,低代码搭建总体就是这么几步,先构造API,然后搭建布局,最后绑定数据。下一篇搭建一下首页的作品与活动内容,敬请期待。