sport_pc/.svn/pristine/cd/cdc3e41fbd670145152ba83fbae43bb780d6b9c3.svn-base

<template>
	<div style="height:100vh">

		<yd-navbar title="我的消息" color="#fff">
			<router-link :to="{path: '/PersonalCenter' }" slot="left">
				<yd-navbar-back-icon style="color: #fff"></yd-navbar-back-icon>
			</router-link>
		</yd-navbar>

		<div>
			<yd-pullrefresh :callback="loadList"  ref="pullrefreshDemo"  style="background: #E4E4E4">
				<ul class="messageList" v-if="list.length > 0">
					<li v-for="(item,index) in list" :key="index" @click="goDetail(item)">
						<div class="item_img">
							<img :src="item.read_status == -1 ? email_off : email_on" alt="">
						</div>
						<div>
							<div class="item_title">
								<p class="name">{{item.title}}</p>
								<p class="time">{{item.write_time}}</p>
							</div>
							<p class="item_text">{{item.content}}</p>
						</div>
					</li>
				</ul>
				<ul style="text-align: center; margin-top: 50%; font-size: 16px" v-else>
					暂无数据
				</ul>
			</yd-pullrefresh>
		</div>



	</div>
</template>

<script>
	import email_on from '../../../assets/st-imges/email_icon.png'
	import email_off from '../../../assets/st-imges/email_off.png'
	export default {
		name: "messageCenter.vue",
		data() {
			return {
				email:"",
				email_on:email_on,
				email_off:email_off,
				page: 1,
				list: []
			}
		},
		mounted(){
			this.loadList()
		},

		methods: {
			// 获取列表
			loadList() {
				this.$http.post(this.$ports.login.mesaageList, {
					type: 'pulldown',
					currentPage: this.page,
					pageSize:8,
					token: localStorage.getItem("token")
				})
				.then(res => {
						console.log( res.data.data,'获取消息列表')
						const _list = res.data.data.list;
						this.list = [..._list, ...this.list]
						this.$dialog.toast({
							mes: _list.length > 0 ? '为您更新了' + _list.length + '条内容' : '已是最新内容'
						});
						this.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad');
						this.page++;
				});
			},

			// 跳转详情
			goDetail(item){
				// console.log(item)
				// // return false;
				this.$router.push({
					name: 'MessageDetail',
					params: {
						id:item.identity
					}
				});
				this.$store.dispatch('SET_MESSAGEDETAIl',item)
				// sessionStorage.setItem('messageDetail', item);
			}
		}

	}

</script>
<style>
	.yd-list-mes {
		background: #E4E4E4 !important;
	}
</style>
<style scoped>
	.yd-btn-block {
		margin-top: 0.6rem;
	}
	.yd-navbar {
		background-image: linear-gradient(0deg, #565656 0%, #999999 100%);
	}
	.switch img {
		width: 0.3rem;
		height: 0.3rem;
		margin-left: 0.4rem;
		margin-top: 0.1rem;
	}
	.messageList {
		padding: 10px;
	}
	.messageList li{
		display: flex;
		justify-content: flex-start;
		background:#EFEFEF;
		border-radius:10px;
		padding: 0.29rem;
		overflow: hidden;
		margin-bottom: 0.25rem;
	}
	.messageList img {
		width:0.52rem;
		height:0.38rem;
		margin-top: 0.10rem;
		margin-right: 0.15rem;
	}
	.item_text{
		width: 6.15rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.item_title {
		display: flex;
		justify-content: space-between;
	}
	.item_title .name{
		color:#333333;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.item_title .time{
		color:#999999;
		padding-top: 0.05rem;
		padding-right: 0.2rem;
	}

</style>