<template>
|
<view class="regulationsDetail" @click="handleRetry">
|
<view class="title">
|
{{ title }}
|
</view>
|
<!-- <u-parse
|
:content="htmlContent"
|
:tagStyle="tagStyles"
|
@preview="handlePreview"
|
@navigate="handleNavigate"
|
/> -->
|
<!-- <view v-for="item in fileList" :key="item.id">
|
<image :src="fjSvg" class="fj-icon" />
|
<view class="fj-name">{{ item.fileName }}</view>
|
<view class="fj-size">{{ item.createTime }}</view>
|
</view> -->
|
</view>
|
</template>
|
<script setup>
|
import fjSvg from '@/components/fj.svg'
|
import { ref, onMounted, onUnmounted } from 'vue'
|
import { regulationsDetailApi } from '@/api/index'
|
const formParams = ref({
|
id: '',
|
})
|
const htmlContent = ref('<p>暂无数据</p>')
|
const title = ref('')
|
const tagStyles = ref({})
|
onMounted(() => {
|
console.log('onMounted 开始执行')
|
try {
|
// 获取当前页面（最后一个元素）而不是第一个页面
|
const pages = getCurrentPages()
|
const currentPage = pages[pages.length - 1]
|
|
// 尝试获取ID参数
|
const id = currentPage.options.id
|
const type = currentPage.options.type
|
|
if (id) {
|
formParams.value.id = id
|
// 设置默认标题
|
title.value = '法律政策详情'
|
|
// 使用setTimeout延迟执行API调用，避免页面跳转时的网络请求冲突
|
getRegulationsDetail()
|
} else {
|
console.error('未获取到ID参数')
|
title.value = '法律政策详情'
|
htmlContent.value = '<div style="padding: 20px; text-align: center; color: #999;">未获取到有效ID参数</div>'
|
}
|
} catch (error) {
|
console.error('获取ID失败:', error)
|
title.value = '法律政策详情'
|
htmlContent.value = '<div style="padding: 20px; text-align: center; color: #999;">页面加载失败，请稍后重试</div>'
|
}
|
})
|
const fileList = ref([]) // 附件列表
|
// API调用超时处理函数
|
const fetchWithTimeout = async (promise, timeout = 10000) => {
|
const timeoutPromise = new Promise((_, reject) => {
|
setTimeout(() => reject(new Error('网络请求超时，请稍后重试')), timeout)
|
})
|
return Promise.race([promise, timeoutPromise])
|
}
|
|
const handleRetry = () => {
|
// 只有在加载失败时才允许重试
|
if (htmlContent.value.includes('超时') || htmlContent.value.includes('失败')) {
|
console.log('用户点击重试')
|
getRegulationsDetail()
|
}
|
}
|
|
const getRegulationsDetail = async () => {
|
if (!formParams.value.id) {
|
console.error('ID为空，不执行API调用')
|
htmlContent.value = '<div style="padding: 20px; text-align: center; color: #999;">未获取到有效ID参数</div>'
|
return
|
}
|
|
// 显示加载状态
|
htmlContent.value = '<div style="padding: 40px; text-align: center; color: #999;">加载中...</div>'
|
|
try {
|
// 调用API并设置10秒超时
|
const res = await fetchWithTimeout(regulationsDetailApi(formParams.value.id), 10000)
|
|
// 检查返回数据结构
|
if (res && res.data) {
|
if (res.data.code === 200) {
|
// 法律法规提供的是地址附件
|
htmlContent.value = res.data.data.noticeContent || '<div style="padding: 20px; text-align: center; color: #999;">暂无数据</div>'
|
title.value = res.data.data.noticeTitle || '法律政策详情'
|
fileList.value = res.data.data.fileList || []
|
} else {
|
console.error('API返回错误:', res.data.msg || '未知错误')
|
htmlContent.value = `<div style="padding: 20px; text-align: center; color: #999;">${res.data.msg || '获取数据失败，请点击屏幕重试'}</div>`
|
}
|
} else {
|
console.error('API返回数据结构不正确:', res)
|
htmlContent.value = '<div style="padding: 20px; text-align: center; color: #999;">数据格式错误，请点击屏幕重试</div>'
|
}
|
} catch (error) {
|
console.error('获取详情异常:', error)
|
// 根据错误类型显示不同的提示
|
if (error.message.includes('timeout')) {
|
htmlContent.value = '<div style="padding: 20px; text-align: center; color: #999;">网络连接超时，请点击屏幕重试</div>'
|
} else {
|
htmlContent.value = '<div style="padding: 20px; text-align: center; color: #999;">加载失败，请点击屏幕重试</div>'
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
.regulationsDetail {
|
padding: 24rpx;
|
.title {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 500;
|
font-size: 18px;
|
color: #1D2129;
|
margin-bottom: 40rpx;
|
}
|
}
|
</style>
|
