You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
3.7 KiB
139 lines
3.7 KiB
<template>
|
|
<view class="yingbing-battery">
|
|
<view class="yingbing-battery-wrapper" :style="{
|
|
'border-color': color
|
|
}">
|
|
<view class="yingbing-battery-content">
|
|
<view class="yingbing-battery-content-value" :style="{
|
|
'background-color': color,
|
|
width: value + 'px'
|
|
}">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="yingbing-battery-top" :style="{
|
|
'background-color': color
|
|
}"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const max = 16
|
|
export default {
|
|
inject: ['getColor'],
|
|
computed: {
|
|
color () {
|
|
return this.getColor()
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
value: max
|
|
}
|
|
},
|
|
// #ifdef APP-PLUS
|
|
beforeDestroy() {
|
|
if ( this.recevier ) {
|
|
plus.android.runtimeMainActivity().unregisterReceiver(this.recevier)
|
|
}
|
|
},
|
|
// #endif
|
|
created () {
|
|
this.getBattery()
|
|
},
|
|
methods: {
|
|
getBattery () {
|
|
// #ifdef H5
|
|
//window.navigator.getBattery只能在安全环境下（比如：https file:///url）使用，判断一下避免报错
|
|
window.navigator.getBattery && window.navigator.getBattery().then((res) => {
|
|
// 电池电量在0到1之间，因此我们将其乘以100得出百分比
|
|
this.value = res.level * max
|
|
});
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
wx.getBatteryInfo({
|
|
success: (res) => {
|
|
this.value = (res.level / 100) * max
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
if ( res.osName == 'android' ) {
|
|
const main = plus.android.runtimeMainActivity()
|
|
const Intent = plus.android.importClass('android.content.Intent');
|
|
this.recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
|
|
onReceive: (context, intent) => {
|
|
let action = intent.getAction();
|
|
if (action == Intent.ACTION_BATTERY_CHANGED) {
|
|
let level = intent.getIntExtra("level", 0); //电量 B5教程网
|
|
this.value = (level / 100) * max
|
|
main.unregisterReceiver(this.recevier)//销毁注册广播
|
|
//let voltage = intent.getIntExtra("voltage", 0); //电池电压
|
|
//let temperature = intent.getIntExtra("temperature", 0); //电池温度
|
|
//如需获取别的，在这里继续写，此代码只提供获取电量
|
|
}
|
|
}
|
|
});
|
|
const filter = plus.android.newObject('android.content.IntentFilter', Intent.ACTION_BATTERY_CHANGED);
|
|
main.registerReceiver(this.recevier, filter);
|
|
} else if ( res.osName == 'ios' ) {
|
|
const UIDevice = plus.ios.import("UIDevice");
|
|
const dev = UIDevice.currentDevice();
|
|
if (!dev.isBatteryMonitoringEnabled()) {
|
|
dev.setBatteryMonitoringEnabled(true);
|
|
}
|
|
let level = dev.batteryLevel();
|
|
this.value = level * max
|
|
}
|
|
}
|
|
})
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.yingbing-battery {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
align-items: center;
|
|
opacity: 0.5;
|
|
}
|
|
.yingbing-battery-wrapper {
|
|
width: 20px;
|
|
height: 9px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
padding: 1px;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
/* #endif */
|
|
}
|
|
.yingbing-battery-content {
|
|
flex: 1;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
/* #endif */
|
|
}
|
|
.yingbing-battery-content-value {
|
|
height: 5px;
|
|
}
|
|
.yingbing-battery-content-value-text {
|
|
font-size: 8px;
|
|
}
|
|
.yingbing-battery-top {
|
|
width: 2px;
|
|
height: 5px;
|
|
}
|
|
</style>
|