庄锐波
2 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