医美小程序实战教程-店铺信息渲染

Posted 2021-12-03 低代码布道师

我们上一节介绍了如何通过低代码实现从数据库中获取店铺的信息。本节我们介绍一下将提取到的信息赋值给变量。

渲染函数

经常看我博客的可能发现每次界面的样子都不一样，因为创作是每周都在进行，微搭的发展速度也是非常快的，官方也在不断的优化各项功能，所以就需要不断的适应官方的节奏。

本周版本已经有了一次大的迭代，界面发生了翻天覆地的变化。首先需要在控制台找到应用，然后鼠标移动到医美-管理平台，点击编辑应用

在更多里找到低代码编辑

在低代码编辑器中找到上一节中创建的funcs模块，在里边增加renderShop方法

/*
* 可通过 $page.handler.xxx 访问这里定义的方法
* 注意：该方法仅在所属的页面有效
* 如果需要 async-await，请修改成 export default async function() {}
*/
async function getShop(){
    const ret = await app.dataSources.shop_8cp2v9w.wedaGetList();
    ret.data = ret.data[0]
    return ret;
}

async function renderShop(data) {
    const { formContent } = $page.dataset.state;
    let ret;
    for(let prop in data) {
        if(formContent[prop]) {
            switch(prop) {
                case 'telphones':
                    formContent[prop].value = prop == 'telphones' ? data[prop][0] : data[prop];
                break;
                case 'location':
                    formContent.location.region = [data[prop].province, data[prop].city, data[prop].district];
                    formContent.location.address = data[prop].address;
                break;
                case 'workTime':
                    ret = getWorkTime(data[prop]);
                    formContent.workTime.startTime = ret.startTime;
                    formContent.workTime.endTime = ret.endTime;
                    formContent.workTime.startWeek = ret.startWeek;
                    formContent.workTime.endWeek = ret.endWeek;
                break;
                default:
                    formContent[prop].value = data[prop];      
                break;
            }
        }   
    }
    $page.dataset.state.formContent = { ...formContent };
}

/**
 * 返回数据转为组件需要的数据
 */
export function getWorkTime(data) {
    console.log('data is  ', data);
    let weekNum = [];
    let weekMap = {
        1: '周一',
        2: '周二',
        3: '周三',
        4: '周四',
        5: '周五',
        6: '周六',
        7: '周日',
    };
    let weekTextMap = {
        '周一': 'week1',
        '周二': 'week2',
        '周三': 'week3',
        '周四': 'week4',
        '周五': 'week5',
        '周六': 'week6',
        '周日': 'week7',
    };
    let startWeek,
        endWeek,
        startHour,
        startMin,
        endHour,
        endMin;

    for(let prop in data) {
        startHour = data[prop].start / 60;
        startMin = data[prop].start % 60;

        endHour = data[prop].end / 60;
        endMin = data[prop].end % 60;

        weekNum.push(prop.replace('week', '') * 1);
    }
    weekNum = weekNum.sort();
    startWeek = weekMap[weekNum[0]];
    endWeek = weekMap[weekNum[weekNum.length - 1]];

    startHour = padding(startHour, 2);
    startMin = padding(startMin, 2);
    endHour = padding(endHour, 2);
    endMin = padding(endMin, 2);

    return {
        startWeek: weekTextMap[startWeek],
        endWeek: weekTextMap[endWeek],
        startTime: `${startHour}:${startMin}`,
        endTime: `${endHour}:${endMin}`
    }
}

/**
 * @description 补齐数字前面的0
 * @params num 数字
 * @params length 长度
 */
function padding(num, length) {
    for(var len = (num + "").length; len < length; len = num.length) {
        num = "0" + num;            
    }
    return num;
}

export default function() {
    return {
        getShop,
        renderShop,
    };
}

方法的具体内容我们在上一节有详细讲解，这里就不赘述了。

低码方法加好后，我们在生命周期函数里调用一下并且赋值给变量

import funcs from './handler/funcs';
export default {
  async onPageLoad(query) {
    console.log('---------> LifeCycle onPageLoad', query)
    let ret = await funcs().getShop();
      if(ret.code != 0) {
          app.showToast({
              title: `获取店铺信息失败：${ret.message}`
          });
          return;
      }
    console.log("ret",ret.data)
    funcs().renderShop.bind(this)(ret.data);
    console.log("formContent:",JSON.stringify($page.dataset.state.formContent))
  },
  onPageShow() {
    //console.log('---------> LifeCycle onPageShow')
  },
  onPageReady() {
    //console.log('---------> LifeCycle onPageReady')
  },
  onPageHide() {
    //console.log('---------> LifeCycle onPageHide')
  },
  onPageUnload() {
    //console.log('---------> LifeCycle onPageUnload')
  },
}

这样我们在加载页面的时候就把数据库的信息赋值给变量了，这样就可以将变量绑定到组件里，实现了编辑页如果有信息就在各个组件上显示值得效果