ieplus-app/src/pagesOther/pages/career/detail/components/career-overview.vue

<template>
  <scroll-view v-if="overview" class=" h-full overflow-auto" scroll-y>
    <view class="mt-20 bg-white p-30">
      <view class="text-36 font-bold">{{ overview.name }}</view>
      <view class="mt-10 text-26 text-fore-content">
        <uv-parse :content="overview.summary" />
      </view>
      <view class="p-30 text-28 text-fore-content bg-back rounded-12 mt-10 whitespace-pre-line">
        <uv-parse :content="overview.description" />
      </view>
    </view>
    <view class="mt-20 bg-white">
      <view class="text-30 px-30 py-20 font-medium">
        <span>相关岗位</span>
        <span class="text-danger mx-10">{{ overview.postJobs.length }}</span>
        <span>个</span>
      </view>
      <view>
        <uv-cell-group :border="false">
          <uv-cell v-for="(job, index) in overview.postJobs" :key="index" :title="job.name" :isLink="true"
            :border="true" :value="`${job.salaryMin}-${job.salaryMax}/月`" arrow-direction="right" @click="handleClickJob(job.name)">
            <template #title>
              <view class="flex items-center gap-10">
                <view class="text-28 text-fore-title">{{ job.name }}</view>
              </view>
            </template>
          </uv-cell>
        </uv-cell-group>
      </view>
    </view>
    <view class="mt-20 bg-white">
      <view class="text-30 px-30 py-20 font-medium">
        <span>相关职业</span>
        <span class="text-danger mx-10">{{ overview.jobs.length }}</span>
        <span>个</span>
      </view>
      <view>
        <uv-cell-group :border="false">
          <uv-cell v-for="(job, index) in overview.jobs" :key="index" :title="job.name" :isLink="true" :border="true"
            arrow-direction="right" @click="handleClickCareer(job.code)">
            <template #title>
              <view class="flex items-center gap-10">
                <view class="text-28 text-fore-title">{{ job.name }}</view>
              </view>
            </template>
          </uv-cell>
        </uv-cell-group>
      </view>
    </view>
    <view class="mt-20 bg-white">
      <view class="text-30 px-30 py-20 font-medium">
        <span>相关专业</span>
        <span class="text-danger mx-10">{{ overview.postMajors.length }}</span>
        <span>个</span>
      </view>
      <view>
        <uv-cell-group :border="false">
          <uv-cell v-for="(major, index) in overview.postMajors" :key="index" :title="major.name" :isLink="true"
            :border="index < overview.postMajors.length - 1" arrow-direction="right"
            @click="handleClickMajor(major.code)">
            <template #title>
              <view class="text-28 text-fore-title">{{ major.name }}</view>
              <view class="mt-10 flex items-center gap-10 flex-1">
                <view class="flex-1 flex flex-col items-center justify-center">
                  <view class="text-28 text-fore-title">{{ major.code }}</view>
                  <view class="text-22 text-fore-light">国标代码</view>
                </view>
                <view class="flex-1 flex flex-col items-center justify-center">
                  <view class="text-28 text-fore-title">{{ major.learnYear }}</view>
                  <view class="text-22 text-fore-light">学制</view>
                </view>
                <view class="flex-1 flex flex-col items-center justify-center">
                  <view class="text-28 text-fore-title">{{ major.mfRatioView }}</view>
                  <view class="text-22 text-fore-light">男女比例</view>
                </view>
              </view>
            </template>
          </uv-cell>
        </uv-cell-group>
      </view>
    </view>
    <ie-safe-area-bottom bg-color="#FFFFFF" />
  </scroll-view>
</template>
<script lang="ts" setup>
import { getCareerOverview } from '@/api/modules/career';
import { Career } from '@/types';
import { useTransferPage } from '@/hooks/useTransferPage';
const { transferTo, routes } = useTransferPage();
const props = defineProps<{
  code: string;
}>();

const overview = ref<Career.CareerOverview | null>(null);

const handleClickCareer = (code: string) => {
  transferTo(routes.careerDetail, {
    data: {
      code: code,
    },
    type: 'redirectTo'
  });
}

const emit = defineEmits<{
  (e: 'change-job', code: string): void;
}>();
const handleClickJob = (name: string) => {
  emit('change-job', name);
}

const handleClickMajor = (code: string) => {
  transferTo(routes.majorDetail, {
    data: {
      code: code,
    }
  });
}
const loadData = () => {
  uni.$ie.showLoading();
  getCareerOverview(props.code).then(res => {
    overview.value = res.data;
  }).finally(() => {
    uni.$ie.hideLoading();
  });
};

onMounted(() => {
  loadData();
});
</script>
<style lang="scss" scoped></style>