WZC2/fe/PDA/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="uni-list">
			<view class="uni_list_cell uni-flex">
				<view class="image">
					<image class="icon_normal" src="../../static/icons_msg_bell.svg"></image>
				</view>
				<view class="msg_info">
					<strong>{{item.title}}</strong>
					{{item.content}}
				</view>
				<view class="time">
					{{item.sendTime}}
				</view>
			</view>
		</view> -->
		<uni-list class="list msg_list">
			<uni-list :border="true" v-for="item in allMessageList" :key="item.id">
				<uni-list-chat :title="item.title" avatar="../../static/images/message.svg" clickable
					:note="item.content" :time="item.sendTime" badge-positon="left"
					:badge-text="item.hasRead === false?'dot':''" @click="jumpdetails(item)"
					:class="item.hasRead === false?'':'hasread'"></uni-list-chat>
			</uni-list>
		</uni-list>
		<!-- 展示列表内容 -->
		<!-- 	<uni-list class="list">
			<uni-list :border="true" v-for="item in allMessageList" :key="item.id">
				<uni-list-chat :title="item.title" :avatarCircle='true' :note="item.content" :time="item.sendTime"
					badge-positon="left" :badge-text="item.hasRead === false?'dot':''" @click="jumpdetails(item)">
				</uni-list-chat>
			</uni-list>
		</uni-list> -->
	</view>
</template>

<script>
	import {
		messageList,
		unreadCount,
		changeStatus,
		readMessage
	} from '@/api/index.js';
	import {
		goHome
	} from '@/common/basic.js';

	export default {
		data() {
			return {
				allMessageList: [],
				unreadCount: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				// Tab分类标题
				menuTabs: [{
						name: '全部'
					},
					// {
					// 	name: '系统'
					// }, {
					// 	name: '通知'
					// }, {
					// 	name: '私信'
					// },
				],
			}
		},

		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}
		},

		onLoad: function() {

			//初始化数据

		},
		created() {
			// this.getMessageList()
			// this.getunreadCount()
		},
		onShow() {
			this.getMessageList()
			this.getunreadCount()
		},
		methods: {
			getMessageList() {
				messageList(localStorage.userId).then((res) => {
					//console.log("未读列表",res)
					this.allMessageList = res
				})
			},

			jumpdetails(item) {
				if (!item.hasRead) {
					readMessage(item.id).then((res) => {
						uni.navigateTo({
							url: './details?id=' + item.messageId
						});
					})
				} else {
					uni.navigateTo({
						url: './details?id=' + item.messageId
					});
				}
			},

			swichMenu: async function(current) { //点击其中一个 menu
				console.log("cc", current)
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;

				}
			},


			getunreadCount: function() {
				unreadCount(localStorage.userId).then((res) => {
					this.unreadCount = res
					console.log(res)
				})
			}

		},
	}
</script>

<style>
	/* Tab切换 */
	.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: 46rpx;
		height: 46rpx;
		margin-bottom: 10upx;
		text-align: center;
		line-height: 46rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-left: 10upx;
		font-size: 20upx;
	}
</style>