585 lines
17 KiB
Vue
585 lines
17 KiB
Vue
<script>
|
||
import ApiConstant from "@/common/ApiConstant";
|
||
import Request from '@/common/request'
|
||
import StaticConstant from "@/common/StaticConstant";
|
||
import {stringIsNotEmpty} from "../../../common/util";
|
||
//import mrsongCharts from '@/uni_modules/mrsong-charts/components/mrsong-charts/mrsong-charts.vue';
|
||
|
||
let request = new Request()
|
||
export default {
|
||
components: {
|
||
// mrsongCharts
|
||
},
|
||
data() {
|
||
return {
|
||
majorTypeName: '',
|
||
majorInfo: {},
|
||
vipInfo: {},
|
||
schoolName: '',
|
||
tabs: [
|
||
{
|
||
id: 1,
|
||
name: '基本信息'
|
||
}, {
|
||
id: 2,
|
||
name: '开设院校'
|
||
}
|
||
],
|
||
scrollLeft: 0,
|
||
currentTab: 0,
|
||
old: {
|
||
scrollTop: 0
|
||
},
|
||
bpts: {
|
||
jobDistribution: StaticConstant.opts,//就业岗位分析
|
||
},
|
||
chartData: {
|
||
sexRatio: {},//男女分布
|
||
jobDistribution: {},//就业岗位分析
|
||
industryDistribution: {},//就业行业分布
|
||
regionDistribution: {},//就业地区分布
|
||
},
|
||
tabCurrent: '1',
|
||
schoolResult: {
|
||
current: 1,
|
||
size: 8,
|
||
total: 0,
|
||
pages: 0,
|
||
list: []
|
||
},
|
||
status: 'more',
|
||
statusTypes: StaticConstant.loadStatusTypes,
|
||
contentText: StaticConstant.loadContentText
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
if (e.majorCode) {
|
||
this.majorCode = e.majorCode;
|
||
console.log('majorCode ', this.majorCode)
|
||
this.getMajorDetailInfo()
|
||
}
|
||
if (e.majorTypeName) {
|
||
this.majorTypeName = e.majorTypeName
|
||
}
|
||
this.vipInfo = uni.getStorageSync('vipInfo')
|
||
},
|
||
onReachBottom() {
|
||
console.log("已经滚动到底部了")
|
||
if ((this.vipInfo && this.vipInfo.vipFlag) && this.currentTab === 1) {
|
||
this.loadMore()
|
||
}
|
||
},
|
||
methods: {
|
||
swichMenu(id) {
|
||
let that = this
|
||
if (!this.vipInfo || !stringIsNotEmpty(this.vipInfo.vipLevel) || !this.vipInfo.vipFlag) {
|
||
uni.showModal({
|
||
title: 'VIP专享',
|
||
// 提示文字
|
||
content: '该功能为增值内容，开通会员后即可免费查看！',
|
||
// 取消按钮的文字自定义
|
||
cancelText: "取消",
|
||
// 确认按钮的文字自定义
|
||
confirmText: "开通服务",
|
||
//删除字体的颜色
|
||
confirmColor: 'red',
|
||
//取消字体的颜色
|
||
cancelColor: '#dddddd',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
// 执行确认后的操作
|
||
that.goto('/pages/zyb/vip/index')
|
||
}
|
||
}
|
||
})
|
||
return
|
||
}
|
||
this.currentTab = id
|
||
console.log(id)
|
||
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
|
||
this.loadManData()
|
||
this.loadJobDistributionData()
|
||
this.loadIndustryDistributionData()
|
||
this.loadRegionDistributionData()
|
||
that.getSchoolList()
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
},
|
||
/*加载男女分布*/
|
||
loadManData() {
|
||
if (this.majorInfo.sexRatio) {
|
||
let sList = this.majorInfo.sexRatio.split('、')
|
||
let list = []
|
||
for (let i = 0; i < sList.length; i++) {
|
||
let r = sList[i].split('：')
|
||
list.push({name: r[0].replace('\\', ''), value: parseFloat(r[1].replace('%', ''))})
|
||
}
|
||
console.log(list)
|
||
this.chartData.sexRatio = {series: [{data: list}]}
|
||
}
|
||
},
|
||
/*加载就业岗位分布*/
|
||
loadJobDistributionData() {
|
||
if (this.majorInfo.jobDistribution) {
|
||
let jobDistributionSList = this.majorInfo.jobDistribution.split('、')
|
||
let jobDistributionList = []
|
||
for (let i = 0; i < jobDistributionSList.length; i++) {
|
||
let jobDistribution = jobDistributionSList[i].split('：')
|
||
jobDistributionList.push({
|
||
name: jobDistribution[0].replace('\\', ''),
|
||
value: parseFloat(jobDistribution[1].replace('%', ''))
|
||
})
|
||
}
|
||
this.chartData.jobDistribution = {series: [{data: jobDistributionList}]}
|
||
}
|
||
},
|
||
/*加载就业行业分布*/
|
||
loadIndustryDistributionData() {
|
||
if (this.majorInfo.industryDistribution) {
|
||
let sList = this.majorInfo.industryDistribution.split('、')
|
||
let list = []
|
||
for (let i = 0; i < sList.length; i++) {
|
||
let r = sList[i].split('：')
|
||
list.push({name: r[0].replace('\\', ''), value: parseFloat(r[1].replace('%', ''))})
|
||
}
|
||
this.chartData.industryDistribution = {series: [{data: list}]}
|
||
}
|
||
},
|
||
/*加载就业地区分布*/
|
||
loadRegionDistributionData() {
|
||
if (this.majorInfo.regionDistribution) {
|
||
let sList = this.majorInfo.regionDistribution.split('、')
|
||
let list = []
|
||
for (let i = 0; i < sList.length; i++) {
|
||
let r = sList[i].split('：')
|
||
list.push({name: r[0].replace('\\', ''), value: parseFloat(r[1].replace('%', ''))})
|
||
}
|
||
this.chartData.regionDistribution = {series: [{data: list}]}
|
||
}
|
||
},
|
||
|
||
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
|
||
},{showLoad:false}).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">
|
||
<!--专业简介-->
|
||
<uni-section title="专业简介" type="line">
|
||
<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>
|
||
</uni-section>
|
||
<!--学什么-->
|
||
<uni-section title="学什么" type="line">
|
||
<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>
|
||
</uni-section>
|
||
<!--干什么-->
|
||
<uni-section title="干什么" type="line">
|
||
<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>
|
||
</uni-section>
|
||
<!--数据统计-->
|
||
<uni-section title="男女比例" type="line" v-if="majorInfo.sexRatio">
|
||
<view class="charts-box padding20">
|
||
<qiun-data-charts type="pie" :opts="chartData.jobDistribution"
|
||
:chartData="chartData.sexRatio"/>
|
||
</view>
|
||
</uni-section>
|
||
<uni-section title="就业岗位分布" type="line" v-if="majorInfo.jobDistribution">
|
||
<view class="charts-box padding20">
|
||
<!-- <mrsongCharts type='pie' title="" align='left' :charts-data="chartData.jobDistribution"/>-->
|
||
<qiun-data-charts type="pie" :opts="chartData.jobDistribution" :chartData="chartData.jobDistribution"/>
|
||
</view>
|
||
</uni-section>
|
||
<uni-section title="就业行业分布" type="line" v-if="majorInfo.industryDistribution">
|
||
<view class="charts-box padding20">
|
||
<qiun-data-charts type="pie" :opts="chartData.jobDistribution"
|
||
:chartData="chartData.industryDistribution"/>
|
||
</view>
|
||
</uni-section>
|
||
<uni-section title="就业地区分布" type="line" v-if="majorInfo.regionDistribution">
|
||
<view class="charts-box padding20">
|
||
<qiun-data-charts type="pie" :opts="chartData.jobDistribution"
|
||
:chartData="chartData.regionDistribution"/>
|
||
</view>
|
||
</uni-section>
|
||
</view>
|
||
</view>
|
||
<!--开设院校-->
|
||
<view class="ksyx" v-if="currentTab===1">
|
||
<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: 50%;
|
||
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;
|
||
}
|
||
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.logo {
|
||
height: 200rpx;
|
||
width: 200rpx;
|
||
margin-top: 200rpx;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.text-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
color: #8f8f94;
|
||
}
|
||
|
||
.chart-title {
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.chart-unit {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 0 10rpx;
|
||
}
|
||
</style>
|