jiaoyuju_fawen/bureau-of-education/pages/tabbar/index/index.vue

<template>
	<view class="index">
		<view class="headTop">
			<image class="pic_hp_tbbg" src="/static/img/pic_hp_tbbg@2x.png" mode=""></image>
			<view class="userInfo">
				<view :style="{height:statusBarHeight+'px'}"></view>
				<view class="title" :style="{height:statusBarHeight2+'px'}"><text>潜山市教育局在线收发文系统</text></view>
				<view class="content">
					<image class="uImg" v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
					<image class="uImg" v-else src="/static/img/icon_hp_hp.png" mode=""></image>
					<view class="userText">
						<view class="nameT"><text class="n">{{userInfo.userName}}</text>您好！</view>
						<view class="toDay">
							<text class="j">今天是 </text><text class="d">{{toDay.time}} {{toDay.riqi}}</text> <text class="g">{{toDay.gongzuo}}</text>
						</view>
					</view>
				</view>
				<view class="listItem">
					<view class="item" @click="addresseeY(0)">
						<view class="name">今日收文</view>
						<view class="num">
							<view class="n">{{messageReceiveData.todayReceipt}}</view>
							<view class="t">条</view>
						</view>
					</view>
					<view class="item" @click="addresseeY(0)">
						<view class="name">未读收文</view>
						<view class="num">
							<view class="n">{{messageReceiveData.unread}}</view>
							<view class="t">条</view>
						</view>
					</view>
					<view class="item" v-if="roles.indexOf('user-admin') != -1" @click="addresseeF()">
						<view class="name">今日发文</view>
						<view class="num">
							<view class="n">{{messageReceiveData.toDaySend}}</view>
							<view class="t">条</view>
						</view>
					</view>
					<view class="item" @click="addresseeY(1)">
						<view class="name">已读收文</view>
						<view class="num">
							<view class="n">{{messageReceiveData.read}}</view>
							<view class="t">条</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="gongju">
			<view class="item" @click="addPost()" v-if="roles.indexOf('user-admin') != -1">
				<image class="bg" src="/static/img/pic_hp_bgxzfw.png" mode=""></image>
				<view class="box">
					<image class="iocn" src="/static/img/icon_hp_xzfw.png" mode=""></image>
					<view class="text">新增发文</view>
				</view>
			</view>
			<view class="item" @click="addresseeY(0)">
				<image class="bg" src="/static/img/pic_hp_bgsw.png" mode=""></image>
				<view class="box">
					<image class="iocn" src="/static/img/icon_hp_sw.png" mode=""></image>
					<view class="text">收文</view>
				</view>
			</view>
			<view class="item" @click="archive()" v-if="roles.indexOf('user-admin') != -1">
				<image class="bg" src="/static/img/pic_hp_bgdgd.png" mode=""></image>
				<view class="box">
					<image class="iocn" src="/static/img/icon_hp_dgd.png" mode=""></image>
					<view class="text">待归档</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setNav:{
					backgroundColor:'',  //背景色
					color:'#fff',  //字体颜色
					bold: true,
					size: '36',
					backColor: '#ffff',
					immersive : true,
					isdisPlayNavTitle: false, //是否显示返回按钮
					navTitle:'潜山市教育局在线收发文系统' //导航标题
				},
				statusBarHeight: 0,
				statusBarHeight2: 0,
				userInfo: {},
				toDay: {
					time: this.$u.timeFormat(new Date(), 'yyyy年mm月dd日'),
					riqi: '星期一',
					gongzuo: '工作日'
				},
				messageReceiveData: {},
				roles: []
			}
		},
		onLoad() {
		
		},
		onShow ()  {
			// this.init()
			this.getByTableName()
			this.init()
		},
		methods:{
			init () {
				this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				this.statusBarHeight2 = uni.getSystemInfoSync().platform == 'ios' ? 44 : 48
				this.getInfo()
				switch (new Date().getDay()){
						case 1:
							this.toDay.riqi = '星期一'
							this.toDay.gongzuo = '工作日'
							break;
						case 2:
							this.toDay.riqi = '星期二'
							this.toDay.gongzuo = '工作日'
							break;
						case 3:
							this.toDay.riqi = '星期三'
							this.toDay.gongzuo = '工作日'
							break;
						case 4:
							this.toDay.riqi = '星期四'
							this.toDay.gongzuo = '工作日'
							break;
						case 5:
							this.toDay.riqi = '星期五'
							this.toDay.gongzuo = '工作日'
							break;
						case 6:
							this.toDay.riqi = '星期六'
							this.toDay.gongzuo = '工作日'
							break;
						case 0:
							this.toDay.riqi = '星期日'
							this.toDay.gongzuo = '工作日'
							break;
						default:
							this.toDay.riqi = '星期一'
							this.toDay.gongzuo = '工作日'
							break;
					}
			},
			async getInfo () {
				let that = this
				let res = await that.$u.get('system/user/getInfo')
				that.userInfo = res.user
				that.roles = res.roles
				uni.setStorageSync('userInfo', JSON.stringify(that.userInfo));
				uni.setStorageSync('roles', JSON.stringify(res.roles));
				this.getMessageReceive()
			},
			async getByTableName () {
				let res = await this.$u.get('boman-web-core/p/cs/table/getByTableName/boman_message')
				uni.setStorageSync('byTableInfo', JSON.stringify({
					id: res.data.id,
					tableName: res.data.tableName
				}));
			},
			async getMessageReceive () {
				let that = this
				let res = await that.$u.get(`boman-web-core/messageReceive/index/${that.userInfo.id}`)
				that.messageReceiveData = res.data
			},
			archive() {
				uni.navigateTo({
					url: '/pages/indexView/archive/index'
				})
			},
			addressee() {
				uni.navigateTo({
					url: '/pages/indexView/addressee/index'
				})
			},
			addresseeF() {
				uni.switchTab({
					url: '/pages/tabbar/post/index'
				})
			},
			addresseeY(type) {
				uni.setStorage({
					key: 'addresseeY',
					data: type,
					success: async function() {
						uni.switchTab({
							url: '/pages/tabbar/addressee/index'
						})
					}
				})
				
			},
			addPost() {
				uni.navigateTo({
					url: '/pages/indexView/addPost/index'
				})
			},
			postList() {
				uni.navigateTo({
					url: '/pages/indexView/postList/index'
				})
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
.headTop{
	position: relative;
	.pic_hp_tbbg{
		width: 100%;
		height: 680rpx;
	}
	
	.userInfo{
		position: absolute;
		top: 0;
		z-index: 1;
		left: 0;
		width: 100%;
		.title{
			color: #FFFFFF;
			font-size: 31rpx;
			font-weight: 700;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			
		}
		.content{
			padding: 20rpx 30rpx;
			display: flex;
			.uImg{
				width: 70rpx;
				height: 70rpx;
				border-radius: 100%;
			}
			.userText{
				flex: 1;
				margin-left: 30rpx;
				.nameT{
					font-size: 28rpx;
					color: #FFFFFF;
					.n{
						font-size: 36rpx;
						font-weight: 700;
						padding-right: 30rpx;
					}
				}
				.toDay{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-top: 30rpx;
					.j{
						opacity: 0.8;
					}
					.d{
						font-weight: 700;
						margin: 0 20rpx;
					}
					.g{
						font-size: 22rpx;
						background: #116cb9;
						width: 109rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						border-radius: 10rpx 24rpx 24rpx 24rpx;
						box-shadow: 0px 0px 4px 0px #116cb9;
					}
				}
			}
		}
		.listItem{
			display: flex;
			align-items: center;
			padding: 30rpx;
			flex-wrap: wrap;
			.item{
				flex: 0 0 50%;
				margin-bottom: 30rpx;
				.name{
					color: #FFFFFF;
					font-size: 28rpx;
					text-align: center;
				}
				.num{
					display: flex;
					align-items: flex-end;
					color: #FFFFFF;
					justify-content: center;
					margin-top: 20rpx;
					.n{
						font-size: 49rpx;
						font-weight: 700;
					}
					.t{
						font-size: 25rpx;
						margin-bottom: 10rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
}
.gongju{
	display: flex;
	align-items: center;
	margin: 43rpx 30rpx;
	justify-content: space-between;
	.item{
		width: 208rpx;
		height: 208rpx;
		position: relative;
		padding: 0 30rpx;
		.bg{
			width: 208rpx;
			height: 208rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		.box{
			position: absolute;
			width: 208rpx;
			height: 208rpx;
			top: 50%;
			left: 50%;
			margin-top: 22rpx;
			transform: translate(-50%,-50%);
			.iocn{
				width: 117rpx;
				height: 119rpx;
				margin: auto;
			}
			.text{
				color: #FFFFFF;
				font-size: 31rpx;
				font-weight: 700;
				text-align: center;
			}
		}
	}
}
</style>