我的消息模块开发
This commit is contained in:
a0049873
parent
5514577c3f
commit
db187766cc
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -138,6 +138,16 @@ export const constantRoutes = [
|
|||
icon: 'error-warning-line',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/mynoticeView',
|
||||
name: 'mynoticeView',
|
||||
hidden: true,
|
||||
component: () => import('@/views/mynoticeView'),
|
||||
meta: {
|
||||
title: '我的消息',
|
||||
icon: 'error-warning-line',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/WorkDynDetails',
|
||||
name: 'WorkDynDetails',
|
||||
|
|
|
|||
|
|
@ -59,20 +59,15 @@
|
|||
<a-list item-layout="horizontal" :data-source="mynoticeData">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta description="">
|
||||
<a-list-item-meta :description="item.senderDate">
|
||||
<template #title>
|
||||
<a-tooltip placement="left">
|
||||
<template #title>{{ item.content }}</template>
|
||||
<a>{{ item.title }}</a>
|
||||
</a-tooltip>
|
||||
<a-button type="primary" ghost @click="read(item)">
|
||||
设为已读
|
||||
</a-button>
|
||||
<a>{{ item.content }}</a>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<div class="bottom" @click="goToView()">查看更多</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<i class="img"></i>
|
||||
|
|
@ -113,7 +108,7 @@
|
|||
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
|
||||
import { recordRoute } from '@/config'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { getUser, mynotice, mynoticeRead } from '@/api/home'
|
||||
import { getUser, mynotice } from '@/api/home'
|
||||
import { useStore } from 'vuex'
|
||||
import { getSgcTotal } from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
|
|
@ -243,15 +238,20 @@
|
|||
mynotice({ page: 1, limit: 999, readStatus: 0 }).then((res) => {
|
||||
console.log('我的消息', res.data.data)
|
||||
mynoticeNum.value = res.data.data.total
|
||||
mynoticeData.value = res.data.data.list
|
||||
mynoticeData.value = res.data.data.list.splice(0, 3)
|
||||
})
|
||||
}
|
||||
const read = (item) => {
|
||||
mynoticeRead(item.id).then((res) => {
|
||||
console.log('已读', res)
|
||||
getMynotice()
|
||||
const goToView = () => {
|
||||
router.push({
|
||||
path: '/mynoticeView',
|
||||
})
|
||||
}
|
||||
// const read = (item) => {
|
||||
// mynoticeRead(item.id).then((res) => {
|
||||
// console.log('已读', res)
|
||||
// getMynotice()
|
||||
// })
|
||||
// }
|
||||
onMounted(() => {
|
||||
getSgcTotal().then((res) => {
|
||||
console.log('初始化========================>', res.data.data.count)
|
||||
|
|
@ -397,7 +397,7 @@
|
|||
}
|
||||
}
|
||||
.mynotice {
|
||||
width: 2.5rem;
|
||||
width: 4rem;
|
||||
height: 3rem;
|
||||
background: #eee;
|
||||
border-radius: 0.05rem;
|
||||
|
|
@ -405,24 +405,33 @@
|
|||
top: 0.45rem;
|
||||
right: 3.1rem;
|
||||
overflow-y: scroll;
|
||||
.bottom {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
}
|
||||
.mynotice::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
:deep(.ant-list-item) {
|
||||
border-bottom: 0.01rem solid #ccc;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
:deep(.ant-list-item-meta-title) {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 0 0.05rem;
|
||||
// display: flex;
|
||||
// justify-content: space-around;
|
||||
// align-items: center;
|
||||
// padding: 0 0.05rem;
|
||||
a {
|
||||
width: 1.5rem;
|
||||
// 超出显示...
|
||||
width: 3.8rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
button {
|
||||
width: 0.7rem;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,260 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-21 11:55:07
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-21 16:52:02
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<div class="notice-list">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ select: selectNav == nav.key }"
|
||||
v-for="nav in navList"
|
||||
:key="nav.key"
|
||||
>
|
||||
<i :class="nav.key" @click="changeNav(nav)"></i>
|
||||
<div>{{ nav.title + '(' + nav.num + ')' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div style="margin-right: 0.1rem">搜索</div>
|
||||
<a-input
|
||||
v-model:value="userName"
|
||||
placeholder="请输入关键字"
|
||||
style="margin-right: 0.1rem"
|
||||
>
|
||||
<template #suffix>
|
||||
<search-outlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button type="primary" style="margin-right: 0.1rem">搜索</a-button>
|
||||
<div class="reset">重置</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="left">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="value1"
|
||||
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>
|
||||
<div class="check">
|
||||
<a-checkbox
|
||||
v-model:checked="checked"
|
||||
stlye="margin-right:0.3rem;"
|
||||
></a-checkbox>
|
||||
<div>全选</div>
|
||||
<div>
|
||||
共
|
||||
<span>2</span>
|
||||
条消息
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">标记为已读</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<a-list item-layout="horizontal" :data-source="data">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta description="">
|
||||
<template #title>
|
||||
<div class="left">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="right">{{ '发布时间：' + item.time }}</div>
|
||||
</template>
|
||||
<template #avatar>
|
||||
<a-checkbox v-model:checked="checked"></a-checkbox>
|
||||
<a-badge dot :offset="[-30, 5]">
|
||||
<a-avatar :src="item.src" />
|
||||
</a-badge>
|
||||
<!-- <a-avatar :src="item.src" /> -->
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
<a-pagination v-model:current="current" :total="50" show-less-items />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { SearchOutlined } from '@ant-design/icons-vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
const navList = reactive([
|
||||
{
|
||||
title: '全部',
|
||||
key: 'all',
|
||||
num: 0,
|
||||
},
|
||||
{
|
||||
title: '通知',
|
||||
key: 'notice',
|
||||
num: 0,
|
||||
},
|
||||
{
|
||||
title: '评论',
|
||||
key: 'comment',
|
||||
num: 0,
|
||||
},
|
||||
])
|
||||
const selectNav = ref('all')
|
||||
const data = ref([
|
||||
{
|
||||
title: 'Ant Design Title 1',
|
||||
src: require('@/assets/mynoticeView/notice.png'),
|
||||
time: '2020-06-21',
|
||||
},
|
||||
{
|
||||
title: 'Ant Design Title 2',
|
||||
src: require('@/assets/mynoticeView/notice.png'),
|
||||
time: '2020-06-21',
|
||||
},
|
||||
{
|
||||
title: 'Ant Design Title 3',
|
||||
src: require('@/assets/mynoticeView/notice.png'),
|
||||
time: '2020-06-21',
|
||||
},
|
||||
{
|
||||
title: 'Ant Design Title 4',
|
||||
src: require('@/assets/mynoticeView/notice.png'),
|
||||
time: '2020-06-21',
|
||||
},
|
||||
])
|
||||
const changeNav = (nav) => {
|
||||
selectNav.value = nav.key
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.notice-list {
|
||||
padding: 0.64rem 3.1rem 0.2rem;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left {
|
||||
display: flex;
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 1.28rem;
|
||||
margin-bottom: 0.16rem;
|
||||
border-bottom: 3px solid #fff;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
margin-bottom: 0.15rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.all {
|
||||
background: url('~@/assets/mynoticeView/all.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.notice {
|
||||
background: url('~@/assets/mynoticeView/notice.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.comment {
|
||||
background: url('~@/assets/mynoticeView/comment.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.select {
|
||||
border-bottom: 3px solid #0058e1;
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.32rem;
|
||||
div {
|
||||
width: 0.5rem;
|
||||
}
|
||||
.reset {
|
||||
color: #0058e1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ant-select {
|
||||
margin-right: 0.24rem;
|
||||
}
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
div {
|
||||
margin-left: 0.24rem;
|
||||
span {
|
||||
font-size: 18px;
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
div:nth-of-type(1) {
|
||||
margin-left: 0.12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
cursor: pointer;
|
||||
color: #0058e1;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
padding: 0.05rem 0.1rem;
|
||||
}
|
||||
.right:hover {
|
||||
background: rgba(0, 88, 225, 0.1);
|
||||
}
|
||||
}
|
||||
.main {
|
||||
height: 5.67rem;
|
||||
:deep(.ant-list-item-meta) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ant-checkbox-wrapper {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.ant-list-item-meta-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left {
|
||||
cursor: pointer;
|
||||
width: 9.2rem;
|
||||
max-height: 0.43rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.left:hover {
|
||||
color: #0058e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-21 11:50:28
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-21 11:56:37
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<new-home-header></new-home-header>
|
||||
<notice-list></notice-list>
|
||||
<home-footer></home-footer>
|
||||
</template>
|
||||
<script setup>
|
||||
import NewHomeHeader from '@/views/home/components/header'
|
||||
import NoticeList from '@/views/mynoticeView/components/NoticeList'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
Loading…
Reference in New Issue