ieplus-app/src/pagesMain/pages/volunteer/components/ie-voluntary.vue

<template>
  <view>
    <ie-image :is-oss="true" src="/volunteer/page-bg.png" custom-class="w-full h-auto absolute top-0 left-0 -z-1" />
    <ie-image :is-oss="true" src="/volunteer/title-right.png" custom-class="w-400 h-auto absolute top-100 right-0" />
    <view class="pt-200 ml-30">
      <ie-image :is-oss="true" src="/volunteer/title.png" custom-class="w-fit h-140 bg-back" mode="heightFix" />
    </view>
    <view class="relative">
      <ie-image :is-oss="true" src="/volunteer/volunteer-bg.png" custom-class="w-full h-220" mode="scaleToFill" />
      <view class="text-28 text-white absolute top-40 left-60">我的信息</view>
      <view
        class="px-46 h-1/2 absolute left-0 right-0 top-1/2 -translate-y-1/2 flex items-center justify-between box-border pt-50 text-24 text-primary">
        <text>姓名:{{ userStore.nickName }}</text>
        <text>省份:{{ userStore.getLocation || '--' }}</text>
        <text>类别:<ie-dict :dict-name="EnumDictName.EXAM_TYPE" :dict-value="userStore.getExamType || '--'" /></text>
      </view>
    </view>
    <view class="mx-26">
      <view class="mb-20 shadow-card px-30 py-20 bg-white rounded-8 flex items-center justify-between gap-x-30"
        v-for="item in menu" :key="item.title" @click="handleClick(item)">
        <ie-image :is-oss="true" :src="item.icon" custom-class="w-96 h-96 rounded-full" mode="aspectFill" />
        <view class="flex-1">
          <view class="text-28 text-fore-title">{{ item.title }}</view>
          <view class="mt-8 text-22 text-fore-light">{{ item.desc }}</view>
        </view>
        <uv-icon name="arrow-right" size="16" color="#B2B2B2" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/userStore';
import { useTransferPage } from '@/hooks/useTransferPage';
import { EnumDictName } from '@/common/enum';
const { transferTo } = useTransferPage();
const userStore = useUserStore();
type MenuItem = {
  title: string;
  desc: string;
  icon: string;
  pagePath: string;
};
const menu: MenuItem[] = [
  {
    title: '院校录取概率测试',
    desc: '输入院校专业，精准测算录取结果',
    icon: '/volunteer/single.png',
    pagePath: '/pagesOther/pages/ie/entry-single/entry-single'
  },
  // {
  //   title: '模拟志愿分析',
  //   desc: '精准分析你的志愿表',
  //   icon: '/volunteer/analysis.png',
  //   pagePath: '/pagesOther/pages/ie/entry-analysis/entry-analysis'
  // },
  // {
  //   title: 'AI志愿',
  //   desc: '精准推荐合理志愿，生成志愿表',
  //   icon: '/volunteer/ai.png',
  //   pagePath: '/pagesOther/pages/ie/entry-ai/entry-ai'
  // },
  {
    title: '测职业技能分',
    desc: '结合院校录取规则，快速测算',
    icon: '/volunteer/calculate.png',
    pagePath: '/pagesOther/pages/ie/entry-calculate/entry-calculate'
  }
];
const handleClick = async (item: MenuItem) => {
  const isLogin = await userStore.checkLogin();
  if (isLogin) {
    transferTo(item.pagePath);
  }
}
</script>

<style lang="scss" scoped></style>