front/src/views/career/components/SelectUniversity.vue

<template>
  <div class="selectUniversity" id="selectUniversity" ref="selectUniversity">
    <div>
      <mx-search-group class="mb10" justify="space-between" :span="10" v-model="collegeName" placeholder="请输入院校名称"
                       @search="clickSuffix"
      >
        <h1 class="title">选择院校</h1>
      </mx-search-group>
      <filter-form :filter="filter_form"></filter-form>
    </div>

    <div style="margin-top: 20px;">
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in tableData" :key="item.id">
            <div @click="changeUniversity(item)" class="universityList">{{ item.name }}</div>
          </el-col>
        </el-row>
      </div>
      <pagination class="mt10" :total="total" :autoScroll="false" @pagination="getUniversityList"
                  :page.sync="pageForm.pageNum"
                  :limit.sync="pageForm.pageSize"
      ></pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import MxSearchGroup from '@/components/MxSearch/mx-search-group'
import FilterForm from '@/views/career/components/FilterForm'
import { selectUniversityList } from '@/api/webApi/career-course'

export default {
  name: 'SelectUniversity',
  components: { MxSearchGroup,FilterForm },
  data() {
    return {
      pageForm: {
        pageSize: 20,
        pageNum: 1,
      },
      collegeName:'',
      total: 0,
      filter_form:{
        location:'',
        natureTypeCN:'',
        type:'',
        level:'',
        features:'',
        name:''
      },
      tableData: []
    }
  },
  computed: {
    ...mapState({ theme: (state) => state.settings.theme })
  },
  watch: {
    theme: {
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          this.$refs.selectUniversity.style.setProperty('--themeColor', val)
        })
      }
    },
    filter_form:{
      immediate: true,
      deep:true,
      handler(val) {
        this.getUniversityList()
      }
    }
  },
  methods: {
    changeUniversity(data) {
      this.$emit('changeUniversity', data)
    },
    getUniversityList() {
      selectUniversityList({ ...this.pageForm,...this.filter_form }).then(res => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    clickSuffix() {
      this.filter_form.name = this.collegeName
    },
  }
}
</script>

<style scoped lang="scss">
#selectUniversity {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  padding: 0 30px;

  .title {
    font-weight: 400;
    border-left: 6px solid var(--themeColor);
    padding: 5px 20px;
    color: var(--themeColor);
  }

  .search {
    .el-input {
      .el-input__inner {
        border-radius: 50px;
      }
    }
  }

  .universityList {
    background-color: var(--themeColor);
    line-height: 60px;
    margin-bottom: 10px;
    text-align: center;
  }
}

</style>

<style lang="scss">
.selectUniversity {
  .search {
    .el-input {
      .el-input__inner {
        border-radius: 50px;
      }
    }
  }

  .radioInput {
    .el-radio {
      .el-radio__input {
        display: none;
      }
    }
  }

  .radioInput {
    display: flex;
    margin-top: 5px;

    .el-radio-button .el-radio-button__inner {
      border-radius: 4px !important;
      border: none;
      padding: 5px 10px !important;
      font-weight: 400;
      font-family: PingFangSC-Regular, PingFang SC;
    }

    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      box-shadow: none;
    }
  }
}
</style>