庄锐波
4 months ago
8 changed files with 456 additions and 37 deletions
@ -0,0 +1,293 @@ |
|||||
|
<template> |
||||
|
<div class="notice-detail-page app_content"> |
||||
|
<!-- 顶部导航 --> |
||||
|
<van-nav-bar |
||||
|
title="预告详情" |
||||
|
left-arrow |
||||
|
@click-left="onBack" |
||||
|
/> |
||||
|
|
||||
|
<div class="content"> |
||||
|
<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> |
||||
|
<div class="card-date">{{ formatDate(detail.createTime) }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="notice-title">{{ detail.enforceContent || '暂无执法事项' }}</div> |
||||
|
|
||||
|
<div class="info-row"> |
||||
|
<div class="label">执法日期</div> |
||||
|
<div class="value">{{ detail.enforceDate || '-' }} {{ getTimeText(detail.enforceTime) }}</div> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<div class="label">执法单位</div> |
||||
|
<div class="value">{{ detail.bureauDeptName || '-' }}</div> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<div class="label">企业名称</div> |
||||
|
<div class="value">{{ detail.enterpriseName || '-' }}</div> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<div class="label">企业联系人</div> |
||||
|
<div class="value">{{ detail.contactPerson || '-' }}</div> |
||||
|
</div> |
||||
|
<div class="info-row"> |
||||
|
<div class="label">联系电话</div> |
||||
|
<div class="value">{{ detail.contactPhone || '-' }}</div> |
||||
|
</div> |
||||
|
</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> |
||||
|
</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> |
||||
|
|
||||
|
<!-- 执法要求 --> |
||||
|
<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> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="cpNoticeDetail"> |
||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||
|
import { getNoticeDetail } from '@/api/enforcement/notice'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
|
||||
|
const loading = ref(true); |
||||
|
const detail = ref(null); |
||||
|
const personList = ref([]); |
||||
|
|
||||
|
const getStatusText = (status) => { |
||||
|
const map = { 0: '草稿', 1: '已发布', 2: '已取消', 3: '已执行' }; |
||||
|
return map[status] || '未知'; |
||||
|
}; |
||||
|
|
||||
|
const getTimeText = (time) => { |
||||
|
const map = { 1: '上午', 2: '下午', 3: '其他' }; |
||||
|
return map[time] || ''; |
||||
|
}; |
||||
|
|
||||
|
const formatDate = (dateStr) => { |
||||
|
if (!dateStr) return ''; |
||||
|
return String(dateStr).substring(0, 16).replace('T', ' '); |
||||
|
}; |
||||
|
|
||||
|
const onBack = () => { router.back(); }; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
const id = route.query.id; |
||||
|
if (!id) { |
||||
|
loading.value = false; |
||||
|
return; |
||||
|
} |
||||
|
getNoticeDetail(id, (res) => { |
||||
|
loading.value = false; |
||||
|
if (res.code === 200 && res.data) { |
||||
|
detail.value = res.data; |
||||
|
// 解析执法人员 |
||||
|
if (res.data.enforceUserNames) { |
||||
|
const names = res.data.enforceUserNames.split(','); |
||||
|
const tels = res.data.enforceUserTels ? res.data.enforceUserTels.split(',') : []; |
||||
|
personList.value = names.map((name, i) => ({ |
||||
|
name, |
||||
|
phone: i < tels.length ? tels[i] : '', |
||||
|
})); |
||||
|
} |
||||
|
} |
||||
|
}, () => { |
||||
|
loading.value = false; |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.notice-detail-page { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
background: #eaf4ff; |
||||
|
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 { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: 12px; |
||||
|
} |
||||
|
|
||||
|
.loading-wrap { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 40px 0; |
||||
|
color: #999; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.form-card { |
||||
|
background: #fff; |
||||
|
border-radius: 14px; |
||||
|
padding: 16px; |
||||
|
margin-bottom: 12px; |
||||
|
box-shadow: 0 4px 14px rgba(44, 116, 190, 0.08); |
||||
|
} |
||||
|
|
||||
|
.card-header { |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
margin-bottom: 8px; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.5; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
width: 80px; |
||||
|
flex-shrink: 0; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
flex: 1; |
||||
|
color: #8a8a8a; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 15px; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
margin-bottom: 10px; |
||||
|
padding-bottom: 8px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.person-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.person-line { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
gap: 12px; |
||||
|
|
||||
|
.person-name { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.person-phone { |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
font-size: 14px; |
||||
|
color: #ccc; |
||||
|
} |
||||
|
|
||||
|
.content-text { |
||||
|
font-size: 14px; |
||||
|
color: #555; |
||||
|
line-height: 1.6; |
||||
|
word-break: break-all; |
||||
|
white-space: pre-wrap; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue