You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
2.9 KiB
143 lines
2.9 KiB
<template> |
|
<view class="jobInfo-detail"> |
|
|
|
|
|
<!-- 详情内容区 --> |
|
<view class="content-wrap"> |
|
<view class="jobInfo-title">{{ jobInfoDetail.title }}</view> |
|
<view class="jobInfo-time">生效时间：{{ jobInfoDetail.jobDate }}</view> |
|
|
|
<!-- 富文本内容 --> |
|
<view class="jobInfo-content"> |
|
<rich-text :nodes="jobInfoDetail.context"></rich-text> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { jobInfoApi } from '@/api/jobinfo/index.js' |
|
|
|
export default { |
|
data() { |
|
return { |
|
id: '', // 政策ID |
|
jobInfoDetail: { |
|
name: '', |
|
createTime: '', |
|
context: '' |
|
} |
|
} |
|
}, |
|
onLoad(options) { |
|
if (options.id) { |
|
this.id = options.id |
|
this.getjobInfoDetail() |
|
} |
|
}, |
|
methods: { |
|
// 获取详情数据 |
|
async getjobInfoDetail() { |
|
try { |
|
const res = await jobInfoApi.getjobInfo(this.id) |
|
if (res.code === 0) { |
|
this.jobInfoDetail = { |
|
...res.data, |
|
jobDate: this.formatTime(res.data.jobDate), |
|
// 处理富文本内容，确保样式正确显示 |
|
context: this.formatRichText(res.data.context) |
|
} |
|
} |
|
} catch (error) { |
|
uni.showToast({ |
|
title: '获取详情失败', |
|
icon: 'none' |
|
}) |
|
} |
|
}, |
|
// 格式化时间 |
|
formatTime(time) { |
|
if (!time) return '' |
|
const date = new Date(time) |
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}` |
|
}, |
|
// 处理富文本内容 |
|
formatRichText(html) { |
|
if (!html) return '' |
|
// 添加样式以确保图片自适应 |
|
return html.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block;"') |
|
}, |
|
// 返回上一页 |
|
handleBack() { |
|
uni.navigateBack() |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.jobInfo-detail { |
|
height: 100vh; |
|
background: #fff; |
|
overflow-y: auto; |
|
|
|
.nav-bar { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
height: 88rpx; |
|
background: #fff; |
|
display: flex; |
|
align-items: center; |
|
padding: 0 30rpx; |
|
border-bottom: 1rpx solid #eee; |
|
z-index: 100; |
|
|
|
.back-btn { |
|
font-size: 28rpx; |
|
color: #333; |
|
} |
|
|
|
.title { |
|
flex: 1; |
|
text-align: center; |
|
font-size: 32rpx; |
|
font-weight: bold; |
|
padding-right: 60rpx; |
|
} |
|
} |
|
|
|
.content-wrap { |
|
padding: 30rpx 30rpx 30rpx; |
|
|
|
.jobInfo-title { |
|
font-size: 36rpx; |
|
font-weight: bold; |
|
color: #333; |
|
margin-bottom: 20rpx; |
|
} |
|
|
|
.jobInfo-time { |
|
font-size: 24rpx; |
|
color: #999; |
|
margin-bottom: 40rpx; |
|
} |
|
|
|
.jobInfo-content { |
|
font-size: 28rpx; |
|
line-height: 1.8; |
|
color: #333; |
|
|
|
:deep(img) { |
|
max-width: 100%; |
|
height: auto; |
|
} |
|
|
|
:deep(p) { |
|
margin-bottom: 20rpx; |
|
} |
|
} |
|
} |
|
} |
|
</style> |