tydata-webview-v2/src/views/Inquire.vue

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import InquireForm from "@/components/InquireForm.vue";

const route = useRoute();
const feature = ref(route.params.feature);

// 获取产品信息
const featureData = ref({});

onMounted(async () => {
    isFinishPayment();
    await getProduct();
    // 检查是否为婚姻查询页面，如果是则显示升级通知
});

function isFinishPayment() {
    const query = new URLSearchParams(window.location.search);
    let orderNo = query.get("out_trade_no");
    if (orderNo) {
        router.push({ path: "/report", query: { orderNo } });
    }
}

// 婚姻查询升级通知弹窗
function showMarriageUpgradeNotice() {
    // 创建自定义弹窗
    const modal = document.createElement('div');
    modal.style.position = 'fixed';
    modal.style.top = '0';
    modal.style.left = '0';
    modal.style.width = '100%';
    modal.style.height = '100%';
    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    modal.style.display = 'flex';
    modal.style.justifyContent = 'center';
    modal.style.alignItems = 'center';
    modal.style.zIndex = '9999';

    modal.innerHTML = `
        <div style="
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin: 20px;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow-y: auto;
            max-height: 90vh;
        ">
            <h3 style="
                color: #333;
                text-align: center;
                margin-top: 0;
                margin-bottom: 16px;
                font-size: 18px;
            ">亲爱的用户，您好！</h3>
            
            <p style="
                color: #666;
                line-height: 1.6;
                margin: 8px 0;
                text-align: center;
                font-size: 14px;
            ">婚恋报告正在优化升级中，需要查询请前往天远查。</p>
            
            
            <div style="display: flex; gap: 12px; margin-bottom: 16px;">
                <button id="jumpNowBtn" style="
                    flex: 1;
                    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
                    color: white;
                    border: none;
                    padding: 12px 0;
                    border-radius: 25px;
                    cursor: pointer;
                    font-size: 14px;
                    font-weight: bold;
                ">是</button>
                
                <button id="remindLaterBtn" style="
                    flex: 1;
                    background: #f8f9fa;
                    color: #666;
                    border: 1px solid #ddd;
                    padding: 12px 0;
                    border-radius: 25px;
                    cursor: pointer;
                    font-size: 14px;
                ">否</button>
            </div>
            
           
        </div>
    `;

    document.body.appendChild(modal);

    // 绑定按钮事件
    const jumpNowBtn = modal.querySelector('#jumpNowBtn');
    const remindLaterBtn = modal.querySelector('#remindLaterBtn');

    jumpNowBtn.addEventListener('click', () => {
        // 跳转到新版首页
        window.open('https://www.tianyuancha.cn/', '_blank');
        document.body.removeChild(modal);
    });

    remindLaterBtn.addEventListener('click', () => {
        // 跳转到指定网站
        window.location.href = 'https://www.tianyuandb.com/';
    });
}

async function getProduct() {
    const { data, error } = await useApiFetch(`/product/en/${feature.value}`)
        .get()
        .json();

    if (data.value) {
        featureData.value = data.value.data;
        // 确保 FLXG0V4B 排在首位
        if (
            featureData.value.features &&
            featureData.value.features.length > 0
        ) {
            featureData.value.features.sort((a, b) => {
                if (a.api_id === "FLXG0V4B") return -1;
                if (b.api_id === "FLXG0V4B") return 1;
                return 0;
            });
        }
    }
}
</script>

<template>
    <InquireForm :type="'normal'" :feature="feature" :feature-data="featureData" />
</template>