web-mobile/src/pages/jobsList/views/jobs/job-list.vue

<template>
  <div id="job_list">
    <!-- <scroll :hasMore="hasMore" @loadMore="loadMore">
      <div>
        <el-row class="list_row" v-for="(item, index) in data" :key="index" @click.native="turnTo(item.id)">
          <el-col :span="24">
            <el-row type="flex" :gutter="10" align="middle">
              <el-col :span="16" class="word_etc" style="font-size:1rem;">
                <el-tag type="warning" v-if="item.is_intern === '1'" style="border-radius: 4px;">实习</el-tag>
                {{ item.job_name }}
              </el-col>
              <el-col :span="8" class="list_info_top-sWord">{{ item.create_time || '' }}</el-col>
            </el-row>
            <el-row type="flex" :gutter="10">
              <el-col :span="16" class="word_etc word_grey">专业:{{ item.zy_req }}</el-col>
              <el-col :span="8" class="list_info_top-sWord" style="color:#ff4400">{{ item.salary.text || '' }}</el-col>
            </el-row>
            <el-row type="flex" :gutter="10">
              <el-col :span="16" class="word_grey"> 学历需求: {{ item.xl_req }} </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" style="margin-top:0.5rem;">
            <el-tag v-for="(tag, tag_index) in item.job_tag" :key="tag_index">{{ tag }}</el-tag>
          </el-col>
        </el-row>
      </div>
    </scroll> -->
    <list-layout @search="loadMore" :hasMore="hasMore" :needSearch="false">
      <template v-slot:content>
        <el-row class="list_row" v-for="(item, index) in data" :key="index" @click.native="turnTo(item.id)">
          <el-card class="this_card">
            <el-col :span="24">
              <el-row type="flex" :gutter="10" align="middle">
                <el-col :span="16" class="word_etc" style="font-size:1rem;">
                  <el-tag type="warning" v-if="item.is_intern === '1'" style="border-radius: 4px;">实习</el-tag>
                  {{ item.job_name }}
                </el-col>
                <el-col :span="8" class="list_info_top-sWord">{{ item.create_time || '' }}</el-col>
              </el-row>
              <el-row type="flex" :gutter="10">
                <el-col :span="16" class="word_grey"> 招聘公司: {{ item.corpname }} </el-col>
              </el-row>
              <el-row type="flex" :gutter="10">
                <el-col :span="16" class="word_etc word_grey">专业:{{ item.zy_req }}</el-col>
                <el-col :span="8" class="list_info_top-sWord" style="color:#ff4400">{{ item.salary.text || '' }}</el-col>
              </el-row>
              <el-row type="flex" :gutter="10">
                <el-col :span="16" class="word_grey"> 学历需求: {{ item.xl_req }} </el-col>
              </el-row>
            </el-col>
            <el-col :span="24" style="margin-top:0.5rem;">
              <el-tag v-for="(tag, tag_index) in item.job_tag" :key="tag_index">{{ tag }}</el-tag>
            </el-col>
          </el-card>
        </el-row>
      </template>
    </list-layout>
  </div>
</template>

<script>
import listLayout from '@/layout/list-layout.vue';
import scroll from '@/layout/scroll.vue';
import _ from 'lodash';
export default {
  name: 'job_list',
  props: {
    data: { type: Array, default: () => [] },
    type: { type: String, default: 'jobs' },
    hasMore: { type: Boolean, default: true },
    total: { type: Number },
  },
  components: {
    // scroll,
    listLayout,
  },
  data: () => ({
    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    loading: false,
    currentPage: 1,
    list: [],
  }),
  watch: {
    data: {
      handler(val) {
        this.$set(this, `list`, val);
        this.changeTag();
      },
    },
  },
  created() {},
  computed: {},
  methods: {
    loadMore() {
      this.loading = true;
      this.$emit('search', { type: this.type, currentPage: this.currentPage });
      this.loading = false;
    },
    changeTag() {
      this.list.map(item => {
        let jobTag = item.job_tag.split(',');
        item.job_tag = jobTag;
        return item;
      });
    },
    turnTo(id) {
      let query = `?id=${id}`;
      window.location.href = `jobs.html#/${query}`;
    },
  },
};
</script>

<style lang="less" scoped>
.list_row {
  padding: 0.9rem;
}
.list_info_top-sWord {
  font-size: 0.6rem;
  text-align: right;
}
.word_etc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.word_grey {
  font-size: 0.87rem;
  color: #666666;
}
.el-tag {
  border-radius: 30px;
}
.this_card {
  padding: 5px 0px 15px 5px;
}
</style>