逐福科技
177-371-24501(同微信)

微信小程序开发之OFO共享单车,微信小程序选择器

2022-04-21 管理员
上一节实现了扫码，这一节我们开始实现点击单车报障控件之后跳转的页面：

页面分析
  • 页面可以勾选故障类型，所以需要用到复选框组件；可以选择上传或拍摄图片，所以要使用wx.chooseImage({})这个API选取图片；可以输入车牌号和备注，所以需要使用input输入组件。
  • 勾选类型，选择图片，输入备注信息完成后，后台需要获取这些输入的数据提交到服务器以获得反馈。
  • 必须勾选类型和选择周围环境图片才能提交，否则弹窗提示。可以选择多张图片，也可以取消选择的图片。


页面结构
  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对象里定义的数组，item代表数组的每一项，此处语法为循环输出数组的每一项并渲染到每一个复选框。下面还有类似语法 -->
  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">拍摄单车周围环境，便于维修师傅找车</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>
复制代码

这里用到的组件和指令有：
  • 复选框组件 <checkbox-group>
  • 单个复选框<checkbox>
  • 输入框组件<input>
  • 按钮组件<button>
  • 图标组件<icon>
  • 循环指令：wx:for = "itemValues" wx:key="item" 表示 ：
  • 循环一个数组itemValues，数组每一项为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. }
复制代码

页面数据逻辑
  1. // pages/wallet/index.js
  2. Page({
  3.   data:{
  4.     // 故障车周围环境图路径数组
  5.     picUrls: [],
  6.     // 故障车编号和备注
  7.     inputValue: {
  8.       num: 0,
  9.       desc: ""
  10.     },
  11.     // 故障类型数组
  12.     checkboxValue: [],
  13.     // 选取图片提示
  14.     actionText: "拍照/相册",
  15.     // 提交按钮的背景色，未勾选类型时无颜色
  16.     btnBgc: "",
  17.     // 复选框的value，此处预定义，然后循环渲染到页面
  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: "违规乱停",
  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. // 提交到服务器
  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请求就把这些数据传到服务器，这里用get请求模拟一下假装获得了服务器反馈
  107.           // picUrls: this.data.picUrls,
  108.           // inputValue: this.data.inputValue,
  109.           // checkboxValue: this.data.checkboxValue
  110.         },
  111.         method: 'get', //
  112.         // header: {}, // 设置请求的 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: "请填写反馈信息",
  124.         content: '看什么看，赶快填反馈信息，削你啊',
  125.         confirmText: "我我我填",
  126.         cancelText: "劳资不填",
  127.         success: (res) => {
  128.           if(res.confirm){
  129.             // 继续填
  130.           }else{
  131.             console.log("back")
  132.             wx.navigateBack({
  133.               delta: 1 // 回退前 delta(默认为1) 页面
  134.             })
  135.           }
  136.         }
  137.       })
  138.     }
  139.    
  140.   },
  141. // 选择故障车周围环境图 拍照或选择相册
  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. // 删除选择的故障车周围环境图
  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. })
复制代码


当你不熟悉一个函数或者说API返回的参数时（比如上述代码中的e参数），可以尝试去console.log一下，看看这个参数装载着什么数据。这对于学习一个新的API是非常好的一个方法

其他章节
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值
上一篇：微信小程序开发之OFO共享单车,微信小程序扫描二维码
下一篇：微信小程序开发之OFO共享单车,微信小程序个人中心页制作
相关资讯 Releva ntnews
解决方案 Solutions
相关热点 Hot spot
郑州快速建站：网站的站内优化怎么做
  1. 我们的优势
  2. 我们的实力
  3. 选择我们的理由
咨询电话（微信同号）

177-371-24501(同微信)

豫ICP备17049932号

Copyright © 2017-2022 版权所有 追风建站 Rights Reserved 技术支持：酷微科技

电话咨询 在线咨询 服务项目 SEO优化