Battery Level

{"name": "system.battery"}

import battery from '@system.battery'

var battery = require("@system.battery")

battery.getStatus({
    success:function(ret){console.log("handling success");}
})

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <div class="info-container ">
      <div class="info-item">
        <text class="title">level</text>
        <text class="result">{{batterInfoGeted ? batteryNum +'%' : 'please get current level'}}</text>
      </div>
      <div class="info-item">
        <text class="title"> charging</text>
        <text class="result">{{batterInfoGeted ? isCharging : 'please get charging status'}}</text>
      </div>
    </div>
    <div class="mlr-container row-center mt-item">
      <input type="button" class="btn-blue" value="Get Battery Info" onclick="getBatteryInfo" />
    </div>
  </div>
</template>
<style lang="sass">
.container {
  flex-direction: column;
  padding-bottom: 50px;
}
.mt-item {
  margin-top: 40px;
}
.info-container {
  margin-left: 32px;
  margin-right: 32px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fff;
  border-radius: 32px;
  flex-direction: column;
}
 .info-item {
  height: 120px;
  border-bottom-color: rgba(0, 0, 0, 0.05);;
}
 .title {
  flex-shrink: 0;
  font-size: 32px;
  color: rgba(0, 0, 0, 0.9);
}
.result {
  width: 100%;
  justify-content: flex-end;
  text-align: right;
  color: #999;
}
.mlr-container {
  margin-right:32px;
  margin-left:32px;
}
.mt-btn {
  margin-top: 32px;
}
.btn-blue {
    background-color: #0faeff;
    width: 100%;
    height: 80px;
    border-radius: 40px;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
  }
</style>
<script>
  import battery from '@system.battery';
  import prompt from '@system.prompt';
  module.exports = {
    public: {
      batteryNum: 0,
      isCharging: false,
      batterInfoGeted: false,
    },
    onInit: function () {
      this.$page.setTitleBar({ text: 'battery level'});
    },
    getBatteryInfo() {
      let that = this;
      battery.getStatus({
        success: function (ret) {
          that.batterInfoGeted = true;
          that.batteryNum = ret.level * 100;
          that.isCharging = ret.charging;
        },
        fail: function () {
          prompt.showToast({
            message: 'fail',
            duration: 2000,
            gravity: 'bottom'
          })
        }
      })
    }
  }
</script>