508 lines
14 KiB
Vue
508 lines
14 KiB
Vue
<script>
|
||
import ApiConstant from "@/common/ApiConstant";
|
||
import Request from '@/common/request'
|
||
|
||
let request = new Request()
|
||
export default {
|
||
data() {
|
||
return {
|
||
majorTypeName: '',
|
||
majorInfo: {},
|
||
schoolName: '',
|
||
tabs: [
|
||
{
|
||
id: 1,
|
||
name: '基本信息'
|
||
}, {
|
||
id: 2,
|
||
name: '就业分析'
|
||
}, {
|
||
id: 3,
|
||
name: '开设院校'
|
||
}
|
||
],
|
||
scrollLeft: 0,
|
||
currentTab: 0,
|
||
old: {
|
||
scrollTop: 0
|
||
},
|
||
tabCurrent: '1',
|
||
schoolResult: {
|
||
current: 1,
|
||
size: 5,
|
||
total: 0,
|
||
pages: 0,
|
||
list: []
|
||
},
|
||
status: 'more',
|
||
statusTypes: [
|
||
{
|
||
value: 'more',
|
||
text: '加载前',
|
||
checked: true
|
||
}, {
|
||
value: 'loading',
|
||
text: '加载中',
|
||
checked: false
|
||
}, {
|
||
value: 'noMore',
|
||
text: '没有更多',
|
||
checked: false
|
||
}],
|
||
contentText: {
|
||
contentdown: '查看更多',
|
||
contentrefresh: '加载中',
|
||
contentnomore: '没有更多'
|
||
}
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
if (e.majorCode) {
|
||
this.majorCode = e.majorCode;
|
||
console.log('majorCode ', this.majorCode)
|
||
this.getMajorDetailInfo()
|
||
}
|
||
if (e.majorTypeName) {
|
||
this.majorTypeName = e.majorTypeName
|
||
}
|
||
},
|
||
methods: {
|
||
swichMenu(id) {
|
||
this.currentTab = id
|
||
console.log(id)
|
||
//this.tabCurrent = 'tabNum'+ id
|
||
// 滑动swiper后，每个选项距离其父元素最左侧的距离
|
||
this.scrollLeft = 0;
|
||
for (let i = 0; i < id; i++) {
|
||
this.scrollLeft += 60
|
||
console.log(this.scrollLeft, 60, id)
|
||
}
|
||
},
|
||
/*获取专业详情*/
|
||
getMajorDetailInfo() {
|
||
let that = this
|
||
request.get(ApiConstant.Major.majorInfo, {
|
||
majorCode: this.majorCode,
|
||
}).then(r => {
|
||
console.log(r)
|
||
if (r.success) {
|
||
this.majorInfo = r.result
|
||
that.getSchoolList()
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
},
|
||
/*加载就业岗位分布*/
|
||
loadJobDistributionData() {
|
||
if (this.majorInfo.jobDistribution) {
|
||
let jobDistributionSList = this.majorInfo.jobDistribution.split('、')
|
||
let jobDistributionList = []
|
||
let jobDistribution = null
|
||
console.log(jobDistributionSList)
|
||
jobDistributionSList.for(j => console.log(j))
|
||
for (let i = 0; i < jobDistributionSList.length; i++) {
|
||
//jobDistribution = jobDistributionList[i].split('：')
|
||
//jobDistributionList.push({name:jobDistribution[0],value:jobDistribution[1]})
|
||
}
|
||
//模拟从服务器获取数据时的延时
|
||
setTimeout(() => {
|
||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||
let res = {
|
||
series: [
|
||
{
|
||
data: jobDistributionList
|
||
}
|
||
]
|
||
};
|
||
this.chartData.jobDistribution = JSON.parse(JSON.stringify(res));
|
||
}, 500);
|
||
}
|
||
|
||
},
|
||
|
||
getSchoolList() {
|
||
let that = this
|
||
that.status = 'loading'
|
||
request.get(ApiConstant.School.searchSchoolList, {
|
||
majorCode: this.majorCode,
|
||
schoolName: this.schoolName,
|
||
pageNum: this.schoolResult.current,
|
||
pageSize: this.schoolResult.size
|
||
}).then(r => {
|
||
console.log(r)
|
||
if (r.success) {
|
||
that.schoolResult.current = r.result.current
|
||
that.schoolResult.size = r.result.size
|
||
that.schoolResult.total = r.result.total
|
||
//追加到列表数据中
|
||
that.schoolResult.list = [...that.schoolResult.list, ...r.result.records]
|
||
if (r.result.current >= r.result.pages) {
|
||
that.status = 'noMore'
|
||
} else {
|
||
that.status = 'more'
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
},
|
||
searchSchoolClick() {
|
||
this.schoolResult.current = 1
|
||
this.schoolResult.list = []
|
||
this.schoolResult.total = 0
|
||
this.getSchoolList()
|
||
},
|
||
clearSchoolInput() {
|
||
this.schoolName = ''
|
||
this.schoolResult.current = 1
|
||
this.schoolResult.list = []
|
||
this.schoolResult.total = 0
|
||
this.getSchoolList()
|
||
},
|
||
onReachBottom() {
|
||
console.log("onReachBottom");
|
||
},
|
||
loadMore() {
|
||
if (this.status === 'noMore') {
|
||
return;
|
||
}
|
||
console.log('加载中')
|
||
this.schoolResult.current++;
|
||
this.getSchoolList()
|
||
},
|
||
goto(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<template>
|
||
<view class="body-view">
|
||
<view class="head">
|
||
<view class="info">
|
||
<view class="majorName">
|
||
<text>{{ majorInfo.majorName }}</text>
|
||
</view>
|
||
<view class="majorType">
|
||
<text style="margin-right: 10rpx" v-if="majorTypeName">{{ majorTypeName }}</text>
|
||
<text>专业代码：{{ majorInfo.majorCode }}</text>
|
||
</view>
|
||
<view class="semeterRow">
|
||
<view :class="majorInfo.educationalLevel==='1'?'flex-item-33':'flex-item-5'" class="border-right">
|
||
<view style="display: flex">
|
||
<text style="color: white;font-size: 30rpx;margin: 0 auto;">
|
||
{{ majorInfo.educationalLevel === '1' ? '本科' : '专科' }}
|
||
</text>
|
||
</view>
|
||
<view style="display: flex">
|
||
<text style="color: #b6c8fe;font-size: 26rpx;margin: 0 auto;">学历层次</text>
|
||
</view>
|
||
</view>
|
||
<view :class="majorInfo.educationalLevel==='1'?'flex-item-33 border-right':'flex-item-5'">
|
||
<view style="display: flex">
|
||
<text style="color: white;font-size: 30rpx;margin: 0 auto;">{{ majorInfo.semester }}年</text>
|
||
</view>
|
||
<view style="display: flex">
|
||
<text style="color: #b6c8fe;font-size: 26rpx;margin: 0 auto;">学制年限</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-item-33" v-if="majorInfo.educationalLevel==='1'">
|
||
<view style="display: flex">
|
||
<text style="color: white;font-size: 30rpx;margin: 0 auto;">{{ majorInfo.degree || '未知' }}</text>
|
||
</view>
|
||
<view style="display: flex">
|
||
<text style="color: #b6c8fe;font-size: 26rpx;margin: 0 auto;">学位</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top-body">
|
||
<!-- 使用scroll-view实现tabs滑动切换 -->
|
||
<scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
|
||
<view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index"
|
||
@click="swichMenu(index)">
|
||
<view :class="currentTab===index ? 'menu-topic-act' : 'menu-topic'">
|
||
<text class="menu-topic-text">{{ item.name }}</text>
|
||
<view class="menu-topic-bottom">
|
||
<view class="menu-topic-bottom-color"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 内容 -->
|
||
<view>
|
||
<!--基本信息-->
|
||
<view class="jbxx" v-if="currentTab===0">
|
||
<view class="example-body">
|
||
<!--专业简介-->
|
||
<view class="uni-box">
|
||
<uni-title class="h3" type="h3" title="专业简介"></uni-title>
|
||
</view>
|
||
<view class="uni-text" v-if="majorInfo.ssm">
|
||
<mote-lines-divide :dt="majorInfo.ssm" :line="3" expandtext="展开" foldhint="收起"/>
|
||
</view>
|
||
<view class="uni-text" v-else>暂未收录...</view>
|
||
<!--学什么-->
|
||
<view class="uni-box">
|
||
<uni-title class="h3" type="h3" title="学什么"></uni-title>
|
||
</view>
|
||
<view class="uni-text" v-if="majorInfo.xsm">
|
||
<mote-lines-divide :dt="majorInfo.xsm" :line="3" expandtext="展开" foldhint="收起"/>
|
||
</view>
|
||
<view class="uni-text" v-else>暂未收录...</view>
|
||
<!--干什么-->
|
||
<view class="uni-box">
|
||
<uni-title class="h3" type="h3" title="干什么"></uni-title>
|
||
</view>
|
||
<view class="uni-text" v-if="majorInfo.gsm">
|
||
<mote-lines-divide :dt="majorInfo.gsm" :line="3" expandtext="展开" foldhint="收起"/>
|
||
</view>
|
||
<view class="uni-text" v-else>暂未收录...</view>
|
||
<!--数据统计-->
|
||
<view class="uni-box">
|
||
<uni-title class="h3" type="h3" title="数据统计"></uni-title>
|
||
</view>
|
||
<view class="uni-text" v-if="majorInfo.sexRatio">
|
||
<view class="">{{majorInfo.sexRatio}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!--就业分析-->
|
||
<view class="jyfx" v-if="currentTab===1">
|
||
<view class="uni-box">
|
||
<uni-title class="h3" type="h3" title="就业岗位分布"></uni-title>
|
||
</view>
|
||
<view>
|
||
<text class="uni-text">
|
||
{{ majorInfo.jobDistribution || '暂未收录...' }}
|
||
</text>
|
||
</view>
|
||
<view class="uni-box">
|
||
<uni-title class="h3" type="h3" title="就业行业分布"></uni-title>
|
||
</view>
|
||
<view>
|
||
<text class="uni-text">
|
||
{{ majorInfo.industryDistribution || '暂未收录...' }}
|
||
</text>
|
||
</view>
|
||
<view class="uni-box">
|
||
<uni-title class="h3" type="h3" title="就业地区分布"></uni-title>
|
||
</view>
|
||
<view>
|
||
<text class="uni-text">
|
||
{{ majorInfo.regionDistribution || '暂未收录...' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!--开设院校-->
|
||
<view class="ksyx" v-if="currentTab===2">
|
||
<view style="display: flex;height: 100rpx;border-bottom: 1px solid #f5f5f5;">
|
||
<view style="width: 80%">
|
||
<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入院校名称" v-model="schoolName"
|
||
@clear="clearSchoolInput" cancelButton="none" @confirm="searchSchoolClick"/>
|
||
</view>
|
||
<view style="width: 10%;line-height: 100rpx">
|
||
<text @click="searchSchoolClick">搜索</text>
|
||
</view>
|
||
</view>
|
||
<view class="schoolList">
|
||
<view v-for="(item,index) in schoolResult.list" :key="index"
|
||
:class="index === schoolResult.list.length-1?'school-item school-item-end':'school-item'"
|
||
@click="goto('/pages/zyb/school/detail?schoolCode='+item.schoolCode)">
|
||
<view class="uni-flex flex">
|
||
<view class="flex-item-2">
|
||
<image :src="item.schoolIcon" style="width: 100rpx;height: 100rpx" mode="aspectFill"/>
|
||
</view>
|
||
<view class="flex-item-8" style="padding: 0;">
|
||
<view class="uni-flex flex">
|
||
<text class="schoolName">{{ item.schoolName }}</text>
|
||
</view>
|
||
<view class="uni-flex flex">
|
||
<view class="tags">
|
||
<view class="tag" v-for="(tag,i) in item.tagsList" :key="i">
|
||
<text>{{ tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="container" @click="loadMore">
|
||
<uni-load-more :status="status" :content-text="contentText"/>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
/*头部部分*/
|
||
.head {
|
||
background-color: #4975fd;
|
||
min-height: 450rpx;
|
||
|
||
.info {
|
||
padding: 30rpx;
|
||
|
||
.majorName {
|
||
color: white;
|
||
font-size: 50rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
margin: 20rpx 30rpx;
|
||
}
|
||
|
||
.majorType {
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
margin: 0 30rpx;
|
||
color: #b6c8fe;
|
||
}
|
||
|
||
.semeterRow {
|
||
margin: 40rpx 30rpx;
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
.body-view {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.top-body {
|
||
margin: 30rpx;
|
||
padding: 30rpx;
|
||
background-color: white;
|
||
border-radius: 30rpx;
|
||
position: relative;
|
||
top: -150rpx;
|
||
}
|
||
|
||
/*tabs 栏*/
|
||
.top-menu-view {
|
||
display: flex;
|
||
//position: fixed;
|
||
z-index: 100;
|
||
//top: 84rpx;
|
||
/* #ifdef H5 */
|
||
top: 84rpx;
|
||
/* #endif */
|
||
/* #ifndef H5 */
|
||
top: 0rpx;
|
||
/* #endif */
|
||
left: 0;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
background-color: white;
|
||
height: 86rpx;
|
||
line-height: 86rpx;
|
||
//border-top: 1rpx solid #d8dbe6;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
|
||
.menu-topic-view {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
height: 86rpx;
|
||
position: relative;
|
||
width: 33.3%;
|
||
text-align: center;
|
||
|
||
.menu-topic-text {
|
||
font-size: 30rpx;
|
||
color: #303133;
|
||
padding: 10rpx 40rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.menu-topic-bottom {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
|
||
.menu-topic-bottom-color {
|
||
width: 40rpx;
|
||
height: 4rpx;
|
||
}
|
||
}
|
||
|
||
.menu-topic-act .menu-topic-bottom {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.menu-topic-act .menu-topic-text {
|
||
color: #4975fd;
|
||
}
|
||
|
||
|
||
.menu-topic-act .menu-topic-bottom-color {
|
||
background: #4975fd;
|
||
}
|
||
}
|
||
}
|
||
|
||
.jbxx {
|
||
padding: 20rpx 10rpx;
|
||
}
|
||
|
||
.jyfx {
|
||
padding: 20rpx 10rpx;
|
||
}
|
||
|
||
.ksyx {
|
||
|
||
}
|
||
|
||
.uni-text {
|
||
line-height: 50rpx;
|
||
color: #acadba;
|
||
}
|
||
|
||
:deep(.uni-searchbar) {
|
||
padding: 15rpx 10rpx !important;
|
||
}
|
||
|
||
.school-item {
|
||
padding: 30rpx 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
|
||
.schoolName {
|
||
font-size: 35rpx;
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.tags .tag {
|
||
line-height: 30rpx;
|
||
font-size: 25rpx;
|
||
color: #acadba;
|
||
border: 3rpx solid #acadba;
|
||
border-radius: 8rpx;
|
||
padding: 5rpx;
|
||
margin: 10rpx 20rpx 10rpx 0;
|
||
}
|
||
}
|
||
|
||
.border-right {
|
||
border-right: 3rpx solid #6d91fd
|
||
}
|
||
|
||
.school-item-end {
|
||
border-bottom: none !important;
|
||
}
|
||
</style>
|