|
@@ -4,10 +4,15 @@
|
|
|
<el-col :span="12">
|
|
|
<div class="left">
|
|
|
<div class="select">
|
|
|
- <div @click="selectFun('系统')"
|
|
|
- :style="currentItem==0 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">系统消息</div>
|
|
|
- <div @click="selectFun('应用')"
|
|
|
- :style="currentItem==1 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">应用消息</div>
|
|
|
+ <div class="select_left">
|
|
|
+ <div @click="selectFun('系统')"
|
|
|
+ :style="currentItem==0 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">系统消息</div>
|
|
|
+ <div @click="selectFun('应用')"
|
|
|
+ :style="currentItem==1 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">应用消息</div>
|
|
|
+ </div>
|
|
|
+ <div class="select_right">
|
|
|
+ <div class="all-read" @click="allRead">全部阅读</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<list :list="list" @messageItemClick="messageItemClick"></list>
|
|
|
<pagination :total="total" :pageSize="param.content.pageSize" :currentPage="param.content.pageNumber"
|
|
@@ -16,7 +21,7 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <div class="right">
|
|
|
+ <div class="right" v-if="message">
|
|
|
<p class="title">{{message.title}}</p>
|
|
|
<p class="info">
|
|
|
<span>发布于:{{message.createdate}} | {{message.type}}</span>
|
|
@@ -48,7 +53,10 @@ export default {
|
|
|
"nocache": true,
|
|
|
"pageNumber": 1,
|
|
|
"pageSize": 10,
|
|
|
- "type": ''
|
|
|
+ "type": '',
|
|
|
+ "where": {
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
list: '',
|
|
@@ -69,12 +77,13 @@ export default {
|
|
|
this.param.content.type = this.currentItem == 0 ? '系统' : '应用'
|
|
|
let res = await this.$api.requested(this.param)
|
|
|
this.list = res.data
|
|
|
- this.messageItemClick(this.list[0])
|
|
|
- this.total = res.total
|
|
|
console.log(this.list);
|
|
|
|
|
|
+ if(this.list[0]) this.messageItemClick(this.list[0])
|
|
|
+ this.total = res.total
|
|
|
},
|
|
|
selectFun (data) {
|
|
|
+ this.message = ''
|
|
|
this.param.content.pageNumber = 1
|
|
|
this.currentItem = data == '系统' ? 0 : 1
|
|
|
this.getMessageList()
|
|
@@ -92,8 +101,13 @@ export default {
|
|
|
"messageid":data.messageid
|
|
|
}
|
|
|
})
|
|
|
+ console.log(res);
|
|
|
+
|
|
|
data.isread = 1
|
|
|
this.message = res.data
|
|
|
+ },
|
|
|
+ allRead() {
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
};
|
|
@@ -105,42 +119,58 @@ export default {
|
|
|
}
|
|
|
.message {
|
|
|
width: 100%;
|
|
|
- min-height: 100%;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
.message .left {
|
|
|
+ min-height: calc(100vh - 99px);
|
|
|
position: relative;
|
|
|
padding: 20px 0 60px 0;
|
|
|
box-shadow: 1px 0px 0px 1px #DDDDDD;
|
|
|
- border-radius: 4px 4px 4px 4px;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
.message .select {
|
|
|
- width: 200px;
|
|
|
+ width: 100%;
|
|
|
height: 36px;
|
|
|
border-radius: 4px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- line-height: 36px;
|
|
|
+ padding: 0 16px;
|
|
|
+}
|
|
|
+.message .select .select_left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
font-size: 14px;
|
|
|
margin-left: 16px;
|
|
|
}
|
|
|
-.message .select div {
|
|
|
- width: 50%;
|
|
|
+.message .select .select_left div {
|
|
|
height: 34px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
+ padding: 8px 22px;
|
|
|
transition: background 0.2s ease-in-out;
|
|
|
}
|
|
|
-.message .select div:first-child {
|
|
|
+.message .select .select_left div:first-child {
|
|
|
border-top-left-radius: 4px;
|
|
|
border-bottom-left-radius: 4px;
|
|
|
}
|
|
|
-.message .select div:last-child {
|
|
|
+.message .select .select_left div:last-child {
|
|
|
border-top-right-radius: 4px;
|
|
|
border-bottom-right-radius: 4px;
|
|
|
}
|
|
|
+.message .select .select_right .all-read {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid #CCCCCC;
|
|
|
+ padding: 8px 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.message .select .select_right .all-read:hover {
|
|
|
+ color: #3874F6;
|
|
|
+}
|
|
|
.message .right {
|
|
|
padding: 20px 16px;
|
|
|
}
|
|
@@ -173,4 +203,10 @@ export default {
|
|
|
right: 16px;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
+/deep/.el-empty {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+}
|
|
|
</style>
|