EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/my/complaintDetail.vue

<template>
    <div class="complaint-detail-page">
        <van-nav-bar title="投诉建议详情" left-arrow @click-left="onClickLeft" />

        <div class="detail-content">
            <!-- 基本信息 -->
            <div class="detail-card">
                <div class="detail-row">
                    <span class="detail-label">投诉时间</span>
                    <span class="detail-value">{{ detail.time }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">执法单位</span>
                    <span class="detail-value">{{ detail.bureauDept }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">投诉类型</span>
                    <span class="detail-value">{{ detail.complaintType }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">投诉事项</span>
                    <span class="detail-value">{{ detail.complaintItem || '-' }}</span>
                </div>
            </div>

            <!-- 投诉内容 -->
            <div class="detail-card">
                <div class="detail-row">
                    <span class="detail-label">投诉内容</span>
                    <span class="detail-value">{{ detail.content }}</span>
                </div>
            </div>

            <!-- 附件 -->
            <div class="detail-card">
                <div class="card-title">附件</div>
                <div v-if="detail.images && detail.images.length > 0" class="image-list">
                    <img v-for="(img, idx) in detail.images" :key="idx" :src="img" class="detail-image" />
                </div>
                <div v-else class="detail-value">无附件</div>
            </div>

            <!-- 涉事地址 -->
            <div class="detail-card">
                <div class="detail-row">
                    <span class="detail-label">涉事地址</span>
                    <span class="detail-value">{{ detail.address || '-' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">详细地址</span>
                    <span class="detail-value">{{ detail.addressDetail || '-' }}</span>
                </div>
            </div>

            <!-- 联系人信息 -->
            <div class="detail-card">
                <div class="detail-row">
                    <span class="detail-label">联系人</span>
                    <span class="detail-value">{{ detail.contactName || '-' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">联系电话</span>
                    <span class="detail-value">{{ detail.contactPhone || '-' }}</span>
                </div>
            </div>

            <!-- 授权信息 -->
            <div class="detail-card">
                <div class="detail-row">
                    <span class="detail-label">是否授权</span>
                    <span class="detail-value">{{ detail.authorized ? '同意' : '不同意' }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="complaintDetail">
import { showToast } from 'vant';
import 'vant/es/toast/style';
import { mockComplaintDetailMap } from '@/mock/complaint';

const router = useRouter();
const route = useRoute();

const detail = ref({
    time: '',
    bureauDept: '',
    complaintType: '',
    complaintItem: '',
    content: '',
    images: [],
    address: '',
    addressDetail: '',
    contactName: '',
    contactPhone: '',
    authorized: true
});

onMounted(() => {
    const id = route.query.id;
    if (!id) {
        showToast('缺少投诉ID');
        return;
    }
    if (mockComplaintDetailMap[id]) {
        detail.value = { ...mockComplaintDetailMap[id] };
    } else {
        showToast('未找到该投诉记录');
    }
});

const onClickLeft = () => {
    router.back();
};
</script>

<style lang="less" scoped>
.complaint-detail-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f5f7fa;
}

.detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.27rem;
}

.detail-card {
    background: #fff;
    border-radius: 0.2rem;
    padding: 0.3rem;
    margin-bottom: 0.27rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card-title {
    font-size: 0.35rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.2rem;
}

.detail-row {
    display: flex;
    align-items: flex-start;
    padding: 0.2rem 0;
    font-size: 0.32rem;
    line-height: 1.5;
    border-bottom: 1px solid #f8f8f8;

    &:last-child {
        border-bottom: none;
    }
}

.detail-label {
    color: #666;
    width: 1.8rem;
    flex-shrink: 0;
}

.detail-value {
    color: #333;
    flex: 1;
    word-break: break-all;
    font-size: 0.32rem;
}

.image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.detail-image {
    width: 2rem;
    height: 2rem;
    border-radius: 0.1rem;
    object-fit: cover;
}
</style>