微信小程序开发之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共享单车——钱包与充值

第二部分：如何开通一个小商店