127 lines
3.7 KiB
Vue
127 lines
3.7 KiB
Vue
<template>
|
|
<view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff] mt-16rpx">
|
|
<text class="text-[32rpx] font-semibold text-[#333]">专业介绍</text>
|
|
<text class="text-[24rpx] font-semibold text-[#333] mt-[32rpx] mb-[26rpx]">专业简介</text>
|
|
<text class="text-[22rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
|
|
{{ zyjx || '暂无' }}
|
|
</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="h-[16rpx] bg-[#f8f8f8]"></view>
|
|
<view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff]">
|
|
<text class="text-[32rpx] font-semibold text-[#333]">课程要求</text>
|
|
<text class="text-[24rpx] font-semibold text-[#333] mt-[32rpx] mb-[26rpx]">主干课程</text>
|
|
<text class="text-[22rpx] font-normal text-[#636363] my-[24rpx] line-clamp-3">
|
|
{{ kyfx.map((item) => item.zymc).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="h-[16rpx] bg-[#f8f8f8]"></view>
|
|
<view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff]">
|
|
<text class="text-[32rpx] font-semibold text-[#333]">课程列表</text>
|
|
<view class="my-[24rpx]">
|
|
<WXXTable
|
|
:columns="columns"
|
|
:tableData="courseInfo.slice(0, 4)"
|
|
class="my-[24rpx]"
|
|
></WXXTable>
|
|
</view>
|
|
<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]" v-show="showType !== 3">
|
|
{{ innerContent }}
|
|
</view>
|
|
<WXXTable
|
|
:columns="columns"
|
|
:tableData="courseInfo"
|
|
class="my-[24rpx]"
|
|
v-show="showType === 3"
|
|
></WXXTable>
|
|
</template>
|
|
</MessageBox>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import MessageBox from '@/pages-sub/home/components/MessageBox.vue'
|
|
import WXXTable from '@/pages-sub/home/components/Table.vue'
|
|
import { getMajorCourse } from '@/service/index/api'
|
|
|
|
const props = defineProps({
|
|
zyjx: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
specId: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
kyfx: {
|
|
type: Array<{ zymc: string }>,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
const columns = [
|
|
{ name: '课程名称', key: 'kcmc', width: '50%' },
|
|
{ name: '课程难易度', key: 'difficulty', width: '25%' },
|
|
{ name: '课程实用度', key: 'practicality', width: '25%' },
|
|
]
|
|
|
|
const courseInfo = ref<any[]>([])
|
|
|
|
watch(
|
|
() => props.specId,
|
|
(newV) => {
|
|
getMajorCourse({ SpecId: newV }).then((resp) => {
|
|
if (resp.code === 200) {
|
|
courseInfo.value = (resp.result as { kskcList: any[] }).kskcList
|
|
}
|
|
})
|
|
},
|
|
)
|
|
|
|
const show = ref(false)
|
|
const title = ref('')
|
|
const innerContent = ref('')
|
|
const showType = ref(1)
|
|
|
|
const handleFullFun = (type: number) => {
|
|
show.value = true
|
|
showType.value = type
|
|
if (type === 1) {
|
|
innerContent.value = props.zyjx
|
|
title.value = '专业介绍'
|
|
} else if (type === 2) {
|
|
innerContent.value = props.kyfx.map((item) => item.zymc).join(',')
|
|
title.value = '主干课程'
|
|
} else if (type === 3) {
|
|
innerContent.value = courseInfo.value.map((item) => item.kcmc).join(',')
|
|
title.value = '课程列表'
|
|
}
|
|
}
|
|
</script>
|