125 lines
4.3 KiB
Vue
125 lines
4.3 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>
|
|
<button
|
|
block
|
|
class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
|
|
@click="handleFullFun(1)"
|
|
>
|
|
查看全部
|
|
<view class="i-carbon-chevron-down rotate-270"></view>
|
|
</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>
|
|
|
|
<button
|
|
block
|
|
class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
|
|
@click="handleFullFun(2)"
|
|
>
|
|
查看全部
|
|
<view class="i-carbon-chevron-down rotate-270"></view>
|
|
</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 :data="courseInfo.slice(0, 4)" class="my-[24rpx]">
|
|
<WXXTableCol prop="kcmc" label="课程名称" width="50%"></WXXTableCol>
|
|
<WXXTableCol prop="difficulty" label="课程难易度" width="25%"></WXXTableCol>
|
|
<WXXTableCol prop="practicality" label="课程实用度" width="25%"></WXXTableCol>
|
|
</WXXTable>
|
|
</view>
|
|
<button
|
|
block
|
|
class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
|
|
@click="handleFullFun(3)"
|
|
>
|
|
查看全部
|
|
<view class="i-carbon-chevron-down rotate-270"></view>
|
|
</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>
|
|
<scroll-view class="max-h-600rpx mb-[32rpx] overflow-y-auto" :scroll-y="true">
|
|
<WXXTable :data="courseInfo" class="my-[24rpx]" v-show="showType === 3">
|
|
>
|
|
<WXXTableCol prop="kcmc" label="课程名称" width="50%"></WXXTableCol>
|
|
<WXXTableCol prop="difficulty" label="课程难易度" width="25%"></WXXTableCol>
|
|
<WXXTableCol prop="practicality" label="课程实用度" width="25%"></WXXTableCol>
|
|
</WXXTable>
|
|
</scroll-view>
|
|
</template>
|
|
</MessageBox>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import MessageBox from '@/pages-sub/components/messageBox/MessageBox.vue'
|
|
import WXXTable from '@/pages-sub/components/table/Table.vue'
|
|
import WXXTableCol from '@/pages-sub/components/table/TableCol.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 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>
|