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

2017-12-20

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

上一節實現了掃碼，這一節我們開始實現點擊單車報障控件之后跳轉的頁面：

頁面分析

頁面可以勾選故障類型，所以需要用到復選框組件；可以選擇上傳或拍攝圖片，所以要使用wx.chooseImage({})這個API選取圖片；可以輸入車牌號和備注，所以需要使用input輸入組件。
勾選類型，選擇圖片，輸入備注信息完成后，后臺需要獲取這些輸入的數據提交到服務器以獲得反饋。
必須勾選類型和選擇周圍環境圖片才能提交，否則彈窗提示。可以選擇多張圖片，也可以取消選擇的圖片。

頁面結構

<view class="container">
<view class="choose">
<view class="title">請選擇故障類型</view>
<checkbox-group bindchange="checkboxChange" class="choose-grids">
<block wx:for="{{itemsValue}}" wx:key="{{item}}">
<view class="grid">
<checkbox value="{{item.value}}" checked="{{item.checked}}" color="{{item.color}}" />{{item.value}}
</view>
</block>
</checkbox-group>
</view>
<view class="action">
<view class="title">拍攝單車周圍環境，便于維修師傅找車</view>
<view class="action-photo">
<block wx:for="{{picUrls}}" wx:key="{{item}}" wx:index="{{index}}">
<image src="{{item}}"><icon type="cancel" data-index="{{index}}" color="red" size="18" class ="del" bindtap="delPic" /></image>
</block>
<text class="add" bindtap="bindCamera">{{actionText}}</text>
</view>
<view class="action-input">
<input bindinput="numberChange" name="number" placeholder="車牌號（車牌損壞不用填）" />
<input bindinput="descChange" name="desc" placeholder="備注" />
</view>
<view class="action-submit">
<button class="submit-btn" type="default" loading="{{loading}}" bindtap="formSubmit" style="background-color: {{btnBgc}}">提交</button>
</view>
</view>
</view>

復制代碼

這里用到的組件和指令有：

復選框組件 <checkbox-group>
單個復選框<checkbox>
輸入框組件<input>
按鈕組件<button>
圖標組件<icon>
循環指令：wx:for = "itemValues" wx:key="item" 表示：
循環一個數組itemValues，數組每一項為item，item是一個對象，具體渲染到模板可能是對象的某個key的value，如：{{item.value}}

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

頁面樣式

/* pages/wallet/index.wxss */
.choose{
background-color: #fff;
}
.choose-grids{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 50rpx;
}
.choose-grids .grid{
width: 45%;
height: 100rpx;
margin-top: 36rpx;
border-radius: 6rpx;
line-height: 100rpx;
text-align: center;
border: 2rpx solid #b9dd08;
}
.choose-grids .grid:first-child,
.choose-grids .grid:nth-of-type(2){
margin-top: 0;
}
.action .action-photo{
background-color: #fff;
padding: 40rpx 0px 40rpx 50rpx;
}
.action .action-photo image{
position: relative;
display: inline-block;
width: 120rpx;
height: 120rpx;
overflow: visible;
margin-left: 25rpx;
}
.action .action-photo image icon.del{
display: block;
position: absolute;
top: -20rpx;
right: -20rpx;
}
.action .action-photo text.add{
display: inline-block;
width: 120rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center;
font-size: 24rpx;
color: #ccc;
border: 2rpx dotted #ccc;
margin-left: 25rpx;
vertical-align: top;
}
.action .action-input{
padding-left: 50rpx;
margin-top: 30rpx;
background-color: #fff;
}
.action .action-input input{
width: 90%;
padding-top: 40rpx;
padding-bottom: 40rpx;
}
.action .action-input input:first-child{
border-bottom: 2rpx solid #ccc;
padding-bottom: 20rpx;
}
.action .action-input input:last-child{
padding-top: 20rpx;
}
.action .action-submit{
padding: 40rpx 40rpx;
background-color: #f2f2f2;
}

復制代碼

頁面數據邏輯

