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

111 lines
3.4 KiB
Vue

<template>
<view class="flex flex-col p-[32rpx] bg-[#fff] mt-16rpx" v-show="subjectIntroduceList.length > 0">
<text class="text-[32rpx] font-semibold text-[#333]">
双一流学科·{{ subjectIntroduceList.length }}
</text>
<text class="text-[22rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
{{ subjectIntroduceList.join(',') }}
</text>
<wd-button
block
custom-class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]!"
@click="handleFullFun(1)"
>
查看全部
<wd-icon name="arrow-right"></wd-icon>
</wd-button>
</view>
<view
class="flex flex-col p-[32rpx] bg-[#fff] mt-[16rpx]"
v-show="assessmentSubjectList.length > 0"
>
<text class="text-[32rpx] font-semibold text-[#333]">
学科评估·{{ assessmentSubjectList.length }}
</text>
<text class="text-[22rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
{{ assessmentSubjectList.join(',') }}
</text>
<wd-button
block
custom-class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]!"
@click="handleFullFun(2)"
>
查看全部
<wd-icon name="arrow-right"></wd-icon>
</wd-button>
</view>
<view class="flex flex-col p-[32rpx] bg-[#fff] mt-[16rpx]">
<text class="text-[32rpx] font-semibold text-[#333]">
特色专业·{{ featureSubjectList.length }}
</text>
<text class="text-[22rpx] font-normal text-[#636363] my-[24rpx]">
{{ featureSubjectList.join(',') }}
</text>
<wd-button
block
custom-class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]!"
@click="handleFullFun(3)"
>
查看全部
<wd-icon name="arrow-right"></wd-icon>
</wd-button>
</view>
<MessageBox v-model:show="show" :title="title">
<template>
<view class="text-[22rpx] text-[#636363] max-h-600rpx mb-[32rpx]">{{ innerContent }}</view>
</template>
</MessageBox>
</template>
<script lang="ts" setup>
import { getSubjectIntroduceList } from '@/service/index/api'
import MessageBox from './MessageBox.vue'
const subjectIntroduceList = ref([])
const assessmentSubjectList = ref([])
const featureSubjectList = ref([])
const props = defineProps({
id: {
type: Number,
default: 0,
},
})
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 innerContent = ref('')
const handleFullFun = (type: number) => {
show.value = true
if (type === 1) {
title.value = `双一流学科·${subjectIntroduceList.value.length}`
innerContent.value = subjectIntroduceList.value.join(',')
} else if (type === 2) {
title.value = `学科评估·${assessmentSubjectList.value.length}`
innerContent.value = assessmentSubjectList.value.join(',')
} else if (type === 3) {
title.value = `特色专业·${featureSubjectList.value.length}`
innerContent.value = featureSubjectList.value.join(',')
}
}
</script>