FE-lab-xcx/pages/views/information/information.vue

<!-- 消息 -->
<template>
	<view id="information">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="for-info-box" v-for="(item,index) in dataList" :key="index" @click="goInfoPage(item)">
				<img :src="imagesUrl('commonality/icon_xx_tz.png')">
				<view class="right-box">
					<view class="top-box">
						<view>{{item.className}}</view>
						<view>{{item.userName}}</view>
						<view>{{item.sendTime}}</view>
					</view>
					<view class="bottom">{{item.title}}</view>
				</view>
				<view class="tips-box" v-if="!item.isRead"></view>
			</view>
			<view class="get-null-box" v-if="getDataType">暂无更多数据</view>
		</scroll-view>
		<tab-bar ref='infoAll'></tab-bar>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		systemNoticeGetNoticeType,
		systemNoticeGetNoticeList
	} from '@/pages/api/index.js'
	import {
		tabBar
	} from '@/pages/component/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				queryParams: {
					page: 1,
					pageSize: 10,
				},
				total: 0,
				dataList: [],
				getDataType: false,
				typeList: [],
			}
		},
		onLoad() {

		},
		onShow() {

		},
		mounted() {
			this.systemNoticeGetNoticeType();
		},
		methods: {
			//详情页
			goInfoPage(item) {
				console.log('item',item)
				item.isRead = true;
				uni.navigateTo({
					url: '/pages/views/information/informationInfo?item=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//获取列表数据
			async getList() {
				let self = this;
				const {
					data
				} = await systemNoticeGetNoticeList(this.queryParams);
				if (data.code == 200) {
					data.data.records.forEach((item) => {
						this.typeList.forEach((typeItem) => {
							if (typeItem.code == item.noticeType) {
								item.sendTime = parseTime(item.sendTime, "{y}-{m}-{d} {h}:{i}");
								item.className = typeItem.name;
							}
						})
					})
					if (self.queryParams.page == 1) {
						this.dataList = data.data.records;
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					} else {
						this.dataList = [...this.dataList, ...data.data.records]
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
			//获取系统消息类型
			async systemNoticeGetNoticeType() {
				let self = this;
				const {
					data
				} = await systemNoticeGetNoticeType();
				if (data.code == 200) {
					this.$set(this, 'typeList', data.data);
					this.getList();
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#information {
		height: 100%;

		display flex;
		flex-direction: column;
		background #fff;

		.info-max-box {
			flex: 1;
			overflow: scroll;
			background #fff;

			.for-info-box:nth-child(1) {
				border: none;
			}

			.for-info-box {
				height: 150rpx;
				border-top: 1rpx solid #F5F5F5;
				position: relative;
				display flex;

				img {
					border-radius: 50%;
					margin: 25rpx 28rpx 25rpx 20rpx;
					width: 100rpx;
					height: 100rpx;
				}

				.right-box {
					flex: 1;
					overflow: hidden;

					.top-box {
						display flex;
						line-height: 67rpx;
						margin-top: 7rpx;
						margin-right: 20rpx;

						view:nth-child(1) {
							font-size: 30rpx;
							color: #333333;
							margin-right: 28rpx;
						}

						view:nth-child(2) {
							font-size: 24rpx;
							color: #999;
							flex: 1;
							display: block;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;


						}

						view:nth-child(3) {
							font-size: 20rpx;
							color: #999;
							text-align right;
						}
					}

					.bottom {
						width: 530rpx;
						line-height: 62rpx;
						font-size: 25rpx;
						color: #666666;
						display block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.tips-box{
					position: absolute;
					top: 55px;
					left: 50px;
					background-color: #fa5151;
					width: 15rpx;
					height: 15rpx;
					border-radius: 50%;
				}
			}

			.get-null-box {
				height: 100rpx;
				line-height: 100rpx;
				color: #999;
				text-align center
				padding-bottom:200rpx;
			}
		}
	}
</style>