小程序ofo编写维修报障页

编写维修报障页

1.页面结构
<!--pages/warn/index.wxml-->
<view class="container">
    <view class="choose">
        <view class="title">请选择故障类型</view> 
        <checkBox-group bindchange="checkBoxChange" class="choose-grids">
            <!-- itemsValue是data对象里定义的数组，item代表数组的每一项，此处语法为循环输出数组的每一项并渲染到每一个复选框。下面还有类似语法 -->
            <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>
2.页面样式
/* 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;
}
3.页面数据逻辑
// pages/wallet/index.js
Page({
  data:{
    // 故障车周围环境图路径数组
    picUrls: [],    // 故障车编号和备注
    inputValue: {
      num: 0,      desc: ""
    },    // 故障类型数组
    checkBoxValue: [],    // 选取图片提示
    actionText: "拍照/相册",    // 提交按钮的背景色，未勾选类型时无颜色
    btnBgc: "",    // 复选框的value，此处预定义，然后循环渲染到页面
    itemsValue: [
      {
        checked: false,        value: "私锁私用",        color: "#b9dd08"
      },      {
        checked: false,        value: "车牌缺损",        value: "轮胎坏了",        value: "车锁坏了",        value: "违规乱停",        value: "密码不对",        value: "刹车坏了",        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: {
          // picUrls: this.data.picUrls,          // inputValue: this.data.inputValue,          // checkBoxValue: this.data.checkBoxValue
        },        method: 'get', // POST
        // 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
    })
  }
})