From 49a435043b0b1a289a24606e35253365d7ab3956 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期一, 25 八月 2025 17:51:57 +0800
Subject: [PATCH] 首页、及教学出版样式修改
---
src/views/personalCenter/myMessage.vue | 209 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 208 insertions(+), 1 deletions(-)
diff --git a/src/views/personalCenter/myMessage.vue b/src/views/personalCenter/myMessage.vue
index ad630af..c9ee998 100644
--- a/src/views/personalCenter/myMessage.vue
+++ b/src/views/personalCenter/myMessage.vue
@@ -1,3 +1,210 @@
<template>
- <div>鎴戠殑娑堟伅</div>
+ <!-- <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 class="messageContent">
+ <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;
+ .messageContent {
+ padding: 15px;
+ box-sizing: border-box;
+ }
+
+ .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>
--
Gitblit v1.9.1