front/src/views/career/plan/components/EnrollList.vue

<template>
  <div>
    <div v-if="!showDetail" v-loading="loading">
      <mx-search-group v-model="pageForm.title" :span="8" placeholder="请输入内容" @search="getEnrollBrochure">
        <div class="f-666 f14 ml10">共 <span class="f-primary">{{ total }}</span> 条</div>
      </mx-search-group>
      <div v-if="enrollList.length" class="guide-list mt20">
        <el-row v-for="item in enrollList" :key="item.id" class="guid-item">
          <el-col :span="20">
            <a class="f-333 f16 text-ellipsis" @click="toDetail(item)">
              <span>{{ item.title }}</span>
            </a>
          </el-col>
          <el-col class="f-666 f14" :span="4">
            <div class="fx-row fx-bet-cen f-666 f14">
              <span>{{ item.hits }} 次浏览</span>
              <span>{{ item.createTime.split(' ')[0] }}</span>
            </div>
          </el-col>
        </el-row>
        <pagination
          v-if="total > 0"
          class="mt10"
          :total="total"
          :auto-scroll="false"
          :page.sync="pageForm.pageNum"
          :limit.sync="pageForm.pageSize"
          @pagination="onChangePage"
        />
      </div>
      <evaluation-empty v-else class="mt20" title="暂无数据" />
    </div>
    <div v-else>
      <div class="jc-between fx-row ai-center mb20">
        <p class="f28 f-333 text-ellipsis">{{ detailInfo.title }}</p>
        <el-button type="primary" size="mini" plain round @click="showDetail= false">返回列表</el-button>
      </div>
      <div class="jc-between fx-row ai-center mb20 f-999 f14">
        <div class="left">
          <span class="mr30">来源：{{ detailInfo.collegeName }}</span>
          <span class="mr30">{{ detailInfo.hits }} 次浏览 </span>
          <span>发布时间：{{ detailInfo.createTime.split(' ')[0] }}</span>
        </div>
        <div class="right">
          <i class="iconfont icon-zitisuoxiao " />
          <i class="iconfont icon-zitifangda" />
        </div>
      </div>
      <div v-html="detailInfo.content" />
    </div>
  </div>
</template>

<script>
import MxSearchGroup from '@/components/MxSearch/mx-search-group'
import { enrollBrochure, saveEnrollBrochureHits } from '@/api/webApi/career-course'

export default {
  components: { MxSearchGroup },
  props: {
    code: {
      type: String || Number,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      pageForm: {
        pageSize: 999,
        pageNum: 1,
        title: ''
      },
      enrollList: [],
      total: 0,
      showDetail: false,
      detailInfo: {}
    }
  },
  created() {
    this.getEnrollBrochure()
  },
  methods: {
    getEnrollBrochure() {
      this.loading = true
      enrollBrochure({ code: this.code, ...this.pageForm }).then(res => {
        this.total = res.total
        this.enrollList = res.rows
      }).finally(() => {
        this.loading = false
      })
    },
    saveEnrollBrochureHits(id) {
      saveEnrollBrochureHits({ id: id }).then(res => {
        console.log(res)
      })
    },
    toDetail(row) {
      this.detailInfo = row
      this.saveEnrollBrochureHits(row.id)
      this.showDetail = true
    },
    onChangePage(page) {
      this.pageForm.pageSize = page.limit
      this.pageForm.pageNum = page.page
      this.getEnrollBrochure()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/common.scss";

.guid-item {
  border-bottom: 2px dashed $--background-color-base;
  line-height: 60px;
}

.guid-item a :hover {
  color: $--color-primary;
}
</style>