englishread-front/uni_modules/yingbing-ReadPage/components/battery/battery.vue

<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>