写在前面

本篇文章是微信小程序开发入门的第三十篇，库存警报记录页面开发

库存警报记录页面

云函数

在项目中新建一个Nodejs云函数，命名为alarm-record

获取库存警报记录云函数

打开cloudfunctions\alarm-record\index.js文件，编写如下代码，获取警报记录，获取数据库集合记录的方法已经写过很多遍了，这里就不多做介绍了：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
}) // 使用当前云环境

const db = cloud.database();

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    // 小程序端传入的参数：
    // limit每页条数（默认100条），page页数（默认第1页）
    const limit = event.limit ? event.limit : 100
    const page = event.page ? event.page : 1
    // 取出集合记录总数
    const countResult = await db.collection('qua-alarm').count()
    const total = countResult.total
    // 取出集合的记录
    const data = await db.collection('qua-alarm').skip((page - 1) * limit).limit(limit).get()
    return {
      success: true,
      data: data,
      total: total,
      msg: '查询成功！'
    }
  } catch (e) {
    return {
      success: false,
      msg: '查询失败！'
    };
  }
}

小程序端

调用获取库存警报记录云函数

打开miniprogram\pages\manage\alarm-record\alarm-record.js文件，编写代码如下：

getAlarmList方法调用获取库存警报记录云函数，并将获取的值赋值给alarmList

Page({
  data: {
    alarmList: [],
    loading: false,
  },
  onLoad(options) {
    this.getAlarmList()
  },
  getAlarmList() {
    this.setData({
      loading: true
    })
    wx.cloud.callFunction({
        // 云函数名称
        name: 'alarm-record',
        // 传给云函数的参数
        data: {
          limit: 10,
          page: 1
        },
      })
      .then(res => {
        this.setData({
          loading: false,
          alarmList: res.result.data.data
        })
      })
      .catch(err => {})
  },
})

库存警报记录页面

首先修改alarm-record.json文件，设置以下导航栏的文字信息：

获取列表等待的时候显示loading加载器，所以在这里引入组件

{
  "usingComponents": {
    "t-loading": "tdesign-miniprogram/loading/loading"
  },
  "navigationBarTitleText": "库存警报记录",
  "navigationBarBackgroundColor": "#FFFFFF",
  "navigationBarTextStyle": "black"
}

然后编写alarm-record.wxml文件的代码，页面列表展示警报记录，代码如下：

loading字段控制加载组件的显示隐藏

<view class="alarm_page">
  <view class="loading" wx:if="{{loading}}">
    <t-loading theme="circular" size="64rpx" class="large" />
  </view>
  <view class="alarm_ul" wx:else>
    <view class="alarm_li" wx:for="{{alarmList}}" wx:key="index">
      <view class="li_name">
        <view class="li_name_tt">
          {{item.fruit.name}}
        </view>
        <view class="li_close" style="background-color: {{item.isClose?'#2ba471':'#d54941'}};">
          {{item.isClose?'已补充':"待补充"}}
        </view>
      </view>
      <view class="alarm_line">
        <view class="li_alarmQua">
          警报库存：<text class="li_alarmQua_text">{{item.alarmQua}}{{item.fruit.unit}}</text>
        </view>
        <view class="li_quaAlarmNum">
          库存下限：{{item.quaAlarmNum}}{{item.fruit.unit}}
        </view>
      </view>
      <view class="li_createTime">
        警报开始时间：{{item.createTime}} 已持续 {{item.alarmDay}} 天
      </view>
      <view class="li_createTime">
        警报结束时间：{{item.closeTime}}
      </view>
    </view>
    <view class="no_data" wx:if="{{alarmList.length === 0}}">
      暂无数据
    </view>
  </view>
</view>

alarm-record.js文件代码如下：

在页面onLoad的时候getAlarmList，对获取的alarmList进行处理，将createTime和closeTime都只取前16位，服务器时间好像和小程序端的时间有差别，这里先不多说，下次研究研究

Page({
  data: {
    alarmList: [],
    loading: false,
  },
  onLoad(options) {
    this.getAlarmList()
  },
  getAlarmList() {
    this.setData({
      loading: true
    })
    wx.cloud.callFunction({
        // 云函数名称
        name: 'alarm-record',
        // 传给云函数的参数
        data: {
          limit: 10,
          page: 1
        },
      })
      .then(res => {
        let alarmList = res.result.data.data
        alarmList.forEach(el => {
          el.createTime = el.createTime.slice(0, 16).replace('T', ' ')
          el.closeTime && (el.closeTime = el.closeTime.slice(0, 16).replace('T', ' '))
        });
        this.setData({
          loading: false,
          alarmList: alarmList
        })
      })
      .catch(err => {})
  },
})

最终页面效果如下：

写在最后

以上就是库存警报记录页面开发的全部代码