少儿舞蹈小程序（9）校区信息展示-EW帮帮网

前言

上一篇我们介绍了校区信息的后台管理功能，后台功能通常是提供给机构校长日常维护信息使用的。校长在后台将基础信息维护好之后，就需要在小程序的首页上进行展示，本篇我们介绍一下前端信息展示的搭建过程。
在这里插入图片描述

1 搭建API

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

找到我们已经创建好的机构信息API，点击编辑进行修改
在这里插入图片描述
在原有的基础上继续增加获取校区信息的代码

/**
 * 获取机构信息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
在这里插入图片描述

2 前端调用API

后端API修改好之后，需要在页面上进行调用。先打开我们的小程序应用
在这里插入图片描述
点击首页代码区的+号，我们来创建API的调用

选择新建外部APIs查询

选择机构管理，触发方式选择入参变化时自动执行

配置好之后点击保存按钮，保存配置

3 搭建布局

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

先在页面组件下添加普通容器，作为我们整体内容的容器
在这里插入图片描述
给容器设置10px的内边距

里边继续添加一个普通容器，作为校区信息的背景

设置白色的背景色

继续添加普通容器，作为我们的标题背景

设置如下样式

: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;
}

里边添加文本组件和按钮组件
在这里插入图片描述
文本组件的文本内容修改为📍 校区信息

样式设置为

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

按钮内容修改为更多，类型修改为链接
在这里插入图片描述
设置样式

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

在标题下继续添加普通容器作为内容区域
在这里插入图片描述
设置样式

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

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

先分析一下具体的布局
在这里插入图片描述
可以看到是一个一行三列的布局，中间的内容区域要占满，这种的我们可以考虑用普通容器来构造，先添加一个普通容器，里边增加三个普通容器，表示我们一行三列布局

在这里插入图片描述
设置外层的普通容器的布局为横向排列，垂直居中

内层的普通容器，第一个里边放置一个文本组件，文本内容改为🏢

样式改为

: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);
}

内层的第二个普通容器里边放置两个文本组件，样式改为
在这里插入图片描述

:root {
  flex: 1;
}

内层第三个普通容器，里边放置两个按钮组件，按钮的内容改为电话和导航
在这里插入图片描述
将按钮改为纯图标展示，配置合适的图标

4 绑定数据

布局搭建好了之后就需要进行数据绑定，我们的校区是有多个的，在我们搭建好的布局的外层添加一个循环展示组件
在这里插入图片描述
点击数据，绑定为我们API的校区属性

然后把搭建好的布局移入循环展示中

第一个文本组件绑定校区的名称

第二个文本组件绑定校区的地址

选中第一个按钮组件，设置点击事件

选择拨打电话

绑定机构的电话
在这里插入图片描述
第二个按钮绑定地图导航

绑定机构的经纬度信息