// pages/wallet/index.js
Page({
data:{
// 故障車周圍環境圖路徑數組
picUrls: [],
// 故障車編號和備注
inputValue: {
num: 0,
desc: ""
},
// 故障類型數組
checkboxValue: [],
// 選取圖片提示
actionText: "拍照/相冊",
// 提交按鈕的背景色，未勾選類型時無顏色
btnBgc: "",
// 復選框的value，此處預定義，然后循環渲染到頁面
itemsValue: [
{
checked: false,
value: "私鎖私用",
color: "#b9dd08"
},
{
checked: false,
value: "車牌缺損",
color: "#b9dd08"
},
{
checked: false,
value: "輪胎壞了",
color: "#b9dd08"
},
{
checked: false,
value: "車鎖壞了",
color: "#b9dd08"
},
{
checked: false,
value: "違規亂停",
color: "#b9dd08"
},
{
checked: false,
value: "密碼不對",
color: "#b9dd08"
},
{
checked: false,
value: "剎車壞了",
color: "#b9dd08"
},
{
checked: false,
value: "其他故障",
color: "#b9dd08"
}
]
},
// 頁面加載
onLoad:function(options){
wx.setNavigationBarTitle({
title: '報障維修'
})
},
// 勾選故障類型，獲取類型值存入checkboxValue
checkboxChange: function(e){
let _values = e.detail.value;
if(_values.length == 0){
this.setData({
btnBgc: ""
})
}else{
this.setData({
checkboxValue: _values,
btnBgc: "#b9dd08"
})
}
},
// 輸入單車編號，存入inputValue
numberChange: function(e){
this.setData({
inputValue: {
num: e.detail.value,
desc: this.data.inputValue.desc
}
})
},
// 輸入備注，存入inputValue
descChange: function(e){
this.setData({
inputValue: {
num: this.data.inputValue.num,
desc: e.detail.value
}
})
},
// 提交到服務器
formSubmit: function(e){
// 圖片和故障類型必選
if(this.data.picUrls.length > 0 && this.data.checkboxValue.length> 0){
wx.request({
url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/msg',
data: {
// 如果是post請求就把這些數據傳到服務器，這里用get請求模擬一下假裝獲得了服務器反饋
// picUrls: this.data.picUrls,
// inputValue: this.data.inputValue,
// checkboxValue: this.data.checkboxValue
},
method: 'get', //
// header: {}, // 設置請求的 header
success: function(res){
wx.showToast({
title: res.data.data.msg,
icon: 'success',
duration: 2000
})
}
})
}else{
wx.showModal({
title: "請填寫反饋信息",
content: '看什么看，趕快填反饋信息，削你啊',
confirmText: "我我我填",
cancelText: "勞資不填",
success: (res) => {
if(res.confirm){
// 繼續填
}else{
console.log("back")
wx.navigateBack({
delta: 1 // 回退前 delta(默認為1) 頁面
})
}
}
})
}
},
// 選擇故障車周圍環境圖拍照或選擇相冊
bindCamera: function(){
wx.chooseImage({
count: 4,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
let tfps = res.tempFilePaths; // 圖片本地路徑
let _picUrls = this.data.picUrls;
for(let item of tfps){
_picUrls.push(item);
this.setData({
picUrls: _picUrls,
actionText: "+"
});
}
}
})
},
// 刪除選擇的故障車周圍環境圖
delPic: function(e){
let index = e.target.dataset.index;
let _picUrls = this.data.picUrls;
_picUrls.splice(index,1);
this.setData({
picUrls: _picUrls
})
}
})

復制代碼

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

其他章節
微信小程序開發之OFO共享單車——掃碼
微信小程序開發之OFO共享單車——單車報障頁
微信小程序開發之OFO共享單車——個人中心頁
微信小程序開發之OFO共享單車——錢包與充值

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

一级片大奶子_色又黄又爽18禁免费视频_热久久久久久久_久久久精品一区二区_日韩av不卡在线播放_精品国内自产拍在线观看视频

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