小程序OFO编写计费页

编写计费页

1.页面结构
<!--pages/billing/index.wxml-->
<view class="container">
    <view class="number">
        <text>当前单车编号: {{number}}</text>
    </view>
    <view class="time">
        <view class="time-title">
            <text>{{billing}}</text>
        </view>
        <view class="time-content">
            <text>{{hours}}:{{minuters}}:{{seconds}}</text>
        </view>
    </view>

    <view class="endride">
        <button type="warn" disabled="{{disabled}}" bindtap="endRide">结束骑行</button>
        <button type="primary" bindtap="movetoIndex">回到地图</button>
    </view>
</view>
2.页面样式
.container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
}
.number,.endride{
    padding: 60rpx 0;
    flex: 2;
    width: 100%;
    text-align: center;
}
.time{
    text-align: center;
    width: 100%;
    flex: 6;
}
.time .time-content{
    font-size: 100rpx;
}
.endride button{
    width: 90%;
    margin-top: 40rpx;
}
3.页面数据逻辑
// pages/billing/index.js
Page({
  data:{
    hours: 0,    minuters: 0,    seconds: 0,    billing: "正在计费"
  },// 页面加载
  onLoad:function(options){
    // 获取车牌号，设置定时器
    this.setData({
      number: options.number,      timer: this.timer
    })
    // 初始化计时器
    let s = 0;
    let m = 0;
    let h = 0;
    // 计时开始
    this.timer = setInterval(() => {
      this.setData({
        seconds: s++
      })
      if(s == 60){
        s = 0;
        m++;
        setTimeout(() => {         
          this.setData({
            minuters: m
          });
        },1000)      
        if(m == 60){
          m = 0;
          h++
          setTimeout(() => {         
            this.setData({
              hours: h
            });
          },1000)
        }
      };
    },1000)  
  },// 结束骑行，清除定时器
  endRide: function(){
    clearInterval(this.timer);
    this.timer = "";
    this.setData({
      billing: "本次骑行耗时",      disabled: true
    })
  },// 携带定时器状态回到地图
  movetoIndex: function(){
    // 如果定时器为空
    if(this.timer == ""){
      // 关闭计费页跳到地图
      wx.redirectTo({
        url: '../index/index'
      })
    // 保留计费页跳到地图
    }else{
      wx.navigateto({
        url: '../index/index?timer=' + this.timer
      })
    }
  }
})