Skip to content

A
apaas-ui
Commit d0536af5 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

消息通知页面

parent 16d8e8bf
Hide whitespace changes
Inline Side-by-side
Showing with 302 additions and 6 deletions
src/pages/user/notice/notice.vue
View file @ d0536af5
...@@ -8,16 +8,187 @@ ...@@ -8,16 +8,187 @@
<el-breadcrumb-item>消息通知</el-breadcrumb-item> <el-breadcrumb-item>消息通知</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="main_container"></div> <div class="main_container">
<div class="notice_header">
<div class="notcie_filter">
<a :class="{ current: unread }" @click.prevent="filterAction(true)">
<span class="btn_text">未读消息</span>
<span class="width_num" v-text="unreadCount"></span>
</a>
<a :class="{ current: !unread }" @click.prevent="filterAction(false)">
<span class="btn_text">全部消息</span>
</a>
</div>
<div class="other_action">
<a @click.prevent="readAll">
<img :src="require('../../../assets/imgs/msg_icon_szyd.png')" />
<span class="btn_text">全部设置为已读</span>
</a>
<a @click.prevent="removeAll">
<img :src="require('../../../assets/imgs/msg_icon_qkxx.png')" />
<span class="btn_text">清空所有消息</span>
</a>
<a style="cursor: text;">
<span style="font-size: 12px;color: #d0d5e7;">|</span>
</a>
<a @click.prevent="setMessage">
<img :src="require('../../../assets/imgs/msg_icon_xxsz.png')" />
<span class="btn_text" style="color: #0f2683;">消息设置</span>
</a>
</div>
</div>
<ul class="notice_list">
<li
class="notice_item"
v-for="(item, index) in list"
:key="'item_' + index"
>
<div class="notice_icon">
<img :src="getIcon(item.msg_type, item.readed)" />
</div>
<div class="notice_detail">
<p class="notice_type" v-text="getType(item.msg_type)"></p>
<p class="notice_content" v-html="item.content"></p>
<p class="notice_time" v-text="getTime(item.create_time)"></p>
</div>
<div class="notice_action">
<a @click.prevent="readItem(item)">
<img :src="require('../../../assets/imgs/msg_icon_yidu.png')" />
</a>
<a @click.prevent="removeItem(item)">
<img
:src="require('../../../assets/imgs/msg_icon_shanchu.png')"
/>
</a>
</div>
</li>
</ul>
<list-pagination
:total="listTotal"
:page-sizes="pageSizes"
:page-size="pageSize"
:current-page="currentPage"
@size-change="changePageSize"
@current-change="changeCurrentPage"
style="margin-top: 20px;"
></list-pagination>
</div>
</div> </div>
</template> </template>
<script> <script>
import ListPagination from "@/components/comments-pagination";
import helper from "@/services/helper.js";
export default { export default {
components: {}, components: {
data: () => ({}), ListPagination,
mounted() {}, },
methods: {}, data: () => ({
unread: true,
list: [],
listTotal: 0,
pageSizes: [10, 20, 50],
pageSize: 10,
currentPage: 1,
unreadCount: 0,
initDisabled: false,
}),
methods: {
initList() {
let url = this.unread
? "/apaas/service/v3/mymsg/unread"
: "/apaas/service/v3/mymsg/all";
this.initDisabled = true;
this.$http
.get(url, {
params: {
size: this.pageSize,
page: this.currentPage,
},
})
.then(({ data }) => {
if (data.success === 1) {
this.list = data.data.data || [];
this.listTotal = data.data.total || 0;
if (this.unread) {
this.unreadCount = data.data.total || 0;
}
} else {
console.log("消息列表请求失败");
}
this.initDisabled = false;
})
.catch((error) => {
console.log(error);
this.initDisabled = false;
});
},
getType(type = 0) {
return ["系统通知", "版本更新", "平台维护", "服务推送"][type];
},
getIcon(type = 0, readed = false) {
if (!readed) {
return [
require("@/assets/imgs/msg_ic_xttz.png"),
require("@/assets/imgs/msg_ic_bbgx.png"),
require("@/assets/imgs/msg_ic_ptwh.png"),
require("@/assets/imgs/msg_ic_fwts.png"),
][type];
}
return [
require("@/assets/imgs/msg_ic_xttz_visited.png"),
require("@/assets/imgs/msg_ic_bbgx_visited.png"),
require("@/assets/imgs/msg_ic_ptwh_visited.png"),
require("@/assets/imgs/msg_ic_fwts_visited.png"),
][type];
},
getTime(date) {
return helper.dateStringTransform(date || "");
},
filterAction(unread = true) {
if (this.initDisabled) {
return;
}
this.unread = unread;
this.pageSize = 10;
this.currentPage = 1;
this.initList();
},
changePageSize(value) {
this.pageSize = value;
this.currentPage = 1;
this.initList();
},
changeCurrentPage(value) {
this.currentPage = value;
this.initList();
},
readItem(item) {
console.log("readItem", item.id);
},
removeItem(item) {
console.log("removeItem", item.id);
},
readAll() {
console.log("readAll");
},
removeAll() {
console.log("removeAll");
},
setMessage() {
console.log("setMessage");
},
},
created() {
this.initList();
},
}; };
</script> </script>
...@@ -37,9 +208,134 @@ export default { ...@@ -37,9 +208,134 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
padding: 0 20px 15px; padding: 25px 20px 20px;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.notice_header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
}
.notice_header a {
font-size: 14px;
line-height: 24px;
color: #8890a7;
cursor: pointer;
}
.notice_header a + a {
margin-left: 30px;
}
.notice_header a > * {
display: inline-block;
vertical-align: middle;
}
.notice_header a > *:not(:first-child) {
margin-left: 5px;
}
.notcie_filter a .btn_text {
position: relative;
}
.notcie_filter a .btn_text::after {
position: absolute;
content: "";
width: 100%;
height: 3px;
border-radius: 2px;
background-color: #e56600;
left: 0;
bottom: -21px;
display: none;
}
.notcie_filter a .width_num {
min-width: 40px;
background-color: #8890a7;
font-size: 10px;
line-height: 16px;
color: #fff;
padding: 0 8px;
box-sizing: border-box;
border-radius: 8px;
text-align: center;
overflow: hidden;
}
.notcie_filter a.current {
color: #e56600;
}
.notcie_filter a.current .btn_text::after {
display: block;
}
.notcie_filter a.current .width_num {
background-color: #e56600;
}
.notice_list {
flex-grow: 1;
border-top: 2px solid #f4f7fc;
border-bottom: 2px solid #f4f7fc;
}
.notice_item {
padding: 25px 200px 25px 40px;
border-radius: 10px;
overflow: hidden;
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.notice_item:not(:first-child)::before {
position: absolute;
top: 0;
right: 40px;
left: 40px;
content: "";
border-top: 2px solid #f4f7fc;
}
.notice_item > .notice_icon {
margin: 5px 20px 0 0;
font-size: 0;
}
.notice_item > .notice_detail p {
font-size: 16px;
line-height: 28px;
color: #242c43;
}
.notice_item > .notice_detail .notice_type {
color: #58617a;
margin-bottom: 10px;
}
.notice_item > .notice_detail .notice_time {
color: #8890a7;
}
.notice_item:last-child {
border-bottom: none;
}
.notice_item:hover {
background-color: #f8f9fd;
}
.notice_action {
position: absolute;
top: 0;
right: 0;
width: 190px;
height: 100%;
display: none;
justify-content: center;
align-items: center;
}
.notice_action a {
font-size: 0;
cursor: pointer;
}
.notice_action a + a {
margin-left: 50px;
}
.notice_item:hover::before,
.notice_item:hover + .notice_item::before {
display: none;
}
.notice_item:hover .notice_action {
display: flex;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment