158 lines
3.3 KiB
Vue
158 lines
3.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="content-card">
|
|
<view class="content-header">
|
|
<view class="title-wrapper">
|
|
<h3 class="content-title">{{content.title}}</h3>
|
|
<text class="content-date">{{ formatTime(content.createdAt, 'YYYY-MM-DD') }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="content-body">
|
|
<u-parse :content="content.content" class="content-text"></u-parse>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { get, post } from '@/utils/request';
|
|
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
|
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
|
export default {
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
formatTime,
|
|
IMAGE_BASE_URL,
|
|
Id:null,
|
|
title: '',
|
|
content: {},
|
|
fileList: []
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
if (options && options.Id) {
|
|
this.Id = options.Id;
|
|
}
|
|
},
|
|
mounted(){this.getNoticesDetail();},
|
|
methods: {
|
|
handleBack() {
|
|
uni.navigateBack({
|
|
delta: 1 // 返回上一级页面
|
|
});
|
|
},
|
|
afterRead(event) {
|
|
// 读取完成后的回调函数
|
|
const {
|
|
file
|
|
} = event;
|
|
this.fileList.push(file);
|
|
},
|
|
publish() {
|
|
// 发布逻辑
|
|
console.log('发布:', this.title, this.content, this.fileList);
|
|
},
|
|
// 跳转详情页面
|
|
goPage(page){
|
|
uni.navigateTo({
|
|
url: `/pages/${page}/index`,
|
|
// url: '/pages/helpInfo/index',
|
|
success: () => {
|
|
console.log('切换到tabBar页面成功');
|
|
},
|
|
fail: (err) => {
|
|
console.error('切换到tabBar页面失败:', err);
|
|
}
|
|
});
|
|
},
|
|
async getNoticesDetail(){
|
|
try {
|
|
const res = await get(`/api/v1/apps/home/notices/${this.Id}`);
|
|
if (!res || !res.success) {
|
|
throw new Error('获取详情失败');
|
|
}
|
|
let imgs = res.data.cover;
|
|
if (!imgs.startsWith('http') && !imgs.startsWith('https')) {
|
|
res.data.cover = IMAGE_BASE_URL + imgs;
|
|
};
|
|
this.content = {...res.data};
|
|
} catch (err) {
|
|
console.error('获取详情失败:', err);
|
|
}
|
|
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg,#c0dbfa 0%, #f0f0f0 100%),
|
|
linear-gradient(180deg,#fff1eb 0%, rgba(255,250,250,0) 100%);
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.content-card {
|
|
width: 100%;
|
|
max-width: 750rpx;
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
border-radius: 24rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.content-header {
|
|
background-color: rgba(128, 179, 237, 0.19);
|
|
padding: 24rpx 32rpx;
|
|
border-bottom: 1rpx solid rgba(59, 140, 255, 0.1);
|
|
}
|
|
|
|
.title-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.content-title {
|
|
color: #3B8CFF;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.content-date {
|
|
color: #7D7D7D;
|
|
font-size: 24rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.content-body {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.content-text {
|
|
color: #7D7D7D;
|
|
font-size: 24rpx;
|
|
line-height: 1.8;
|
|
|
|
p {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
border-radius: 12rpx;
|
|
margin: 20rpx 0;
|
|
display: block;
|
|
}
|
|
}
|
|
</style> |