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: '',
				employeeId: ''
			}
		},
		onShow() {
			let userInfo = uni.getStorageSync('mobileInfo') ? JSON.parse(uni.getStorageSync('mobileInfo')) : null;
			if(userInfo && userInfo.employeeId != this.employeeId){
				this.url = 'http://192.168.3.109:89?employeeId=' + userInfo.employeeId;
			}else{
				this.url = 'http://192.168.3.109:89?employeeId=';
			}
		},
		onLoad() {
		},
		methods: {
			// 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>