NewZkgj/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">
				<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>
			</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 {
				updateAnnList: [],
				sysItemList: [],
				list: [{
					name: '系统消息'
				}, {
					name: `升级公告`,
					count: "",
				}],
				current: 0
			};
		},
		onShow() {
			this.updateInit()
		},
		methods: {
			updateInit() {
				uni.request({
					url: config.service.updateList,
					method: "GET",
					data: {
						id: uni.getStorageSync('weapp_session_userInfo_data').accountId
					},
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (res) => {
						this.updateAnnList = res.data.data.list
						this.list[1].count = res.data.data.count
					}
				})
			},
			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">
	.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>