编写维修报障页
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 }) } })
