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-10 flex flex-col items-center pt-36 pb-22"
          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>
              <view class="bg-black rounded-full p-4">
                <uv-icon name="arrow-right" color="white" size="6" />
              </view>
            </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 = async () => {
  const isLogin = await userStore.checkLogin();
  if (isLogin) {
    const list = userStore.directedSchoolList || []
    const first = list[0] || {}
    if (!list.length || first.notice) {
      transferTo(routes.studyIndex)
    } else {
      transferTo(routes.studySimulate, {
        data: first
      });
    }
  }
}

const maps = computed<SiteMap[]>(() => [{
  title: '本省规则',
  desc: '填志愿不踩坑',
  pagePath: routes.newsDetail + '?id=' + (userStore.isHN ? 1065 : 1078)
}, {
  title: '自我评价',
  desc: '了解自身优势',
  pagePath: routes.pageTestCenter
}, {
  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)
}
</script>

<style scoped></style>