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="systemList" v-if="current==0">
				<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>
				<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>
				<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>
				<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>
				<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>
				<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>
			</view>
			<view class="upgradeList" v-if="current==1">
				<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>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	var config = require("../../config");
	export default {
		data() {
			return {
				updateAnnList:[],
				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){
				let link=encodeURIComponent(JSON.stringify(text))
				uni.navigateTo({
					url:"./messageDetail?content="+link+"&id="+id
				})
			},
			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>