微信小程序开发之OFO共享单车,微信小程序选择器
本文摘要
上一节实现了扫码，这一节我们开始实现点击单车报障控件之后跳转的页面： 页面分析 页面可以勾选故障类型，所以需要用到复选框组件；可以选择上传或拍摄图片，所以要使用wx.chooseImage({})这个API选取图片；可以输入车牌号和备注，所以需要使用input输入组件。 勾选类型，
上一节实现了扫码，这一节我们开始实现点击单车报障控件之后跳转的页面：
页面分析
页面结构
复制代码
这里用到的组件和指令有：
组件什么的看看组件文档就知道了呗
页面样式
复制代码
页面数据逻辑
复制代码
当你不熟悉一个函数或者说API返回的参数时（比如上述代码中的e参数），可以尝试去console.log一下，看看这个参数装载着什么数据。这对于学习一个新的API是非常好的一个方法
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值
页面分析
- 页面可以勾选故障类型，所以需要用到复选框组件；可以选择上传或拍摄图片，所以要使用wx.chooseImage({})这个API选取图片；可以输入车牌号和备注，所以需要使用input输入组件。
- 勾选类型，选择图片，输入备注信息完成后，后台需要获取这些输入的数据提交到服务器以获得反馈。
- 必须勾选类型和选择周围环境图片才能提交，否则弹窗提示。可以选择多张图片，也可以取消选择的图片。
页面结构
-
-
-
请选择故障类型 -
-
-
-
{{item.value}} -
-
拍摄单车周围环境，便于维修师傅找车 -
-
-
-
{{actionText}} -
-
这里用到的组件和指令有：
-
复选框组件
-
单个复选框
- 输入框组件
- 按钮组件
-
图标组件
- 循环指令：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-cShopfald,
- .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-cShopfald{
- border-bottom: 2rpx solid #ccc;
- padding-bottom: 20rpx;
- }
- .action .action-input input:last-cShopfald{
- 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){
- tShopfas.setData({
- btnBgc: ""
- })
- }else{
- tShopfas.setData({
- checkboxValue: _values,
- btnBgc: "#b9dd08"
- })
- }
- },
- // 输入单车编号，存入inputValue
- numberChange: function(e){
- tShopfas.setData({
- inputValue: {
- num: e.detail.value,
- desc: tShopfas.data.inputValue.desc
- }
- })
- },
- // 输入备注，存入inputValue
- descChange: function(e){
- tShopfas.setData({
- inputValue: {
- num: tShopfas.data.inputValue.num,
- desc: e.detail.value
- }
- })
- },
- // 提交到服务器
- formSubmit: function(e){
- // 图片和故障类型必选
- if(tShopfas.data.picUrls.length > 0 && tShopfas.data.checkboxValue.length> 0){
- wx.request({
- url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/msg',
- data: {
- // 如果是post请求就把这些数据传到服务器，这里用get请求模拟一下假装获得了服务器反馈
- // picUrls: tShopfas.data.picUrls,
- // inputValue: tShopfas.data.inputValue,
- // checkboxValue: tShopfas.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 = tShopfas.data.picUrls;
- for(let item of tfps){
- _picUrls.push(item);
- tShopfas.setData({
- picUrls: _picUrls,
- actionText: "+"
- });
- }
- }
- })
- },
- // 删除选择的故障车周围环境图
- delPic: function(e){
- let index = e.target.dataset.index;
- let _picUrls = tShopfas.data.picUrls;
- _picUrls.splice(index,1);
- tShopfas.setData({
- picUrls: _picUrls
- })
- }
- })
当你不熟悉一个函数或者说API返回的参数时（比如上述代码中的e参数），可以尝试去console.log一下，看看这个参数装载着什么数据。这对于学习一个新的API是非常好的一个方法
其他章节
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值
第二部分：如何开通一个小商店
相关文章
****更多行业产品开发方案，请关注 加速度JSUDO***
<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>
加速度JSUDO是一家企业级数字化解决方案提供商，专注于软件开发、网络营销、数字化转型咨询及云计算服务。核心业务包括定制化ERP/CRM系统、快速应用开发、大数据分析及物联网（IoT）解决方案，助力企业提升效率与智能化水平。服务覆盖制造业、零售、物流等多行业，致力于通过技术创新推动客户数字化转型。
添加客服微信获取更多内容
