ieplus-app/src/pagesMain/pages/index/components/index-map.vue

<template>
    <view class="mx-30 mt-32 bg-white shadow-card overflow-hidden rounded-15 relative">
        <view class="w-full h-150 bg-[#F7FEE7] absolute"/>
        <view class="flex justify-between z-1 relative">
            <view class="py-14 pl-40 pr-80 bg-white"
                  style="clip-path: polygon(0 0, calc(100% - 40rpx) 0, 100% 80rpx, 100% 100%, 0 100%);">
                <ie-image src="/map-title.png" is-oss custom-class="w-182 h-57"/>
            </view>
            <view class="flex-1 flex justify-center items-center text-24 text-fore-title">
                分步拆解，指引升学每一步
            </view>
        </view>
        <view class="bg-white rounded-tr-15 z-1 relative px-12 py-20 grid grid-cols-4 gap-x-12 gap-y-20">
            <view v-for="(m,i) in maps" :key="i" class="flex flex-col items-center" @click="handleMap(m)">
                <view class="px-24 leading-36 text-20 text-fore-title font-bold bg-[#CEF57B] rounded-full z-1"
                      style="margin-bottom: -18rpx">
                    第{{ i + 1 }}步
                </view>
                <view class="w-full bg-back-light rounded-15 flex flex-col items-center pt-36 pb-28"
                      style="box-shadow: 1px 2px 0px 0px #DCF8BC;">
                    <view>
                        <view class="text-24 text-fore-title flex items-center gap-12">
                            <view class="font-bold">{{ m.title }}</view>
                            <uv-icon name="arrow-right" color="white" size="12" custom-class="bg-black rounded-full"/>
                        </view>
                        <view class="mt-3 text-22 text-fore-tip">{{ m.desc }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import {routes} from "@/common/routes";
import {useTransferPage} from "@/hooks/useTransferPage";
import {useUserStore} from "@/store/userStore";

interface SiteMap {
    title: string;
    desc: string;
    pagePath: string;
    handler?: () => void
}

const userStore = useUserStore()
const {transferTo} = useTransferPage()

const goSimulate = () => {
    const list = userStore.directedSchoolList || []
    const first = list[0] || {}
    if (!list.length || first.notice) {
        transferTo(routes.studyIndex)
    } else {
        transferTo(routes.studySimulate, {
            data: first
        });
    }
}

const maps = ref<SiteMap[]>([{
    title: '本省规则',
    desc: '填志愿不踩坑',
    pagePath: routes.newsDetail + '?id=' + 1065
}, {
    title: '自我评价',
    desc: '了解自身优势',
    pagePath: ''
}, {
    title: '职业规划',
    desc: '锁定职业方向',
    pagePath: routes.careerIndex
}, {
    title: '了解专业',
    desc: '选择对口专业',
    pagePath: routes.majorIndex
}, {
    title: '锁定院校',
    desc: '了解院校实力',
    pagePath: routes.universityIndex
}, {
    title: '定向刷题',
    desc: '根据考纲练习',
    pagePath: routes.studyIndex
}, {
    title: '模拟测试',
    desc: '全真模拟',
    pagePath: '',
    handler: goSimulate
}, {
    title: '测录取率',
    desc: '录取风险评估',
    pagePath: routes.voluntaryIndex
}])

const handleMap = (m: SiteMap) => {
    if (m.handler) return m.handler()
    if (!m.pagePath) return
    transferTo(m.pagePath)
}


onMounted(() => userStore.getDirectedSchoolList())
</script>

<style scoped>

</style>