写在前面

本篇文章是微信小程序开发入门的第二十三篇，进行水果类型管理页面开发

我们已经完成了管理中心页面开发，现在开始开发水果类型管理页面，水果类型管理页面包括：水果类型列表、新增水果类型、编辑水果类型

水果类型管理 数据库集合

首先打开云开发控制台，在数据库新增一个集合：fruit-type

水果类型管理 云函数

在项目目录下右击“cloudfunctions”，点击新建“Node.js 云函数”，命名为fruit-type，同时将fruit文件夹下的index.js文件中的代码复制粘贴到fruit-type文件夹下的index.js文件中，并且将fruit文件夹下的add、search、detail、edit、del文件夹复制粘贴到fruit-type文件夹下，首先将add、search、detail、edit、del文件夹下的index.js文件中的所有db.collection('fruit')替换成db.collection('fruit-type')，再打开add和edit文件夹下的index.js文件，修改代码如下：

     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,
      }
// 改成
     data: {
        name: event.name,
      }

水果类型只有一个字段：name，表示水果类型名称

水果类型管理页面

首先编辑fruit-type-manage.json文件，修改水果类型管理页面的导航栏内容，同时后面会用到dialog进行新增、编辑，loading进行数据加载等待，代码如下：

{
  "usingComponents": {
    "t-dialog": "tdesign-miniprogram/dialog/dialog",
    "t-loading": "tdesign-miniprogram/loading/loading",
    "t-icon": "tdesign-miniprogram/icon/icon"
  },
  "navigationBarTitleText": "水果类型管理",
  "navigationBarBackgroundColor": "#FFFFFF",
  "navigationBarTextStyle": "black"
}

再是fruit-type-manage.wxml文件的编辑，编写代码如下，点击“新增水果类型”按钮和“去编辑”后，我们给他显示一个对话框，按钮的逻辑写在js文件里，loading控制加载状态的显隐：

<view class="type_page">
  <view class="loading" wx:if="{{loading}}">
    <t-loading theme="circular" size="64rpx" class="large" />
  </view>
  <view class="type_ul" wx:else>
    <view class="type_li" wx:for="{{typeList}}" wx:key="index">
      <view class="li_name">
        {{item.name}}
      </view>
      <view class="li_arrow" bindtap="onEditType" data-item="{{item}}">
        <view class="edit_text">去编辑</view>
        <t-icon name="chevron-right" size="48rpx" />
      </view>
    </view>
    <view class="no_data" wx:if="{{typeList.length === 0}}">
      暂无数据
    </view>
  </view>
  <view class="add_box" bindtap="onAddType">
    新增水果类型
  </view>
</view>

<t-dialog visible="{{typeShow}}" title="{{dislogTitle}}" confirm-btn="确定" cancel-btn="取消" bind:confirm="onComfirmType" bind:cancel="onHideType">
  <input class="dialog-input" model:value="{{name}}" slot="content" bindinput="emptyFun" placeholder="请输入水果类型名称" />
</t-dialog>

typeList为水果类型数组，等会在js文件中通过云函数获取，当typeList为[]时页面显示内容“暂无数据~”，接着编辑fruit-type-manage.js文件，文件代码如下：

getTypeList方法获取水果类型列表

onAddType是点击“新增水果类型”按钮后触发的事件，此时将dislogTitle赋值为“新增水果类型”，并且显示dialog对话框

onEditType是点击“去编辑”后触发的事件，此时将dislogTitle赋值为“编辑水果类型”，同时给name和id赋值，并且显示dialog对话框

onComfirmType的时候根据dislogTitle的文字判断是新增还是编辑，调用不同的云函数

Page({
  data: {
    typeList: [],
    typeShow: false,
    name: '',
    id: '',
    loading: false,
    dislogTitle: ''
  },
  emptyFun() {},
  onLoad(options) {
    this.getTypeList()
  },
  getTypeList() {
    this.setData({
      loading: true
    })
    wx.cloud.callFunction({
        // 云函数名称
        name: 'fruit-type',
        // 传给云函数的参数
        data: {
          type: 'search',
          limit: 10,
          page: 1
        },
      })
      .then(res => {
        this.setData({
          loading: false,
          typeList: res.result.data.data
        })
      })
      .catch(err => {})
  },
  onAddType() {
    this.setData({
      typeShow: true,
      dislogTitle: '新增水果类型'
    })
  },
  onEditType(e) {
    const item = e.currentTarget.dataset.item
    this.setData({
      name: item.name,
      typeShow: true,
      dislogTitle: '编辑水果类型',
      id: item._id
    })
  },
  onComfirmType() {
    let type = 'add'
    if (this.data.dislogTitle === '编辑水果类型') {
      type = 'edit'
    }
    wx.cloud.callFunction({
        // 云函数名称
        name: 'fruit-type',
        // 传给云函数的参数
        data: {
          type: type,
          name: this.data.name,
          id: this.data.id
        },
      })
      .then(res => {
        const {
          success,
          msg
        } = res.result
        if (success) {
          this.onHideType()
          this.getTypeList()
        } else {
          wx.showToast({
            title: msg,
            icon: 'error',
            duration: 2000
          })
        }
      })
      .catch(err => {})
  },
  onHideType() {
    this.setData({
      typeShow: false,
      name: ''
    })
  },
})

以及fruit-type-manage.wxss文件，代码如下：

.type_page {
  width: 750rpx;
  position: absolute;
  top: 16rpx;
  bottom: 120rpx;
  left: 0;
  right: 0;
  background-color: #fff;
}

.no_data {
  text-align: center;
  padding: 80rpx 0 32rpx;
  color: #999;
  font-size: 28rpx;
}

.add_box {
  position: absolute;
  bottom: -80rpx;
  left: 0;
  right: 0;
  border-top: 1rpx solid #f7f7f7;
  width: 380rpx;
  margin: 0 auto;
  background-color: #0052d9;
  color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 0 0 40rpx 40rpx;
}
.loading{
  text-align: center;
  margin-top: 80rpx;
}
.type_ul {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

.type_li {
  height: 48rpx;
  line-height: 48rpx;
  margin: 0 16rpx;
  padding: 16rpx;
  border-bottom: 1rpx solid #f7f7f7;
  display: flex;
  justify-content: space-between;
}

.li_arrow {
  color: #bfbfbf;
  display: flex;
}
.edit_text {
  font-size: 28rpx;
}

.dialog-input {
  padding-top: 24rpx;
  padding-bottom: 24rpx;
  padding-left: 24rpx;
  text-align: left;
  margin-top: 32rpx;
  border-radius: 8rpx;
  background-color: #f3f3f3;
  box-sizing: border-box;
  height: 96rpx;
  line-height: 96rpx;
}

页面效果如下：

至此我们就实现了查询、编辑、新增水果类型

写在最后

以上就是水果类型管理页面开发的全部代码