Compare commits
3 Commits
88d7dadb1c
...
4555c0fdcc
| Author | SHA1 | Date |
|---|---|---|
fwb
|
4555c0fdcc | 3 months ago |
|
fwb
|
276911fc8e | 3 months ago |
|
fwb
|
08bfcadba1 | 3 months ago |
7 changed files with 391 additions and 76 deletions
@ -1,14 +1,296 @@ |
||||
<template> |
||||
<div> |
||||
我的消息 |
||||
<el-card> |
||||
<template #header> |
||||
<div class="card-header"> |
||||
<el-button type="primary" @click="editContent" round>写栈内信函</el-button> |
||||
<el-button type="primary" @click="sendContent" round>个人发出</el-button> |
||||
</div> |
||||
</template> |
||||
<div class="container"> |
||||
<div class="checkboxHeader"> |
||||
<input type="checkbox" class="custom-checkbox" @change="toggleAll" :checked="allSelected" /> |
||||
<p class="selected-count">已选 {{ selectedCount }} 条记录</p> |
||||
</div> |
||||
<li v-for="item in Message" |
||||
:key="item.title" |
||||
class="message-list-item" |
||||
> |
||||
<!--添加悬浮删除按钮--> |
||||
<div class="message-list" @mouseover="hoveringOver = item.id" @mouseleave="hoveringOver = null"> |
||||
<!-- 添加勾选框 --> |
||||
<div class="messageCheck"> |
||||
<input type="checkbox" class="custom-checkbox" :value="item.id" @change="toggleSelection(item.id)" :checked="isSelected(item.id)"/> |
||||
</div> |
||||
<!-- 图标 --> |
||||
<div class="message-icon"> |
||||
<el-icon><Comment /></el-icon> |
||||
<!-- 添加红色提示符 --> |
||||
<span v-if="!item.isRead" class="message-unread-indicator"></span> |
||||
</div> |
||||
<div class="message-content" @click="handleClick(item)"> |
||||
<h2 class="message-title">{{item.title}}</h2> |
||||
<div class="message-details"> |
||||
<span class="sender">发件人：{{item.senderName}}</span> |
||||
<span class="read-status" style="margin-right: 40px">是否已读：{{ item.isRead ? '已读' : '未读' }}</span> |
||||
<span class="read-status">已读人数：{{item.readUserNum}} / {{item.userNum}}</span> |
||||
</div> |
||||
<div class="message-time">发送时间：{{item.sendTime}}</div> |
||||
</div> |
||||
<!-- 删除按钮，默认不显示，hover时显示 --> |
||||
<div v-if="!item.isRead" style="margin-right: 10px"> |
||||
<el-button v-if="hoveringOver === item.id" @click="readMessage(item.id)" type="warning" round>点击已读</el-button> |
||||
</div> |
||||
<el-button v-if="hoveringOver === item.id" @click="deleteMessage(item.id)" type="danger" round>删除</el-button> |
||||
</div> |
||||
<el-divider/> |
||||
</li> |
||||
</div> |
||||
<template #footer> |
||||
<el-pagination |
||||
v-model:current-page="params.pageNo" |
||||
v-model:page-size="params.pageSize" |
||||
:page-sizes="[ 5, 7, 10]" |
||||
:background="true" |
||||
layout="jumper,total, sizes, prev, pager, next " |
||||
:total="total" |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
style="margin-top: 10px; justify-content: center" |
||||
/> |
||||
</template> |
||||
</el-card> |
||||
</template> |
||||
<script setup lang="ts"> |
||||
import { ref,computed,onMounted} from 'vue'; |
||||
import { useRouter } from 'vue-router'; |
||||
import useUserStore from "@/store/modules/user"; |
||||
import {getMessagesListApi,deleteSendMessageApi,readMessagesBatch} from "@/api/user/messag"; |
||||
import { ElMessageBox, ElMessage } from 'element-plus' |
||||
const userStore = useUserStore() |
||||
const params = ref({ |
||||
userId: userStore.data.id, |
||||
// userId: 4, |
||||
isAsc:true, |
||||
isDelete:0, |
||||
isRead:'', |
||||
isSend:1, |
||||
// messageId:false, |
||||
pageNo:1, |
||||
pageSize:5, |
||||
sortBy:false,//排序字段 |
||||
}) |
||||
const total = ref(0) |
||||
const Message = ref([]) |
||||
const loading = ref(false) |
||||
const hoveringOver = ref(null) |
||||
//复选框 |
||||
const selectedIds = ref([]); // 存储已选中的消息ID |
||||
const allSelected = computed(() => { |
||||
// 如果所有消息都被选中，则返回true |
||||
return Message.value.length > 0 && Message.value.every(item => selectedIds.value.includes(item.id)); |
||||
}); |
||||
|
||||
<script lang='ts' setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
const selectedCount = computed(() => { |
||||
// 返回已选中的消息数量 |
||||
return selectedIds.value.length; |
||||
}); |
||||
|
||||
function toggleAll(event) { |
||||
// 切换所有消息的选中状态 |
||||
const target = event.target; |
||||
if (target.checked) { |
||||
// 如果全选框被选中，则将所有消息的ID添加到selectedIds中 |
||||
selectedIds.value = Message.value.map(item => item.id); |
||||
} else { |
||||
// 如果全选框未被选中，则清空selectedIds |
||||
selectedIds.value = []; |
||||
} |
||||
} |
||||
|
||||
function toggleSelection(id: number) { |
||||
// 切换单个消息的选中状态 |
||||
const index = selectedIds.value.indexOf(id); |
||||
if (index > -1) { |
||||
selectedIds.value.splice(index, 1); |
||||
} else { |
||||
selectedIds.value.push(id); |
||||
} |
||||
} |
||||
|
||||
function isSelected(id) { |
||||
return selectedIds.value.includes(id); |
||||
} |
||||
|
||||
// 获取课程列表 |
||||
const getMessageList = async () => { |
||||
loading.value = true |
||||
const res = await getMessagesListApi(params.value) |
||||
Message.value = res.data.list |
||||
total.value = res.data.total |
||||
loading.value = false |
||||
} |
||||
// 渲染 |
||||
onMounted(() => { |
||||
getMessageList() |
||||
}) |
||||
//删除当前记录 |
||||
const deleteMessage = async (id: any) => { |
||||
await ElMessageBox.confirm('您确定删除这条课程信息吗', '温馨提示', { |
||||
confirmButtonText: '确认', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}) |
||||
await deleteSendMessageApi({ |
||||
messageIds:id, |
||||
userId:userStore.data.id |
||||
}) |
||||
.then(() => { |
||||
console.log(id, '删除id') |
||||
getMessageList() // 删除成功后重新获取列表数据以更新页面 |
||||
ElMessage.success('删除成功') |
||||
// console.log(res) |
||||
}) |
||||
.catch((err: any) => { |
||||
console.log(id, 'id') |
||||
ElMessage.error(err.response.data.message) |
||||
}) |
||||
|
||||
await getMessageList() |
||||
} |
||||
//一键已读 |
||||
const readMessage = async (id:any) =>{ |
||||
console.log(id,userStore.data.id,'dddddd') |
||||
await readMessagesBatch({ |
||||
messageIds:id, |
||||
userId:userStore.data.id |
||||
}) |
||||
await getMessageList() |
||||
} |
||||
// 分页 |
||||
const handleSizeChange = (size: any) => { |
||||
// loading.value = true |
||||
// console.log(size) |
||||
params.value.pageNo = 1 |
||||
params.value.pageSize = size |
||||
// 基于每页条数重新渲染 |
||||
getMessageList() |
||||
} |
||||
const handleCurrentChange = (page: any) => { |
||||
console.log(page) |
||||
params.value.pageNo = page |
||||
// 基于当前页渲染数据 |
||||
getMessageList() |
||||
} |
||||
const router = useRouter() |
||||
//写站内信函跳转 |
||||
const editContent =()=>{ |
||||
router.push('/messageContent') |
||||
} |
||||
//个人发出跳转 |
||||
const sendContent = ()=>{ |
||||
router.push('/messageManagement/sendMessage') |
||||
} |
||||
|
||||
// 消息事件点击 |
||||
const handleClick = (item)=> { |
||||
// console.log(item) |
||||
//带查询参数 |
||||
router.push({ path: '/messageContentList', query: item }) |
||||
} |
||||
|
||||
</script> |
||||
<style scoped> |
||||
.container{ |
||||
/*background: darkgray;*/ |
||||
margin: auto; |
||||
width: 95%; |
||||
padding: 15px; |
||||
} |
||||
.checkboxHeader { |
||||
/*background: lightgrey;*/ |
||||
width: 100%; |
||||
padding: 10px; |
||||
height: 50px; |
||||
display: flex; /* 使用Flex布局使子元素在同一行显示 */ |
||||
align-items: center; /* 垂直居中对齐子元素 */ |
||||
gap: 10px; /* 设置子元素之间的间距 */ |
||||
} |
||||
|
||||
.custom-checkbox { |
||||
transform: scale(1.5); /* 将勾选框放大1.5倍 */ |
||||
} |
||||
|
||||
.selected-count { |
||||
|
||||
} |
||||
.messageCheck{ |
||||
margin-right: 20px; |
||||
} |
||||
.message-list { |
||||
display: flex; |
||||
align-items: center; /* 垂直居中 */ |
||||
height: 80px; |
||||
/*background-color: #f2f2f2;*/ |
||||
padding: 0 10px; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.message-icon { |
||||
margin-right: 30px; /* 图标右侧间距 */ |
||||
font-size: 34px; /* 图标大小 */ |
||||
position: relative; |
||||
} |
||||
li{ |
||||
list-style: none; |
||||
} |
||||
.message-content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; /* 标题和详情内容垂直居中 */ |
||||
flex: 1; /* 填充剩余空间 */ |
||||
position: relative; |
||||
} |
||||
/*未读消息加小红点*/ |
||||
.message-unread-indicator { |
||||
position: absolute; |
||||
top: -4px; /* 调整位置 */ |
||||
right: -4px; /* 调整位置 */ |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: red; |
||||
z-index: 1; /* 确保它在其他元素之上 */ |
||||
} |
||||
.message-title { |
||||
line-height: 30px; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.message-details { |
||||
display: flex; |
||||
align-items: center; /* 细节内容水平居中 */ |
||||
margin-top: 10px; /* 与标题的间距 */ |
||||
} |
||||
|
||||
.sender { |
||||
margin-right: 88px; /* 发件人和已读状态的间距 */ |
||||
} |
||||
|
||||
.read-status { |
||||
color: #888; /* 已读状态的颜色 */ |
||||
} |
||||
|
||||
.message-time { |
||||
margin-left: auto; /* 发送时间靠右显示 */ |
||||
font-size: 15px; /* 发送时间字体大小 */ |
||||
color: #666; /* 发送时间颜色 */ |
||||
} |
||||
|
||||
<style lang='scss' scoped> |
||||
.message-list-item { |
||||
cursor: pointer; /* 鼠标悬停时显示手指形状，表示可点击 */ |
||||
} |
||||
|
||||
.message-list-item:hover{ |
||||
background-image: linear-gradient(60deg,powderblue,darkgrey,snow); |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue