NewZkgj/pages/mine/messageList.vue

<template>
	<view class="message_list">
		<!-- 公告 -->
		<view class="m-nav">
			<view class="m-n-lside">
				<image src="@/static/images/notice.png" mode=""></image>
				全部{{ count }}条新消息
			</view>
			<view class="m-n-rside" @click="allRead">
				全部已读
			</view>
		</view>
		<!-- 选项卡 -->
		<view class="m-tabs">
			<u-tabs :list="list" :current="current" :is-scroll="false" @change="change"></u-tabs>
		</view>

		<template v-if="current == 0">
			<scroll-view :scroll-top="scrollTop" refresher-enabled="true" :refresher-triggered="triggered"
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				:scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<template v-if="updateAnnList.length!=0">
					<block v-for="(item,index) in updateAnnList" :key="index">
						<view class="upgradeItem" @click="goReception(item, index)">
							<view class="right">
								<view class="title">
									<template v-if="item.messageType == 2">
										{{ item.weekDate }}
									</template>
									<template v-else>
										{{ fomatDate(item.createTime) }}
									</template>

									{{item.title}}

									<template v-if="item.readFlag==0">
										<view class="notRead"></view>
									</template>
								</view>
								<view class="time">{{item.createTime}}</view>
							</view>
						</view>
					</block>
				</template>
				<template v-else>
					<view style="padding: 100rpx 0;">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</template>
			</scroll-view>
		</template>
		<!-- 升级公告 -->
		<template v-if="current == 1">
			<scroll-view :scroll-top="scrollTop" refresher-enabled="true" :refresher-triggered="triggered"
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				:scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<template v-if="updateAnnList.length!=0">
					<block v-for="(item,index) in updateAnnList" :key="index">
						<view class="upgradeItem" @click="goDetail(item)">
							<view class="right">
								<view class="title">
									{{item.title}}
									<template v-if="item.readFlag==0">
										<view class="notRead"></view>
									</template>
								</view>
								<view class="time">{{item.createTime}}</view>
							</view>
						</view>
					</block>
				</template>
				<template v-else>
					<view style="padding: 100rpx 0;">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</template>
			</scroll-view>
		</template>
	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	var config = require("../../config");
	export default {
		data() {
			return {
				triggered: true,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				updateAnnList: [],
				sysItemList: [],
				list: [{
					name: '接待报告',
					id: 1, // 1日报 2周报 3其他(非3为接待报告，3是系统消息)
				}, {
					name: '升级公告',
					id: 3, // 1日报 2周报 3其他(非3为接待报告，3是系统消息)
				}],
				count: 0, // 全部条数
				current: 0,
				pageNum: 1,
				pageSize: 10,
			};
		},
		onShow() {
			this.updateAnnList = []
			this.pageNum = 1
			this.updateInit()
			this.getMessageNotRed()
		},

		onLoad() {
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
		},

		onPullDownRefresh() {
			this.initPage()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			onPulling(e) {
				console.log("onpulling", e);
			},
			onRefresh() {
				if (this._freshing) return;
				this.updateAnnList = []
				this.pageNum = 1
				this.updateInit()
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000)
			},

			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},

			lower(e) {
				this.pageNum++
				this.updateInit()
			},

			initPage() {
				this.updateAnnList = []
				this.pageNum = 1
				this.updateInit()
			},

			// 全部标记已读
			allRead() {
				this.$u.get('/zkMessage/updateState', {
					accountId: uni.getStorageSync('weapp_session_userInfo_data').accountId,
					projectId: uni.getStorageSync('buildingID').id,
				}).then(res => {
					uni.showToast({
						title: '全部已读成功！',
						duration: 2000
					});
					this.initPage()
				}).catch(e => {
					console.log(e)
				})
			},

			updateInit() {
				let obj = {
					messageType: this.list[this.current].id,
					id: uni.getStorageSync('weapp_session_userInfo_data').accountId,
					num: this.pageNum,
					size: this.pageSize
				}
				if (this.current == 0) {
					obj.projectId = uni.getStorageSync('buildingID').id
				} else {
					obj.projectId = ''
				}
				uni.request({
					url: config.service.updateList,
					method: "GET",
					data: obj,
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (res) => {
						if (res.data.data) {
							if (this.pageNum != 1) {
								this.updateAnnList = [...this.updateAnnList, ...res.data.data.list.results];
							} else {

								this.updateAnnList = res.data.data.list.results || []
							}
						}

					},
					fail: e => {
						console.log(e)
					}
				})
			},
			goDetail(data) {
				this.$store.commit('setMessageObj', data)
				uni.navigateTo({
					url: "./messageDetail"
				})
			},

			// 获取未读消息数量
			getMessageNotRed() {
				uni.request({
					url: config.service.notReadNum,
					method: "GET",
					data: {
						id: uni.getStorageSync('weapp_session_userInfo_data').accountId,
						projectId: uni.getStorageSync('buildingID').id,
					},
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (res) => {
						this.count = res.data.data || 0
					}
				})
			},

			// 跳转日报
			goReception(data, index) {
				this.$store.commit('setMessageObj', data)
				data.readFlag = 1
				if (data.messageType == 2) {
					uni.navigateTo({
						url: `/pages/reportExcel/weekReport?id=${data.id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/reportExcel/dayReport?id=${data.id}`
					})
				}
			},

			fomatDate(date) {
				if (!date) return '--'
				let arr = date.split(' ')
				let str = arr[0]
				let result = str.split('-')
				return `${result[1]}月${result[2]}日`
			},

			// 转换时间
			getTimeLine(date, type = 1) {
				let resu = '--'
				if (!date) return resu
				let time = new Date(date.replace(/-/g, '/'))
				time.setDate(time.getDate() - 7)
				let arr = date.split(' ')
				let str = arr[0]
				let result = str.split('-')

				let m = (time.getMonth() + 1) < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1)
				let d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()

				if (type == 1) {
					resu = `${m}.${d}-${result[1]}.${result[2]}`
				} else {
					resu = `${m}月${d}日～${result[1]}月${result[2]}日`
				}
				return resu
			},

			change(index) {
				this.current = index;
				this.initPage()
			}
		}
	}
</script>

<style lang="scss">
	.message_list {
		width: 100vw;
		height: calc(100vh - var(--window-top));
		background: #F8F8F8;
		display: flex;
		flex-direction: column;

		.m-nav {
			flex-shrink: 0;
			padding: 0 30rpx;
			width: 100%;
			height: 68rpx;
			display: flex;
			align-items: center;

			.m-n-lside {
				flex-grow: 1;
				display: flex;
				align-items: center;

				image {
					margin-right: 16rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}

			.m-n-rside {
				flex-shrink: 0;
				padding: 6rpx 14rpx;
				border: 1rpx solid #E0E0E0;
				font-size: 24rpx;
			}
		}

		.m-tabs {
			flex-shrink: 0;
		}


		.scroll-Y {
			padding: 20rpx 0 0 0;
			flex-grow: 1;
			overflow-y: scroll;

			.upgradeItem {
				margin: 0 0 20rpx 0;
				padding: 24rpx 30rpx 28rpx;
				height: 156rpx;
				display: flex;
				background: #fff;

				.right {
					.title {
						font-size: 32rpx;
						font-weight: bold;
						display: flex;

						.notRead {
							width: 14rpx;
							height: 14rpx;
							background: #FF0000;
							border-radius: 100%;
						}
					}

					.time {
						margin: 18rpx 0 0 0;
						color: #6f6f6f;
						font-size: 24rpx;
					}
				}

			}
		}
	}
</style>