EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enterpriseScanPreview.vue

<template>
    <div class="home app_content">
        <!-- 返回首页 -->
        <span class="tohome" @click="toEnforcementHome">
            <i class="van-badge__wrapper van-icon van-icon-wap-home-o"></i>
        </span>

        <!-- 中间 -->
        <div class="warp_body">
            <div class="white-body">
                <!-- Tab 切换 -->
                <div class="tabs">
                    <ul>
                        <li v-for="(item, index) in tabList" :key="index"
                            @click="currentTab = index"
                            :class="{ active: index === currentTab }">
                            <span>{{ item.title }}</span>
                        </li>
                    </ul>
                </div>

                <!-- 企业画像 Tab -->
                <div v-if="currentTab === 0" class="tab-content">
                    <div v-if="enterpriseData" class="enterprise-info">
                        <van-cell-group inset>
                            <van-cell title="企业名称" :value="enterpriseData.enterpriseName" />
                            <van-cell title="纳税识别号" :value="enterpriseData.enterpriseNumber" />
                            <van-cell title="企业类型" :value="enterpriseData.enterpriseType" />
                            <van-cell title="法定代表人" :value="enterpriseData.legalPerson" />
                            <van-cell title="注册资本" :value="enterpriseData.registeredCapital" />
                            <van-cell title="成立日期" :value="formatDate(enterpriseData.establishmentTime)" />
                            <van-cell title="营业期限" :value="enterpriseData.operatingTerm" />
                            <van-cell title="企业地址" :value="enterpriseData.enterpriseAddress" :label="enterpriseData.enterpriseAddress" />
                            <van-cell title="经营范围" :label="enterpriseData.businessScope" />
                            <van-cell title="联系电话" :value="enterpriseData.enterpriseTel" />
                            <van-cell title="所属行业" :value="enterpriseData.industry" />
                        </van-cell-group>
                    </div>
                    <van-empty v-else description="暂无企业信息" />
                </div>

                <!-- 执法记录 Tab -->
                <div v-if="currentTab === 1" class="tab-content">
                    <van-empty description="执法记录功能待对接" />
                </div>
            </div>
        </div>

        <!-- 登记按钮 -->
        <div class="addinfo" @click="toSign">登记</div>
    </div>
</template>

<script setup name="EnterpriseScanPreview">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { showFailToast } from 'vant';

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

// ========== 数据 ==========
const currentTab = ref(0);
const tabList = [
    { title: '企业画像', value: '0' },
    { title: '执法记录', value: '1' },
];
const enterpriseData = ref(null);
const enterpriseNumber = ref('');
const qrCodeValid = ref(false);

// ========== 初始化加载 ==========
onMounted(() => {
    // 从 sessionStorage 读取扫码页传递的企业信息
    const cached = sessionStorage.getItem('enterpriseScanData');
    if (cached) {
        try {
            const data = JSON.parse(cached);
            enterpriseData.value = data;
            enterpriseNumber.value = data.enterpriseNumber || '';
            qrCodeValid.value = !!data.qrCodeValid;
            console.log('企业详情加载成功（来自缓存）:', data.enterpriseName);
        } catch (e) {
            console.error('解析企业缓存数据失败', e);
            showFailToast('企业信息解析失败');
        }
    } else {
        showFailToast('缺少企业信息，请重新扫码');
    }
});

// ========== 工具方法 ==========
const formatDate = (dateStr) => {
    if (!dateStr) return '';
    const d = new Date(dateStr);
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};

// ========== 页面跳转 ==========
const toEnforcementHome = () => {
    router.push({ path: '/enforcement/enforcementHome' });
};

const toSign = () => {
    router.push({
        path: '/sign',
        query: {
            enterpriseNumber: enterpriseNumber.value,
            reason: route?.query?.reason || '',
            checkCss: route?.query?.checkCss || '',
            isNoScan: route?.query?.isNoScan || 'false',
        },
    });
};
</script>

<style lang="less" scoped>
.home {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #ebf3fb;

    .warp_body {
        position: relative;
        flex: 1;
        overflow-y: auto;
        background-image: linear-gradient(to bottom, #ebf3fb, transparent);
    }

    .white-body {
        margin: 0 3%;
        width: 94%;
        min-height: 100vh;
        background-color: #fff;
        border-radius: 0.27rem;
    }
}

.tohome {
    position: absolute;
    top: 1.25%;
    right: 5%;
    font-size: 0.5rem;
    z-index: 10;
}

.tabs {
    padding: 3% 3% 0;
    width: 94%;
    height: 1.25rem;
    box-sizing: content-box;
}

.tabs ul {
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 0.4rem;
    line-height: 1.25rem;
    text-align: center;
    align-content: center;
    justify-items: center;
}

.tabs ul li {
    float: left;
    width: 50%;
    height: 100%;
    cursor: pointer;
}

.tabs ul li span {
    display: block;
    width: 100%;
    height: 100%;
    color: #4aa1f9;
    background: #e6f0fd;
    border-radius: 0.15rem;
}

.tabs ul li.active span {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
}

.tab-content {
    padding: 0.3rem;
}

.enterprise-info {
    :deep(.van-cell) {
        padding: 0.25rem 0.35rem;
        font-size: 0.35rem;
    }
    :deep(.van-cell__title) {
        color: #999;
        flex: none;
        width: 2.5rem;
    }
    :deep(.van-cell__value) {
        color: #333;
    }
    :deep(.van-cell__label) {
        color: #666;
        font-size: 0.32rem;
        line-height: 1.5;
    }
}

.addinfo {
    position: absolute;
    bottom: 3%;
    right: 2%;
    z-index: 99999;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #1367fe;
    border-radius: 50%;
    box-shadow: 0 0 0.27rem #1367fe;
    color: #fff;
    font-size: 0.4rem;
    text-align: center;
    vertical-align: middle;
    padding-top: 0.45rem;
    box-sizing: border-box;
}
</style>