newEdition/pages/mine/messageList.vue

<template>
	<view class="message_list">
		<!-- <u-tabs :list="list" :show-bar="false" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
		<view class="listMain">
			<view class="upgradeList">
				<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">
					<block v-if="updateAnnList.length!=0">
						<block v-for="(item,index) in updateAnnList" :key="index">
							<view class="upgradeItem" @click="goDetail(item.content,item.id,item.title)">
								<view class="notRead">
									<view v-if="item.readFlag==0" class="red"></view>
								</view>
								<view class="right">
									<view class="title">{{item.title}}</view>
									<view class="time">{{item.createTime}}</view>
								</view>
							</view>
						</block>
					</block>
					<block v-else>
						<view style="    padding: 100rpx 0;">
							<u-empty text="暂无数据" mode="list"></u-empty>
						</view>
					</block>
				</scroll-view>

			</view>

			<!-- <view class="systemList" v-if="current==0">
				<block v-if="sysItemList.length!=0">
					<block v-for="(item,index) in sysItemList" :key="index">
						<view class="sysItem">
							<image class="headpic" src="../../static/images/function1.png"></image>
							<view class="right">
								<view class="headInfo">
									<view class="title">优秀案例</view>
									<view class="info">评价你：非常好，品牌价值观还需要补充</view>
								</view>
								<view class="content">
									我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充
								</view>
								<view class="time">
									2021-01-12 12：23：01
								</view>
							</view>
						</view>
					</block>
				</block>
				<block v-else>
					<view style="    padding: 100rpx 0;">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</block>
			</view>
			<view class="upgradeList" v-if="current==1">
				<block v-if="updateAnnList.length!=0">
					<block v-for="(item,index) in updateAnnList" :key="index">
						<view class="upgradeItem" @click="goDetail(item.content,item.id)">
							<view class="notRead">
								<view v-if="item.readFlag==0" class="red"></view>
							</view>
							<view class="right">
								<view class="title">{{item.title}}</view>
								<view class="time">{{item.createTime}}</view>
							</view>
						</view>
					</block>
				</block>
				<block v-else>
					<view style="    padding: 100rpx 0;">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</block>
			</view>
		 -->
		</view>
	</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: '系统消息'
				}, {
					name: `升级公告`,
					count: "",
				}],
				current: 0,
				pageNum: 1,
				pageSize: 10,
			};
		},
		onShow() {
			this.updateAnnList = []
			this.pageNum = 1
			this.updateInit()
		},
		onLoad() {
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
		},
		onPullDownRefresh() {
			this.updateInit()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// onReachBottom(){
		// 	this.pageNum++
		// 	this.updateInit()
		// },
		methods: {
			onPulling(e) {
				console.log("onpulling", e);
			},
			onRefresh() {
				if (this._freshing) return;

				this.updateInit()
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			// uppers(e) {
			// 	this.pageNum = 1
			// 	this.updateInit()
			// },
			lower(e) {
				this.pageNum++
				this.updateInit()
			},
			updateInit() {
				uni.request({
					url: config.service.updateList,
					method: "GET",
					data: {
						id: uni.getStorageSync('weapp_session_userInfo_data').accountId,
						num: this.pageNum,
						size: this.pageSize
					},
					header: {
						'content-type': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
					},
					success: (res) => {
						// this.updateAnnList = res.data.data.list.results
						if (res.data.data != null) {
							this.list[1].count = res.data.data.count
						}
						if (res.data.data == null) {
							uni.showToast({
								title: '已经到底了！',
								icon: 'none',
								duration: 2000
							});
						} else {
							if (this.pageNum != 1) {
								this.updateAnnList = [...this.updateAnnList, ...res.data.data.list.records];
							} else {
								this.updateAnnList = res.data.data.list.records
							}
						}

					}
				})
			},
			goDetail(text, id, title) {
				let link = encodeURIComponent(JSON.stringify(text))
				uni.navigateTo({
					url: "./messageDetail?content=" + link + "&id=" + id + "&tit=" + title
				})
			},
			change(index) {
				this.current = index;
				if (this.current == 1) {
					this.updateInit()
				}
			}
		}
	}
</script>

<style lang="scss">
	.scroll-Y {
		height: 100%;
		width: 100%;
		position: fixed;
	}

	.message_list {
		.u-tab-item {
			border: 0.5rpx solid #dedede;
		}

		.listMain {
			margin-top: 20rpx;

			.systemList {
				.sysItem {
					padding: 20rpx;
					border: 1rpx solid #ccc;
					display: flex;
					margin: 16rpx 0;

					.headpic {
						width: 70rpx;
						height: 70rpx;
						border-radius: 100%;
						margin-right: 30rpx;
					}

					.right {
						.headInfo {
							.title {
								font-size: 32rpx;
								font-weight: bold;
								margin-bottom: 8rpx;
							}
						}

						.content {
							width: 600rpx;
							background: #e6e6e6;
							padding: 10rpx;
							margin: 14rpx 0;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

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

				}
			}

			.upgradeList {
				.upgradeItem {
					padding: 20rpx;
					border: 1rpx solid #ccc;
					margin: 16rpx 0;
					display: flex;

					.notRead {
						width: 14rpx;
						height: 14rpx;
						margin-right: 20rpx;
						margin-top: 16rpx;

						.red {
							background: #FF0000;
							width: 100%;
							height: 100%;
							border-radius: 100%;
						}
					}

					.right {
						.title {
							font-size: 32rpx;
							font-weight: bold;
							margin-bottom: 8rpx;
						}

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

				}
			}
		}
	}
</style>