<template>
|
<div class="message-center-page">
|
<x-header :left-options="{backText: ''}">消息通知</x-header>
|
<scroller lock-x height="-40px" :scrollbar-y=false ref="scroller" @on-pulldown-loading="refresh" :pulldown-config="pulldownConfig" use-pulldown>
|
<MessageList :list="noticeList" :unRead="unRead" :showNone="showNone" @on-click-notice="handleNoticeJump"></MessageList>
|
</scroller>
|
</div>
|
</template>
|
<script>
|
/**
|
* Created by c.y on 2018/3/22.
|
* 我的--消息中心
|
*/
|
import { XHeader, Scroller } from 'vux';
|
import MessageList from '../../components/MessageList';
|
import system from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import FSpace from '../../components/common/FSpace.vue';
|
export default {
|
name: 'f-message-center',
|
data() {
|
return {
|
pulldownConfig: {
|
content: '下拉刷新',
|
height: 40,
|
autoRefresh: false,
|
downContent: '释放刷新',
|
upContent: '释放刷新',
|
loadingContent: '加载中...'
|
},
|
noticeList: [],
|
showNone: false,
|
unRead: [] //未读的消息数组的ID
|
};
|
},
|
methods: {
|
// 初始化通知列表
|
init() {
|
let _this = this;
|
let _noticeIdArr = _this.$store.state.noticeIdArr;
|
system.fetchNoticeList().then(
|
res => {
|
_this.noticeList = res.body.notice;
|
if (!_this.noticeList.length) {
|
_this.showNone = true;
|
}
|
_this.unRead = JSON.parse(
|
window.sessionStorage.getItem('unRead')
|
);
|
_this.noticeList.forEach((val, index) => {
|
_this.unRead.forEach((v, i) => {
|
if (val.id === v) {
|
val.unRead = true;
|
}
|
});
|
});
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
}
|
);
|
},
|
// type 1:跳转第三方(地址) 2:直接展示文案(html)
|
handleNoticeJump(noticeItem) {
|
if (noticeItem.type === 1) {
|
// 获取资讯的详情, detailContent内容，有可能是地址，有可能是 html 代码片段
|
system.fetchNoticeDetail({ noticeId: noticeItem.id }).then(
|
res => {
|
window.location.href = res.body.detailContent;
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
}
|
);
|
} else if (noticeItem.type === 2) {
|
// 返回html片段，跳转到我们的页面
|
this.$router.push({
|
path: '/f-message/' + noticeItem.id
|
});
|
}
|
},
|
//下拉加载
|
refresh() {
|
system.fetchNoticeList().then(
|
res => {
|
this.$nextTick(() => {
|
this.$refs.scroller.reset();
|
this.$refs.scroller.donePulldown();
|
});
|
},
|
err => {
|
this.$refs.scroller.donePulldown();
|
statusCodeManage.showTipOfStatusCode(err, this);
|
}
|
);
|
}
|
},
|
components: {
|
XHeader,
|
MessageList,
|
Scroller,
|
FSpace
|
},
|
activated: function() {
|
this.$store.commit('UPDATE_DIRECTION', { direction: 'in' });
|
this.init();
|
},
|
deactivated() {
|
this.showNone = false;
|
this.$store.commit('UPDATE_DIRECTION', { direction: 'none' });
|
}
|
};
|
</script>
|
<style lang="less">
|
@import '../../style/mixin.less';
|
.message-center-page {
|
background-color: @color-background-default;
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-title {
|
font-size: 18px;
|
}
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
}
|
.message-body {
|
padding: 0 12px;
|
.message-body-header {
|
height: 40px;
|
margin-top: @font-size-tiny;
|
line-height: 40px;
|
font-size: @font-size-medium;
|
.ellipsis();
|
}
|
.message-body-con {
|
margin: 0 0 10px 0;
|
color: @color-text-third;
|
font-size: @font-size-small;
|
.ellipsisLn(3);
|
}
|
.message-body-foot {
|
height: 33px;
|
border-top: solid 1px @color-background-default;
|
line-height: 33px;
|
text-align: right;
|
padding-right: @font-size-tiny;
|
color: @color-text-third;
|
}
|
}
|
.scroller-box {
|
padding-bottom: 40px;
|
}
|
}
|
</style>
|
