小程序模板网

微信小程序--三重奏 给ofo共享单车撸一个小程序之单车报障页 ...

上一节实现了扫码,这一节我们开始实现点击单车报障控件之后跳转的页面:

页面分析 
页面可以勾选故障类型,所以需要用到复选框组件;可以选择上传或拍摄图片,所以要使用wx.chooseImage({})这个API选取图片;可以输入车牌号和备注,所以需要使用input输入组件。 
勾选类型,选择图片,输入备注信息完成后,后台需要获取这些输入的数据提交到服务器以获得反馈。 
必须勾选类型和选择周围环境图片才能提交,否则弹窗提示。可以选择多张图片,也可以取消选择的图片。

页面结构

 

				
  1. <!--pages/warn/index.wxml-->
  2. <view class="container">
  3. <view class="choose">
  4. <view class="title">请选择故障类型</view>
  5. <checkbox-group bindchange="checkboxChange" class="choose-grids">
  6. <!-- itemsValue是data对象里定义的数组,item代表数组的每一项,此处语法为循环输出数组的每一项并渲染到每一个复选框。下面还有类似语法 -->
  7. <block wx:for="{{itemsValue}}" wx:key="{{item}}">
  8. <view class="grid">
  9. <checkbox value="{{item.value}}" checked="{{item.checked}}" color="{{item.color}}" />{{item.value}}
  10. </view>
  11. </block>
  12. </checkbox-group>
  13. </view>
  14. <view class="action">
  15. <view class="title">拍摄单车周围环境,便于维修师傅找车</view>
  16. <view class="action-photo">
  17. <block wx:for="{{picUrls}}" wx:key="{{item}}" wx:index="{{index}}">
  18. <image src="{{item}}"><icon type="cancel" data-index="{{index}}" color="red" size="18" class ="del" bindtap="delPic" /></image>
  19. </block>
  20. <text class="add" bindtap="bindCamera">{{actionText}}</text>
  21. </view>
  22. <view class="action-input">
  23. <input bindinput="numberChange" name="number" placeholder="车牌号(车牌损坏不用填)" />
  24. <input bindinput="descChange" name="desc" placeholder="备注" />
  25. </view>
  26. <view class=


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23691.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询