小程序开发日记-04页面工作量巨大

今天继续新增页面，数了数一共有28个字段，包括picker，input，multi-picker，textarea；页面处理逻辑包括：

• 选择CR picker后，自动更新页面上其他大部分字段的值；
• 动态添加、删除合同类型及金额，并计算总计；
• 客户动态选择器；
• 数据校验规则；
• 帮助提示；

先把昨天剩下的2个字段完成了客户端的编码，后面开始进行数据构造及提交的工作，另外服务端要Rest PUT 接口。

插曲：上午计划仓位的调整，看好了港股’金马能源(2.8hk$)‘和’首钢资源（1.92hk$）‘，搞焦炭和煤的，准备埋点。感觉低估了。

 改造Rest接口以及用Rest client测试意外发现了系统的bug，一边改一边前行！

终于将新增页面做差不多了！最有一项现不做。

明天准备趁热打铁，把修改页面做了。

整整满满的3天，再来一次的话，2天吧，最少得。

1. 做新增的页面布局wxml         （✔）
2. 灌注据（基础类型类的数据），在页面上可以选择。 （✔）
3. 开发表单的校验规则rules（✔）
4. 页面逻辑：增加删除合同类型及金额       （✔）
5. 页面逻辑：选择合同评审自动填充  （✔）
6. 页面逻辑：日期控件找一下 （✔）
7. 页面逻辑：选择客户功能，是否需要弹框，如果弹框，则需要和以前的公用。重构？（✔）
8. 组合json数据，以及提交请求request （✔）
9. 改造服务器端的rest 接口，包括能用rest client能够提交成功测试。（✔）
10. 提交成功后，显示弹框，告诉客户的修改时限。

-----------------------------------------------------------------------------------------------------------------

关于小程序表单的校验：

• prop和data-field要一致，并且不能有小数点
• 可以使用models属性，将data中的值传进来

 <mp-form id="form" rules="{{rules}}" models="{{contract}}">
   <mp-cells title="" footer="">
     <mp-cell prop="customername" title="客户名称">
　　    <input type="text" bindinput="customerInputChange" data-field="customer.name" value="{{contract.customer.name}}" class="weui-input" placeholder="请填写"/>
     </mp-cell>
   </mp-cells>
 </mp-form>

上面的例子prop与data-field名字不一致的话需要这么写rules。

那个小数点其实很有用用来setData时：

   rules:[{

      name:'title',

      rules: [{required: true, message:'请输入名称!'},{maxlength:150}],

    },{

      name:'customername',

      rules: {

        validator: function(rule, value, param, model) {

          //because data-field and prop should have the same name, but not contains . specical character.

          //So just use self defined validator.

          if (!model.customer.name) {

              return '请填写客户名称!'

          } else if(model.customer.name.length > 100){

            return '客户名称不能大于100字!'

          } 

        }

      }

    }

 

 //可以用小数点来set复杂的对象，即对象嵌套的情况。

 formInputChange(e) {

    const {field} = e.currentTarget.dataset

    var data = e.detail.value

    this.setData({

        [`contract.${field}`]: data

    })

  }