qilu_hospital_app/pages/index/index.vue

<template>
	<view>
		<web-view :webview-styles="{height:'90%'}" ref="webview" fullscreen="false" :src="url" @message="handlePostMessage" @onPostMessage="handlePostMessage"></web-view>
		<cover-view @click="onAutoStart" class="act-btn">
			<cover-view class="act-btn-item">
				<cover-image src="../../static/right_icon1.png" class="img" @click="goMessage"></cover-image>
				<cover-view @click="goMessage">消息</cover-view>
			</cover-view>
			<cover-view class="act-btn-item">
				<cover-image src="@/static/right_icon2.png" class="img" @click="goRecord"></cover-image>
				<cover-view @click="goRecord">记录</cover-view>
			</cover-view>
			<cover-view class="act-btn-item">
				<cover-image src="@/static/right_icon3.png" class="img" @click="goSetting"></cover-image>
				<cover-view @click="goSetting">设置</cover-view>
			</cover-view>
		</cover-view>
		<!-- 上报工具栏 -->
		<cover-view class="foot-tool">
			<cover-view class="foot-tool-item">
				<cover-image src="@/static/foot-icon1.png" class="img" @click="goVoiceReport"></cover-image>
				<cover-view @click="goVoiceReport">语音上报</cover-view>
			</cover-view>
			<cover-view class="foot-tool-item">
				<cover-image src="@/static/foot-icon2.png" class="img" @click="goPositionReport"></cover-image>
				<cover-view @click="goPositionReport">位置上报</cover-view>
			</cover-view>
			<cover-view class="foot-tool-item">
				<cover-image src="@/static/foot-icon3.png" class="img" @click="goPatrolReport"></cover-image>
				<cover-view @click="goPatrolReport">巡更上报</cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keepAlive: null,
				url: '',
			}
		},
		onLoad() {
			this.url = 'http://192.168.3.109:89?appId=123'
			// this.keepAlive = uni.requireNativePlugin('Ba-KeepAliveSuit')
			// setTimeout(() => {
			// 	this.onKeep();
			// }, 5000);
			// setTimeout(() => {
			// 	this.onShowNotify();
			// }, 10000);
		},
		methods: {
			// webview向外部发送消息
			handlePostMessage: function(data) {
				console.log("接收到消息：" + JSON.stringify(data.detail));
			},
			// 调用 webview 内部逻辑
			evalJs: function() {
				console.log(JSON.stringify(this.$refs.webview))
				// this.$refs.webview.children();
				// this.$refs.webview[0].evalJs("addMark(123)`");
			},
			onKeep() { 
				//通用保活
				this.keepAlive.onKeep({
						//channelId: "Ba-KeepAlive",
						//channelName: "Ba-KeepAlive",
						title: "测试",
						content: "常驻通知描述",
					},
					(res) => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			onAutoStart() { //去设置自启动、后台运行
				this.keepAlive.onAutoStart(
					(res) => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			requestIgnoreBattery() { //申请加入电池优化白名单
				this.keepAlive.requestIgnoreBattery(
					res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			goIgnoreBattery() { //跳转到电池优化设置页
				this.keepAlive.goIgnoreBattery(
					res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			isIgnoringBattery() { //是否加入电池优化白名单
				this.keepAlive.isIgnoringBattery(
					res => {
						console.log(res);
						// if (res.data) {
						//  this.msgList.unshift(JSON.stringify(res.data))
						//  this.msgList.unshift(dateUtil.now())
						// }
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			onShowNotify() { //常驻通知保活
				this.keepAlive.onShowNotify({
						//channelId: "Ba-KeepAlive",
						//channelName: "Ba-KeepAlive",
						ID: 99,
						title: "一楼202室无线入侵",
						content: "一楼202室无线入侵报警",
					},
					(res) => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			onCancelNotify() { //取消常驻通知保活
				this.keepAlive.onCancelNotify({
						//channelId: "Ba-KeepAlive",
						//channelName: "Ba-KeepAlive",
						//ID:99
						//title: "测试",
						//content: "常驻通知描述",
					},
					(res) => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						})
					});
			},
			//语音上报
			goVoiceReport() {
				uni.navigateTo({
					url: "/pages/voiceRecord/report"
				})
			},
			//位置上报
			goPositionReport() {
				uni.navigateTo({
					url: "/pages/positionRecord/report"
				})
			},
			//巡更上报
			goPatrolReport() {
				uni.navigateTo({
					url: "/pages/patrolRecord/report"
				})
			},
			//设置
			goSetting() {
				uni.navigateTo({
					url: "/pages/setting/index"
				})
			},
			//消息
			goMessage() {
				uni.navigateTo({
					url: "/pages/message/list"
				})
			},
			//记录
			goRecord() {
				uni.navigateTo({
					url: "/pages/voiceRecord/list"
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100%;
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		background-color: aliceblue;
	}
	.act-btn{
		position: fixed;
		width: 67upx;
		height: 259upx;
		right: 30upx;
		top: 38upx;
		background: #FFFFFF;
		box-shadow: 1px 4px 6px 1px rgba(0,0,0,0.22);
		border-radius: 20upx;
		padding: 10upx;
		.act-btn-item{
			padding: 6upx;
			border-bottom: 1px solid #D6D8DF;
			font-size: 20upx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #031945;
			line-height: 28upx;
			text-align: center;
			.img{
				width: 44upx;
				height: 44upx;
				margin: 0 auto;
			}
		}
	}
	.foot-tool{
		position: fixed;
		height: 230upx;
		left: 30upx;
		right: 30upx;
		bottom: 157upx;
		background-color: #fff;
		border-radius: 40upx;
		overflow: hidden;
		.foot-tool-item{
			float: left;
			width: 33.3%;
			color: #031945;
			font-size: 28upx;
			text-align: center;
			.img{
				width: 100upx;
				height: 100upx;
				margin: 40upx auto 20upx;
			}
		}
	}
</style>