<template>
|
<!-- <page> -->
|
<div class="personalPage-box">
|
<div class="personalPage-title">我的消息</div>
|
<div class="personalPage-content">
|
<div class="list-box" v-loading="pages.loading">
|
<ul class="listTable" v-if="dataList.length > 0 && !pages.loading">
|
<li v-for="(item, index) in dataList" :key="index" class="body flex">
|
<div class="icon">
|
<img src="@/assets/images/personalCenter/notification.svg" alt="star" />
|
</div>
|
<div class="flex1 ai-c">
|
<p class="title hover" :title="item.name" @click="viewDetail(item)">
|
{{ item.name }}
|
</p>
|
<p class="content" :title="item.description">{{ item.description }}</p>
|
</div>
|
<span class="createDate">{{ item.createDate }}</span>
|
</li>
|
</ul>
|
<div v-if="dataList.length == 0 && !pages.loading">
|
<el-empty :image-size="200" description="暂无数据" />
|
</div>
|
</div>
|
<div class="pagination-box" v-if="dataList.length > 0 && !pages.loading">
|
<el-pagination
|
v-model:current-page="pages.page"
|
v-model:page-size="pages.pageSize"
|
layout="total, prev, pager, next"
|
:total="pages.count"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
<el-dialog align-center v-model="detailDialog" title="消息" class="messageDialog">
|
<div>
|
<div class="title">{{ dataInfo.name }}</div>
|
<div class="content" v-html="dataInfo.content"></div>
|
</div>
|
</el-dialog>
|
</div>
|
<!-- </page> -->
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref, onMounted, inject, watch } from "vue";
|
import moment from "moment";
|
import { useUserStore } from "@/store";
|
const userStore = useUserStore();
|
const MG: any = inject("MG");
|
const config: any = inject("config");
|
let dataList = ref([]);
|
let pages = reactive({
|
page: 1,
|
pageSize: 10,
|
count: 0,
|
loading: false,
|
});
|
const detailDialog = ref(false);
|
let dataInfo = reactive({
|
name: "",
|
content: "",
|
});
|
|
function getDataList() {
|
pages.loading = true;
|
MG.app
|
.getAppMessageList({
|
appRefCode: config.appRefCode,
|
start: (pages.page - 1) * pages.pageSize,
|
size: pages.pageSize,
|
sort: {
|
type: "Desc",
|
field: "CreateDate",
|
},
|
})
|
.then((res) => {
|
pages.count = res.totalSize;
|
res.datas.forEach((item) => {
|
item.createDate = moment(item.createDate).format("YYYY-MM-DD HH:mm:ss");
|
});
|
dataList.value = res.datas;
|
pages.loading = false;
|
})
|
.catch(() => {
|
pages.loading = false;
|
});
|
}
|
onMounted(() => {
|
getDataList();
|
});
|
|
watch(
|
() => userStore?.token,
|
() => {
|
getDataList();
|
}
|
);
|
|
const handleCurrentChange = (val: number) => {
|
pages.page = val;
|
getDataList();
|
};
|
|
function viewDetail(data) {
|
MG.app
|
.getMessage({
|
messageId: data.id,
|
})
|
.then((res) => {
|
if (res) {
|
dataInfo.name = res.name;
|
dataInfo.content = res.content;
|
detailDialog.value = true;
|
}
|
});
|
}
|
</script>
|
<style lang="less" scoped>
|
.listTable {
|
.body {
|
padding: 15px 0;
|
border-bottom: 1px solid #ededed;
|
|
.icon {
|
width: 36px;
|
|
img {
|
margin-top: 2px;
|
width: 22px;
|
height: 22px;
|
}
|
}
|
|
.title {
|
font-weight: bold;
|
line-height: 24px;
|
height: 24px;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.content {
|
height: 45px;
|
line-height: 24px;
|
display: -webkit-box;
|
margin: 5px 0;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.createDate {
|
line-height: 24px;
|
padding-left: 20px;
|
color: #949494;
|
}
|
}
|
}
|
|
.list-box {
|
min-height: 570px;
|
}
|
|
.pagination-box {
|
display: flex;
|
justify-content: center;
|
}
|
|
.messageDialog {
|
width: 600px;
|
|
.title {
|
line-height: 22px;
|
font-weight: bold;
|
}
|
|
.content {
|
margin-top: 10px;
|
line-height: 22px;
|
}
|
}
|
</style>
|
<style lang="less">
|
.messageDialog {
|
.el-dialog__header {
|
padding: 15px;
|
margin-right: 0;
|
border-bottom: 1px solid #f4f4f4;
|
}
|
|
.el-dialog__title {
|
font-weight: bold;
|
font-size: 16px;
|
}
|
|
.el-dialog__headerbtn {
|
top: 6px;
|
right: 6px;
|
}
|
}
|
</style>
|
