uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

主要功能实现 

  1. 完成发生时间选择功能,用户可以通过日期选择器选择事件发生的时间。
  2. 实现事件类型选择功能,用户可以通过下拉选择框选择事件的类型。
  3. 添加子养殖场编号输入框,用户可以输入与事件相关的子养殖场编号。
  4. 完成事件描述输入功能,用户可以通过文本输入框描述事件的详细情况。
  5. 增加上传图片功能,用户可以选择并上传相关图片。
  6. 增加上传视频功能,用户可以选择并上传相关视频。
  7. 实现处理结果输入功能,用户可以通过文本输入框记录事件的处理结果。
  8. 添加是否已解决选择功能,用户可以通过单选按钮选择事件是否已经解决。

大概有两个样子的版本,一个是用内置组件完成的,另一个是用uni-ui扩展组件完成的,都在下面

未加样式版本

uni-app的Vue.js实现微信小程序的紧急事件登记页面功能_第1张图片

稍微加了点样式的样子

uni-app的Vue.js实现微信小程序的紧急事件登记页面功能_第2张图片

这是简陋的代码





然后是用了uni-ui扩展组件大改了一下样式

uni-app的Vue.js实现微信小程序的紧急事件登记页面功能_第3张图片uni-app的Vue.js实现微信小程序的紧急事件登记页面功能_第4张图片uni-app的Vue.js实现微信小程序的紧急事件登记页面功能_第5张图片

 uni-app的Vue.js实现微信小程序的紧急事件登记页面功能_第6张图片

 主要就是样式通过uni-ui组件完成





你可能感兴趣的:(腾讯-智慧养殖-前端组,uni-app,uni-app,vue.js)