|
|
|
@ -1,76 +1,80 @@ |
|
|
|
<template> |
|
|
|
<div class="notice-detail-page app_content"> |
|
|
|
<!-- 顶部导航 --> |
|
|
|
<!-- <van-nav-bar |
|
|
|
title="预告详情" |
|
|
|
left-arrow |
|
|
|
@click-left="onBack" |
|
|
|
/> --> |
|
|
|
|
|
|
|
<div class="content"> |
|
|
|
<div class="notice-detail-page"> |
|
|
|
<!-- 内容区域 --> |
|
|
|
<div class="content-area"> |
|
|
|
<div v-if="loading" class="loading-wrap"> |
|
|
|
<van-loading size="20" /> 加载中... |
|
|
|
</div> |
|
|
|
<template v-else-if="detail"> |
|
|
|
<!-- 基本信息 --> |
|
|
|
<div class="form-card"> |
|
|
|
<div class="card-header"> |
|
|
|
<div class="status-tag" :class="'status-' + detail.status"> |
|
|
|
{{ getStatusText(detail.status) }} |
|
|
|
<!-- 基本信息卡片 |
|
|
|
<div class="info-card"> |
|
|
|
<div class="card-title">预告信息</div> |
|
|
|
<div class="info-row"> |
|
|
|
<span class="info-label">状态</span> |
|
|
|
<span class="info-value">{{ getStatusText(detail.status) }}</span> |
|
|
|
</div> |
|
|
|
<div class="card-date">{{ formatDate(detail.createTime) }}</div> |
|
|
|
<div class="info-row"> |
|
|
|
<span class="info-label">发布时间</span> |
|
|
|
<span class="info-value">{{ formatDate(detail.createTime) }}</span> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<span class="info-label">执法日期</span> |
|
|
|
<span class="info-value">{{ detail.enforceDate || '-' }} {{ getTimeText(detail.enforceTime) }}</span> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<span class="info-label">执法单位</span> |
|
|
|
<span class="info-value">{{ detail.bureauDeptName || '-' }}</span> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<div class="notice-title">{{ detail.enforceContent || '暂无执法事项' }}</div> |
|
|
|
|
|
|
|
<div class="info-card"> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">执法日期</div> |
|
|
|
<div class="value">{{ detail.enforceDate || '-' }} {{ getTimeText(detail.enforceTime) }}</div> |
|
|
|
<span class="info-label">企业名称</span> |
|
|
|
<span class="info-value">{{ detail.enterpriseName || '-' }}</span> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">执法单位</div> |
|
|
|
<div class="value">{{ detail.bureauDeptName || '-' }}</div> |
|
|
|
<span class="info-label">企业联系人</span> |
|
|
|
<span class="info-value">{{ detail.contactPerson || '-' }}</span> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">企业名称</div> |
|
|
|
<div class="value">{{ detail.enterpriseName || '-' }}</div> |
|
|
|
<span class="info-label">联系电话</span> |
|
|
|
<span class="info-value">{{ detail.contactPhone || '-' }}</span> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">企业联系人</div> |
|
|
|
<div class="value">{{ detail.contactPerson || '-' }}</div> |
|
|
|
<span class="info-label">执法日期</span> |
|
|
|
<span class="info-value">{{ detail.enforceDate || '-' }} {{ getTimeText(detail.enforceTime) }}</span> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<div class="label">联系电话</div> |
|
|
|
<div class="value">{{ detail.contactPhone || '-' }}</div> |
|
|
|
<span class="info-label">执法事项</span> |
|
|
|
<span class="info-value detail_content">{{ detail.enforceContent || '-' }}</span> |
|
|
|
</div> |
|
|
|
<div class="info-row"> |
|
|
|
<span class="info-label">执法要求</span> |
|
|
|
<span class="info-value detail_content">{{ detail.enforceRequirement || '-' }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 执法人员 --> |
|
|
|
<div class="form-card"> |
|
|
|
<div class="section-title">执法人员</div> |
|
|
|
<div v-if="personList.length" class="person-list"> |
|
|
|
<div v-for="(person, index) in personList" :key="index" class="person-line"> |
|
|
|
<span class="person-name">{{ person.name }}</span> |
|
|
|
<span class="person-phone">{{ person.phone }}</span> |
|
|
|
<div class="info-row"> |
|
|
|
<span class="info-label">执法人员</span> |
|
|
|
<div v-if="personList.length" class="enforcer-list"> |
|
|
|
<div v-for="(person, index) in personList" :key="index" class="enforcer-item"> |
|
|
|
<span class="enforcer-name">{{ person.name }}</span> |
|
|
|
<span class="enforcer-phone">{{ person.phone }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else class="empty-text">暂无执法人员</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 执法事项 --> |
|
|
|
<div class="form-card"> |
|
|
|
<div class="section-title">执法事项</div> |
|
|
|
<div class="content-text">{{ detail.enforceContent || '-' }}</div> |
|
|
|
<!-- <div class="info-row"> |
|
|
|
<span class="info-label">登记</span> |
|
|
|
<span class="info-value">{{ detail.enforceRegister || '-' }}</span> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 执法要求 --> |
|
|
|
<div class="form-card"> |
|
|
|
<div class="section-title">执法要求</div> |
|
|
|
<div class="content-text">{{ detail.enforceRequirement || '-' }}</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<van-empty v-else description="未查询到预告信息" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 底部反馈按钮 --> |
|
|
|
<div class="footer-bar" v-if="detail"> |
|
|
|
<van-button class="feedback-btn" type="primary" block @click="goFeedback">反馈</van-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -102,6 +106,17 @@ const formatDate = (dateStr) => { |
|
|
|
|
|
|
|
const onBack = () => { router.back(); }; |
|
|
|
|
|
|
|
const goFeedback = () => { |
|
|
|
const id = route.query.id; |
|
|
|
router.push({ |
|
|
|
path: '/enforcement/notice/message', |
|
|
|
query: { |
|
|
|
id: id, |
|
|
|
readonly: 0 |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
const id = route.query.id; |
|
|
|
if (!id) { |
|
|
|
@ -134,28 +149,13 @@ onMounted(() => { |
|
|
|
flex-direction: column; |
|
|
|
height: 100%; |
|
|
|
background: #fbfdff; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.van-nav-bar) { |
|
|
|
background: #347bc3; |
|
|
|
flex-shrink: 0; |
|
|
|
|
|
|
|
.van-nav-bar__title { |
|
|
|
color: #fff; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.van-icon { |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
.content-area { |
|
|
|
flex: 1; |
|
|
|
overflow-y: auto; |
|
|
|
padding: 12px; |
|
|
|
padding: 0.27rem; |
|
|
|
padding-bottom: 1.8rem; |
|
|
|
} |
|
|
|
|
|
|
|
.loading-wrap { |
|
|
|
@ -167,127 +167,101 @@ onMounted(() => { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.form-card { |
|
|
|
/* ===== 信息卡片 ===== */ |
|
|
|
.info-card { |
|
|
|
background: #fff; |
|
|
|
border-radius: 14px; |
|
|
|
padding: 16px; |
|
|
|
margin-bottom: 12px; |
|
|
|
box-shadow: 0 4px 14px rgba(44, 116, 190, 0.08); |
|
|
|
border-radius: 4px; |
|
|
|
padding: 0.3rem 0.35rem; |
|
|
|
margin-bottom: 0.27rem; |
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); |
|
|
|
} |
|
|
|
|
|
|
|
.card-header { |
|
|
|
.card-title { |
|
|
|
font-size: 0.4rem; |
|
|
|
font-weight: bold; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 0.25rem; |
|
|
|
padding-bottom: 0.15rem; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.status-tag { |
|
|
|
font-size: 12px; |
|
|
|
font-weight: 500; |
|
|
|
padding: 3px 10px; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.status-0 { |
|
|
|
background: #f0f0f0; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.status-1 { |
|
|
|
background: #e6f7ff; |
|
|
|
color: #1890ff; |
|
|
|
} |
|
|
|
|
|
|
|
.status-2 { |
|
|
|
background: #fff2e8; |
|
|
|
color: #fa8c16; |
|
|
|
} |
|
|
|
|
|
|
|
.status-3 { |
|
|
|
background: #f6ffed; |
|
|
|
color: #52c41a; |
|
|
|
} |
|
|
|
|
|
|
|
.card-date { |
|
|
|
font-size: 12px; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.notice-title { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 700; |
|
|
|
color: #111; |
|
|
|
line-height: 1.5; |
|
|
|
margin-bottom: 14px; |
|
|
|
align-items: baseline; |
|
|
|
} |
|
|
|
|
|
|
|
.info-row { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
margin-bottom: 8px; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 1.5; |
|
|
|
font-size: 0.32rem; |
|
|
|
line-height: 1.8; |
|
|
|
padding: 6px 0px; |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
width: 80px; |
|
|
|
flex-shrink: 0; |
|
|
|
.info-label { |
|
|
|
color: #333; |
|
|
|
font-weight: 500; |
|
|
|
margin-right: 18px; |
|
|
|
font-size: 14px; |
|
|
|
width: 70px; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|
.info-value { |
|
|
|
color: #999; |
|
|
|
flex: 1; |
|
|
|
color: #8a8a8a; |
|
|
|
word-break: break-all; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.section-title { |
|
|
|
font-size: 15px; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 10px; |
|
|
|
padding-bottom: 8px; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
.content-text { |
|
|
|
color: #555; |
|
|
|
line-height: 1.6; |
|
|
|
word-break: break-all; |
|
|
|
white-space: pre-wrap; |
|
|
|
} |
|
|
|
|
|
|
|
.person-list { |
|
|
|
/* ===== 执法人员 ===== */ |
|
|
|
.enforcer-list { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 8px; |
|
|
|
padding: 6px 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.person-line { |
|
|
|
.enforcer-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 14px; |
|
|
|
color: #666; |
|
|
|
gap: 12px; |
|
|
|
|
|
|
|
.person-name { |
|
|
|
.enforcer-name { |
|
|
|
font-weight: 500; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.person-phone { |
|
|
|
.enforcer-phone { |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
} |
|
|
|
.detail_content{ |
|
|
|
height: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-text { |
|
|
|
font-size: 14px; |
|
|
|
color: #ccc; |
|
|
|
/* ===== 底部反馈按钮 ===== */ |
|
|
|
.footer-bar { |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
padding: 0.2rem 0.4rem; |
|
|
|
padding-bottom: calc(0.2rem + env(safe-area-inset-bottom)); |
|
|
|
background: #fff; |
|
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); |
|
|
|
z-index: 10; |
|
|
|
} |
|
|
|
|
|
|
|
.content-text { |
|
|
|
font-size: 14px; |
|
|
|
color: #555; |
|
|
|
line-height: 1.6; |
|
|
|
word-break: break-all; |
|
|
|
white-space: pre-wrap; |
|
|
|
.feedback-btn { |
|
|
|
background: #2b7de9; |
|
|
|
border: none; |
|
|
|
border-radius: 0.3rem; |
|
|
|
font-size: 0.34rem; |
|
|
|
height: 0.88rem; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
