微信小程序

小程序OFO编写扫码之后的获取密码页

编写扫码之后的获取密码页(scanresult文件夹)

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: "" }
}


(0)
分享:

本文由:简书 作者:简书发表,转载请注明来源!

标签:

相关阅读