EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/law/lawServiceDetail.vue

<template>
    <div class="law-service-detail-page">
        <!-- 顶部导航栏 -->
        <van-nav-bar
            title="普法服务"
            left-text="关闭"
            left-arrow
            @click-left="onClickLeft"
        >
            <!-- <template #right>
                <van-icon name="filter-o" size="20" @click="onFilterClick" />
                <van-icon name="search" size="20" style="margin-left: 12px;" @click="onSearchClick" />
            </template> -->
        </van-nav-bar>

        <!-- 内容区域 -->
        <div class="detail-content">
            <!-- 标题 -->
            <h1 class="detail-title">{{ detail.title }}</h1>

            <!-- 来源和时间 -->
            <div class="detail-meta">
                <span class="detail-source">{{ detail.source }}</span>
                <span class="detail-time">{{ detail.time }}</span>
            </div>

            <!-- 正文 -->
            <div class="detail-body">
                <p v-for="(paragraph, index) in detail.content" :key="index">
                    {{ paragraph }}
                </p>
            </div>

            <!-- 图片 -->
            <div class="detail-images" v-if="detail.images && detail.images.length">
                <img
                    v-for="(img, index) in detail.images"
                    :key="index"
                    :src="img"
                    alt=""
                    @click="previewImage(index)"
                />
            </div>
        </div>
    </div>
</template>

<script setup name="lawServiceDetail">
import { showToast, showImagePreview } from 'vant';
import 'vant/es/toast/style';
import 'vant/es/image-preview/style';
import { getEducationServicesDetail } from '@/api/enterprise';

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

// ========== 详情数据 ==========
const detail = ref({
    id: '',
    title: '',
    source: '',
    time: '',
    content: [],
    images: [],
});

const loading = ref(false);

// ========== 获取详情数据 ==========
const fetchDetail = () => {
    const id = route.query.id;
    if (!id) {
        showToast('缺少详情ID');
        router.back();
        return;
    }

    loading.value = true;
    getEducationServicesDetail(
        { id },
        (res) => {
            loading.value = false;
            if (res.code === 200 && res.data) {
                detail.value = {
                    id: res.data.id,
                    title: res.data.title || '',
                    source: res.data.source || '',
                    time: res.data.time || '',
                    content: res.data.content ? (Array.isArray(res.data.content) ? res.data.content : [res.data.content]) : [],
                    images: res.data.images || [],
                };
            } else {
                showToast(res.message || '获取详情失败');
            }
        },
        (err) => {
            loading.value = false;
            showToast(err.message || '获取详情失败');
        }
    );
};

// ========== 页面加载时获取数据 ==========
onMounted(() => {
    fetchDetail();
});

// ========== 返回上一页 ==========
const onClickLeft = () => {
    router.back();
};

// ========== 筛选点击 ==========
const onFilterClick = () => {
    showToast('筛选功能开发中');
};

// ========== 搜索点击 ==========
const onSearchClick = () => {
    showToast('搜索功能开发中');
};

// ========== 预览图片 ==========
const previewImage = (index) => {
    showImagePreview({
        images: detail.value.images,
        startPosition: index,
    });
};
</script>

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

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

/* ===== 导航栏样式覆盖 ===== */
:deep(.van-nav-bar) {
    background-color: #fff;
}

:deep(.van-nav-bar__title) {
    font-size: 0.45rem;
    font-weight: 600;
    color: #333;
}

:deep(.van-nav-bar__text) {
    font-size: 0.35rem;
    color: #333;
}

:deep(.van-nav-bar .van-icon) {
    color: #333;
}

/* ===== 详情内容样式 ===== */
.detail-title {
    font-size: 0.55rem;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.detail-meta {
    display: flex;
    align-items: center;
    margin-bottom: 0.4rem;

    .detail-source {
        font-size: 0.3rem;
        color: #2d94fa;
        margin-right: 0.3rem;
    }

    .detail-time {
        font-size: 0.3rem;
        color: #999;
    }
}

.detail-body {
    p {
        font-size: 0.37rem;
        color: #333;
        line-height: 1.8;
        text-indent: 2em;
        margin-bottom: 0.3rem;
    }
}

.detail-images {
    margin-top: 0.3rem;

    img {
        width: 100%;
        border-radius: 0.15rem;
        margin-bottom: 0.2rem;
        display: block;
    }
}
</style>