web-mobile/src/pages/corp/views/source/index.vue

<template>
  <div id="index" style="background:#fff;">
    <el-row>
      <el-col :span="24" class="search">
        <el-col :span="20" class="searchInput"> <el-input placeholder="请输入你要搜索的内容" prefix-icon="el-icon-search" v-model="input"> </el-input></el-col>
        <el-col :span="4" class="searchBtn"><el-button>搜索</el-button></el-col>
      </el-col>
      <el-col :span="24" style="position: relative;top:3.125rem;">
        <el-tabs v-model="active" @tab-click="handleClick">
          <el-tab-pane name="fir">
            <span slot="label">华中<br />114008</span>
            <list :data="list" :hasMore="listHasMore" @search="search"></list>
          </el-tab-pane>
          <el-tab-pane name="sec">
            <span slot="label">华南<br />114008</span>
            <list :data="list" :hasMore="listHasMore" @search="search"></list>
          </el-tab-pane>
          <el-tab-pane name="thr">
            <span slot="label">华东<br />114008</span>
            <list :data="list" :hasMore="listHasMore" @search="search"></list>
          </el-tab-pane>
          <el-tab-pane name="for">
            <span slot="label">华北<br />114008</span>
            <list :data="list" :hasMore="listHasMore" @search="search"></list>
          </el-tab-pane>
          <el-tab-pane name="fiv">
            <span slot="label">西南<br />114008</span>
            <list :data="list" :hasMore="listHasMore" @search="search"></list>
          </el-tab-pane>
          <el-tab-pane name="six">
            <span slot="label">西北<br />114008</span>
            <list :data="list" :hasMore="listHasMore" @search="search"></list>
          </el-tab-pane>
          <el-tab-pane name="sev">
            <span slot="label">东北<br />114008</span>
            <list :data="list" :hasMore="listHasMore" @search="search"></list>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <nut-backtop :distance="200" @click="onClick" :bottom="20" :right="0" :zIndex="10" :duration="1000">
      <i class="el-icon-upload2" style="font-size:40px;color:#666;"></i>
    </nut-backtop>
  </div>
</template>

<script>
import list from './list.vue';
import _ from 'lodash';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {
    list,
  },
  data: () => ({
    input: '',
    active: 'fir',
    list: [],
    listTotalRow: 0,
    listHasMore: true,
  }),
  created() {
    this.search();
  },
  computed: {},
  methods: {
    ...mapActions(['getList']),
    async search() {
      if (this.list.length === 0) {
        this.getDataList('fir');
      } else {
        this.getDataList(this.active);
      }
    },
    async getDataList(type) {
      let { result, totalRow } = await this.getList('school');
      let data = _.get(this, `list`).concat(result);
      this.$set(this, `list`, data);
      this.$set(this, `listTotalRow`, totalRow);
      if (_.get(this, `list`).length >= _.get(this, `listTotalRow`)) {
        this.$set(this, `listHasMore`, false);
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    changeStatus() {
      this.btnStatus = this.btnStatus === 0 ? 1 : 0;
    },
    onClick() {
      console.log('触发回到顶部按钮');
    },
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.search {
  border-bottom: 0.0625rem solid #ccc;
  position: fixed;
  top: 0;
  background: #fff;
  z-index: 999;
}
.searchInput {
  padding: 0.3125rem 0.625rem;
}
.searchBtn {
  padding: 0.3125rem 0;
}
.searchBtn .el-button {
  border: none;
}
/deep/.el-tabs__item {
  line-height: 1.25rem;
  text-align: center;
}
/deep/.el-tabs__header {
  margin: 0;
}
</style>