<template>
|
<view class="regulationsDetail">
|
<scroll-view
|
class="scroll-container"
|
scroll-y
|
:enable-back-to-top="true"
|
>
|
<view class="content">
|
<view class="title">
|
{{ title || 暂无数据 }}
|
</view>
|
<u-parse :content="htmlContent" :tagStyle="tagStyles"/>
|
<view class="fj-list" v-for="item in fileList" :key="item.id">
|
<view class="fj-item">
|
<u-image :src="fjPng" :width="12" :height="12" class="fj-icon" />文件附件：
|
</view>
|
<view class="fj-name" @click.stop="downloadFile(item)">{{ item.fileName }}</view>
|
</view>
|
</view>
|
</scroll-view>
|
<!-- <u-pdf-reader v-if="pdfUrl" :src="pdfUrl"></u-pdf-reader> -->
|
</view>
|
</template>
|
<script setup>
|
import { regulationsDetailApi } from '@/api/index'
|
import { onMounted } from 'vue';
|
import { onHide, onShow, onLoad } from "@dcloudio/uni-app";
|
import fjPng from '@/static/images/fj.png'
|
|
const htmlContent = ref('');
|
const title = ref('');
|
const fileList = ref([]);
|
|
const tagStyles = {
|
p: 'margin-bottom: 20rpx; line-height: 1.6;',
|
div: 'margin-bottom: 20rpx; line-height: 1.6;',
|
img: 'max-width: 100%; height: auto;',
|
table: 'width: 100%; border-collapse: collapse; margin-bottom: 20rpx;',
|
th: 'border: 1px solid #ddd; padding: 8rpx; background-color: #f5f5f5;',
|
td: 'border: 1px solid #ddd; padding: 8rpx;'
|
};
|
|
const pdfUrl = ref('https://wrj.shuixiongit.com/minio/cloud-bucket/78611c83-8fb3-47c9-a18c-0349137bb30c/DJI_202601171733_001_78611c83-8fb3-47c9-a18c-0349137bb30c/DJI_20260117173534_0004_V.jpeg')
|
const fileObject = ref(null)
|
|
function downloadFile(item) {
|
console.log(item,'8888')
|
pdfUrl.value = item.filePreviewUrl
|
// fileObject.value = {
|
// url: item.fileUrl,
|
// name: item.fileName,
|
// extname: 'pdf'
|
// }
|
previewPdf(pdfUrl.value)
|
}
|
|
const previewPdf = (url) => {
|
uni.showLoading({
|
title: '加载中...'
|
})
|
|
// 1. 先下载文件到本地
|
uni.downloadFile({
|
url: url,
|
success: (res) => {
|
if (res.statusCode === 200) {
|
// 2. 打开文档
|
uni.openDocument({
|
filePath: res.tempFilePath,
|
fileType: 'pdf',
|
success: () => {
|
console.log('打开文档成功')
|
uni.hideLoading()
|
},
|
fail: (err) => {
|
console.error('打开文档失败:', err)
|
uni.hideLoading()
|
uni.showToast({
|
title: '打开文件失败',
|
icon: 'none'
|
})
|
}
|
})
|
}
|
},
|
fail: (err) => {
|
console.error('下载文件失败:', err)
|
uni.hideLoading()
|
uni.showToast({
|
title: '下载文件失败',
|
icon: 'none'
|
})
|
}
|
})
|
}
|
|
// 获取文件类型
|
const getFileType = (fileName) => {
|
const ext = fileName.split('.').pop().toLowerCase()
|
const typeMap = {
|
'pdf': 'pdf',
|
'doc': 'doc',
|
'docx': 'docx',
|
'xls': 'xls',
|
'xlsx': 'xlsx',
|
'ppt': 'ppt',
|
'pptx': 'pptx',
|
'txt': 'txt'
|
}
|
return typeMap[ext] || ''
|
}
|
|
// 处理打开失败的情况
|
const handleOpenFail = (tempFilePath, fileName) => {
|
uni.showModal({
|
title: '提示',
|
content: `小程序无法直接打开 ${fileName}，请使用其他应用打开`,
|
confirmText: '确定',
|
showCancel: false
|
})
|
}
|
onLoad((options) => {
|
console.log(options,'99999999999')
|
const id = options.id || '1';
|
regulationsDetailApi(id).then(res => {
|
htmlContent.value = res.data.data.noticeContent;
|
title.value = res.data.data.noticeDesc;
|
fileList.value = res.data.data.fileList || []
|
})
|
.catch(err => {
|
console.log(err);
|
})
|
})
|
onMounted(() => {
|
console.log('详情页挂载')
|
})
|
</script>
|
<style scoped lang="scss">
|
.regulationsDetail {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
/* 安全区域适配 */
|
.safe-area {
|
/* 处理导航栏高度 */
|
padding-top: var(--status-bar-height);
|
|
/* iOS 安全区域 */
|
padding-top: constant(safe-area-inset-top);
|
padding-top: env(safe-area-inset-top);
|
}
|
|
.scroll-container {
|
flex: 1;
|
overflow: hidden;
|
/* 关键：滚动内容在安全区域内 */
|
height: calc(100vh - var(--status-bar-height) - 44px);
|
|
/* 计算高度考虑导航栏 */
|
@supports (top: constant(safe-area-inset-top)) {
|
height: calc(100vh - constant(safe-area-inset-top) - 44px);
|
}
|
|
@supports (top: env(safe-area-inset-top)) {
|
height: calc(100vh - env(safe-area-inset-top) - 44px);
|
}
|
}
|
|
.content {
|
padding: 0 24rpx 40rpx;
|
|
.title {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 500;
|
font-size: 18px;
|
color: #1D2129;
|
margin-bottom: 40rpx;
|
padding-top: 30rpx; /* 标题与导航栏的间距 */
|
}
|
}
|
.fj-list {
|
// margin-top: 20rpx;
|
}
|
.fj-item {
|
display: flex;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 500;
|
font-size: 14px;
|
color: #48494A;
|
}
|
.fj-name {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
color: #1D6FE9;
|
}
|
}
|
|
/* 自定义滚动条样式 */
|
::-webkit-scrollbar {
|
width: 6rpx;
|
}
|
|
::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 3rpx;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #888;
|
border-radius: 3rpx;
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: #555;
|
}
|
</style>
|
