|  | @@ -0,0 +1,123 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="app-container fx-column ai-cen">
 | 
	
		
			
				|  |  | +    <el-card shadow="never" class="index-block">
 | 
	
		
			
				|  |  | +      <mx-condition slot="header" :query-params="queryParams" tiny-margin-bottom use-alias-mapping @query="handleQuery"/>
 | 
	
		
			
				|  |  | +      <div class="school-list fx-column">
 | 
	
		
			
				|  |  | +        <div v-for="(item,idx) in list" :key="item.id" class="school-list-item pb20 fx-row fx-bet-cen">
 | 
	
		
			
				|  |  | +          <el-image :src="item.pict" style="width: 200px" />
 | 
	
		
			
				|  |  | +          <div class="fx-column pl20 pr20" style="width: 420px">
 | 
	
		
			
				|  |  | +            <div class="fx-row">
 | 
	
		
			
				|  |  | +              <span class="f18 bold f-333 mr5">{{item.name}}</span>
 | 
	
		
			
				|  |  | +              <el-tag size="small" effect="light">{{item.type}}</el-tag>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div class="mt15 fx-row ai-cen f-999">
 | 
	
		
			
				|  |  | +              <i class="el-icon-location-information mr5"></i>
 | 
	
		
			
				|  |  | +              <span>{{item.address}}</span>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div class="mt8 fx-row ai-cen f-999">
 | 
	
		
			
				|  |  | +              <i class="el-icon-link mr5"></i>
 | 
	
		
			
				|  |  | +              <el-link underline @click="openLink(item)">{{item.url}}</el-link>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div class="mt8 fx-row ai-cen f-999">
 | 
	
		
			
				|  |  | +              <i class="el-icon-phone-outline mr5"></i>
 | 
	
		
			
				|  |  | +              <span>{{item.tel}}</span>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +          <div class="fx-1 fx-column">
 | 
	
		
			
				|  |  | +            <div class="f14 bold f-333 rel school-list-remark">学校简介</div>
 | 
	
		
			
				|  |  | +            <div class="mt20 f-666 text-ellipsis-3">{{item.remark||'无'}}</div>
 | 
	
		
			
				|  |  | +            <div v-if="item.remark&&item.remark.length>100" class="mt12">
 | 
	
		
			
				|  |  | +              <el-button size="small" round @click="showRemark(item)">完整介绍</el-button>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <pagination :total="total" :page.sync="pageForm.pageNum" :limit.sync="pageForm.pageSize" @pagination="getList"/>
 | 
	
		
			
				|  |  | +    </el-card>
 | 
	
		
			
				|  |  | +    <el-dialog :visible.sync="open" :title="`${current.name}-学校简介`" width="60vw">
 | 
	
		
			
				|  |  | +      <div v-html="current.remark"></div>
 | 
	
		
			
				|  |  | +    </el-dialog>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import MxCondition from "@/components/MxCondition/mx-condition.vue";
 | 
	
		
			
				|  |  | +import IndexCard from "@/views/index/components/index-card.vue";
 | 
	
		
			
				|  |  | +import DynamicTable from "@/components/dynamic-table/index.vue";
 | 
	
		
			
				|  |  | +import {getHighSchoolList} from "@/api/webApi/baiyou";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: "index",
 | 
	
		
			
				|  |  | +  components: {DynamicTable, IndexCard, MxCondition},
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      queryParams: {
 | 
	
		
			
				|  |  | +        baiyouProvince: '',
 | 
	
		
			
				|  |  | +        baiyouCity: '',
 | 
	
		
			
				|  |  | +        baiyouArea: ''
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      firedParams: null,
 | 
	
		
			
				|  |  | +      pageForm: {
 | 
	
		
			
				|  |  | +        pageNum: 1,
 | 
	
		
			
				|  |  | +        pageSize: 20
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      list: [],
 | 
	
		
			
				|  |  | +      total: 0,
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      open: false,
 | 
	
		
			
				|  |  | +      current: {}
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    async handleQuery(model) {
 | 
	
		
			
				|  |  | +      this.firedParams = model
 | 
	
		
			
				|  |  | +      this.pageForm.pageNum = 1
 | 
	
		
			
				|  |  | +      await this.getList()
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    async getList() {
 | 
	
		
			
				|  |  | +      const res = await getHighSchoolList({
 | 
	
		
			
				|  |  | +        ...this.firedParams,
 | 
	
		
			
				|  |  | +        ...this.pageForm
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +      res.rows.forEach(i => i.type = i.type == 1 ? '公办' : '民办')
 | 
	
		
			
				|  |  | +      this.total = res.total
 | 
	
		
			
				|  |  | +      this.list = res.rows
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    openLink(item) {
 | 
	
		
			
				|  |  | +      if (!item.url) return
 | 
	
		
			
				|  |  | +      window.open(item.url)
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    showRemark(item) {
 | 
	
		
			
				|  |  | +      this.current = item
 | 
	
		
			
				|  |  | +      this.open = true
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style scoped lang="scss">
 | 
	
		
			
				|  |  | +.school-list {
 | 
	
		
			
				|  |  | +  &-item + &-item {
 | 
	
		
			
				|  |  | +    padding-top: 20px;
 | 
	
		
			
				|  |  | +    border-top: 5px solid #EEEEEE;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  &-remark:before {
 | 
	
		
			
				|  |  | +    content: ' ';
 | 
	
		
			
				|  |  | +    position: absolute;
 | 
	
		
			
				|  |  | +    bottom: -5px;
 | 
	
		
			
				|  |  | +    height: 3px;
 | 
	
		
			
				|  |  | +    background-color: var(--themeColor);
 | 
	
		
			
				|  |  | +    width: 30px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +::v-deep .el-link.el-link--default {
 | 
	
		
			
				|  |  | +  font-size: 14px;
 | 
	
		
			
				|  |  | +  color: #999999;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  &:hover {
 | 
	
		
			
				|  |  | +    color: var(--themeColor)
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |