引言
在《加油站实战小程序教程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 } = paramsconst 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 搭建页面布局
在我们的首页，当点击活动卡片的时候我们希望弹出弹窗来显示具体的内容，原型如下
先添加弹窗组件
弹窗内容添加普通容器，里边添加三个普通容器
第一个普通容器，添加图标和文本组件
设置普通容器的布局为横向排列
第二个普通容器添加一个文本组件
第三个普通容器也添加一个文本组件，设置普通容器的背景色、圆角、边距
3 创建变量
在代码区添加一个变量，变量类型选择对象，用来接收API调用的结果
变量定义好之后，我们需要创建一个javascript方法给变量进行赋值
export default async function({event, data}) {const id = data.targetconst result = await $w.cloud.callDataSource({dataSourceName: 'activityManagement_vn1p1gd',methodName: 'getAcitivtyDetail',params: {id:id}, // 方法入参});$w.page.dataset.state.activity = result$w.modal1.open({})}
在我们的活动卡片点击的时候，调用我们的方法，传入数据标识
然后给弹窗组件的具体文本绑定我们的参数
最终效果
如果是普通活动我们就显示活动的起止时间
如果是周期性活动我们会显示固定的时间点