|
@@ -0,0 +1,449 @@
|
|
|
|
+<!--
|
|
|
|
+ * @Description: 合作院校详情
|
|
|
|
+ * @Author: 空白格
|
|
|
|
+ * @Date: 2022-08-16 10:40:45
|
|
|
|
+ * @LastEditors: 空白格
|
|
|
|
+ * @LastEditTime: 2022-08-16 11:44:55
|
|
|
|
+ * @FilePath: \veterans_client_web\src\views\CooperativeColleges\CollegesDetails\CollegesDetailsIndex.vue
|
|
|
|
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
|
|
|
|
+-->
|
|
|
|
+<template>
|
|
|
|
+ <div class="app-main enterprise-details" v-loading="loading">
|
|
|
|
+ <div class="enterprise-details-header">
|
|
|
|
+ <div class="enterprise-details-header-box app-main-box">
|
|
|
|
+ <div class="edhb-left">
|
|
|
|
+ <div class="edhb-left-logo">
|
|
|
|
+ <el-avatar
|
|
|
|
+ shape="square"
|
|
|
|
+ :size="73"
|
|
|
|
+ :src="details.schoolLogoUrl"
|
|
|
|
+ @error="errorHandler"
|
|
|
|
+ >
|
|
|
|
+ <el-avatar
|
|
|
|
+ shape="square"
|
|
|
|
+ :size="73"
|
|
|
|
+ :src="require('@/assets/images/default-school.png')"
|
|
|
|
+ ></el-avatar>
|
|
|
|
+ </el-avatar>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="edhb-left-info">
|
|
|
|
+ <div class="edhb-left-info-name">
|
|
|
|
+ {{ details.schoolName || "-" }}
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ class="edhb-left-info-link"
|
|
|
|
+ @click="jumpExternalLink(details.schoolUrl)"
|
|
|
|
+ >
|
|
|
|
+ {{ details.schoolUrl || "-" }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="edhb-right">
|
|
|
|
+ <div class="edhb-right-item">
|
|
|
|
+ {{ details.schoolNature | filtersDict(schoolNatureList) }}、{{
|
|
|
|
+ details.trainMethod || "-"
|
|
|
|
+ }}
|
|
|
|
+ </div>
|
|
|
|
+ <div class="edhb-right-item">{{ details.linkPhone || "-" }}</div>
|
|
|
|
+ <div class="edhb-right-item position">
|
|
|
|
+ {{ details.schoolAddress || "-" }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="app-main-box enterprise-details-main">
|
|
|
|
+ <!-- 学校信息 -->
|
|
|
|
+ <div class="app-main-box-content enterprise-details-main-info">
|
|
|
|
+ <!-- 学校信息 -->
|
|
|
|
+ <div class="edmi-introduce">
|
|
|
|
+ <h4>学校信息</h4>
|
|
|
|
+ <template v-if="details.detatil">
|
|
|
|
+ <div v-html="details.detatil"></div>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else>
|
|
|
|
+ <div class="edmi-introduce-content">暂无学校信息</div>
|
|
|
|
+ </template>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 学校相册 -->
|
|
|
|
+ <!-- <div class="edmi-album">
|
|
|
|
+ <h4>学校相册</h4>
|
|
|
|
+ <div
|
|
|
|
+ class="edmi-album-list"
|
|
|
|
+ v-if="
|
|
|
|
+ details.environmentUrlList && details.environmentUrlList.length
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <el-carousel
|
|
|
|
+ height="178px"
|
|
|
|
+ :autoplay="false"
|
|
|
|
+ arrow="never"
|
|
|
|
+ indicator-position="none"
|
|
|
|
+ >
|
|
|
|
+ <el-carousel-item
|
|
|
|
+ v-for="(item, Cindex) in details.environmentUrlList"
|
|
|
|
+ :key="Cindex"
|
|
|
|
+ >
|
|
|
|
+ <el-row :gutter="18">
|
|
|
|
+ <el-col
|
|
|
|
+ :xs="24"
|
|
|
|
+ :sm="12"
|
|
|
|
+ :md="12"
|
|
|
|
+ :lg="6"
|
|
|
|
+ :xl="6"
|
|
|
|
+ v-for="(img, index) in item"
|
|
|
|
+ :key="index"
|
|
|
|
+ >
|
|
|
|
+ <el-image
|
|
|
|
+ :src="img"
|
|
|
|
+ class="image"
|
|
|
|
+ fit="contain"
|
|
|
|
+ :preview-src-list="item"
|
|
|
|
+ >
|
|
|
|
+ <div slot="placeholder" class="image-slot">
|
|
|
|
+ 加载图片中<span class="dot">...</span>
|
|
|
|
+ </div>
|
|
|
|
+ </el-image>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </el-carousel-item>
|
|
|
|
+ </el-carousel>
|
|
|
|
+ </div>
|
|
|
|
+ <el-empty v-else :image-size="80" description="无公司相册数据"></el-empty>
|
|
|
|
+ </div> -->
|
|
|
|
+ <!-- 双高专业 -->
|
|
|
|
+ <div class="edmi-position">
|
|
|
|
+ <h4>双高专业</h4>
|
|
|
|
+ <div
|
|
|
|
+ class="edmi-position-list"
|
|
|
|
+ v-if="details.twinList && details.twinList.length"
|
|
|
|
+ >
|
|
|
|
+ <el-row :gutter="12">
|
|
|
|
+ <el-col
|
|
|
|
+ :xs="24"
|
|
|
|
+ :sm="24"
|
|
|
|
+ :md="24"
|
|
|
|
+ :lg="12"
|
|
|
|
+ :xl="12"
|
|
|
|
+ v-for="(item, index) in details.twinList"
|
|
|
|
+ :key="index"
|
|
|
|
+ >
|
|
|
|
+ <div class="edmi-position-list-item">
|
|
|
|
+ <div class="epli-left">
|
|
|
|
+ {{ item.professionName }}(专业代码:{{
|
|
|
|
+ item.professionCode
|
|
|
|
+ }})
|
|
|
|
+ </div>
|
|
|
|
+ <div class="epli-right">
|
|
|
|
+ <span class="el-icon-arrow-right"></span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ <el-empty
|
|
|
|
+ :image-size="80"
|
|
|
|
+ v-else
|
|
|
|
+ description="无双高专业数据"
|
|
|
|
+ ></el-empty>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 招生专业 -->
|
|
|
|
+ <div class="edmi-position">
|
|
|
|
+ <h4>招生专业</h4>
|
|
|
|
+ <div
|
|
|
|
+ class="edmi-position-list"
|
|
|
|
+ v-if="details.enrollList && details.enrollList.length"
|
|
|
|
+ >
|
|
|
|
+ <el-row :gutter="12">
|
|
|
|
+ <el-col
|
|
|
|
+ :xs="24"
|
|
|
|
+ :sm="24"
|
|
|
|
+ :md="24"
|
|
|
|
+ :lg="12"
|
|
|
|
+ :xl="12"
|
|
|
|
+ v-for="(item, index) in details.enrollList"
|
|
|
|
+ :key="index"
|
|
|
|
+ >
|
|
|
|
+ <div class="edmi-position-list-item">
|
|
|
|
+ <div class="epli-left">
|
|
|
|
+ {{ item.professionName }}(专业代码:{{
|
|
|
|
+ item.professionCode
|
|
|
|
+ }})
|
|
|
|
+ </div>
|
|
|
|
+ <div class="epli-right">
|
|
|
|
+ <span class="el-icon-arrow-right"></span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ <el-empty
|
|
|
|
+ v-else
|
|
|
|
+ :image-size="80"
|
|
|
|
+ description="无招生专业数据"
|
|
|
|
+ ></el-empty>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { getSchoolDetails } from "@/api/CooperativeColleges";
|
|
|
|
+import { getDictData } from "@/api/Dict";
|
|
|
|
+export default {
|
|
|
|
+ name: "EnterpriseDetailsIndex",
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ details: {},
|
|
|
|
+ schoolNatureList: [],
|
|
|
|
+ loading: false,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.getDict();
|
|
|
|
+ const { schoolId } = this.$route.query;
|
|
|
|
+ if (schoolId) {
|
|
|
|
+ this.getSchoolDetails(schoolId);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ /**
|
|
|
|
+ * 获取字典
|
|
|
|
+ * @date 2022-08-11
|
|
|
|
+ * @returns {any}
|
|
|
|
+ */
|
|
|
|
+ getDict() {
|
|
|
|
+ getDictData({ key: "school_nature" }).then((res) => {
|
|
|
|
+ this.schoolNatureList = res.data;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 获取院校详情
|
|
|
|
+ * @date 2022-08-15
|
|
|
|
+ * @param {any} schoolId
|
|
|
|
+ * @returns {any}
|
|
|
|
+ */
|
|
|
|
+ getSchoolDetails(schoolId) {
|
|
|
|
+ this.loading = true;
|
|
|
|
+ getSchoolDetails({ schoolId }).then((res) => {
|
|
|
|
+ this.details = res?.data;
|
|
|
|
+ this.loading = false;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 加载logo错误触发
|
|
|
|
+ * @date 2022-08-15
|
|
|
|
+ * @returns {any}
|
|
|
|
+ */
|
|
|
|
+ errorHandler() {
|
|
|
|
+ return true;
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 跳转外部链接
|
|
|
|
+ * @date 2022-08-16
|
|
|
|
+ * @param {any} link
|
|
|
|
+ * @returns {any}
|
|
|
|
+ */
|
|
|
|
+ jumpExternalLink(link) {
|
|
|
|
+ if (link) {
|
|
|
|
+ window.open(link);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ filters: {
|
|
|
|
+ filtersDict(val, list) {
|
|
|
|
+ let label = "-";
|
|
|
|
+ list.forEach((item) => {
|
|
|
|
+ if (Number(val) === Number(item.text)) {
|
|
|
|
+ label = item.label;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ return label;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.enterprise-details {
|
|
|
|
+ &-header {
|
|
|
|
+ background-color: #43565f;
|
|
|
|
+ &-box {
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ padding: 36px 0;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ .edhb-left {
|
|
|
|
+ display: flex;
|
|
|
|
+ &-logo {
|
|
|
|
+ margin-right: 13px;
|
|
|
|
+ :deep(.el-avatar) {
|
|
|
|
+ background-color: #65cafd;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &-info {
|
|
|
|
+ &-name {
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
+ }
|
|
|
|
+ &-link {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .edhb-right {
|
|
|
|
+ &-item {
|
|
|
|
+ color: rgba($color: #fff, $alpha: 0.7);
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ text-align: right;
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
+ }
|
|
|
|
+ .position {
|
|
|
|
+ position: relative;
|
|
|
|
+ &::before {
|
|
|
|
+ content: "";
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 13px;
|
|
|
|
+ height: 17px;
|
|
|
|
+ background: url("./../../../assets/images/dingwei.svg") no-repeat
|
|
|
|
+ center center;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ vertical-align: bottom;
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &-main {
|
|
|
|
+ &-hot {
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ .edmh-header {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: flex-end;
|
|
|
|
+ margin-bottom: 18px;
|
|
|
|
+
|
|
|
|
+ &-view {
|
|
|
|
+ color: #858585;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ h4 {
|
|
|
|
+ color: #1a1a1a;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+ .edmh-list {
|
|
|
|
+ &-item {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ padding: 18px 20px;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ &:hover {
|
|
|
|
+ opacity: 0.8;
|
|
|
|
+ }
|
|
|
|
+ &-left {
|
|
|
|
+ .elil-item {
|
|
|
|
+ color: #919191;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ &:first-child {
|
|
|
|
+ color: #1a1a1a;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+ &:last-child {
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &-right {
|
|
|
|
+ text-align: right;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .elir-item {
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ color: #919191;
|
|
|
|
+ &:first-child {
|
|
|
|
+ flex: 1;
|
|
|
|
+ color: #ee5a0f;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &-info {
|
|
|
|
+ padding-bottom: 100px;
|
|
|
|
+ .edmi-introduce {
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ margin-bottom: 24px;
|
|
|
|
+ h4 {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: #1a1a1a;
|
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+ &-content {
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #6c6c6c;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .edmi-album {
|
|
|
|
+ margin-bottom: 24px;
|
|
|
|
+ h4 {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: #1a1a1a;
|
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
|
+ margin-bottom: 24px;
|
|
|
|
+ }
|
|
|
|
+ &-list {
|
|
|
|
+ .image {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 178px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .edmi-position {
|
|
|
|
+ h4 {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: #1a1a1a;
|
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ }
|
|
|
|
+ &-list {
|
|
|
|
+ &-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 14px 16px;
|
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .pagination {
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ :deep(.el-pager .active) {
|
|
|
|
+ background-color: #ff3939;
|
|
|
|
+ }
|
|
|
|
+ :deep(.el-pagination.is-background
|
|
|
|
+ .el-pager
|
|
|
|
+ li:not(.disabled).active) {
|
|
|
|
+ background-color: #ff3939;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|