check-work/src/views/Policy/components/PolicyList.vue

<!--
  Copyright (c) 2020.
  author: bin
  email: binbin0314@126.com
  -->

<template>
  <div class="box">
    <div class="search-list">
      <!-- <search-list @iptCon="getInput" /> -->
      <span>
        <a-checkbox :checked="pStatus.bw - 0 === 1" @click="changeStatus('bw')">部委</a-checkbox>
        <a-checkbox :checked="pStatus.sx - 0 === 1" @click="changeStatus('sx')">山西</a-checkbox>
        <a-checkbox :checked="pStatus.zg - 0 === 1" @click="changeStatus('zg')">山西转型综改示范区</a-checkbox>
      </span>
      <a-input-group class="search" compact>
        <a-select
          @change="changeCode"
          style="width: 120px; height: 40px"
          v-model="pStatus.policyText[pStatus.value - 1]"
        >
          <a-select-option value="1">标题</a-select-option>
          <a-select-option value="2">地区</a-select-option>
          <a-select-option value="3">发布部门</a-select-option>
        </a-select>
        <a-input-search
          @search="getPolicy"
          enter-button="搜索"
          placeholder="请输入..."
          style="width: 76.2%"
          v-model="pStatus.iptCon"
        />
      </a-input-group>
    </div>
    <div class="policy-box">
      <div :key="index" v-for="(item, index) in lists">
        <div class="date-box">
          <p class="date-mon">{{ monthEnglish[item.publishTime.split('-')[1] - 1] }}.</p>
          <p class="date-day">{{ item.publishTime.split('-')[2] }}</p>
        </div>
        <p class="item-title">{{ item.title }}</p>
        <p class="item-content">{{ item.intro }}</p>
        <!-- <p class="item-content" v-html="item.content"></p> -->
        <p class="source-time">
          <span
            @click="openWin(item.titleUrl)"
            class="baseColor source"
          >来源：{{ item.publishDepartName }}</span>
          <span class="time">{{ item.publishTime }}</span>
        </p>
        <p class="original baseColor">
          <span @click="LookSource(item.id)">
            了解更多
            <a-icon type="arrow-right" />
          </span>
        </p>
      </div>
    </div>
    <a-pagination
      :current="current"
      :page-size="pageSize"
      :total="total"
      @change="onShowSizeChange"
      class="pagination"
      show-less-items
      show-quick-jumper
      v-show="total > 5"
    />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { selLikePolicy } from 'config/api';
export default {
  name: 'PolicyList',
  data() {
    return {
      str: '这是创新政策界面',
      lists: [],
      total: 0,
      pageSize: 5,
      monthEnglish: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'],
      pCode: ['title', 'area', 'area'],
      pStatus: {
        bw: 0,
        sx: 0,
        zg: 0,
        value: 1, // 搜索框当前选项value
        code: 'title', // 搜索框当前选项code
        policyText: ['标题', '地区', '发布部门'], // 搜索框选项列表
        iptCon: '', // 搜索框input内容
      },
    };
  },
  computed: mapState('home', ['current', 'policyStatus']),

  watch: {
    policyStatus(val) {
      this.setCurrent(1);
      this.getPolictList();
    },
  },

  created() {
    this.pStatus = this.policyStatus;
    this.getPolictList();
  },

  methods: {
    ...mapMutations('home', ['setPolicyId', 'setCurrent', 'setPolicyStatus']),
    async getPolictList() {
      try {
        const params = {
          param: {
            bw: this.policyStatus.bw,
            code: this.policyStatus.code,
            input: this.policyStatus.iptCon,
            pageNum: this.current,
            pageSize: 5,
            sx: this.policyStatus.sx,
            zg: this.policyStatus.zg,
          },
        };
        const res = await selLikePolicy(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.lists = data.list;
          this.total = data.total - 0;
          window.scroll(0, 0);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 查看政策详情
    LookSource(id) {
      this.setPolicyId(id);
      this.$router.push('/Policy/PolicyDetails');
    },
    // 改变单当前页数
    onShowSizeChange(current, size) {
      this.setCurrent(current);
      this.getPolictList();
    },
    // 政策界面课程类目多选框发生改变时的事件
    changeStatus(str) {
      if (this.pStatus[str]) {
        this.pStatus[str] = 0;
      } else {
        this.pStatus[str] = 1;
      }
      this.setPolicyStatus(this.pStatus);
    },
    // 政策界面课程类目搜索提示
    changeCode(value) {
      this.pStatus.code = this.pCode[value - 1];
    },
    // 点击搜索按钮
    getPolicy() {
      this.setCurrent(1);
      this.setPolicyStatus(this.pStatus);
    },
  },
};
</script>

<style scoped lang="stylus">
.box {
  width: 100%;
  min-height: 1037px;
  overflow: hidden;
  opacity: 1;
}

.search-list {
  height: 72px;
  line-height: 72px;
  background: #fff;
  padding: 0 24px;
  position: relative;
}

.search {
  width: 500px;
  position: absolute;
  right: 25px;
  top: 20px;
}

.policy-box {
  div {
    position: relative;
    width: 100%;
    height: 238px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    margin-top: 24px;
    padding: 25px;
  }
}

.item-title {
  margin-left: 200px;
  overflow: hidden;
  display: -webkit-box;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.65);
  font-family: Microsoft YaHei;
  font-weight: bold;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.item-content {
  margin-left: 200px;
  text-indent: 2em;
  font-size: 16px;
  line-height: 36px;
  color: rgba(0, 0, 0, 0.35);
  font-family: Microsoft YaHei;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.source {
  cursor: pointer;
  font-family: Microsoft YaHei;
  font-weight: 400;
  opacity: 1;
  margin-right: 24px;
}

.time {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.25);
  opacity: 1;
}

.original {
  position: absolute;
  right: 25px;
  bottom: 25px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  opacity: 1;
  margin-bottom: 0;

  span {
    cursor: pointer;
  }
}

.date-box {
  height: 188px !important;
  width: 188px !important;
  position: absolute !important;
  top: 0 !important;
  // box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  text-align: center;
  box-shadow: none !important;

  p {
    margin-bottom: 0 !important;
  }
}

.date-mon {
  font-size: 40px;
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  color: #13ACC4;
}

.date-day {
  font-size: 70px;
  height: 80px;
  line-height: 80px;
  font-weight: bold;
  color: #13ACC4;
}

.source-time {
  margin-left: 200px;
  position: absolute;
  bottom: 26px;
  margin-bottom: 0;
}

.pagination {
  margin-top: 68px;
  text-align: right;
}
</style>