1.页面布局
<!--pages/scanresult/index.wxml--> <view class="container"> <view class="password-title"> <text>开锁密码</text> </view> <view class="password-content"> <text>{{password}}</text> </view> <view class="tips"> <text>请使用密码解锁,{{time}}s后开始计费</text> <view class="tips-action" bindtap="moveToWarn"> 车辆有问题? <text class="tips-href">回首页去车辆报障</text> </view> </view> </view>2.页面样式
.container{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background-color: #fff; } .password-title,.tips{ width: 100%; flex: 1; text-align: center; padding: 60rpx 0; } .password-content{ width: 100%; flex: 8; text-align: center; font-size: 240rpx; font-weight: 900; } .tips{ font-size: 32rpx; } .tips .tips-action{ margin-top: 20rpx; } .tips .tips-href{ color: #b9dd08 }3.页面数据逻辑
// pages/scanresult/index.js Page({ data:{ time: 9 // 默认计时时长,这里设短一点,用于调试,ofo app是90s }, // 页面加载 onLoad:function(options){ // 获取解锁密码 this.setData({ password: options.password }) // 设置初始计时秒数 let time = 9; // 开始定时器 this.timer = setInterval(() => { this.setData({ time: -- time }); // 读完秒后携带单车号码跳转到计费页 if(time = 0){ clearInterval(this.timer) wx.redirectTo({ url: '../billing/index?number=' + options.number }) } },1000) }, // 点击去首页报障 moveToWarn: function(){ // 清除定时器 clearInterval(this.timer) wx.redirectTo({ url: '../index/index' }) } })注意:这里的this.timer不会被传参到pages/index/index.js里的onload函数里,被传参到首页的定时器是计费页的定时器,后面会讲到
tips: onload函数参数说明: options的值是扫码成功后请求服务器获取的单车编号和开锁密码
// pages/index/index.js // 点击立即用车,判断当前是否正在计费 case 2: if(this.timer === "" || this.timer === undefined){ // 没有在计费就扫码 wx.scanCode({ success: (res) => { // 正在获取密码通知 wx.showLoading({ title: '正在获取密码', mask: true }) // 请求服务器获取密码和车号 wx.request({ url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/password', data: {}, method: 'GET', success: function(res){ // 请求密码成功隐藏等待框 wx.hideLoading(); // 携带密码和车号跳转到密码页 wx.redirectTo({ url: '../scanresult/index?password=' + res.data.data.password + '&number=' + res.data.data.number, success: function(res){ wx.showToast({ title: '获取密码成功', duration: 1000 }) } }) } }) } }) // 当前已经在计费就回退到计费页 }else{ wx.navigateBack({ delta: 1 }) } break; // pages/scanresult/index.js onload: function(options){ console.log(options); // { password: "", number: "" } }
本文由:简书 作者:简书发表,转载请注明来源!