186 lines
3.8 KiB
Vue
186 lines
3.8 KiB
Vue
<template>
|
||
<view class="message-detail-page">
|
||
<!-- 详情内容 -->
|
||
<view class="detail-content" v-loading="loading">
|
||
<view class="detail-header">
|
||
<text class="detail-title">{{ message.title }}</text>
|
||
|
||
<view class="detail-meta">
|
||
<view class="meta-item">
|
||
<uni-icons type="user" size="14" color="#666"></uni-icons>
|
||
<text>创建人：{{ message.createBy || '未知' }}</text>
|
||
</view>
|
||
<view class="meta-item">
|
||
<uni-icons type="time" size="14" color="#666"></uni-icons>
|
||
<text>创建时间：{{ formatTime(message.createTime) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="project-info" v-if="message.projectId">
|
||
<text class="label">项目信息：</text>
|
||
<text>{{ message.projectName }}</text>
|
||
<text v-if="message.projectCode"> ({{ message.projectCode }})</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="detail-divider"></view>
|
||
|
||
<mp-html :content="message.content"></mp-html>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getFeedback, listFeedback, toRead } from "@/api/oa/feedback";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
message: {},
|
||
feedbackId: '',
|
||
loading: false
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.feedbackId = options.feedbackId;
|
||
this.getMessageDetail();
|
||
},
|
||
methods: {
|
||
// 获取消息详情
|
||
getMessageDetail() {
|
||
this.loading = true;
|
||
// 调用列表接口获取单条数据，实际项目中应该有专门的详情接口
|
||
getFeedback(this.feedbackId)
|
||
.then(res => {
|
||
if (res.data) {
|
||
this.message = res.data;
|
||
|
||
// 标记为已读
|
||
toRead(this.message);
|
||
} else {
|
||
uni.showToast({
|
||
title: '未找到消息',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
.catch(err => {
|
||
uni.showToast({
|
||
title: err.message || '获取消息失败',
|
||
icon: 'none'
|
||
});
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
// 格式化时间
|
||
formatTime(time) {
|
||
if (!time) return '';
|
||
const date = new Date(time);
|
||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||
},
|
||
|
||
// 返回上一页
|
||
navigateBack() {
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.message-detail-page {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.navbar {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 44px;
|
||
padding: 0 15px;
|
||
background-color: #3e7bfa;
|
||
color: #fff;
|
||
}
|
||
|
||
.back-btn {
|
||
background-color: transparent;
|
||
border: none;
|
||
color: #fff;
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.detail-content {
|
||
padding: 15px;
|
||
background-color: #fff;
|
||
margin: 10px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.detail-header {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.detail-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
display: block;
|
||
color: #333;
|
||
}
|
||
|
||
.detail-meta {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-bottom: 15px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.project-info {
|
||
padding: 10px;
|
||
background-color: #f5f7fa;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.label {
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.detail-divider {
|
||
height: 1px;
|
||
background-color: #eee;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.detail-body {
|
||
color: #333;
|
||
line-height: 1.8;
|
||
font-size: 15px;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
image {
|
||
max-width: 100vw;
|
||
object-fit: contain;
|
||
}
|
||
</style> |