写在前面

本篇文章是微信小程序开发入门的第二十五篇，增加水果库存警报设置

本来我们的想法是单独一个页面设置水果库存警报，但是我又觉得给水果一个个单独设置警报太麻烦了，所以直接把警报设置加到新增编辑页面，即在新增编辑页面加一个栏位：是否开启库存警报，如果选择开启的话，就要填写库存下限，同时增加水果类型选择栏位，我还给水果集合加了三个参数：saleNum（销售数量）、rotNum（腐烂等原因的处理数量）、typeId（所属水果类型的Id）

水果库存警报功能

云函数

首先修改新增水果的云函数，打开add\index.js文件，修改代码如下，文件edit\index.js一样修改，修改完成后将云函数重新上传并部署一下：

新增四个字段：

saleNum 销售数量
rotNum 处理数量
isQuaAlarm 是否开启库存警报
quaAlarmNum 库存下限
typeId 类型Id

      data: {
        name: event.name,
        oriPrice: event.oriPrice,
        quantity: event.quantity,
        unit: event.unit,
        vipPrice: event.vipPrice,
        curPrice: event.curPrice,
        intro: event.intro,
        isHot: false,
        fileID: event.fileID,
        // 新增的字段
        saleNum: event.saleNum,
        rotNum: event.rotNum,
        isQuaAlarm: event.isQuaAlarm,
        quaAlarmNum: event.quaAlarmNum,
        typeId: event.typeId,
      }

小程序端

先打开fruit-edit-add.json文件，添加如下代码：

页面中会用到radio组件来选择是否开启库存警报，用到picker组件来选择水果类型

{
  "usingComponents": {
    "t-radio": "tdesign-miniprogram/radio/radio",
    "t-radio-group": "tdesign-miniprogram/radio-group/radio-group",
    "t-picker": "tdesign-miniprogram/picker/picker",
    "t-picker-item": "tdesign-miniprogram/picker-item/picker-item"
  },
  "navigationBarTitleText": "水果信息",
  "navigationBarBackgroundColor": "#FFFFFF",
  "navigationBarTextStyle": "black"
}

再打开fruit-edit-add.js文件，在data中添加字段，并且在onLoad中也添加字段，同时执行getTypeList方法，代码如下：

typeShow用来控制水果类型选择器的显示隐藏

typeName用来显示选中的水果类型的文字

typeList是水果类型列表，通过getTypeList方法获取水果类型选择列表，同时通过find方法获取水果类型名称（即用来回显水果类型）

  data: {
    ...
    isQuaAlarm: false,
    quaAlarmNum: '',
    typeId: '',
    typeList: [],
    typeName: '',
    typeShow: false
  },
  onLoad(options) {
    if (options.info) {
      const info = JSON.parse(options.info)
      this.setData({
        ...
        isQuaAlarm: info.isQuaAlarm,
        quaAlarmNum: info.quaAlarmNum,
        typeId: info.typeId,
      })
    }
    this.getTypeList()
  },
  getTypeList() {
    wx.cloud.callFunction({
        // 云函数名称
        name: 'fruit-type',
        // 传给云函数的参数
        data: {
          type: 'search',
          limit: 100,
          page: 1
        },
      })
      .then(res => {
        const {
          data
        } = res.result.data
        let find = data.find(el => el._id === this.data.typeId)
        this.setData({
          typeList: data,
          typeName: find ? find.name : ''
        })
      })
      .catch(err => {})
  },

然后在fruit-edit-add.wxml文件中添加代码：

增加是否开启库存警报、库存下限、水果类型栏位，以及水果类型选择框

点击水果类型会调用onTypePicker，该方法会显示选择框

bindchange监听选择框点击“确定”

bindcancel监听选择框点击“取消”

keys用来定义 value / label 对应的字段别名

  <view class="info_li">
    <view class="info_title">是否开启库存警报</view>
    <view class="info_input">
      <t-radio-group value="{{isQuaAlarm}}" borderless t-class="box" bind:change="onChange">
        <t-radio block="{{false}}" label="是" value="{{1}}" style="margin-right: 60rpx;"/>
        <t-radio block="{{false}}" label="否" value="{{0}}" />
      </t-radio-group>
    </view>
  </view>
  <view class="info_li">
    <view class="info_title">库存下限</view>
    <view class="info_input">
      <input class="input_box" bindinput="emptyFun" placeholder="请输入库存下限" model:value="{{quaAlarmNum}}" />
    </view>
  </view>
  <view class="info_li">
    <view class="info_title">水果类型</view>
    <view class="info_input">
      <view bindtap="onTypePicker">
        {{typeName}}
      </view>
    </view>
  </view>
 ...
<view class="btn_box">
  <view class="edit_btn" bindtap="onEditSubmit">
    {{id?'确定编辑':'确定新增'}}
  </view>
</view>

<t-picker visible="{{typeShow}}" value="{{[typeId]}}" title="选择水果类型" cancelBtn="取消" confirmBtn="确认" bindchange="onTypeChange" bindcancel="onTypeCancel" keys="{{ { label:'name',value: '_id' } }}">
  <t-picker-item options="{{typeList}}" />
</t-picker>

接下来还要在fruit-edit-add.js文件中增加onChange方法，此时radio就能正常使用了

增加onTypePicker方法，点击后显示水果类型选择器

增加onTypeChange方法，水果类型选择框点击“确定”后隐藏水果类型选择器，同时给typeId和typeName赋值

增加onTypeCancel方法，水果类型选择框点击“取消”后隐藏水果类型选择器

同时修改onEditSubmit方法，修改或新增成功后跳转到水果管理页面

...
  onChange(e) {
    this.setData({
      isQuaAlarm: e.detail.value
    });
  },
  onTypePicker() {
    this.setData({
      typeShow: true
    });
  },
  onTypeChange(e) {
    this.setData({
      typeShow: false,
      typeId: e.detail.value[0],
      typeName: e.detail.label,
    });
  },
  onTypeCancel() {
    this.setData({
      typeShow: false,
    });
  },
  onEditSubmit() {
    ...
      if (success) {
        wx.reLaunch({
          url: `/pages/manage/fruit-manage/fruit-manage`,
        })
      }
    ...
    }).catch((e) => {});
  },

最终页面效果如下：

写在最后

以上就是增加水果库存警报设置的全部代码

小程序入门25：增加水果库存警报设置

写在前面

水果库存警报功能

云函数

小程序端

写在最后