<template>
|
<div class="message-list-component">
|
<div class="scroller-box">
|
<div class="message-body"
|
@click="handleNewsJump(i)"
|
v-for="(i,index) in list"
|
:key="index">
|
<div class="message-body-header" :class="{'unRead':i.unRead}">{{i.title}}</div>
|
<div class="message-body-con">{{i.content}}</div>
|
<div class="message-body-foot" :class="{'unRead':i.unRead}">
|
{{ dateFormat(i.noticeTime, 'YYYY-MM-DD HH:mm:ss')}}
|
</div>
|
</div>
|
</div>
|
<div class="nothing" v-if="showNone">
|
<img src="../assets/img/nothing.png" alt="这里什么都没有哦">
|
<p>这里什么都没有</p>
|
</div>
|
</div>
|
</template>
|
<script>
|
/**
|
* Created by 吴彦祖 on 2018/3/16.
|
* Message list , for mine -> message center page
|
* only one param to use:
|
* @params
|
* @lists {Array} the data which to show the list;
|
*/
|
import {dateFormat} from 'vux'
|
import sysApi from '../api/api';
|
import statusCodeManage from '../api/statusCodeManage';
|
|
export default {
|
name: 'message-list',
|
data () {
|
return {
|
dateFormat: dateFormat,
|
active: true,
|
colorActive: false
|
}
|
},
|
props: {
|
list: {
|
type: Array
|
},
|
showNone: {
|
type: Boolean,
|
default: false
|
}
|
},
|
methods: {
|
// 公告跳转
|
handleNewsJump (noticeItem) {
|
this.$emit('on-click-notice', noticeItem);
|
}
|
},
|
}
|
</script>
|
|
<style lang="less">
|
@import '../style/mixin.less';
|
|
.message-list-component {
|
.nothing {
|
padding-top: 50px;
|
text-align: center;
|
img {
|
width: 120px;
|
height: auto;
|
}
|
p {
|
font-size: @font-size-small;
|
line-height: 30px;
|
color: @color-text-third;
|
}
|
}
|
.message-body {
|
background-color: @color-white;
|
padding: 0 12px;
|
.message-body-header {
|
height: 40px;
|
margin-top: @font-size-tiny;
|
color: @color-text-third;
|
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;
|
}
|
.textColor {
|
color: #999;
|
}
|
}
|
.unRead {
|
color: @color-text-primary !important;
|
}
|
}
|
</style>
|
