小程序开发日记-04页面工作量巨大
今天继续新增页面，数了数一共有28个字段，包括picker，input，multi-picker，textarea；页面处理逻辑包括：
- 选择CR picker后，自动更新页面上其他大部分字段的值；
- 动态添加、删除合同类型及金额，并计算总计；
- 客户动态选择器；
- 数据校验规则；
- 帮助提示；
先把昨天剩下的2个字段完成了客户端的编码，后面开始进行数据构造及提交的工作，另外服务端要Rest PUT 接口。
插曲：上午计划仓位的调整，看好了港股’金马能源(2.8hk$)‘和’首钢资源（1.92hk$）‘，搞焦炭和煤的，准备埋点。感觉低估了。
改造Rest接口以及用Rest client测试意外发现了系统的bug，一边改一边前行！
终于将新增页面做差不多了！最有一项现不做。
明天准备趁热打铁，把修改页面做了。
整整满满的3天，再来一次的话，2天吧，最少得。
- 做新增的页面布局wxml （✔）
- 灌注据（基础类型类的数据），在页面上可以选择。 （✔）
- 开发表单的校验规则rules（✔）
- 页面逻辑：增加删除合同类型及金额 （✔）
- 页面逻辑：选择合同评审自动填充 （✔）
- 页面逻辑：日期控件找一下 （✔）
- 页面逻辑：选择客户功能，是否需要弹框，如果弹框，则需要和以前的公用。重构？（✔）
- 组合json数据，以及提交请求request （✔）
- 改造服务器端的rest 接口，包括能用rest client能够提交成功测试。（✔）
- 提交成功后，显示弹框，告诉客户的修改时限。
-----------------------------------------------------------------------------------------------------------------
关于小程序表单的校验：
- 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
})
}
BJFarmer
