wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

市局：消息状态，未读点击提示已读，已读点击不提示，加粗未读消息字体

This commit is contained in:
guoyue 2022-10-03 15:43:43 +08:00
parent ded5cfed22
commit c23d0aeee7
1 changed files with 348 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
front/src/views/mynoticeView/components/NoticeList.vue
View File

@ -15,12 +15,7 @@
</a-breadcrumb> </a-breadcrumb>
<div class="top"> <div class="top">
<div class="left"> <div class="left">
<div <div class="item" :class="{ select: selectNav == nav.key }" v-for="nav in navList" :key="nav.key">
class="item"
:class="{ select: selectNav == nav.key }"
v-for="nav in navList"
:key="nav.key"
>
<i :class="nav.key" @click="changeNav(nav)"></i> <i :class="nav.key" @click="changeNav(nav)"></i>
<div>{{ nav.title + '(' + nav.num + ')' }}</div> <div>{{ nav.title + '(' + nav.num + ')' }}</div>
</div> </div>
@ -42,13 +37,7 @@
</div> </div>
<div class="btn"> <div class="btn">
<div class="left"> <div class="left">
<a-select <a-select ref="select" v-model:value="value" style="width: 120px" @focus="focus" @change="handleChange">
ref="select"
v-model:value="value"
style="width: 120px"
@focus="focus"
@change="handleChange"
>
<a-select-option value="全部消息">全部消息</a-select-option> <a-select-option value="全部消息">全部消息</a-select-option>
<a-select-option value="已读消息">已读消息</a-select-option> <a-select-option value="已读消息">已读消息</a-select-option>
<a-select-option value="未读消息">未读消息</a-select-option> <a-select-option value="未读消息">未读消息</a-select-option>
@ -62,33 +51,26 @@
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<a-checkbox <a-checkbox :checked="
:checked="
selectData.length !== 0 && selectData.length === data.length selectData.length !== 0 && selectData.length === data.length
" " stlye="margin-right:0.3rem;" @change="changeCheckAll()"></a-checkbox>
stlye="margin-right:0.3rem;"
@change="changeCheckAll()"
></a-checkbox>
<div>全选当前页</div> <div>全选当前页</div>
<span @click="read()">标记为已读</span> <span @click="read()">标记为已读</span>
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<a-list item-layout="horizontal" :data-source="data"> <a-list item-layout="horizontal" :data-source="data">
<template #renderItem="{ item }"> <template #renderItem="{ item }" @click="goNoticePage(item)">
<a-list-item> <a-list-item>
<a-list-item-meta description=""> <a-list-item-meta description="">
<template #title> <template #title>
<div class="left" @click="read(item)"> <div class="left" @click="read(item)" :class="item.readStatus === 0 ? 'bold-text' : ''">
{{ item.content }} {{ item.content }}
</div> </div>
<div class="right">{{ '发布时间：' + item.senderDate }}</div> <div class="right">{{ '发布时间：' + item.senderDate }}</div>
</template> </template>
<template #avatar> <template #avatar>
<a-checkbox <a-checkbox :checked="item.checked" @change="changeCheckBox(item)"></a-checkbox>
:checked="item.checked"
@change="changeCheckBox(item)"
></a-checkbox>
<a-badge dot :offset="[-30, 5]" v-show="item.readStatus == 0"> <a-badge dot :offset="[-30, 5]" v-show="item.readStatus == 0">
<a-avatar :src="item.src" /> <a-avatar :src="item.src" />
</a-badge> </a-badge>
@ -100,30 +82,24 @@
</template> </template>
</a-list> </a-list>
</div> </div>
<a-pagination <a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total" show-less-items
v-model:current="pageNum" :show-size-changer="false" @change="changePageNum" />
v-model:pageSize="pageSize"
:total="total"
show-less-items
:show-size-changer="false"
@change="changePageNum"
/>
</div> </div>
</template> </template>
<script setup> <script setup>
// import { SearchOutlined } from '@ant-design/icons-vue' // import { SearchOutlined } from '@ant-design/icons-vue'
import { ref, reactive, onBeforeUnmount } from 'vue' import { ref, reactive, onBeforeUnmount } from 'vue'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { mynotice, mynoticeRead } from '@/api/home' import { mynotice, mynoticeRead } from '@/api/home'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const total = ref(0) const total = ref(0)
const pageSize = ref(8) const pageSize = ref(8)
const pageNum = ref(1) const pageNum = ref(1)
const value = ref('全部消息') const value = ref('全部消息')
const obj = reactive({ page: pageNum.value, limit: pageSize.value }) const obj = reactive({ page: pageNum.value, limit: pageSize.value })
const navList = reactive([ const navList = reactive([
{ {
title: '全部', title: '全部',
key: 'all', key: 'all',
@ -144,11 +120,11 @@
key: 'other', key: 'other',
num: 0, num: 0,
}, },
]) ])
const selectNav = ref('all') const selectNav = ref('all')
const selectData = ref([]) const selectData = ref([])
const data = ref([]) const data = ref([])
const changeNav = (nav) => { const changeNav = (nav) => {
selectNav.value = nav.key selectNav.value = nav.key
if (nav.key === 'all') { if (nav.key === 'all') {
delete obj.from delete obj.from
@ -158,16 +134,16 @@
value.value = '全部消息' value.value = '全部消息'
delete obj.readStatus delete obj.readStatus
init() init()
} }
const changeCheckBox = (item) => { const changeCheckBox = (item) => {
item.checked = !item.checked item.checked = !item.checked
if (item.checked) { if (item.checked) {
selectData.value.push(item.id) selectData.value.push(item.id)
} else { } else {
selectData.value = selectData.value.filter((val) => val !== item.id) selectData.value = selectData.value.filter((val) => val !== item.id)
} }
} }
const changeCheckAll = () => { const changeCheckAll = () => {
if (selectData.value.length == data.value.length) { if (selectData.value.length == data.value.length) {
selectData.value = [] selectData.value = []
data.value.forEach((val) => { data.value.forEach((val) => {
@ -180,13 +156,13 @@
selectData.value.push(val.id) selectData.value.push(val.id)
}) })
} }
} }
const changePageNum = (page) => { const changePageNum = (page) => {
pageNum.value = page pageNum.value = page
obj.page = pageNum.value obj.page = pageNum.value
init() init()
} }
const handleChange = () => { const handleChange = () => {
pageNum.value = 1 pageNum.value = 1
obj.page = pageNum.value obj.page = pageNum.value
switch (value.value) { switch (value.value) {
@ -204,35 +180,28 @@
break break
} }
init() init()
} }
const goBack = (url) => { const goBack = (url) => {
router.push({ router.push({
path: url, path: url,
}) })
} }
const read = (item) => { const read = (item) => {
// console.log(item) // console.log(item)
if (selectData.value.length === 0 && !item) { if (selectData.value.length === 0 && !item) {
message.error('未选择消息！') message.error('未选择消息！')
return return
} }
console.log(selectData.value) console.log(selectData.value)
// let str = ''
// selectData.value.forEach((val, index) => {
// str += val
// if (index < selectData.value.length - 1) {
// str += ';'
// }
// })
if (item) { if (item) {
// 已读状态
if (item.readStatus === 1) {
return
}
mynoticeRead(item.id).then((res) => { mynoticeRead(item.id).then((res) => {
if (res.data.code == 0 ) { if (res.data.code == 0) {
message.success('通知已读！') message.success('通知已读！')
// if(item.readStatus == 1){
// message.success('通知已读！')
// } if(item.readStatus == 0){
// message.success('通知已设为已读！')
// }
mybus.emit('getMynotice') mybus.emit('getMynotice')
init() init()
} else { } else {
@ -253,8 +222,8 @@
}) })
}) })
} }
} }
const init = () => { const init = () => {
// from 通知 评论 readStatus 0 未读 1 已读 // from 通知 评论 readStatus 0 未读 1 已读
mynotice(obj).then((res) => { mynotice(obj).then((res) => {
console.log('消息=============>', res.data.data) console.log('消息=============>', res.data.data)
@ -272,8 +241,8 @@
total.value = res.data.data.total total.value = res.data.data.total
selectData.value = [] selectData.value = []
}) })
} }
navList.forEach((val) => { navList.forEach((val) => {
if (val.title === '全部') { if (val.title === '全部') {
mynotice({ page: pageNum.value, limit: pageSize.value }).then((res) => { mynotice({ page: pageNum.value, limit: pageSize.value }).then((res) => {
val.num = res.data.data.total val.num = res.data.data.total
@ -287,30 +256,36 @@
val.num = res.data.data.total val.num = res.data.data.total
}) })
} }
}) })
init()
mybus.on('noticeListInit', () => {
init() init()
mybus.on('noticeListInit', () => { })
init() onBeforeUnmount(() => {
})
onBeforeUnmount(() => {
mybus.off('noticeListInit') mybus.off('noticeListInit')
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.notice-list { .notice-list {
padding: 0.64rem 0 0; padding: 0.64rem 0 0;
background: #f4f5f8; background: #f4f5f8;
.ant-breadcrumb { .ant-breadcrumb {
padding: 0.1rem 3.1rem; padding: 0.1rem 3.1rem;
} }
.top { .top {
background: #fff; background: #fff;
padding: 0.18rem 3.1rem 0; padding: 0.18rem 3.1rem 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.left { .left {
display: flex; display: flex;
.item { .item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -319,6 +294,7 @@
margin-left: 1.28rem; margin-left: 1.28rem;
margin-bottom: 0.16rem; margin-bottom: 0.16rem;
border-bottom: 3px solid #fff; border-bottom: 3px solid #fff;
i { i {
display: inline-block; display: inline-block;
width: 0.48rem; width: 0.48rem;
@ -326,78 +302,98 @@
margin-bottom: 0.15rem; margin-bottom: 0.15rem;
cursor: pointer; cursor: pointer;
} }
.all { .all {
background: url('~@/assets/mynoticeView/all.png') no-repeat; background: url('~@/assets/mynoticeView/all.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
.notice { .notice {
background: url('~@/assets/mynoticeView/notice.png') no-repeat; background: url('~@/assets/mynoticeView/notice.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
.comment { .comment {
background: url('~@/assets/mynoticeView/comment.png') no-repeat; background: url('~@/assets/mynoticeView/comment.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
.other { .other {
background: url('~@/assets/mynoticeView/other.png') no-repeat; background: url('~@/assets/mynoticeView/other.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
} }
.item:nth-of-type(1) { .item:nth-of-type(1) {
margin-left: 0; margin-left: 0;
} }
.select { .select {
border-bottom: 3px solid #0058e1; border-bottom: 3px solid #0058e1;
color: #0058e1; color: #0058e1;
} }
} }
.right { .right {
display: flex; display: flex;
align-items: center; align-items: center;
height: 0.32rem; height: 0.32rem;
div { div {
width: 0.5rem; width: 0.5rem;
} }
.reset { .reset {
color: #0058e1; color: #0058e1;
cursor: pointer; cursor: pointer;
} }
} }
} }
.btn { .btn {
background: #fff; background: #fff;
margin-top: 0.16rem; margin-top: 0.16rem;
padding: 0.14rem 3.1rem 0; padding: 0.14rem 3.1rem 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
display: flex; display: flex;
align-items: center; align-items: center;
.ant-select { .ant-select {
margin-right: 0.24rem; margin-right: 0.24rem;
} }
.check { .check {
display: flex; display: flex;
align-items: center; align-items: center;
div { div {
margin-left: 0.24rem; margin-left: 0.24rem;
span { span {
font-size: 18px; font-size: 18px;
color: #0058e1; color: #0058e1;
} }
} }
div:nth-of-type(1) { div:nth-of-type(1) {
margin-left: 0.12rem; margin-left: 0.12rem;
} }
} }
} }
.right { .right {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
div { div {
margin: 0 0.1rem; margin: 0 0.1rem;
} }
span { span {
cursor: pointer; cursor: pointer;
color: #0058e1; color: #0058e1;
@ -411,23 +407,32 @@
} }
} }
} }
.main { .main {
background: #fff; background: #fff;
padding: 0 3.1rem; padding: 0 3.1rem;
height: 4.75rem; height: 4.75rem;
overflow-y: scroll; overflow-y: scroll;
:deep(.ant-list-item-meta) { :deep(.ant-list-item-meta) {
display: flex; display: flex;
align-items: center; align-items: center;
.ant-checkbox-wrapper { .ant-checkbox-wrapper {
margin-right: 0.3rem; margin-right: 0.3rem;
} }
.ant-list-item-meta-title { .ant-list-item-meta-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.left {
.bold-text {
font-weight: bold;
cursor: pointer; cursor: pointer;
}
.left {
width: 9.2rem; width: 9.2rem;
max-height: 0.43rem; max-height: 0.43rem;
overflow: hidden; overflow: hidden;
@ -437,16 +442,23 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break: break-all; word-break: break-all;
} }
.ant-badge-dot {
width: 8px;
height: 8px;
}
.left:hover { .left:hover {
color: #0058e1; color: #0058e1;
} }
} }
} }
} }
.ant-pagination { .ant-pagination {
background: #fff; background: #fff;
margin-top: 0; margin-top: 0;
padding: 0.2rem 0 0.2rem; padding: 0.2rem 0 0.2rem;
} }
} }
</style> </style>