epidemic_apply/pages/index/index.vue

<template>
	<view class="">
		<view class="header-wrap">
			<view class="header f-padding">
				<view class="header-item header-title">
					欢迎登录 
					<view class="message" @click="openPage('pages/center/message/message')">
						<u-icon name="bell"></u-icon>
						<u-badge type="error" class="badge" :count="newsTotal" :offset='[-10,-10]'></u-badge>
					</view>
				</view>
				<!-- <view class="header-item header-con">{{vuex_user.userName}} / {{vuex_user.userPost}}</view> -->
				<view class="u-rela u-m-t-30 u-m-b-24">
					<u-row justify="center">
						<u-col span="4" text-align="center" @click="openPage('pages/apply/apply','')">
							<u-icon size="90" name="../../static/img/apply.png"></u-icon>
							<view class="name">申请物资</view>
						</u-col>
						<u-col span="4" text-align="center" @click="openPage()">
							<u-icon size="90" name="../../static/img/signin.png"></u-icon>
							<view class="name">领取签到</view>
						</u-col>
						<u-col span="4" text-align="center" @click="openPage('pages/apply/applylist/applylist','0')">
							<u-icon size="90" name="../../static/img/query.png"></u-icon>
							<view class="name">申请记录</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view class="statistics">
			<!-- 设备状态 1-已离线 2-运行中 4-保养中 -->
			<u-row justify="center">
				<u-col span="4" text-align="center" @click="openPage('pages/equipmentList/equipmentList','')">
					<view class="count">{{deviceStatisData.totalCount||"-"}}</view>
					<view class="name">申请中</view>
				</u-col>
				<u-col span="4" text-align="center" @click="openPage('pages/equipmentList/equipmentList','1')">
					<view class="count">{{deviceStatisData.offlineCount||"-"}}</view>
					<view class="name">已驳回</view>
				</u-col>
				<u-col span="4" text-align="center" @click="openPage('pages/equipmentList/equipmentList','4')">
					<view class="count">{{deviceStatisData.repairCount||"-"}}</view>
					<view class="name">已领取</view>
				</u-col>
			</u-row>
		</view>
		<view class="block-wrap">
			<view class="title">其他</view>
			<view class="menu-list u-flex u-flex-wrap u-row-left">
				<view class="menu-item" @click="menuClick(item)" v-for="(item,index) in storeMenuList" :key="index">
					<u-icon :name="item.name" custom-prefix="custom-icon" size="60" color="#333"></u-icon>
					<view class="text">{{item.text}}</view>
					<u-badge v-if="item.badge" class="badge" :offset="[0,0]" :count="item.badge" type="success"></u-badge>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsTotal:'',
				noticeList:[],
				deviceStatisData:[],
				storeMenuList:[
					{name:'danweixinxi',text:'机构信息',url:'pages/center/organInfo/organInfo'},
					// {name:'essential-information',text:'个人信息',url:'pages/putout/putout'},
					{name:'xiugaimima',text:'修改密码',url:'pages/changepass/changepass'},
				],
			}
		},
		onLoad() {
			
		},
		onShow() {
			// this.getUnreadTotal();
			// this.recordDeviceList();
		},
		methods: {
			openPage(path,param) {
				if(!path){
					uni.showToast({
						title:'暂未开放',
						icon:'none'
					})
				}
			  this.$u.route({
			    url: path,
				params:{
					param:param
				}
			  })
			},
			deviceTypeList(){
				this.$u.api.getDeviceTypeList().then(res=>{
					if(res.code==200){
						this.deviceTypeListData = res.data;
						// console.log('getDeviceStatis',res);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			getUnreadTotal(){
				let that = this;
				this.$u.api.unreadTotal().then(res=>{
					if(res.code==200){
						this.newsTotal = res.data.noReadCount;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			noticeClick(e){
				console.log('e',e);
				// console.log('this.devicemsg[e]',this.devicemsg[e]);
				// 消息类型 1-维保通知 2-预警通知 3-确认通知
				// console.log('this.devicemsg',this.devicemsg);
				// console.log('this.devicemsg[e]',this.devicemsg[e]);
				// console.log('this.devicemsg[e].msgType',this.devicemsg[e].msgType);
				if(this.devicemsg[e].msgType=='1'){
					uni.switchTab({
						url: '/pages/maintenanceCenter/maintenanceCenter',
						fail(e) {
							console.log('',e);
						}
					})
				}else if(this.devicemsg[e].msgType=='2'){
					uni.switchTab({
						url: '/pages/warningCenter/warningCenter'
					})
				}else if(this.devicemsg[e].msgType=='3'){
					uni.navigateTo({
						url: '/pages/center/mywork/mywork'
					})
				}
			},
			menuClick(item){
				if(!item.url){
					this.$refs.uToast.show({
						title: '暂未开放',
						type: 'error',
					})
				};
				this.$u.route({
					url: item.url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page{background-color: #F6F6F6;}
	.header-wrap{
		overflow: hidden;
		.header{
			position: relative;
			box-sizing: border-box;
			// height: 260rpx;
			padding: 48rpx 24rpx 98rpx;
			color: #fff;
			border-radius: 0 0 50% 50%;
			&::before{
				width: 140%; height: 100%; position: absolute; left: -20%; top: 0; content: ''; border-radius: 0 0 50% 50%; background: linear-gradient(180deg, #003bff 0%, #597aff 100%); 
			}
			.header-title{
				font-size: 50rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 70rpx;
				letter-spacing: 2rpx;
				margin-bottom: 8vh;
				.message{
					position: relative;
					float: right;
					cursor: pointer;
					.badge{
						
					}
				}
			}
			.header-con{
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 40rpx;
				letter-spacing: 1rpx;
			}
			.header-item{
				position: relative;
			}
		}
	}
	
	.statistics{
		position: relative;
		margin: -80rpx 24rpx 24rpx;
		padding: 43rpx 30rpx 43rpx;
		border-radius: 10rpx;
		background-color: #fff;
		.count{
			font-size: 86rpx;
			font-weight: 400;
			color: var(--main-color);
			line-height: 100rpx;
			letter-spacing: 3rpx;
		}
		.name{
			font-size: 26rpx;
			font-weight: 400;
			color: #7D7D7D;
			line-height: 37rpx;
			letter-spacing: 1px;
		}
	}
	.notice{
		margin: 20rpx 0;
		padding: 0 30rpx;
		background-color: #fff;
	}
	.block-wrap{
		background: #fff;
		margin: 24rpx;
		border-radius: 12rpx;
	}
.title{
	font-size: 30rpx;
	padding: 24rpx;
	font-weight: bold;
}
.menu-list{
	padding: 24rpx;
	text-align: center;
	.menu-item{
		gap: 20rpx;
		width: 33.33%;
		position: relative;
		margin-bottom: 34rpx;
		.text{
			margin-top: 10rpx;
		}
	}
}
</style>