注冊

微信小程序開發(fā)之OFO共享單車,微信小程序選擇器

2017-12-20
導(dǎo)讀：上一節(jié)實(shí)現(xiàn)了掃碼，這一節(jié)我們開始實(shí)現(xiàn)點(diǎn)擊單車報障控件之后跳轉(zhuǎn)的頁面： Screenshot_2017-05-07-10-13-55-110_com.tencent.mm.png (130 KB, 下載次數(shù): 5) 下載附件 保存到相冊 2017-6-5 14:33 上傳 Screens...
上一節(jié)實(shí)現(xiàn)了掃碼，這一節(jié)我們開始實(shí)現(xiàn)點(diǎn)擊單車報障控件之后跳轉(zhuǎn)的頁面：

頁面分析
  • 頁面可以勾選故障類型，所以需要用到復(fù)選框組件；可以選擇上傳或拍攝圖片，所以要使用wx.chooseImage({})這個API選取圖片；可以輸入車牌號和備注，所以需要使用input輸入組件。
  • 勾選類型，選擇圖片，輸入備注信息完成后，后臺需要獲取這些輸入的數(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">請選擇故障類型</view>
  5.         <checkbox-group bindchange="checkboxChange" class="choose-grids">
  6.             <!-- itemsValue是data對象里定義的數(shù)組，item代表數(shù)組的每一項，此處語法為循環(huán)輸出數(shù)組的每一項并渲染到每一個復(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="車牌號（車牌損壞不用填）" />
  24.             <input bindinput="descChange" name="desc" placeholder="備注" />            
  25.         </view>
  26.         <view class="action-submit">
  27.             <button class="submit-btn" type="default" loading="{{loading}}" bindtap="formSubmit" style="background-color: {{btnBgc}}">提交</button>
  28.         </view>
  29.     </view>
  30. </view>
復(fù)制代碼

這里用到的組件和指令有：
  • 復(fù)選框組件 <checkbox-group>
  • 單個復(fù)選框<checkbox>
  • 輸入框組件<input>
  • 按鈕組件<button>
  • 圖標(biāo)組件<icon>
  • 循環(huán)指令：wx:for = "itemValues" wx:key="item" 表示 ：
  • 循環(huán)一個數(shù)組itemValues，數(shù)組每一項為item，item是一個對象，具體渲染到模板可能是對象的某個key的value，如：{{item.value}}

組件什么的看看組件文檔就知道了唄

頁面樣式
  1. /* pages/wallet/index.wxss */
  2. .choose{
  3.         background-color: #fff;
  4. }
  5. .choose-grids{
  6.         display: flex;
  7.         flex-wrap: wrap;
  8.         justify-content: space-around;
  9.         padding: 50rpx;
  10. }
  11. .choose-grids .grid{
  12.         width: 45%;
  13.         height: 100rpx;
  14.         margin-top: 36rpx;
  15.         border-radius: 6rpx;
  16.         line-height: 100rpx;
  17.         text-align: center;
  18.         border: 2rpx solid #b9dd08;
  19. }
  20. .choose-grids .grid:first-child,
  21. .choose-grids .grid:nth-of-type(2){
  22.         margin-top: 0;
  23. }
  24. .action .action-photo{
  25.         background-color: #fff;
  26.         padding: 40rpx 0px 40rpx 50rpx;
  27. }
  28. .action .action-photo image{
  29.         position: relative;
  30.         display: inline-block;
  31.         width: 120rpx;
  32.         height: 120rpx;
  33.         overflow: visible;
  34.         margin-left: 25rpx;
  35. }
  36. .action .action-photo image icon.del{
  37.         display: block;
  38.         position: absolute;
  39.         top: -20rpx;
  40.         right: -20rpx;
  41. }
  42. .action .action-photo text.add{
  43.         display: inline-block;
  44.         width: 120rpx;
  45.         height: 120rpx;
  46.         line-height: 120rpx;
  47.         text-align: center;
  48.         font-size: 24rpx;
  49.         color: #ccc;
  50.         border: 2rpx dotted #ccc;
  51.         margin-left: 25rpx;
  52.         vertical-align: top;
  53. }
  54. .action .action-input{
  55.         padding-left: 50rpx;
  56.         margin-top: 30rpx;
  57.         background-color: #fff;
  58. }
  59. .action .action-input input{
  60.         width: 90%;
  61.         padding-top: 40rpx;
  62.         padding-bottom: 40rpx;
  63. }
  64. .action .action-input input:first-child{
  65.         border-bottom: 2rpx solid #ccc;
  66.         padding-bottom: 20rpx;
  67. }
  68. .action .action-input input:last-child{
  69.         padding-top: 20rpx;
  70. }
  71. .action .action-submit{
  72.         padding: 40rpx 40rpx;
  73.         background-color: #f2f2f2;
  74. }
復(fù)制代碼

頁面數(shù)據(jù)邏輯
  1. // pages/wallet/index.js
  2. Page({
  3.   data:{
  4.     // 故障車周圍環(huán)境圖路徑數(shù)組
  5.     picUrls: [],
  6.     // 故障車編號和備注
  7.     inputValue: {
  8.       num: 0,
  9.       desc: ""
  10.     },
  11.     // 故障類型數(shù)組
  12.     checkboxValue: [],
  13.     // 選取圖片提示
  14.     actionText: "拍照/相冊",
  15.     // 提交按鈕的背景色，未勾選類型時無顏色
  16.     btnBgc: "",
  17.     // 復(fù)選框的value，此處預(yù)定義，然后循環(huán)渲染到頁面
  18.     itemsValue: [
  19.       {
  20.         checked: false,
  21.         value: "私鎖私用",
  22.         color: "#b9dd08"
  23.       },
  24.       {
  25.         checked: false,
  26.         value: "車牌缺損",
  27.         color: "#b9dd08"
  28.       },
  29.       {
  30.         checked: false,
  31.         value: "輪胎壞了",
  32.         color: "#b9dd08"
  33.       },
  34.       {
  35.         checked: false,
  36.         value: "車鎖壞了",
  37.         color: "#b9dd08"
  38.       },
  39.       {
  40.         checked: false,
  41.         value: "違規(guī)亂停",
  42.         color: "#b9dd08"
  43.       },
  44.       {
  45.         checked: false,
  46.         value: "密碼不對",
  47.         color: "#b9dd08"
  48.       },
  49.       {
  50.         checked: false,
  51.         value: "剎車壞了",
  52.         color: "#b9dd08"
  53.       },
  54.       {
  55.         checked: false,
  56.         value: "其他故障",
  57.         color: "#b9dd08"
  58.       }
  59.     ]
  60.   },
  61. // 頁面加載
  62.   onLoad:function(options){
  63.     wx.setNavigationBarTitle({
  64.       title: '報障維修'
  65.     })
  66.   },
  67. // 勾選故障類型，獲取類型值存入checkboxValue
  68.   checkboxChange: function(e){
  69.     let _values = e.detail.value;
  70.     if(_values.length == 0){
  71.       this.setData({
  72.         btnBgc: ""
  73.       })
  74.     }else{
  75.       this.setData({
  76.         checkboxValue: _values,
  77.         btnBgc: "#b9dd08"
  78.       })
  79.     }   
  80.   },
  81. // 輸入單車編號，存入inputValue
  82.   numberChange: function(e){
  83.     this.setData({
  84.       inputValue: {
  85.         num: e.detail.value,
  86.         desc: this.data.inputValue.desc
  87.       }
  88.     })
  89.   },
  90. // 輸入備注，存入inputValue
  91.   descChange: function(e){
  92.     this.setData({
  93.       inputValue: {
  94.         num: this.data.inputValue.num,
  95.         desc: e.detail.value
  96.       }
  97.     })
  98.   },
  99. // 提交到服務(wù)器
  100.   formSubmit: function(e){
  101.     // 圖片和故障類型必選
  102.     if(this.data.picUrls.length > 0 && this.data.checkboxValue.length> 0){
  103.       wx.request({
  104.         url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/msg',
  105.         data: {
  106.           // 如果是post請求就把這些數(shù)據(jù)傳到服務(wù)器，這里用get請求模擬一下假裝獲得了服務(wù)器反饋
  107.           // picUrls: this.data.picUrls,
  108.           // inputValue: this.data.inputValue,
  109.           // checkboxValue: this.data.checkboxValue
  110.         },
  111.         method: 'get', //
  112.         // header: {}, // 設(shè)置請求的 header
  113.         success: function(res){
  114.           wx.showToast({
  115.             title: res.data.data.msg,
  116.             icon: 'success',
  117.             duration: 2000
  118.           })
  119.         }
  120.       })
  121.     }else{
  122.       wx.showModal({
  123.         title: "請?zhí)顚懛答佇畔?quot;,
  124.         content: '看什么看，趕快填反饋信息，削你啊',
  125.         confirmText: "我我我填",
  126.         cancelText: "勞資不填",
  127.         success: (res) => {
  128.           if(res.confirm){
  129.             // 繼續(xù)填
  130.           }else{
  131.             console.log("back")
  132.             wx.navigateBack({
  133.               delta: 1 // 回退前 delta(默認(rèn)為1) 頁面
  134.             })
  135.           }
  136.         }
  137.       })
  138.     }
  139.    
  140.   },
  141. // 選擇故障車周圍環(huán)境圖 拍照或選擇相冊
  142.   bindCamera: function(){
  143.     wx.chooseImage({
  144.       count: 4,
  145.       sizeType: ['original', 'compressed'],
  146.       sourceType: ['album', 'camera'],
  147.       success: (res) => {
  148.         let tfps = res.tempFilePaths; // 圖片本地路徑
  149.         let _picUrls = this.data.picUrls;
  150.         for(let item of tfps){
  151.           _picUrls.push(item);
  152.           this.setData({
  153.             picUrls: _picUrls,
  154.             actionText: "+"
  155.           });
  156.         }
  157.       }
  158.     })
  159.   },
  160. // 刪除選擇的故障車周圍環(huán)境圖
  161.   delPic: function(e){
  162.     let index = e.target.dataset.index;
  163.     let _picUrls = this.data.picUrls;
  164.     _picUrls.splice(index,1);
  165.     this.setData({
  166.       picUrls: _picUrls
  167.     })
  168.   }
  169. })
復(fù)制代碼


當(dāng)你不熟悉一個函數(shù)或者說API返回的參數(shù)時（比如上述代碼中的e參數(shù)），可以嘗試去console.log一下，看看這個參數(shù)裝載著什么數(shù)據(jù)。這對于學(xué)習(xí)一個新的API是非常好的一個方法

其他章節(jié)
微信小程序開發(fā)之OFO共享單車——掃碼
微信小程序開發(fā)之OFO共享單車——單車報障頁
微信小程序開發(fā)之OFO共享單車——個人中心頁
微信小程序開發(fā)之OFO共享單車——錢包與充值
重磅推薦：小程序開店目錄

第一部分：小商店是什么

第二部分：如何開通一個小商店

第三部分：如何登錄小商店

第四部分：開店任務(wù)常見問題

第五部分：小商店可以賣什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結(jié)算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開發(fā)