310 lines
12 KiB
Vue
310 lines
12 KiB
Vue
<script setup>
|
||
const router = useRouter();
|
||
import { storeToRefs } from "pinia";
|
||
import { showConfirmDialog } from "vant";
|
||
import SectionTitle from "@/components/SectionTitle.vue";
|
||
|
||
const agentStore = useAgentStore();
|
||
const { isAgent } = storeToRefs(agentStore);
|
||
import personalDataIcon from "@/assets/images/index/personal_data_bg.png";
|
||
import companyIcon from "@/assets/images/index/company_bg.png";
|
||
import loanCheckIcon from "@/assets/images/index/loan_check_bg.png";
|
||
import marriageRiskIcon from "@/assets/images/index/marriage_risk_bg.png";
|
||
import housekeepingRiskIcon from "@/assets/images/index/housekeeping_risk_bg.png";
|
||
import preLoanRiskIcon from "@/assets/images/index/preloan_risk_bg.png";
|
||
|
||
function toInquire(name) {
|
||
// if (name === "marriage") {
|
||
// showConfirmDialog({
|
||
// title: "婚恋风险查询",
|
||
// message: "是否进入天远查进行婚恋查询？",
|
||
// confirmButtonText: "进入",
|
||
// cancelButtonText: "取消",
|
||
// })
|
||
// .then(() => {
|
||
// // 在当前标签页打开，不新开tab
|
||
// window.location.href = "https://www.tianyuancha.cn";
|
||
// })
|
||
// .catch(() => {
|
||
// // 取消则继续后续逻辑
|
||
// router.push(`/inquire/marriage`);
|
||
// });
|
||
// return; // 阻止继续跳转，等待 dialog 回调
|
||
// }
|
||
router.push(`/inquire/${name}`);
|
||
}
|
||
function toInvitation() {
|
||
router.push({ name: "invitation" });
|
||
}
|
||
const toPromote = () => {
|
||
router.push({ name: "promote" });
|
||
};
|
||
|
||
const toHelp = () => {
|
||
router.push("/help");
|
||
};
|
||
|
||
const toService = () => {
|
||
router.push({ name: "service" });
|
||
};
|
||
|
||
function toHistory() {
|
||
router.push(`/historyQuery`);
|
||
}
|
||
|
||
const services = ref([
|
||
{
|
||
title: "个人大数据",
|
||
name: "personalData",
|
||
subtitle: "数据洞察，规避风险",
|
||
bg: personalDataIcon,
|
||
goColor: "#6699ff",
|
||
},
|
||
{
|
||
title: "婚恋风险",
|
||
name: "marriage",
|
||
subtitle: "深度了解，坦诚相爱",
|
||
bg: marriageRiskIcon,
|
||
goColor: "#ff99cc",
|
||
},
|
||
{
|
||
title: "入职背调",
|
||
name: "backgroundcheck",
|
||
subtitle: "人才甄选，用人无忧",
|
||
bg: preLoanRiskIcon,
|
||
goColor: "#7db3ff",
|
||
},
|
||
]);
|
||
|
||
const riskServices = ref([
|
||
{
|
||
title: "小微企业",
|
||
name: "companyinfo",
|
||
subtitle: "风险监控，稳健经营",
|
||
bg: companyIcon,
|
||
goColor: "#ffaa66",
|
||
},
|
||
{
|
||
title: "家政风险",
|
||
name: "homeservice",
|
||
subtitle: "身份核验，守护家庭",
|
||
bg: housekeepingRiskIcon,
|
||
goColor: "#66cccc",
|
||
},
|
||
{
|
||
title: "贷前风险",
|
||
name: "preloanbackgroundcheck",
|
||
subtitle: "信用评估，放款无忧",
|
||
bg: loanCheckIcon,
|
||
goColor: "var(--color-service-loan)",
|
||
},
|
||
]);
|
||
|
||
const noticeText = ref([]);
|
||
const toCooperation = () => {
|
||
window.location.href = "https://ass.tianyuandata.com";
|
||
};
|
||
const toBigData = () => {
|
||
window.location.href = "https://www.tybigdata.com/";
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="box-border min-h-screen">
|
||
<div class="relative p-4">
|
||
<img
|
||
class="h-full w-full rounded-xl overflow-hidden"
|
||
src="@/assets/images/index/banner.png"
|
||
/>
|
||
</div>
|
||
<div class="px-6">
|
||
<!-- 菜单项一行显示 -->
|
||
<div class="grid grid-cols-4 gap-3">
|
||
<div
|
||
class="text-center flex flex-col justify-center items-center"
|
||
@click="toPromote"
|
||
>
|
||
<div
|
||
class="h-16 w-16 p-1 box-content bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center"
|
||
>
|
||
<img
|
||
src="@/assets/images/index/tgbg.png"
|
||
alt="推广报告"
|
||
class="h-12 w-12"
|
||
/>
|
||
</div>
|
||
<div class="text-center mt-1 font-bold">推广报告</div>
|
||
</div>
|
||
|
||
<div
|
||
class="text-center flex flex-col justify-center items-center"
|
||
@click="toInvitation"
|
||
>
|
||
<div
|
||
class="h-16 w-16 p-1 box-content bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center"
|
||
>
|
||
<img
|
||
src="@/assets/images/index/yqhy.png"
|
||
alt="邀请下级"
|
||
class="h-12 w-12"
|
||
/>
|
||
</div>
|
||
<div class="text-center mt-1 font-bold">邀请下级</div>
|
||
</div>
|
||
<div
|
||
class="text-center flex flex-col justify-center items-center"
|
||
@click="toHelp"
|
||
>
|
||
<div
|
||
class="h-16 w-16 p-1 box-content bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center"
|
||
>
|
||
<img
|
||
src="@/assets/images/index/bzzx.png"
|
||
alt="帮助中心"
|
||
class="h-12 w-12"
|
||
/>
|
||
</div>
|
||
<div class="text-center mt-1 font-bold">帮助中心</div>
|
||
</div>
|
||
<div
|
||
class="text-center flex flex-col justify-center items-center"
|
||
@click="toHistory"
|
||
>
|
||
<div
|
||
class="h-16 w-16 p-1 box-content bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center"
|
||
>
|
||
<img
|
||
src="@/assets/images/index/wdbg.png"
|
||
alt="我的报告"
|
||
class="h-12 w-12"
|
||
/>
|
||
</div>
|
||
<div class="text-center mt-1 font-bold">我的报告</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="relative p-4 pt-0">
|
||
<div
|
||
class="grid grid-cols-2 gap-4 my-4"
|
||
style="grid-template-rows: repeat(2, 1fr)"
|
||
>
|
||
<template v-for="(service, index) in services" :key="index">
|
||
<div
|
||
class="relative flex flex-col px-4 py-2 rounded-xl min-h-24 shadow-lg"
|
||
:class="index === 0 ? 'row-span-2' : ''"
|
||
:style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
|
||
@click="toInquire(service.name)"
|
||
>
|
||
<div class="min-h-18 flex flex-col items-start px-1">
|
||
<div
|
||
class="mt-1 max-w-max text-left text-gray-600 font-bold"
|
||
>
|
||
{{ service.title }}
|
||
</div>
|
||
<!-- <div class="max-w-max text-left text-xs text-gray-600">
|
||
<div>{{ service.subtitle }}</div>
|
||
</div> -->
|
||
<div
|
||
class="mt-2 rounded-lg px-1 text-sm text-white shadow-xl w-max flex items-center"
|
||
:style="`background-color: ${service.goColor}`"
|
||
>
|
||
GO
|
||
<img
|
||
src="@/assets/images/index/go_icon.png"
|
||
alt="右箭头"
|
||
class="ml-0.5 h-4 w-4 inline-block align-middle"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-4 my-4">
|
||
<template v-for="(service, index) in riskServices" :key="index">
|
||
<div
|
||
class="relative flex flex-col px-3 py-2 rounded-xl min-h-24 shadow-lg"
|
||
:style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
|
||
@click="toInquire(service.name)"
|
||
>
|
||
<div class="min-h-18 flex flex-col items-start px-1">
|
||
<div
|
||
class="mt-1 max-w-max text-left text-gray-600 font-bold"
|
||
>
|
||
{{ service.title }}
|
||
</div>
|
||
<!-- <div class="max-w-max text-left text-xs text-gray-600">
|
||
<div>{{ service.subtitle }}</div>
|
||
</div> -->
|
||
<div
|
||
class="mt-1 rounded-lg px-1 text-xs text-white shadow-xl w-max flex items-center"
|
||
:style="`background-color: ${service.goColor}`"
|
||
>
|
||
GO
|
||
<img
|
||
src="@/assets/images/index/go_icon.png"
|
||
alt="右箭头"
|
||
class="ml-0.5 h-3 w-3 inline-block align-middle"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<SectionTitle title="商务合作" class="mt-8" />
|
||
<div
|
||
class="mt-4 rounded-xl overflow-hidden bg-white shadow-xl"
|
||
@click="toCooperation"
|
||
>
|
||
<img
|
||
src="@/assets/images/index_a_banner.png"
|
||
class="w-full h-full"
|
||
alt="大数据服务横幅"
|
||
mode="widthFix"
|
||
/>
|
||
</div>
|
||
<!-- <div class="mt-4 rounded-2xl overflow-hidden shadow-xl" @click="toBigData">
|
||
<img src="@/assets/images/index_b_banner.png" class="w-full h-full" mode="widthFix" />
|
||
</div> -->
|
||
<div
|
||
class="mt-4 box-border h-14 w-full flex items-center rounded-lg shadow-lg bg-white text-gray-700 px-4"
|
||
@click="toHistory"
|
||
>
|
||
<div class="mr-4 h-full flex items-center justify-center">
|
||
<img
|
||
class="w-10 h-10"
|
||
src="@/assets/images/bg_icon.png"
|
||
mode="widthFix"
|
||
/>
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="text-gray-800">我的历史查询记录</div>
|
||
<div class="text-xs text-gray-500">
|
||
查询记录有效期为30天
|
||
</div>
|
||
</div>
|
||
<img
|
||
src="@/assets/images/index/right.png"
|
||
alt="右箭头"
|
||
class="h-6 w-6"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.clip-left {
|
||
clip-path: polygon(0 0, 0 100%, 90% 100%, 0 100%);
|
||
}
|
||
|
||
.clip-right {
|
||
clip-path: polygon(0 0, 0 0, 90% 100%, 0 0);
|
||
}
|
||
</style>
|
||
|
||
<route type="home" lang="json">
|
||
{
|
||
"layout": "home"
|
||
}
|
||
</route>
|