uni-app D3

爱泡脚的鸡腿
12 阅读3分钟

1.任务详情

1.1 上拉加载-scrolltolower监听页面是否滚动到底部，从而触发请求

绑定这个scroll-view组件一个监听

image.png

1.1.1 使用scrolltolower

image.png

image.png 只要使用（page+1）就可以实现加新页面

image.png

image.png 每次申请到新数据后，实现的操作是增加，而不是覆盖。要注意操作

image.png 当所有数据都被请求完后，就不需要请求新的数据了

image.png 先定义一个变量表示是否还有数据 image.png 使用刚刚的hasMore变量，在函数内新增根据是否还有数据而发起请求的功能 image.png image.png 下一步优化建议：新增节流和防抖

image.png

1.1.2 小程序中的区域的组件-scroll-view（用于实现页面中某个区域滚动的组件）

视图容器 / scroll-view 注意：父盒子需要设定高度，不然子盒子和父盒子一样高就没有滚动的必要

1.2 下拉刷新-使用refresherrefresh事件

先给组件绑定事件 image.png

image.png

image.png 给scrollview提供一个动画 image.png

2 公告列表

2.1 封装获取数据的方法

image.png

2.2 数据渲染

image.png

3.任务模块

3.1 封装请求接口

image.png

3.2 调用封装好的接口

image.png

3.3 待提货列表

image.png image.png

4 任务详情

4.1 封装接口

流程讲解：先使用onLoad获取id，再将id传给api接口，用于获取对应id的数据 image.png

image.png

image.png

4.2 数据渲染

image.png

image.png

4.3 根据传过来的status不同，做条件判断，再进行渲染

4.3.1 根据不同的status渲染不同的联系人和联系方式

image.png

image.png

4.3.2 根据不同的status渲染不同的页面按钮

image.png

4.3.3 异常上报和回车登记的id为transportTaskId

三种状态加起来一共有五个id，其中异常上报和回车登记的id为transportTaskId，其余的id为id

image.png

4.4 条件编译

这里只是演示一下，没有调用实现扫描的接口，后续可自行加上
如果是app或者小程序，就有扫码功能，如果是网页h5端，则没有扫码功能 image.png

image.png

4.5 延迟提货

场景：司机因为某些原因推迟提货时间

4.5.1获取参数

image.png 实现效果：

image.png 获取url上的id和时间 image.png 渲染

image.png

4.5.2 获取表单其他的参数

使用小程序原生picker组件（也是uni-app的原生组件），进行时间的选择

image.png

image.png image.png

image.png 延迟提货时间不能多余一小时，所以要限制日期，但是picker组件只能选择时间，而选不到日期，所以需要从原定时间内使用split方法拆分出年份

image.png

image.png

4.6 延迟原因

直接使用v-model获取内容 image.png

image.png 右下角的字数统计-（使用计算属性）

image.png 如果relayReason不合法，则按钮不高亮，不可点击，同时字数和日记高红提示

4.6.1 判断选择延迟时间是否在合法范围内

·延迟时间必须大于原来时间
·延迟时间必须在原定时间后的两小时内 通过计算属性实现判断时间的合法性 image.png 高亮提示

image.png

4.6.2 使用计算属性统计字数

image.png

image.png

4.6.3 当字数和时间都合法，才可以成功提交

image.png

4.6.4 实现数据提交

先封装调用接口的方法

image.png

image.png 用户点击后，提交数据

image.png

image.png

avatar
文章
阅读
粉丝