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 class="act-btn">
			<cover-view class="act-btn-item" style="padding-top: 20upx;">
				<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 {
				url: 'http://192.168.3.109:89',
				employeeId: '',
				lat: '',
				lng: '',
				setInterval: null
			}
		},
		onShow() {
			let userInfo = uni.getStorageSync('mobileInfo') ? JSON.parse(uni.getStorageSync('mobileInfo')) : null;
		},
		onLoad() {
			this.setInterval = setInterval(() => {
				this.getLocation();
			}, 10000)
		},
		onUnload() {
			this.setInterval && clearInterval(this.setInterval);
			this.setInterval = null;
		},
		methods: {
			//系统定位
			getLocation() {
				// this.url = 'http://192.168.3.109:89#lat=31.37547666459004&lng=120.61959647686012';
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	altitude: true,
				// 	success: (res) => {
				// 		console.log('当前位置：', res);
				// 		if(this.lat != res.latitude || this.lng != res.longitude){
				// 			console.log(this.url)
				// 			this.url = 'http://192.168.3.109:89#lat='+res.latitude+'&lng='+res.longitude;
				// 		}
				// 		this.lat = res.latitude;
				// 		this.lng = res.longitude;
				// 	}
				// });
			},
			// webview向外部发送消息
			handlePostMessage: function(data) {
				console.log("接收到消息：", JSON.stringify(data.detail));
			},
			//语音上报
			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>