小程序模板網(wǎng)

微信小程序--三重奏 給ofo共享單車擼一個(gè)小程序之單車報(bào)障頁 ...

發(fā)布時(shí)間:2018-04-18 11:09 所屬欄目:小程序開發(fā)教程

上一節(jié)實(shí)現(xiàn)了掃碼,這一節(jié)我們開始實(shí)現(xiàn)點(diǎn)擊單車報(bào)障控件之后跳轉(zhuǎn)的頁面:

頁面分析 
頁面可以勾選故障類型,所以需要用到復(fù)選框組件;可以選擇上傳或拍攝圖片,所以要使用wx.chooseImage({})這個(gè)API選取圖片;可以輸入車牌號(hào)和備注,所以需要使用input輸入組件。 
勾選類型,選擇圖片,輸入備注信息完成后,后臺(tái)需要獲取這些輸入的數(shù)據(jù)提交到服務(wù)器以獲得反饋。 
必須勾選類型和選擇周圍環(huán)境圖片才能提交,否則彈窗提示??梢赃x擇多張圖片,也可以取消選擇的圖片。

頁面結(jié)構(gòu)

 

				
  1. <!--pages/warn/index.wxml-->
  2. <view class="container">
  3. <view class="choose">
  4. <view class="title">請(qǐng)選擇故障類型</view>
  5. <checkbox-group bindchange="checkboxChange" class="choose-grids">
  6. <!-- itemsValue是data對(duì)象里定義的數(shù)組,item代表數(shù)組的每一項(xiàng),此處語法為循環(huán)輸出數(shù)組的每一項(xiàng)并渲染到每一個(gè)復(fù)選框。下面還有類似語法 -->
  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">拍攝單車周圍環(huán)境,便于維修師傅找車</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="車牌號(hào)(車牌損壞不用填)" />
  24. <input bindinput="descChange" name="desc" placeholder="備注" />
  25. </view>
  26. <view class=


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://m.u-renovate.com/wxmini/doc/course/23691.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×