zhgdyunapp_vue3/pages/messageCenter/messageCenter.vue

<template>
	<!-- background-color: #f6f6f6; -->
	<view style="height: 100%; background-color: #F3F5F7;">
		<view class="fixedheader"
			style="background-color: #F3F5F7; position: fixed; top: 0; left: 0; width: 100%; z-index: 2;">
			<headers :showBack="false">
				<view class="headerName tab">
					<view class="tabType" @click="notificationClick(2)"
						:class="notificationType==2?'checkedTab':'noCheckTab'">通知公告</view>
					<view class="tabType" @click="notificationClick(1)"
						:class="notificationType==1 ?'checkedTab':'noCheckTab'">系统提醒</view>
				</view>
			</headers>
			<view v-if="notificationType==1" class="tab flex2" style="background-color: #F3F5F7;">
				<view class="tabType" @click="changeTab(0)" :class="checkedTab==0?'checkedTab':'noCheckTab'">全部</view>
				<!-- <view class="tabType" @click="changeTab(2)" :class="checkedTab==2?'checkedTab':'noCheckTab'">质量</view>
				<view class="tabType" @click="changeTab(3)" :class="checkedTab==3?'checkedTab':'noCheckTab'">安全</view> -->
				<view class="tabType" @click="changeTab(4)" :class="checkedTab==4?'checkedTab':'noCheckTab'">AI</view>
				<view class="tabType" @click="changeTab(9)" :class="checkedTab==9?'checkedTab':'noCheckTab'">待办</view>
				<view class="tabType" @click="changeTab(5)" :class="checkedTab==5?'checkedTab':'noCheckTab'">其它</view>
				<view class="tabType" @click="changeTab(6)" :class="checkedTab==6?'checkedTab':'noCheckTab'">安全履职预警
				</view>
				<view class="tabType" @click="changeTab(7)" :class="checkedTab==7?'checkedTab':'noCheckTab'">企业资质</view>
				<view class="tabType" @click="changeTab(8)" :class="checkedTab==8?'checkedTab':'noCheckTab'">人员资质</view>
			</view>
			<view class="uni-form-item" style="background-color: #ffffff;">
				<input class="uni-input" name="searchName" v-model="searchName" placeholder="请输入标题" />
				<!-- <uni-icons2 class="search-icon" type="search" @click="loadData"></uni-icons2> -->
				<button class="mini-btn" type="primary" size="mini" @click="loadData">搜索</button>
			</view>
		</view>
		<view class="centerContent" style="background-color: #F3F5F7;"
			:style="{paddingTop: (mobileTopHeight * 3.5) + (notificationType == 1 ? 310 : 230)  + 'rpx'}">
			<view v-if="centerContentList.length > 0 && notificationType == 1" class="centerContentBox">
				<view v-for="(item,index) in centerContentList" :key="index" class="centerContent_item"
					@click="goList(item)">
					<!-- <view class="itemImgBox">
						<image v-if="item.imageUrl" @click.stop="previewImg(item.imageUrl)" :src="item.imageUrl"
							class="itemImg"></image>
					</view> -->
					<view class="itemBox">
						<view class="itemBox_title">
							<view class="title">{{ item.title }}</view>
							<view class="content">{{ item.msg }}</view>
						</view>
						<view class="time">{{item.sendTime}}</view>
					</view>
				</view>
			</view>
			<view class="list" v-else-if="centerContentList.length > 0 && notificationType == 2">
				<view class="list-item" v-for="(item,index) in centerContentList" :key="index" @click="checkItem(item)">
					<view class="list-title">
						<view>
							{{item.title}}
						</view>
					</view>
					<view class="list-content">
						<view class="list-info">
							<view class="btn_detail_box">
								<view class="btn_detail">
									查看详情
									<uni-icons2 class="arrowright" type="arrowright"></uni-icons2>
								</view>
							</view>
						</view>
					</view>
					<view class="list-info list_time">
						{{item.uploadTime}}
					</view>
				</view>
			</view>
			<view class="placeholderBox" v-else>
				<image src="/static/noData.png" class="noDataImg"></image>
				<view class="text">
					暂无数据
				</view>
			</view>
		</view>
		<!-- v-if="accountType == 5 || accountType == 6 || accountType == 10" -->
		<footers :activeTab="'mssage'"></footers>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import headers from '../../components/headers/headers.vue'
	import footers from '../../components/footers/footers.vue'
	export default {
		components: {
			headers
		},
		data() {
			return {
				mobileTopHeight: 0,
				checkedTab: 0,
				accountType: 1,
				searchName: '',
				centerContentList: '',
				notificationType: 2
			}
		},
		mounted() {
			console.log(JSON.parse(uni.getStorageSync('userInfo')).userId)
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo', res)
					console.log(res.statusBarHeight, 111222)
				}
			})
			console.log('this.mobileTopHeight', this.mobileTopHeight)
			this.loadData()
		},
		onLoad() {
			var userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.accountType = userInfo.accountType
		},
		methods: {
			//去指定页
			goList(obj) {
				let payLoadParams = eval("(" + obj.payload + ")")
				console.log(payLoadParams)
				if (obj.type == 2) { // 安全
					this.sendRequest({
						url: "xmgl/xzSecurityQualityInspectionRecord/selectQualityInspectionRecordById",
						data: {
							id: payLoadParams.data.id
						},
						method: "POST",
						success(res) {
							if (!res.result || res.result.status == 6) {
								uni.showToast({
									title: '检查单已撤回',
									icon: "none"
								})
								return;
							}
							uni.navigateTo({
								url: '/pages/projectEnd/safeSame/details?id=' + payLoadParams.data.id +
									'&type=' +
									payLoadParams.data.status
							})
						}
					})
				} else if (obj.type == 1) { // 质量
					this.sendRequest({
						url: "xmgl/qualityInspectionRecord/selectQualityInspectionRecordById",
						data: {
							id: payLoadParams.data.id
						},
						method: "POST",
						success(res) {
							console.log(res)
							if (!res.result || res.result.status == 6) {
								uni.showToast({
									title: '检查单已撤回',
									icon: "none"
								})
								return;
							}
							uni.navigateTo({
								url: '/pages/projectEnd/qualityManage/details?id=' + payLoadParams.data
									.id + '&type=' +
									payLoadParams.data.status
							})
						}
					})
				} else if (obj.type == 3) { // AI
					uni.navigateTo({
						url: "/pages/alarmPage/disposition/disposition?item=" + encodeURIComponent(JSON.stringify(
							payLoadParams.data))
					});
				}
				// if (obj.type == 11) {
				// 	uni.navigateTo({
				// 		url: '/pages/projectEnd/qualityManage/list?type=1'
				// 	})
				// } else if (obj.type == 10) {
				// 	uni.navigateTo({
				// 		url: '/pages/projectEnd/safeSame/list?type=1'
				// 	})
				// } else if (obj.type == 8) {
				// 	uni.navigateTo({
				// 		url: '/pages/alarmPage/indexTwo'
				// 	})

				// }
			},
			//切换tab
			changeTab(type) {
				this.checkedTab = type;
				this.loadData()
			},
			notificationClick(type) {
				this.notificationType = type;
				this.loadData();
			},
			previewImg(imgUrl) {
				console.log(imgUrl)
				//urls为数组，数据里有多少图片链接则显示多少张，若只想预览一张的话，直接传只有一个图片地址的数组即可
				let imgurl = imgUrl
				let imgArr = []
				imgArr[0] = imgurl
				uni.previewImage({
					current: 0,
					urls: imgArr
				})
			},
			searchFile(e) {
				this.searchName = e.detail.value
			},
			checkItem(val) {
				console.log(112233, val);
				uni.navigateTo({
					url: `./detail?id=${val.id}&title=通知公告`,
				})
			},
			loadData() {
				var json = {
					accountId: JSON.parse(uni.getStorageSync('userInfo')).userId,
					pageNo: 1,
					title: this.searchName,
					pageSize: 100
				}
				if (this.checkedTab == 2) {
					json.type = 1
				} else if (this.checkedTab == 3) {
					json.type = 2
				} else if (this.checkedTab == 4) {
					json.type = 3
				} else if (this.checkedTab == 5) {
					// json.notInType = 10
					json.type = 10
				} else if (this.checkedTab == 6) {
					json.type = 4
				} else if (this.checkedTab == 7) {
					json.type = 5
				} else if (this.checkedTab == 8) {
					json.type = 6
				} else if (this.checkedTab == 9) {
					json.type = 12
				}
				var that = this
				console.log(1133, this.notificationType)
				if (this.notificationType == 1) {
					this.sendRequest({
						url: "xmgl/notice/list",
						data: json,
						method: "POST",
						success(res) {
							that.centerContentList = res.result.records
							console.log('res.result.records', res.result.records)
						}
					})
				} else {
					json.showHome = 1;
					this.sendRequest({
						url: "xmgl/projectHomeNotice/page",
						data: json,
						method: "GET",
						success(res) {
							that.centerContentList = res.result.records
							console.log('res.result.records', res.result.records)
						}
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.list {
		// padding: 20rpx 0;
		margin-bottom: 36rpx;
		padding: 0 40rpx;
	
		.list-item {
			background: #fff;
			margin-bottom: 20rpx;
			padding: 20rpx 0;
			position: relative;
			border-radius: 24rpx;
	
			.list-title {
				padding: 0 24rpx;
				font-size: 32rpx;
				// padding: 10rpx 20rpx;
				// border-bottom: 4rpx solid #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				>view:first-child {
					width: 70%;
				}
	
				.tag {
					background: #F0AD4E;
					color: #fff;
					padding: 4rpx 8rpx;
					font-size: 24rpx;
					margin-right: 20rpx;
					margin-left: -20rpx;
					height: 32rpx;
				}
	
				.status1 {
					background: #2b8df3;
					color: #fff;
					padding: 4rpx 8rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
				}
	
				.status2 {
					background: #F0AD4E;
					color: #fff;
					padding: 4rpx 8rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
				}
	
				.status3 {
					background: #B22222;
					color: #fff;
					padding: 4rpx 8rpx;
					font-size: 24rpx;
				}
	
				.status4 {
					background: #ccc;
					color: #fff;
					padding: 4rpx 8rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
				}
			}
	
			.list-content {
				border-bottom: 2rpx dashed #CCCCCC;
			}
	
			.list-info {
				display: flex;
				padding: 10rpx 32rpx;
				font-size: 24rpx;
				color: #999999;
			}
	
			.list-info_title {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
	
				>view:not(:first-child) {
					margin-left: 20rpx;
				}
			}
	
			.btn_detail_box {
				margin-left: 72rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
	
				.btn_detail {
					font-size: 26rpx;
					color: #FF0000;
					display: flex;
					align-items: center;
					justify-content: flex-end;
	
					.arrowright {
						font-size: 26rpx;
						color: #FF0000 !important;
					}
				}
			}
	
			.list_time {
				justify-content: flex-end;
			}
	
			.info-status {
				padding: 0 10rpx;
				border: 1px solid #DD524D;
				border-radius: 6rpx;
				color: #DD524D;
				margin-left: 10rpx;
			}
	
			// .btn_detail {
			// 	background-color: #4181FE;
			// 	color: white;
			// 	padding: 3rpx 16rpx;
			// 	border-radius: 30rpx;
			// 	position: absolute;
			// 	bottom: 16rpx;
			// 	right: 16rpx;
			// }
		}
	}
	
	:deep(.headerBox .backImg) {
		color: #171717;
	}

	:deep(.headerName) {
		background-color: #F3F5F7;
		display: flex;

		>view {
			width: 50%;
		}

		.checkedTab {
			color: #2B8DF3;
		}
	}

	.centerContent {
		padding-bottom: 110rpx;
	}

	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tab {
		// width: 100%;
		overflow: auto;
		height: 90rpx;
		text-align: center;
		box-shadow: 0 0 20rpx rgba(194, 194, 194, 0.5);
		padding: 0 40rpx;

		.tabType {
			// width: 33%;
			min-width: 180rpx;
			line-height: 86rpx;
			position: relative;
			// border-bottom: 2rpx solid rgba(194, 194, 194, 0.2);
		}

		.checkedTab::after {
			content: '';
			width: 120rpx;
			height: 4rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			// color: #4181FE;
			// border-bottom: 4rpx solid;
			background: linear-gradient(to right, #2B8DF3, #ffffff);
		}

		.noCheckTab {
			padding-bottom: 4rpx;
		}
	}

	.fixedheader {
		border-bottom: 2rpx solid rgba(221, 221, 221, 0.8);
	}

	.centerContentBox {

		padding: 0 40rpx;
	}

	.centerContent_item {
		// border-bottom: 2rpx solid rgba(221, 221, 221, 0.8);
		width: 100%;
		display: flex;
		align-items: center;
		min-height: 200rpx;
		padding: 20rpx 0;
		font-size: 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		margin-bottom: 32rpx;
		border-radius: 24rpx;

		.itemBox {
			width: 100%;

			.itemBox_title {
				padding: 0 24rpx 30rpx;
				border-bottom: 2rpx dashed #CCCCCC;
			}

			.content {
				margin-top: 20rpx;
			}

			.time {
				margin-top: 20rpx;
				color: #999999;
				font-size: 24rpx;
				text-align: right;
				padding: 0 34rpx;
			}
		}
	}

	.itemImgBox {
		margin-right: 20rpx;

		.itemImg {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.uni-form-item {
		position: relative;
		// width: 100%;
		// padding: 0 20rpx;
		// height: 60rpx;
		display: flex;
		margin: 24rpx 40rpx;
		background-color: #FFFFFF;
		border-radius: 48rpx;
		justify-content: space-between;

		.search-icon {
			position: absolute;
			top: 50%;
			right: 50rpx;
			transform: translateY(-50%);
		}

		.mini-btn {
			width: 120rpx;
			font-size: 24rpx;
			border-radius: 100rpx;
			line-height: 58rpx;
			margin: 0;
		}
	}

	.uni-input {
		flex: 1;
		border-radius: 30rpx;
		// margin: 20rpx 20rpx;
		background-color: #ffffff;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		font-size: 28rpx;
		width: 65%;
	}

	// .mini-btn {
	// 	position: absolute;
	// 	// right: 12rpx;
	// 	border-radius: 30rpx

	// 	// height: 60rpx;
	// 	// line-height: 60rpx;
	// }
</style>