qnc-webview/src/views/Report.vue

<script setup>
const featureMap = {
    G09SC02: {
        name: '单人婚姻',
        component: defineAsyncComponent(() => import('@/ui/CMarriage.vue')),
    },
    G27BJ05: {
        name: '借贷意向',
        component: defineAsyncComponent(() =>
            import('@/ui/CBankLoanApplication.vue')
        ),
    },
    G28BJ05: {
        name: '借贷行为',
        component: defineAsyncComponent(() =>
            import('@/ui/CBankLoanBehavior.vue')
        ),
    },
    G26BJ05: {
        name: '特殊名单',
        component: defineAsyncComponent(() =>
            import('@/ui/CSpecialList.vue')
        ),
    },
    G34BJ03: {
        name: '个人不良',
        component: defineAsyncComponent(() => import('@/ui/CBad.vue')),
    },
    G35SC01: {
        name: '个人诉讼',
        component: defineAsyncComponent(() => import('@/ui/CLawsuit.vue')),
    },
    G05HZ01: {
        name: '股东人企关系',
        component: defineAsyncComponent(() => import('@/ui/CRelatedEnterprises.vue')),
    },
    Q23SC01: {
        name: '企业涉诉',
        component: defineAsyncComponent(() => import('@/ui/CLawsuit.vue')),
    },
    G15BJ02: {
        name: '手机三要素',
        component: defineAsyncComponent(() => import('@/ui/CPhoneThreeElements.vue')),
    },
    KZEYS: {
        name: '身份证二要素',
        component: defineAsyncComponent(() => import('@/ui/CIDCardTwoElements.vue')),
    },
    G17BJ02: {
        name: '手机号二要素',
        component: defineAsyncComponent(() => import('@/ui/CPhoneTwoElements.vue')),
    },
    G10SC02: {
        name: '双人婚姻核验',
        component: defineAsyncComponent(() => import('@/ui/CDualMarriage.vue')),
    },
    P_C_B332: {
        name: '人车核验',
        component: defineAsyncComponent(() => import('@/ui/CP_C_B332.vue')),
    },
    FIN019: {
        name: '银行卡黑名单',
        component: defineAsyncComponent(() => import('@/ui/CFIN019.vue')),
    },
    G20GZ01: {
        name: '银行卡四要素核验',
        component: defineAsyncComponent(() => import('@/ui/CG20GZ01.vue')),
    },
    G03HZ01: {
        name: '手机号码风险',
        component: defineAsyncComponent(() => import('@/ui/CG03HZ01.vue')),
    },
    G19BJ02: {
        name: '手机二次卡',
        component: defineAsyncComponent(() => import('@/ui/CG19BJ02.vue')),
    },
    G02BJ02: {
        name: '手机在网时长',
        component: defineAsyncComponent(() => import('@/ui/CG02BJ02.vue')),
    },
};


import LEmpty from "@/components/LEmpty.vue";
import { useWebView } from "@/composables/useWebView";
useWebView()

const productId = ref(null);
const isDone = ref(true);

const reportData = ref([])
const reportParams = ref({})
const reportName = ref("")
const reportDateTime = ref(null)
const orderId = ref(null);
const orderNo = ref("")
const isEmpty = ref(false)
onMounted(() => {
    const query = new URLSearchParams(window.location.search);
    orderId.value = query.get("order_id");
    orderNo.value = query.get("order_no");

    if (!orderId.value && !orderNo.value) return;

    getReport()
});

const getReport = async () => {
    let queryUrl = ""
    if (orderNo.value) {
        queryUrl = `/query/orderNo/${orderNo.value}`
    } else if (orderId.value) {
        queryUrl = `/query/orderId/${orderId.value}`
    } else {
        return
    }
    const { data, error } = await useApiFetch(queryUrl)
        .get()
        .json()

    if (data.value && !error.value) {
        if (data.value.code === 200) {
            productId.value = data.value.data.product_id;
            reportData.value = data.value.data.query_data
            reportParams.value = data.value.data.query_params
            reportName.value = data.value.data.product_name
            reportDateTime.value = data.value.data.create_time
        } else if (data.value.code === 200003) {
            isEmpty.value = true
        }
    }
}
</script>

<template>
    <div class="min-h-full from-blue-100 to-white bg-gradient-to-b">
        <!-- <CTabs :tabs="sortedTabs" type="blue-green" /> -->
        <template v-if="isDone">
            <div class="flex flex-col gap-y-4 p-4 pt-8">
                <div id="overdiv" class="title">报告概述</div>
                <div class="card">
                    <div class="flex flex-col gap-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-700 font-bold">报告时间：</span>
                            <span class="text-gray-600">{{ reportDateTime }}</span>
                        </div>
                        <div class="flex justify-between" v-if="!isEmpty">
                            <span class="text-gray-700 font-bold">报告项目：</span>
                            <span class="text-gray-600">
                                {{ reportName }}</span>
                        </div>
                    </div>
                    <div class="mt-2" v-if="reportData.length > 1">
                        <LTitle class="my-4" title="报告内容" type="blue-green" />
                        <div class="flex flex-col gap-y-2">
                            <div v-for="item in sortedReportItems" :key="item.value" class="flex justify-between">
                                <span class="text-gray-700 font-bold">{{ item.label }}：</span>
                                <span class="text-green-500 font-bold">已解锁</span>
                            </div>
                        </div>
                    </div>
                </div>
                <LEmpty v-if="isEmpty" />
                <template v-for="(item, index) in reportData" :key="index">
                    <div id="lawsuit" class="title">{{ featureMap[item.apiID].name }}</div>
                    <component :is="featureMap[item.apiID].component" :data="item.data" :params="reportParams">
                    </component>
                </template>
                <div class="card">
                    <div>
                        <div class="text-bold text-blue-500 mb-2">报告说明</div>
                        <div>
                            &nbsp; &nbsp;本报告的数据由用户本人明确授权后，我们才向相关合法存有用户个人数据的机构调取本报告相关内容，本平台只做大数据的获取与分析，仅向用户个人展示参考。
                        </div>
                        <p>
                            &nbsp; &nbsp; 报告有效期<strong class="text-red-500">30天</strong>，过期自动删除。
                        </p>
                        <p>
                            &nbsp; &nbsp;
                            若您的数据不全面，可能是数据具有延迟性或者合作信息机构未获取到您的数据。若数据有错误请联系客服
                        </p>
                        <p> &nbsp;
                            &nbsp;本产品所有数据均来自第三方。可能部分数据未公开、数据更新延迟或信息受到限制，贵司不对数据的准确性、真实性、完整性做任何承诺。用户需根据实际情况，结合报告内容自行判断与决策。
                        </p>

                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<style lang="scss" scoped>
.title {
    @apply mx-auto mt-2 w-64 border rounded-3xl bg-gradient-to-r from-blue-400 via-green-500 to-teal-500 py-2 text-center text-white font-bold;
}
</style>