医美小程序实战教程-店铺信息加载

Posted 2021-11-23 低代码布道师

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了医美小程序实战教程-店铺信息加载相关的知识，希望对你有一定的参考价值。

我们前两篇分析了一下医美小程序首页的制作方法，官方模板是使用的外部数据源，不利于我们自己管理数据。所以我们使用自建数据源来进行重新开发，当然了如果是使用自建数据源免不了就涉及到开发了，本节我们介绍一下从数据库中读取信息展示到页面上。页面的最终效果如下：

业务逻辑

要想进行开发首先需要把逻辑想明白了，按照页面的规划我们是需要读取店铺的信息，那从哪读取呢？

在软件开发领域信息一般是存放到数据库中，所以我们需要从数据库中读取信息。微搭提供了一套在线的文档型数据库。区别于关系型数据库，它的数据结构可以定义的更复杂。我们的数据源这样定义

页面上只显示一条记录，那如何读取信息呢？数据库的查询多条可以返回一个记录的集合，这个正是我们需要的

功能实现

进入到应用管理，找到我们创建的医美小程序后台

默认显示的是首页，我们在首页上进行功能操作

那应该从哪开始呢？你可以这样想，页面一加载的时候就显示信息。那这个一开始这个动作是在哪里操作呢？

需要在低代码编辑里操作，点击导航栏上的低代码编辑

打开编辑器后，分为全局生命周期和页面生命周期，我们可以在页面生命周期里写代码

具体的代码如下：

export default {
  async onPageLoad(query) {
    const ret = await app.dataSources.shop_8cp2v9w.wedaGetList();
    if(ret.code!=0){
      return
    }
    const formContent = getformContent($page.dataset.state.formContent,ret.data[0]);
    $page.dataset.state.formContent = [...formContent]
  },
  onPageShow() {
    //console.log('---------> LifeCycle onPageShow')
  },
  onPageReady() {
    //console.log('---------> LifeCycle onPageReady')
  },
  onPageHide() {
    //console.log('---------> LifeCycle onPageHide')
  },
  onPageUnload() {
    //console.log('---------> LifeCycle onPageUnload')
  },
}

function getformContent(formContent,data){
  formContent && Array.isArray(formContent) && formContent.map((item)=>{
    const {key} = item;
    switch(key) {
      case 'location':
        console.log("location",data[key])
        item.value = getLocation(data[key]);
        console.log("locationvalue",item.value)
      break;
      case 'telphone':
        item.value = data[key];
      break;
      case 'workTime':
        item.value = getWorkTime(data[key]);
      break;
      default:
        item.value = data[key];
      return item;
    }
  })
  return formContent;
}

function getLocation(location){
  let {province = '',city = '',district='',address = ''} = location;
  return `${province}-${city}-${district}-${address}`;
}

function getWorkTime(data){
  let weekNum = [];
  let weekMap = {
    1:'周一',
    2:'周二',
    3:'周三',
    4:'周四',
    5:'周五',
    6:'周六',
    7:'周七',
  }
  let startWeek,
      endWeek,
      startHour,
      endHour,
      startMin,
      endMin,
      weekText;
  for(let prop in data){
    startHour = parseInt(data[prop].start/60);
    startMin = parseInt(data[prop].start%60);
    endHour = parseInt(data[prop].end/60);
    endMin = parseInt(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);
  endHour = padding(endHour,2);
  startMin = padding(startMin,2);
  endMin = padding(endMin,2);

  weekText = weekNum.length ===1 ? startWeek:`${startWeek} 至 ${endWeek}`;
  return `${weekText},${startHour}:${startMin}-${endHour}:${endMin}`;
}

function padding(num,length){
  for(var len = (num+"").length;len<length;len = num.length){
    num = "0"+num;
  }
  return num;
}