121 lines
2.2 KiB
Vue
121 lines
2.2 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-main class="nopadding">
|
|
<ul class="msg-list">
|
|
<li v-for="item in msgList" v-bind:key="item.accept_id" @click="toMessage(item.accept_id)">
|
|
<a :href="item.link" target="_blank">
|
|
<div class="msg-list__main">
|
|
<p :class="item.status == 0 ? 'unread' : ''">{{ item.title }}</p>
|
|
</div>
|
|
<div class="msg-list__time">
|
|
<p v-time.tip="item.create_time" :class="item.status == 0 ? 'unread' : ''"></p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<el-empty v-if="msgList.length==0" description="暂无新消息" :image-size="100"></el-empty>
|
|
</ul>
|
|
</el-main>
|
|
<el-footer>
|
|
<el-button type="primary" @click="toMessage(0)">消息中心</el-button>
|
|
<el-button @click="markRead">全部已读</el-button>
|
|
</el-footer>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, onMounted, getCurrentInstance} from "vue";
|
|
import api from "@/api";
|
|
import {useRouter} from "vue-router";
|
|
|
|
const emit = defineEmits(['closed']);
|
|
const {proxy} = getCurrentInstance()
|
|
const router = useRouter()
|
|
|
|
let msgList = ref([])
|
|
|
|
onMounted(() => {
|
|
loadData()
|
|
})
|
|
|
|
async function loadData() {
|
|
// let res = await api.home.message.newMsg()
|
|
// this.msgList = res.data
|
|
}
|
|
|
|
//标记已读
|
|
async function markRead() {
|
|
// let res = await api.home.message.read()
|
|
msgList.value.forEach((item) => {
|
|
item.status = 1
|
|
})
|
|
// proxy.$message.success(res.msg)
|
|
emit('closed', 0)
|
|
}
|
|
|
|
function toMessage(accept_id) {
|
|
router.push({name: 'messageCenter', query: {accept_id: accept_id}})
|
|
proxy.$emit('closed', -1)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.msg-list li {
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.msg-list li a {
|
|
display: flex;
|
|
padding: 20px;
|
|
}
|
|
|
|
.msg-list li a:hover {
|
|
background: #ecf5ff;
|
|
}
|
|
|
|
.msg-list__main {
|
|
flex: 1;
|
|
}
|
|
|
|
.msg-list__main h2 {
|
|
font-size: 15px;
|
|
font-weight: normal;
|
|
color: #333;
|
|
}
|
|
|
|
.msg-list__main p {
|
|
font-size: 12px;
|
|
color: #999;
|
|
line-height: 1.8;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.msg-list__time {
|
|
width: 100px;
|
|
text-align: right;
|
|
color: #999;
|
|
}
|
|
|
|
.msg-list__time p {
|
|
font-size: 12px;
|
|
color: #999;
|
|
line-height: 1.8;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.unread {
|
|
color: #333 !important;
|
|
}
|
|
|
|
.dark .msg-list__main h2 {
|
|
color: #d0d0d0;
|
|
}
|
|
|
|
.dark .msg-list li {
|
|
border-top: 1px solid #363636;
|
|
}
|
|
|
|
.dark .msg-list li a:hover {
|
|
background: #383838;
|
|
}
|
|
</style>
|