sfms3.0-uniapp/pages/message/index.vue

<template>

	<view class="body-view msg_body">
		<!-- 头部 -->
		<scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft">
			<block v-for="(menuTab,index) in menuTabs" :key="index">
				<view class="menu-topic-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)" clickable>
					<view :class="[currentTab==index ? 'menu-topic-act' : 'menu-topic']">
						<view class="menu-topic-txt">{{menuTab.name}}
							<text v-if="menuTab.name == '全部'"
								:class="[unreadCount>0?'tipred':'' ]">{{Math.abs(unreadCount)>99?'99+':unreadCount==0?'':unreadCount}}</text>
						</view>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="flex flex-column" style="display: flex;flex-direction: column; width: 100%;margin-bottom: 120rpx;">
			<view class="">
				<!-- :badge-text="item.readStatus == false?'dot':''" -->
				<uni-list class="list msg_list">
					<uni-list :border="true" v-for="(item, index) in allMessageList " :key="item.id">
						<uni-list-chat :title="item.templateNickname" avatar="/static/images/message.svg" clickable
							:note="item.templateContent" :time="formatDate(item.createTime)" badge-positon="left"
							@click="jumpdetails(item)" :class="item.readStatus == false?'':'hasread'" is="">
						</uni-list-chat>
						<u-line color="#909399" />
					</uni-list>
				</uni-list>
			</view>
			<uni-load-more :status="loadingType" v-if="allMessageList.length>0" />
		</view>
		<com-message ref="comMessage"></com-message>

	</view>

</template>

<script>
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import {
		getMessageList,
		getMessageUnreadCount,
		setMessageUpdateRead
	} from '@/api/request2.js';
	import {
		dateFormat
	} from '@/common/basic.js';

	export default {
		name: '',
		components: {
			comMessage

		},

		data() {
			return {
				messageList: [],
				pageNo: 1,
				pageSize: 10,
				allMessageList: [],
				loadingType: "nomore",
				unreadCount: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				// Tab分类标题
				menuTabs: [{
						name: '全部'
					},
					// {
					// 	name: '系统'
					// }, {
					// 	name: '通知'
					// }, {
					// 	name: '私信'
					// },
				],
			};
		},


		onShow() {
			this.getMessageList("refresh")
			this.getMessageUnreadCount();
		},
		onPullDownRefresh() {
			this.getMessageList('refresh');
			this.getMessageUnreadCount();
		},
		onReachBottom() {
			//避免多次触发
			if (this.loadingType == 'loading' || this.loadingType == 'nomore') {
				return;
			}
			this.getMessageList("more");
		},
		methods: {
			getMessageList(type) {
				uni.showLoading({
					title: "加载中....",
					mask: true
				});
				if (type == "refresh") {
					this.pageNo = 1
					this.pageSize = 10
					this.allMessageList = []
				}

				getMessageList(this.pageNo, this.pageSize).then(res => {
					uni.hideLoading();
					if (type === "refresh") {
						uni.stopPullDownRefresh();
					}
					var list = res.data.list;
					this.loadingType = "loadmore";
					if (list == null || list.length == 0) {
						this.loadingType = "nomore";
						return;
					}
					this.allMessageList = type === "refresh" ? list : this.allMessageList.concat(list);
					this.pageNo++;

				}).catch(error => {
					uni.hideLoading();
					this.showMessage(error);
				})
			},
			showMessage(message) {
				this.$refs.comMessage.showErrorMessage(message, res => {
					if (res) {

					}
				});
			},
			formatDate(date) {
				return dateFormat(date)
			},
			getMessageUnreadCount() {
				getMessageUnreadCount().then(res => {
					this.unreadCount = res.data
				})
			},
			jumpdetails(detail) {
				if (!detail.readStatus) {
					setMessageUpdateRead(detail.id).then((res) => {
						detail.readStatus = true
						uni.navigateTo({
							url: './details?detail=' + encodeURIComponent(JSON.stringify(detail))
						});
					})
				} else {
					uni.navigateTo({
						url: './details?detail=' + encodeURIComponent(JSON.stringify(detail))
					});
				}
			},

		}


	}
</script>

<style>
	.body-view {
		height: 100%;
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		align-items: flex-start;
		justify-content: center;
	}

	.body-view .right-arrow {
		position: absolute;
		top: 22upx;
		right: 0upx;
		padding-left: 60upx;
		padding-right: 20upx;
		line-height: 42upx;
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
	}

	.body-view .right-arrow .iconfont {
		font-size: 24upx;
		font-family: iconfont;
		color: #909399;
	}

	.top-menu-view {
		display: flex;
		white-space: nowrap;
		width: 100%;
		background-color: #FFFFFF;
		height: 86upx;
		/* border-top: 1px solid #d8dbe6;
		border-bottom: 1px solid #d8dbe6; */
	}

	.top-menu-view .menu-topic-view {
		display: inline-block;
		white-space: nowrap;
		height: 86upx;
		position: relative;
	}

	.top-menu-view .menu-topic-view .menu-topic {
		margin-left: 30upx;
		margin-right: 10upx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.uni-list--border:after {
		height: 0;
	}

	.top-menu-view .menu-topic-view .menu-topic:first-child {
		margin-left: 30upx;
	}

	.top-menu-view .menu-topic-view:last-child .menu-topic {
		margin-right: 80upx;
	}

	.top-menu-view .menu-topic-view .menu-topic .menu-topic-txt {
		font-size: 30upx;
		color: #303133;
	}

	.top-menu-view .menu-topic-view .menu-topic .menu-topic-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.top-menu-view .menu-topic-view .menu-topic .menu-topic-bottom .menu-topic-bottom-color {
		width: 40upx;
		height: 4upx;
	}

	.top-menu-view .menu-topic-view .menu-topic-act {
		margin-left: 30upx;
		margin-right: 10upx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-topic-view:last-child .menu-topic-act {
		margin-right: 80upx;
	}

	.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-txt {
		font-size: 1rem;
		color: #3d7eff;
		font-weight: 600;
	}

	.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-bottom .menu-topic-bottom-color {
		width: 40upx;
		height: 6upx;
		background: #3d7eff;
	}

	.swiper-box-list {
		flex: 1;
		width: 100%;
		height: auto;
		height: 900upx;
		background-color: #FFFFFF;
	}

	.swiper-topic-list {
		height: 100%;
		width: 100%;
	}

	.list {
		width: 100%;
	}

	.tipred {
		position: absolute;
		top: 0;
		right: -40rpx;
		background-color: red;
		color: #FFFFFF;
		/* font-size: .7rem; */
		display: inline-block;
		width: 36rpx;
		height: 36rpx;
		margin-bottom: 10upx;
		text-align: center;
		line-height: 36rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-left: 10upx;
		font-size: 20upx;
	}
</style>