datang-ui/src/components/ListPage/ListPage.vue

<template>
  <div style="position:relative">
    <div class="year-box" v-if="code !== 'search' && code !== '0204'">
      <span
        :class="item && item.year && year - 0 === item.year - 0 ? 'active' : ''"
        v-for="item in yearList"
        :key="item.year"
        @click="changeYear(item.year)"
        >{{ item.year }}
      </span>
    </div>
    <template v-if="code !== '0204' && code !== '0207' && code !== '0209' && code !== '0210'">
      <ul v-if="content.total - 0" style="max-width: 892px">
        <li v-for="item in content.list" :key="item.introId" class="mb-5" @click="openPage(item.introId)">
          <div class="d-flex justify-space-between align-center">
            <div style="cursor: pointer;max-width: 680px" class="one-text">{{ item.title }}</div>
            <div style="width: 110px">[{{ $moment(item.publishTime).format('YYYY - MM - DD') }}]</div>
          </div>
        </li>
      </ul>
      <div v-else style="height: 100%" class="d-flex justify-center align-center">
        <a-empty />
      </div>
    </template>
    <template v-else>
      <div class="d-flex flex-wrap" style="max-width: 892px">
        <div
          v-for="item in content.list"
          :key="item.introId"
          style="margin:0 6.5px 16px 6.5px"
          class="mb-4"
          @click="openPage(item.introId)"
        >
          <!-- <div> -->
          <img v-if="code === '0204' || code === '0209' || code === '0210'" :src="item.titleUrl" style="width:210px;height:140px" />
          <video v-if="code === '0207'" :src="item.titleUrl" style="width:210px;height:140px" />
          <div class="mt-2 one-text" style="width:210px">
            <span class="mr-2 one-text">标题: {{ item.title }}</span>
          </div>
          <div><span class="mr-2">发表时间: </span> {{ $moment(item.publishTime).format('YYYY-MM-DD') }}</div>
          <!-- </div> -->
        </div>
      </div>
    </template>

    <div v-if="content.total - 0 > 10" style="position:absolute;right:0;bottom:-20px;" class="d-flex justify-center align-center">
      <a-pagination show-quick-jumper :default-current="1" :total="content.total - 0" @change="onChange" />
    </div>
  </div>
</template>
<script>
import { getCondition } from 'config/api';

export default {
  props: {
    content: {
      default: () => {},
      type: Object,
    },
    code: {
      default: '0201',
      type: String,
    },
  },
  data() {
    return {
      yearList: [{ year: 2022 }],
      year: '2022',
    };
  },
  watch: {
    code(val) {
      if (val !== 'search') {
        this.getYear();
      }
    },
  },
  created() {
    if (this.code !== 'search') {
      this.getYear();
    }
    if (this.content && this.content.list && this.content.list.length === 1) {
      this.openPage(this.content.list[0].introId);
    }
  },
  methods: {
    onChange(pageNumber) {
      this.$emit('getData', pageNumber, this.code);
    },
    openPage(id) {
      console.log('window.location.href: ', window.location.href);
      window.open(`${window.location.href}&introId=${id}`);
    },
    changeYear(year) {
      this.year = year;
      this.$emit('changeYear', year, this.code);
    },
    async getYear() {
      try {
        const params = { showPage: this.code };
        console.log('params: ', params);
        const res = await getCondition(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          if (data && data[0]) {
            this.yearList = data;
            this.year = data[0].year;
          } else {
            this.year = '2022';
          }
        } else {
          console.error(msg);
        }
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>
<style scoped>
.year-box {
  height: 40px;
  margin-left: 24px;
}
.year-box >>> span {
  padding: 4px 8px;
  border: 1px solid #ededed;
  border-radius: 4px;
  margin-right: 16px;
  cursor: pointer;
}
.year-box >>> span:hover {
  border: 1px solid #b61412;
  color: #b61412;
}
.active {
  border: 1px solid #b61412;
  background: #b61412;
  color: #fff !important;
}
/deep/.ant-pagination-item-active {
  font-weight: 500;
  background: #fff;
  border-color: #b61412;
  background: #b61412;
}
/deep/.ant-pagination-item:hover {
  font-weight: 500;
  background: #fff;
  border-color: #b61412;
  background: #b61412;
}
/deep/.ant-pagination-item:focus a,
/deep/.ant-pagination-item:hover a {
  color: #fff;
}
/deep/.ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon,
/deep/.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon {
  color: #b61412;
}

/deep/.ant-pagination-prev:focus .ant-pagination-item-link,
/deep/.ant-pagination-next:focus .ant-pagination-item-link,
/deep/.ant-pagination-prev:hover .ant-pagination-item-link,
/deep/.ant-pagination-next:hover .ant-pagination-item-link {
  color: #b61412;
  border-color: #b61412;
}
/deep/.ant-pagination-options-quick-jumper input:hover {
  border-color: #b61412;
  border-right-width: 1px !important;
}
/deep/.ant-pagination-options-quick-jumper input:focus {
  border-color: #b61412;
  border-right-width: 1px !important;
  outline: 0;
  box-shadow: 0 0 0 2px rgb(182 20 18 /20%);
}
/deep/.ant-pagination-item-active:focus a {
  color: #fff;
}
/deep/.ant-pagination-item-active:hover a {
  color: #fff;
}
/deep/.ant-pagination-item-active a {
  color: #fff;
}
li {
  list-style-type: disc !important;
  font-size: 16px;
  color: rgb(51, 51, 51);
}
li::marker {
  color: #b61412;
}
</style>