volunteer-4/src/pages-sub/home/college/components/FirstClass.vue

<template>
  <view class="flex flex-col p-[32rpx] bg-[#fff]" v-show="subjectIntroduceList.length > 0">
    <view class="flex items-center gap-[10rpx]">
      <image
        class="w-[48rpx] h-[48rpx]"
        src="https://api.static.ycymedu.com/zdx/first-class.png"
        mode="scaleToFill"
      />
      <text class="text-[30rpx] font-600 text-[#000]">
        双一流学科·{{ subjectIntroduceList.length }}
      </text>
    </view>
    <view
      v-for="item in subjectIntroduceList.slice(0, 5)"
      :key="item"
      class="flex items-center justify-between font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
    >
      <view class="text-[26rpx] text-[#333]">{{ item }}</view>
      <view
        class="text-[#1580FF] text-[22rpx] bg-[rgba(21,128,255,0.1)] rounded-[8rpx] px-[10rpx] py-[6rpx]"
      >
        双一流学科
      </view>
    </view>

    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[12rpx]!"
      @click="handleFullFun(1)"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </button>
  </view>
  <view
    class="flex flex-col p-[32rpx] bg-[#fff] mt-[16rpx]"
    v-show="assessmentSubjectList.length > 0"
  >
    <view class="flex items-center gap-[10rpx]">
      <image
        class="w-[48rpx] h-[48rpx]"
        src="https://api.static.ycymedu.com/zdx/subject.png"
        mode="scaleToFill"
      />
      <text class="text-[30rpx] font-600 text-[#000]">
        学科评估·{{ assessmentSubjectList.length }}
      </text>
    </view>
    <view
      class="flex items-center justify-between text-[26rpx] text-[#999] font-400 py-[12rpx] mt-[10rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
    >
      <view>学科</view>
      <view>评估结果</view>
    </view>
    <view
      v-for="item in assessmentSubjectList.slice(0, 5)"
      :key="item"
      class="flex items-center justify-between text-[26rpx] text-[#333] font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
    >
      <view>{{ parsedNames(item).name }}</view>
      <view class="w-[104rpx] text-center">{{ parsedNames(item).grade }}</view>
    </view>

    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[12rpx]!"
      @click="handleFullFun(2)"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </button>
  </view>
  <view class="flex flex-col p-[32rpx] bg-[#fff] mt-[16rpx]" v-show="featureSubjectList.length > 0">
    <view class="flex items-center gap-[10rpx]">
      <image
        class="w-[48rpx] h-[48rpx]"
        src="https://api.static.ycymedu.com/zdx/profession.png"
        mode="scaleToFill"
      />
      <text class="text-[30rpx] font-600 text-[#000]">
        特色专业·{{ featureSubjectList.length }}
      </text>
    </view>
    <view
      class="flex items-center justify-between text-[26rpx] text-[#999] font-400 py-[12rpx] mt-[10rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
    >
      <view>专业名称</view>
      <view>批次</view>
    </view>
    <view
      v-for="item in featureSubjectList.slice(0, 5)"
      :key="item"
      class="flex items-center justify-between text-[26rpx] text-[#333] font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
    >
      <view class="max-w-[60%]">{{ item }}</view>
      <view class="text-center">{{ level }}</view>
    </view>

    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[12rpx]!"
      @click="handleFullFun(3)"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </button>
  </view>

  <ActionSheet v-model:show="show" :title="title" :show-close="true">
    <view v-if="showType === 1" class="px-[32rpx] pb-[32rpx]">
      <view
        v-for="item in subjectIntroduceList"
        :key="item"
        class="flex items-center justify-between font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
      >
        <view class="text-[26rpx] text-[#333] max-w-[60%]">{{ item }}</view>
        <view
          class="text-[#1580FF] text-[22rpx] bg-[rgba(21,128,255,0.1)] rounded-[8rpx] px-[10rpx] py-[6rpx]"
        >
          双一流学科
        </view>
      </view>
    </view>

    <view v-if="showType === 2" class="px-[32rpx] pb-[32rpx]">
      <view
        class="flex items-center justify-between text-[26rpx] text-[#999] font-400 py-[12rpx] mt-[10rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
      >
        <view>学科</view>
        <view>评估结果</view>
      </view>
      <view
        v-for="item in assessmentSubjectList"
        :key="item"
        class="flex items-center justify-between text-[26rpx] text-[#333] font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
      >
        <view>{{ parsedNames(item).name }}</view>
        <view class="w-[104rpx] text-center">{{ parsedNames(item).grade }}</view>
      </view>
    </view>

    <view class="px-[32rpx] pb-[32rpx]" v-if="showType === 3">
      <view
        class="flex items-center justify-between text-[26rpx] text-[#999] font-400 py-[12rpx] mt-[10rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
      >
        <view>专业名称</view>
        <view>批次</view>
      </view>
      <view
        v-for="item in featureSubjectList"
        :key="item"
        class="flex items-center justify-between text-[26rpx] text-[#333] font-400 py-[22rpx] border-b-[2rpx] border-b-[#F7F7F7] border-b-solid"
      >
        <view class="max-w-[60%]">{{ item }}</view>
        <view class="text-center">{{ level }}</view>
      </view>
    </view>
  </ActionSheet>
</template>

<script lang="ts" setup>
import { getSubjectIntroduceList } from '@/service/index/api'
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'

const subjectIntroduceList = ref([])
const assessmentSubjectList = ref([])
const featureSubjectList = ref([])
const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
  level: {
    type: String,
    default: '',
  },
})

watch(
  () => props.id,
  async (newVal) => {
    getSubjectIntroduceList(newVal).then((resp) => {
      if (resp.code === 200) {
        const res = resp.result as {
          double_subject_list: any[]
          assessment_subject_list: any[]
          feature_subject_list: any[]
        }
        subjectIntroduceList.value = res.double_subject_list
        assessmentSubjectList.value = res.assessment_subject_list
        featureSubjectList.value = res.feature_subject_list
      }
    })
  },
)

const show = ref(false)
const title = ref('')
const showType = ref(1)

const parsedNames = (name: string) => {
  const match = name.match(/^(.*?)\((.*?)\)$/)
  if (match) {
    return {
      name: match[1],
      grade: match[2],
    }
  }
  return {
    name: name,
    grade: '',
  }
}

const handleFullFun = (type: number) => {
  show.value = true
  showType.value = type
  if (type === 1) {
    title.value = `双一流学科·${subjectIntroduceList.value.length}`
  } else if (type === 2) {
    title.value = `学科评估·${assessmentSubjectList.value.length}`
  } else if (type === 3) {
    title.value = `特色专业·${featureSubjectList.value.length}`
  }
}
</script>