vincent
3 months ago
40 changed files with 770 additions and 294 deletions
@ -0,0 +1,216 @@ |
|||
<template> |
|||
<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="info-card"> |
|||
<div class="info-row"> |
|||
<span class="info-label">企业名称</span> |
|||
<span class="info-value">{{ detail.enterpriseName || '-' }}</span> |
|||
</div> |
|||
<div class="info-row"> |
|||
<span class="info-label">企业联系人</span> |
|||
<span class="info-value">{{ detail.contactPerson || '-' }}</span> |
|||
</div> |
|||
<div class="info-row"> |
|||
<span class="info-label">联系电话</span> |
|||
<span class="info-value">{{ detail.contactPhone || '-' }}</span> |
|||
</div> |
|||
<div class="info-row"> |
|||
<span class="info-label">执法日期</span> |
|||
<span class="info-value">{{ formatDate(detail.enforceDate) || '-' }} {{ getTimeText(detail.enforceTime) }}</span> |
|||
</div> |
|||
<div class="info-row"> |
|||
<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="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> |
|||
<span v-else class="info-value">-</span> |
|||
</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> |
|||
|
|||
<script setup name="planNoticeDetail"> |
|||
import { useRouter, useRoute } from 'vue-router'; |
|||
import { getPlanNoticeDetail } from '@/api/enterprise/planNotice'; |
|||
|
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
|
|||
const loading = ref(true); |
|||
const detail = ref(null); |
|||
const personList = ref([]); |
|||
|
|||
const getTimeText = (time) => { |
|||
const map = { 1: '上午', 2: '下午', 3: '其他' }; |
|||
return map[time] || ''; |
|||
}; |
|||
|
|||
const formatDate = (dateStr) => { |
|||
if (!dateStr) return ''; |
|||
return String(dateStr).substring(0, 10).replace('T', ' '); |
|||
}; |
|||
|
|||
const goFeedback = () => { |
|||
const id = route.query.id; |
|||
router.push({ |
|||
path: '/enterprise/enforcementChat', |
|||
query: { id } |
|||
}); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
const id = route.query.id; |
|||
if (!id) { |
|||
loading.value = false; |
|||
return; |
|||
} |
|||
getPlanNoticeDetail({ 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: #fbfdff; |
|||
} |
|||
|
|||
.content-area { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 0.27rem; |
|||
padding-bottom: 1.8rem; |
|||
} |
|||
|
|||
.loading-wrap { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 40px 0; |
|||
color: #999; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* ===== 信息卡片 ===== */ |
|||
.info-card { |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
padding: 0.3rem 0.35rem; |
|||
margin-bottom: 0.27rem; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); |
|||
} |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
font-size: 0.32rem; |
|||
line-height: 1.8; |
|||
padding: 6px 0px; |
|||
|
|||
.info-label { |
|||
color: #333; |
|||
margin-right: 18px; |
|||
font-size: 14px; |
|||
width: 70px; |
|||
flex-shrink: 0; |
|||
} |
|||
.info-value { |
|||
color: #999; |
|||
flex: 1; |
|||
word-break: break-all; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
/* ===== 执法人员 ===== */ |
|||
.enforcer-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
padding: 6px 0px; |
|||
} |
|||
|
|||
.enforcer-item { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
color: #666; |
|||
gap: 12px; |
|||
|
|||
.enforcer-name { |
|||
font-weight: 500; |
|||
color: #999; |
|||
} |
|||
|
|||
.enforcer-phone { |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
.detail_content { |
|||
min-height: 100px; |
|||
} |
|||
|
|||
/* ===== 底部反馈按钮 ===== */ |
|||
.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; |
|||
} |
|||
|
|||
.feedback-btn { |
|||
background: #2b7de9; |
|||
border: none; |
|||
border-radius: 0.3rem; |
|||
font-size: 0.34rem; |
|||
height: 0.88rem; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue