|
@@ -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>
|