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

—— 2017 ——
12/20
00:00

来源：

作者：未知

阅读：0

栏目：小程序开发

2017/12/20 0:00:00 来源：不详 作者：未知
上一节实现了扫码，这一节我们开始实现点击单车报障控件之后跳转的页面：

页面分析
  • 页面可以勾选故障类型，所以需要用到复选框组件；可以选择上传或拍摄图片，所以要使用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共享单车——钱包与充值
【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！



▼点击进入科汛官网了解更多



热门标签
微信小程序开发 微信小程序
上/下篇
换一换相关推荐
精选内容
热点精选
产品服务
商家服务
关于我们

科汛专注于在线教育软件及私域社交电商SaaS平台解决方案，让商业经营更简单。

地址：厦门市观音山国际商务中心6号楼606号

电话：400-008-0263/0596-2218051

邮箱：partner@kesion.com

关注我们

Copyright©2006-2022厦门科汛软件有限公司 All Rights Reserved.

闽ICP备06009871号

闽公网安备35020302001540号

国家高新技术认定企业

国家高新技术认定企业

ISO20000

ISO20000

ISO27001

ISO27001

OHSAS18001

OHSAS18001

© 2006-2024 厦门科汛软件有限公司 版权所有

ICP证闽B2-20190777 闽ICP备06009871号-1 闽公网安备 35020302001540号 统一社会信用代码：91350206MA2XN2XQ4A 国家高新技术企业编号：GR201735100465 软件企业证书号：厦RQ-2017-0034 软件产品证书号：厦RC-2017-0005 认证联盟企业编号：928180109031687687593 国际权威认证：信息技术服务管理体系标准（ISO 20000） 信息安全管理体系国际认证（ISO/IEC 27001）
在线咨询 电话咨询