web-mobile/src/pages/jobfairList/views/list.vue

<template>
  <div id="jobfair">
    <list-layout searchPlaceHolder="请输入招聘会标题" @search="search" @searchBar="searchBar" :hasMore="hasMore" :searchName="`title`">
      <template v-slot:content>
        <span v-if="list.length > 0">
          <el-row class="jobfair_list" v-for="(item, index) in list" :key="index" @click.native="link(item.id)">
            <el-row>
              <span class="time_off" v-if="item.is_over === '0'">过</span>
              <el-col :span="6" class="jobfair_icon">
                招聘
              </el-col>
              <el-col :span="18" class="jobfair_info">
                <div style="float:left">
                  <el-tag effect="plain" v-if="item.schid === $site" class="jobfair_tags">校内</el-tag>
                  <el-tag type="warning" effect="plain" v-else>校外</el-tag>
                </div>
                <div class="info_word">
                  {{ item.title }}
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" align="top" :gutter="10" class="jobfair_under_info">
              <el-col :span="1">
                <div class="el-icon-s-flag info_icon"></div>
              </el-col>
              <el-col :span="15" :offset="1"> 主办方：{{ item.organizer }} </el-col>
              <el-col :span="6" class="info_date">
                {{ item.meet_day }}
              </el-col>
            </el-row>
            <el-row type="flex" align="top" :gutter="10" class="jobfair_under_info">
              <el-col :span="1">
                <div class="el-icon-position info_icon"></div>
              </el-col>
              <el-col :span="15" :offset="1">
                {{ item.address }}
              </el-col>
              <el-col :span="6" class="info_time">
                {{ item.meet_time }}
              </el-col>
            </el-row>
            <el-row type="flex" align="middle" :gutter="10" class="jobfair_under_info">
              <el-col :span="1">
                <div class="el-icon-user-solid info_icon"></div>
              </el-col>
              <el-col :span="15" :offset="1"> 时间：{{ item.time }} </el-col>
              <!-- <el-col :span="6" class="el-icon-view info_icon info_date view_icon">
                {{ item.fact_c_count }}
              </el-col> -->
            </el-row>
          </el-row>
        </span>
        <nodata v-else></nodata>
      </template>
    </list-layout>
  </div>
</template>

<script>
import listLayout from '@/layout/list-layout.vue';
import nodata from '@/components/nodata.vue';
import { mapActions, mapState } from 'vuex';
export default {
  metaInfo() {
    return {
      title: '校园招聘会',
    };
  },
  name: 'jobfair',
  props: {
    searchVal: { type: String, default: '' },
  },
  components: {
    listLayout,
    nodata,
  },
  data: () => ({
    list: {},
    totalRow: 20,
    hasMore: true,
    searchInfo: {},
  }),
  created() {
    this.changeState(this.$route.query.type);
    this.search();
  },
  computed: {
    ...mapState({
      user: state => state.user.user,
    }),
  },
  methods: {
    ...mapActions(['fairsOperation']),
    async search(type) {
      let skip = 0;
      //判断下type,如果type存在.当前页加一
      if (type && type === 'nextPage') {
        this.currentPage++; //当前页加一
        skip = (this.currentPage - 1) * this.$limit; //重新计算skip:即计算数据库开始查询的位置
      }
      if (!this.hasMore) return false; //判断的是:如果我列表的数据条数大于等于数据库返回给我的总数时=>我就不查了.没数据了
      this.$set(this, `hasMore`, false); //控制无限加载瞬间加载N次的情况
      let result = await this.fairsOperation({ type: 'list', data: { skip: skip, limit: this.$limit, ...this.searchInfo } }); //查询,添加skip和limit参数
      if (`${result.errcode}` === '0') {
        if (type && type === 'nextPage') {
          this.$set(this, `list`, this.list.concat(result.data)); //将现有的列表和请求来的数据列表合并到一起,自动追加在下面import '@/plugins/var';
        } else {
          this.$set(this, `list`, result.data);
        }
        this.$set(this, `totalRow`, result.total); //将数据库返回的总数放到页面的totalRow变量中,用来判断
        this.$set(this, `hasMore`, this.list.length < this.totalRow); //此处是根据数据库总数的结果和当前列表的总条数比较,看看是否可以继续请求数据
      }
    },
    searchBar({ type, value }) {
      this.$set(this, `searchInfo`, value);
      if (type === 'search') {
        this.hasMore = true;
        this.search();
      }
    },
    changeState(type) {
      if (typeof this.user !== 'object') {
        this.$message.error('请先登录');
        return false;
      }
      if (type === 'in') {
        this.searchInfo.schid = this.user.schid;
        this.schIn = 'in';
      } else {
        this.searchInfo.schid = undefined;
        this.schIn = 'out';
      }
    },
    link(id) {
      window.location.href = `jobfair.html#/?id=${id}`;
    },
  },
};
</script>

<style lang="less" scoped>
.jobfair_list {
  padding: 1rem;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-bottom: 1px dashed;
}
.jobfair_icon {
  background-color: #25b6ed;
  border-radius: 50% 0 50% 50%;
  color: #fff;
  width: 3rem;
  height: 3rem;
  padding-top: 0.8rem;
  padding-left: 0.5rem;
}
.jobfair_info {
  margin-left: 1rem;
}
.info_word {
  text-indent: 0.8rem;
  line-height: 2rem;
  color: #000;
  font-size: 1rem;
  word-wrap: break-word;
}
.recommend_tag {
  position: relative;
  top: 0;
}
.recommed_mark {
  border-radius: 0% 0 0 100%;
  background-color: #f40;
  color: #fff;
  font-size: 1rem;
  position: absolute;
  top: -1rem;
  right: -1rem;
  height: 1.5rem;
  width: 1.8rem;
  padding-top: 0.1rem;
  text-align: center;
}
.time_off {
  @extend .recommed_mark;
  background-color: #ccc;
}
.jobfair_under_info {
  font-size: 14px;
  color: #666;
}
.info_icon {
  color: #ccc;
  zoom: 1.5;
}
.info_date {
  text-align: right;
  font-size: 12px;
}
.info_time {
  @extend .info_date;
  color: #ff4400;
}
.view_icon {
  zoom: 1;
  color: #999999;
}
</style>