|
@@ -0,0 +1,172 @@
|
|
|
+<template>
|
|
|
+ <div class="mesg-tips" v-if="lists.length">
|
|
|
+ <div class="mesg-title">
|
|
|
+ <span>我的消息<i class="cont">(<em>{{conts}}</em> 条未读)</i></span>
|
|
|
+ <a class="set" href="/swordfish/frontPage/messageCenter/sess/index" target="_blank">更多<i class="el-icon-arrow-right"></i></a>
|
|
|
+ </div>
|
|
|
+ <div class="list-msg">
|
|
|
+ <div class="words" v-for="item in lists" :key="item.id">
|
|
|
+ <div class="l-msg">
|
|
|
+ <i v-show="item.isRead == 1"></i>
|
|
|
+ <h3 :class="{isActive: item.isRead == 0}">{{item.msg_type}}</h3>
|
|
|
+ <a :href="item.url.link" v-if="item.url.link" target="_blank">{{item.title}}</a>
|
|
|
+ <a v-else>{{item.title}}</a>
|
|
|
+ </div>
|
|
|
+ <p>{{item.createtime}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { latestNews } from '@/api/modules'
|
|
|
+import { dateMatter } from '@/utils/'
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ lists: [],
|
|
|
+ conts: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.messageList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ messageList() {
|
|
|
+ latestNews().then(res => {
|
|
|
+ if (res.status == 1) {
|
|
|
+ this.conts = res.count
|
|
|
+ if (!$.isEmptyObject(res.data)){
|
|
|
+ res.data.forEach(v => {
|
|
|
+ v.msg_type = this.msgType(v.msg_type)
|
|
|
+ v.createtime = dateMatter(v.createtime)
|
|
|
+ v.url.link = ''
|
|
|
+ });
|
|
|
+ this.lists = res.data
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ msgType(val) {
|
|
|
+ const obj = {
|
|
|
+ '1': '活动优惠',
|
|
|
+ '2': '服务通知',
|
|
|
+ '3': '订阅消息',
|
|
|
+ '4': '项目动态 ',
|
|
|
+ '5': '企业动态',
|
|
|
+ '6': '分析报告 ',
|
|
|
+ '7': '系统通知',
|
|
|
+ }
|
|
|
+ return obj[val]
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.mesg-tips {
|
|
|
+ margin-top: 20px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.02);
|
|
|
+ ::v-deep{
|
|
|
+ .fn-dialog{
|
|
|
+ .el-dialog__header,.el-dialog__body{
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mesg-title {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 20px;
|
|
|
+ color: #1d1d1d;
|
|
|
+ line-height: 28px;
|
|
|
+ border-bottom: 1px solid #ececec;
|
|
|
+ &::after{
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 3px;
|
|
|
+ height: 24px;
|
|
|
+ background: #2cb7ca;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 18px;
|
|
|
+ .cont {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #686868;
|
|
|
+ em {
|
|
|
+ color: #2cb7ca;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .set {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #2cb7ca!important;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: none;
|
|
|
+ i {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-msg {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 16px 20px;
|
|
|
+ }
|
|
|
+ .list-msg .words {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: initial;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .list-msg .words:nth-child(2) {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .list-msg .words .l-msg {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .list-msg .words .l-msg i {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background: #FF3A20;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 9px;
|
|
|
+ }
|
|
|
+ .list-msg .words .l-msg h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2CB7CA;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .list-msg .words .l-msg a {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1D1D1D;
|
|
|
+ line-height: 22px;
|
|
|
+ margin: 0 16px;
|
|
|
+ &:hover {
|
|
|
+ color: #2CB7CA!important;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-msg .words p {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .list-msg .words .isActive {
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|