sport_pc/.svn/pristine/66/66b7ad5e6db51786b5aa46f95868927676c1469d.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>

		<section>
			<yd-pullrefresh id="messageCenter" :callback="loadList" ref="pullrefreshDemo">
				<yd-list theme="4">
					<yd-list-item v-for="(item,index) in list" :key="index" @click.native="goDetail(item)">
						<img slot="img" :src="item.read_status == -1 ? email_off : email_on" alt="">
						<span slot="title">{{item.title}}</span>
						<span slot="title" style="color: #999999; font-weight: normal; float: right;">{{item.write_time}}</span>
						<yd-list-other slot="other">
							<div class="content">{{item.content}}</div>
						</yd-list-other>
					</yd-list-item>
				</yd-list>
			</yd-pullrefresh>
			<ul style="text-align: center; margin-top: 50%; font-size: 16px" v-if="list.length < 1">
				暂无数据
			</ul>
		</section>


	</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() {
				// console.log('ok')

				this.$http.post(this.$ports.login.mesaageList, {
					type: 'pulldown',
					page: this.page,
					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.$http.get(this.$ports.login.upStatus, {
					identity: item.identity,
					token: localStorage.getItem("token")
				}).then((res) => {
					console.log(res.data.data, '更新消息')
				});
				this.$router.push({
					name: 'MessageDetail',
					params: {
						id: item.identity
					}
				});
				this.$store.dispatch('SET_MESSAGEDETAIl', item)
				// sessionStorage.setItem('messageDetail', item);
			}
		}

	}

</script>
<style>
	#messageCenter .yd-list-theme4 .yd-list-item .yd-list-img {
		width: 0.52rem !important;
		padding: 0.5rem 0;
	}

	#messageCenter .yd-list-img img {
		width: 0.52rem;
	}

	#messageCenter .yd-list-theme4 {
		background: #E4E4E4;
	}

	#messageCenter .yd-list-img img,
	#messageCenter .yd-list-mes {
		background: #EFEFEF !important;
	}

	#messageCenter .yd-list-mes {
		padding-left: 0.5rem;
	}

	#messageCenter .content {
		width: 5.15rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		background: #EFEFEF;
	}

	#messageCenter .yd-list-item {
		background: #EFEFEF;
		border-radius: 10px;
		padding: 0.25rem 0.29rem;
		overflow: hidden;
		margin: 0.25rem 0;
	}
</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;
	}

	.yd-scrollview {
		touch-action: none;
	}

</style>