人工智能研究中心快递柜——代码分析八

2021SC@SDUSC

本次开始介绍柜子的具体使用功能的实现。

由于关于wxml方面都是使用view标签设置相应参数，进行展示故不做具体分析，主要是对 wx:if的运用，合理使用js中传入的数据参数进行选择。主要进行js文件的分析。

首先对于不同类型的柜子和任务以不同的颜色进行展示，定义颜色变量。

const colors = [
  {itemStyle: {normal: {color: '#f7efe2'}}, text: "空闲"},
  {itemStyle: {normal: {color: '#f25c00'}}, text: "中转物品"},
  {itemStyle: {normal: {color: '#e2dfa2'}}, text: "收作业"},
  {itemStyle: {normal: {color: '#f9a603'}}, text: "暂存物品"},
  {itemStyle: {normal: {color: '#f70025'}}, text: "已选中"},
];

初始化时定义柜子数据等相关信息都为null，等待用户信息的传入。onload函数中定义打开时要传入的参数和进行的操作，通过wx.getStroageSync和selectComponent函数获取用户电话、柜子状态、操作类型、用户id信息，并进行setData操作。

对于柜子的初始化实现要进行初始化图表，width和height是从css样式中取得的数值，同时进行防抖的操作，当选中柜子后进行重新渲染。

 barChart.on('click', function (params) {
        if (params.data.couldClick !== undefined && !params.data.couldClick) {

        } else if (that.data.selectedGate && that.data.selectedGate.sri == params.data.sri) {

        } else {
          that.setData({
            selectedGate: params.data,
          }, that.init_cabinet());
        }
      }); 

定义获取柜子操作的方法，首先处理数据进行柜子颜色的设定

data.forEach((item) => {
      let opState = this.getUseState(item);
      item.itemStyle = colors[opState].itemStyle;
      item.value = [item.leftBottomX, item.rightTopX, item.leftBottomY, item.rightTopY];
    }

比较重点的实体柜子的开柜门实现，利用如下代码进行，wx.request发起来HTTPS网络请求，最终发送给服务器的数据是String类型，如果传入的data不是String会被转换为String，然后就是固定的使用格式，如果发生错误的话会进行错误的提示。最后完成之后wx.showToast用于显示消息提示框，提示框title即为res.data.message的内容。

 openGate: function() {
    let that = this;
    
    let url = constUtil.url + '/shadow/open';
    let data = {
      uuid: "",
      nickName: "",
      phone: this.data.phone,
      cabinetSri: this.data.cabinetData.sri,
      gateSri: this.data.selectedGate.sri,
      tableNum: this.data.selectedGate.tableNum,
      lockNum: this.data.selectedGate.lockNum,
    };
    
    util.showLoading('');
    wx.request({
      url: url,
      data: data,
      method: 'POST',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success:function(res) {

        // if(callback) callback(res)
      },
      fail:function(res) {
        console.log("fail,", res);
      },
      complete:function(res) {
        util.hideLoading();
        console.log("complete,", res);
        wx.showToast({
          title: res.data.message,
          icon: 'succes',
          duration: 1000,
          mask: true
        }, setTimeout(() => {that.reRenderChart()}, 1000))
      },
    })
  },

与之相似的，当使用结束后也应该有与HTTPS交互的命令，由于结构与功能与上者相似，不特别介绍。 

finishUse: function() {
    let that = this;

    let url = constUtil.url + '/shadow/finishUse';
    let data = {
      uuid: "",
      nickName: "", //app.globalData.userInfo.nickName,
      phone: this.data.phone,
      cabinetSri: this.data.cabinetData.sri,
      gateSri: this.data.selectedGate.sri,
      tableNum: this.data.selectedGate.tableNum,
      lockNum: this.data.selectedGate.lockNum,
    };
    util.showLoading('');
    wx.request({
      url: url,
      data: data,
      method: 'POST',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success:function(res) {

        // if(callback) callback(res)
      },
      fail:function(res) {
        console.log("fail", res);
      },
      complete:function(res) {
        util.hideLoading();
        console.log("complete", res);
        wx.showToast({
          title: res.data.message,
          icon: 'succes',
          duration: 1000,
          mask: true
        }, setTimeout(() => {that.reRenderChart()}, 1000))
        
      },
    })
  },