引言

在《加油站实战小程序教程05活动管理中》，我们实现了后台及前端展示功能。在小程序中，当用户点击具体活动时，应该以弹窗的形式给出信息的展示，本篇我们介绍活动详情功能的开发过程。

1 创建API

因为活动管理做了表拆分，多表数据我们需要使用后端API的能力重新组装数据。打开控制台，展开扩展及插件，选中APIs连接器，点击创建

选择自定义代码

输入名称和标识

输入方法的名称和标识

方法调用的时候需要传入活动标识，点击入参设置，添加id

输入如下的代码

const ErrorCode = {    SUCCESS: 0,    PARAM_ERROR: 1001,    NOT_FOUND: 1002,    SYSTEM_ERROR: 1003};module.exports = async function (params, context) {    const { id } = params    const result = await context.callModel({        name: "promotions",        methodName: "wedaGetItemV2",        params: {            // 筛选内容，筛选内容推荐使用编辑器数据筛选器生成            filter: {                where: {                    $and: [                        {                            _id: {                                $eq: id, // 获取单条时，推荐传入_id数据标识进行操作                            },                        },                    ],                },            },            select: {                promotion_name: true,                promotion_type: true,                start_time: true,                end_time: true,                description: true,                cycle_type: true,                cycle_day: true,                hdgz: true            },        },    });    // 格式化返回数据    const formatData = {        name: result.promotion_name,        time: '',        rules: '',        description: ''    };    // 处理时间显示    if (result.cycle_type && result.cycle_type !== 'NONE') {        // 周期性活动        let cycleDesc = '';        switch (result.cycle_type) {            case '1':                cycleDesc = '每天';                break;            case '2':                cycleDesc = `每周${result.cycle_day || ''}`;                break;            case '3':                cycleDesc = `每月${result.cycle_day || ''}日`;                break;            case '4':                cycleDesc = `每年${result.cycle_day || ''}日`;                break;        }        formatData.time = cycleDesc;    } else {       // 普通活动        const formatDate = (date) => {            const d = new Date(date);            const year = d.getFullYear();            const month = d.getMonth() + 1;            const day = d.getDate();            return `${year}年${month}月${day}日`;        };        const startDate = formatDate(result.start_time);        const endDate = formatDate(result.end_time);        formatData.time = `${startDate} - ${endDate}`;    }    // 处理活动规则和描述    if (result.hdgz && result.hdgz.length > 0) {        const rule = result.hdgz[0];        let ruleText = '';        // 根据规则类型生成规则文本        switch (rule.rule_type) {            case '1': // 金额                ruleText = `满${rule.condition_value}元减${rule.discount_value}元`;                break;            case '2': // 数量                ruleText = `满${rule.condition_value}件减${rule.discount_value}元`;                break;            case '3': // 会员等级                ruleText = `会员专享${rule.discount_value * 100}折`;                if (rule.max_discount) {                    ruleText += `，最高优惠${rule.max_discount}元`;                }                break;        }        formatData.rules = ruleText;        formatData.description = rule.description || result.description || '';    } else {        formatData.rules = '';        formatData.description = result.description || '';    }    return formatData;};

代码输入后点击方法测试，添加入参，看到执行的结果，点击出参自动映射

2 搭建页面布局

在我们的首页，当点击活动卡片的时候我们希望弹出弹窗来显示具体的内容，原型如下

先添加弹窗组件

加油站实战小程序教程06活动详情

弹窗内容添加普通容器，里边添加三个普通容器

第一个普通容器，添加图标和文本组件

设置普通容器的布局为横向排列

第二个普通容器添加一个文本组件

第三个普通容器也添加一个文本组件，设置普通容器的背景色、圆角、边距

3 创建变量

在代码区添加一个变量，变量类型选择对象，用来接收API调用的结果

变量定义好之后，我们需要创建一个javascript方法给变量进行赋值

export default async function({event, data}) {   const id = data.target   const result = await $w.cloud.callDataSource({        dataSourceName: 'activityManagement_vn1p1gd',        methodName: 'getAcitivtyDetail',        params: {          id:id        }, // 方法入参    });    $w.page.dataset.state.activity = result    $w.modal1.open({})}

在我们的活动卡片点击的时候，调用我们的方法，传入数据标识

然后给弹窗组件的具体文本绑定我们的参数

最终效果

如果是普通活动我们就显示活动的起止时间

如果是周期性活动我们会显示固定的时间点