tydata-webview-v2/src/layouts/HomeLayout.vue

<template>
    <div class="home-layout min-h-screen flex flex-col">
        <!-- Header -->
        <div class="header">
            <img class="logo rounded-full overflow-hidden" src="/logo.png" alt="Logo" />
            <div class="title">天远数据</div>
        </div>

        <!-- Content Area -->
        <div class="content flex flex-col flex-1">
            <router-view />
        </div>

        <!-- Vant Tabbar -->

        <van-tabbar v-model="tabbar" @change="tabChange">
            <van-tabbar-item v-for="(item, index) in menu" :key="index" :name="item.name" :icon="item.icon">{{
                item.title }}
            </van-tabbar-item>
        </van-tabbar>

        <!-- Complaint Button -->
        <div @click="toComplaint" class="complaint-button">
            <img src="@/assets/images/homelayout/ts.png" alt="投诉" class="w-4 h-4 mr-1 inline-block" />
            <span class="">投诉</span>
        </div>
        <div class="disclaimer">
            <div class="flex flex-col items-center">
                <div class="flex items-center">
                    <img class="w-4 h-4 mr-2" src="@/assets/images/public_security_record_icon.png" alt="公安备案" />
                    <text>琼公网安备46010002000584号</text>
                </div>
                <div>
                    <a class="text-blue-500" href="https://beian.miit.gov.cn">
                        琼ICP备2024048057号-2
                    </a>
                </div>
            </div>
            <div>海南海宇大数据有限公司版权所有</div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router"; // 引入 Vue Router

const router = useRouter();
const route = useRoute();
const tabbar = ref("index");
const menu = reactive([
    { title: "首页", icon: "home-o", name: "index" },
    { title: "更多", icon: "more-o", name: "more" },
    { title: "资产", icon: "gold-coin-o", name: "agent" },
    { title: "我的", icon: "user-o", name: "me" }
]);

// 根据当前路由设置 Tabbar 的高亮项
onMounted(() => {
    const currentPage = route.name; // 获取当前路由的名称
    tabbar.value = currentPage;
});

// 监听路由变化，更新 tabbar
watch(() => route.name, (newName) => {
    if (newName) {
        tabbar.value = newName;
    }
});

const onClickOverlay = () => { };
// 跳转到相应页面
const tabChange = (name, a, b, c) => {
    if (name === "more") {
        showConfirmDialog({
            title: '更多报告',
            message:
                '是否前往天远查查询更多报告',
        })
            .then(() => {
                window.location.href = "https://www.tianyuancha.cn";
            })
            .catch(() => {
                tabbar.value = route.name;
            })
        return;
    }
    router.push({ name }); // 使用 Vue Router 进行跳转
};

// 跳转到投诉页面
const toComplaint = () => {
    window.location.href =
        "https://work.weixin.qq.com/kfid/kfc8a32720024833f57"; // 跳转到客服页面
    // router.push({ name: 'complaint' }); // 使用 Vue Router 进行跳转
};
</script>

<style scoped>
.home-layout {
    @apply from-sky-100/20 to-white bg-gradient-to-b
}

.header {
    display: flex;
    align-items: center;
    background-color: white;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 3rem;
}

.logo {
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    object-fit: contain;
}

.title {
    font-size: 1.25rem;
    font-weight: bold;
}

.content {
    /* min-height: calc(100vh - 3rem); */
}

.complaint-button {
    position: fixed;
    bottom: 6rem;
    right: 1rem;
    background: #ff6b6b;
    border-radius: 1.5rem;
    padding: 0.25rem 1rem;
    color: white;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 2000;
}

.complaint-button i {
    margin-right: 0.5rem;
}

.disclaimer {
    /* margin-top: 24px; */
    padding: 10px;
    font-size: 12px;
    color: #999;
    text-align: center;
    border-top: 1px solid #e0e0e0;
    padding-bottom: 60px;
    background: #ffffff;
    margin-bottom: 50px;
}
</style>