luoshan_web/pages/tabbar/index/index.vue

<template>
	<view class="container">
		<view class="banner">
			<swiper v-if='bannerList.length != 0' style="height: 500rpx;">
				<swiper-item v-for='(item,index) in bannerList' :key="index">
					<u-image :src='item.image' mode="widthFix"></u-image>
				</swiper-item>
			</swiper>
			<u-empty v-else text="banner图为空" mode="list" style="margin: 50rpx;"></u-empty>
			<view class="inform_div mim-flex-wrap" :style="{height:menuButtonHeight+'rpx',top:menuButtonTop+'rpx'}"
				@click="goPage('inform')">
				<view class="mim-flex-wrap-right" style="position: relative;">
					<u-image src="@/static/icon/inform.png" width="36rpx" height="38rpx"></u-image>
					<!-- <text class="mim-font-16 message">消息</text> -->
					<i class="icon_msg" v-if="isRead"></i>
				</view>
			</view>
		</view>
		<view class="mim-view">
			<view>
				<view class="mim-font-16 h">便民服务</view>

				<view class="storm"
					style="background-image: url('http://api.jczl.site.xmnk.cn//storage/file/account/RkXRuVCsbgNDqBMPhzLbkraE2SJbIxjK.png');"
					@click="goPage('command')">
					<view class="mim-flex-wrap-left">
						<view class="mim_img_div mim-flex-wrap">
							<u-image src="../../../static/icon/file.png" width="40rpx" height="44rpx"></u-image>
						</view>
						<view class="mim-flex-vertical" style="margin-left: 24rpx;">
							<view class="mim-font-14 h">指挥交办</view>
							<view class="mim-font-12">服务于民 方便于民</view>
						</view>
					</view>
				</view>

				<view class="storm" v-if="admin"
					style="background-image: url('http://api.jczl.site.xmnk.cn//storage/file/account/BnaPPLhdfcXqvzVue5t8UAD6ETmaMYYA.png');"
					@click="goPage('throughTrain')">
					<view class="mim-flex-wrap-left">
						<view class="mim_img_div mim-flex-wrap">
							<u-image src="../../../static/icon/file_1.png" width="40rpx" height="44rpx"></u-image>
						</view>
						<view class="mim-flex-vertical" style="margin-left: 24rpx;">
							<view class="mim-font-14 h">社情民意直通车</view>
							<view class="mim-font-12">党群连心 有呼必应</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
				statusBarHeight: '',
				navHeight: '',
				menuButtonHeight: '',
				menuButtonTop: '',
				isRead: false,
				admin: false
			};
		},
		onLoad() {
			// 设备系统信息
			// #ifdef MP-WEIXIN
			let systemInfomations = uni.getSystemInfoSync()
			// 机型适配比例系数
			let scaleFactor = 750 / systemInfomations.windowWidth
			// 状态栏高度（以 rpx 为单位）
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
			// 胶囊高度（以 rpx 为单位）
			let menuButtonHeight = menuButtonInfo.height * scaleFactor
			// 状态栏高度（以 rpx 为单位）
			let statusBarHeight = systemInfomations.statusBarHeight //rpx
			// 胶囊按钮（右上角按钮）相对于可视区域顶部的上边距（即距离可视区域顶部的高度）
			let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx
			// 导航栏高度（以 rpx 为单位）
			var navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
			this.navHeight = navHeight - 40
			this.statusBarHeight = statusBarHeight
			this.menuButtonHeight = menuButtonHeight
			this.menuButtonTop = menuButtonTop
			console.log(menuButtonHeight, menuButtonTop)
			// #endif

			let roles = this.userRoles
			let arr = roles.filter(item => {
				return item.name == "admin"
			})
			if (arr.length > 0) {
				this.admin = true
			} else {
				this.admin = false
			}
		},
		onShow() {
			const token = uni.getStorageSync('token')
			if (!token) {
				this.$u.route({
					type: 'reLaunch',
					url: '/pages/login/login'
				})
			} else {
				this.homeFn()
			}
		},
		methods: {
			goPage(e) {
				switch (e) {
					case 'inform': //我的消息页面
						this.$u.route('/pages/info/info');
						break;
					case 'command': //指挥交办页面
						this.$u.route('/pages/command/command');
						break;
					case 'throughTrain': //社情民意直通车
						this.$u.route('/pages/throughTrain/throughTrain');
						break;
					default:
						console.log('Unknown fruit');
						break;
				}
			},

			//获取主页信息
			async homeFn() {
				const res = await this.$u.api.home()
				this.isRead = res.data.isRead
				this.bannerList = res.data.bannersS
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.container {
			.banner {
				width: 100%;
				position: relative;

				.inform_div {
					position: absolute;
					z-index: 1;
					left: 24rpx;

					.message {
						color: #fff;
						margin-left: 16rpx;
						font-weight: bold;
					}

					.icon_msg {
						width: 20rpx;
						height: 20rpx;
						background: #DE2E27;
						border-radius: 50%;
						position: absolute;
						z-index: 1;
						top: 0;
						left: 22rpx;
					}
				}
			}

			.mim-view {
				margin-top: -24rpx;

				.h {
					font-weight: bold;
				}

				.storm {
					display: flex;
					padding: 0 24rpx;
					align-items: center;
					margin-top: 24rpx;
					height: 212rpx;
					border-radius: 16rpx;
					opacity: 1;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100% 100%;

					.mim_img_div {
						width: 84rpx;
						height: 84rpx;
						opacity: 1;
						background: #FFFFFF;
						border-radius: 50%;
					}

					.h {
						margin-bottom: 4rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>