check-work/src/views/Activity/Activity.vue

<!--
  Copyright (c) 2020.
  author: song
  email: 15235360226@163.com
  -->

<template>
  <div class="inner">
    <div class="search-list">
      <span>
        <a-checkbox :checked="sta.ly === 1" @click="cSta('ly')">路演</a-checkbox>
        <a-checkbox :checked="sta.jz === 1" @click="cSta('jz')">讲座</a-checkbox>
        <a-checkbox :checked="sta.sl === 1" @click="cSta('sl')">沙龙</a-checkbox>
      </span>
      <a-input-search
        @search="getData"
        class="search"
        enter-button="搜索"
        placeholder="请输入..."
        style="width: 381px"
        v-model="iptCon"
      />
    </div>
    <div class="policy-box">
      <div
        :key="index"
        class="list-box d-flex flex-row flex-nowrap align-center"
        v-for="(item, index) in lists"
      >
        <div @click="jumpDetails(item)" class="date-box pointer" v-if="item.releaseTime">
          <p class="date-mon">{{ monthEnglish[item.releaseTime.split('-')[1] - 1] }}.</p>
          <p class="date-day">{{ item.releaseTime.split(' ')[0].split('-')[2] }}</p>
        </div>
        <div class="d-flex flex-column flex-1">
          <p @click="jumpDetails(item)" class="item-title pointer">{{ item.title }}</p>
          <div class="d-flex flex-nowrap justify-space-between">
            <p class="source-time">
              <span class="source" v-if="item.releaseTime">
                时间：{{ item.releaseTime }}
                <span v-if="item.closeTime">-{{ item.closeTime }}</span>
              </span>
              <span class="source" v-if="item.address">地点：{{ item.address }}</span>
            </p>
            <p class="original">
              <a-button
                disabled
                v-if="item.releaseTime && Date.parse(item.releaseTime) < Date.parse(nowData)"
              >报名已结束</a-button>
              <enroll :act-name="item.title" :activity-id="item.activityId" v-else />
            </p>
          </div>
        </div>
      </div>
    </div>
    <a-pagination
      :current="actCurrent"
      :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 { front } from 'config/api';
import Enroll from './components/Enroll.vue';
export default {
  name: 'Activity',
  components: { Enroll },
  data() {
    return {
      str: '这是活动公告界面',
      total: 0,
      pageSize: 20,
      iptCon: '',
      sta: {
        ly: 0,
        jz: 0,
        sl: 0,
      },
      aList: [],
      lists: [],
      monthEnglish: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'],
      nowData: '',
    };
  },
  computed: mapState('home', ['actList', 'actIpCon', 'actCurrent']),

  created() {
    this.iptCon = this.actIpCon;
    this.aList = this.actList;
    for (var i = 0; i < this.aList.length; i++) {
      if (this.aList[i] === 0) {
        this.sta.ly = 1;
      }
      if (this.aList[i] === 1) {
        this.sta.jz = 1;
      }
      if (this.aList[i] === 2) {
        this.sta.sl = 1;
      }
    }
    this.getData();

    // 获取当前时间
    var aData = new Date();
    // console.log(aData); //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间)
    this.nowData =
      aData.getFullYear() +
      '-' +
      (aData.getMonth() + 1) +
      '-' +
      aData.getDate() +
      ' ' +
      aData.getHours() +
      ':' +
      aData.getMinutes() +
      ':' +
      aData.getSeconds();
    // console.log(this.nowData); //2019-8-20
  },
  methods: {
    ...mapMutations('home', ['setActList', 'setActIpCon', 'setActCurrent', 'setActDetail']),
    // 获取活动公告列表
    async getData() {
      try {
        this.setActIpCon(this.iptCon);
        const params = {
          param: {
            activityType: this.actList,
            pageNum: this.actCurrent,
            pageSize: 20,
            titleKey: this.iptCon,
          },
        };
        const res = await front(params);
        const { data, msg, code } = res.data;
        if (code === 200) {
          this.lists = data.list;
          this.total = parseInt(data.total);
        }
      } catch (error) {
        // console.log(error);
      }
    },
    // 改变当前所选类型
    cSta(index) {
      this.aList = [];
      if (this.sta[index] === 0) {
        this.sta[index] = 1;
        // console.log(this.sta);
      } else {
        this.sta[index] = 0;
        // console.log(this.sta);
      }
      if (this.sta.ly === 1) {
        this.aList = this.aList.concat(0);
      }
      if (this.sta.jz === 1) {
        this.aList = this.aList.concat(1);
      }
      if (this.sta.sl === 1) {
        this.aList = this.aList.concat(2);
      }
      this.setActList(this.aList);
      this.getData();
    },

    // 改变当前显示页数
    onShowSizeChange(current, size) {
      this.setActCurrent(current);
      this.getData();
    },

    // 跳转到详情界面
    jumpDetails(item) {
      this.setActDetail(item);
      this.$router.push('/ActDetails');
    },

    // 转换时间戳
    formatDate() {
      var date = new Date('2020-04-07 18:08:58');
      // 有三种方式获取
      var time1 = date.getTime();
      var time2 = date.valueOf();
      var time3 = Date.parse(date);
      // console.log(time1); //1586254138000
      // console.log(time2); //1586254138000
      // console.log(time3); //1586254138000
    },
  },
};
</script>

<style scoped lang="stylus">
.inner {
  margin: 40px auto;
}

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

.search {
  position: absolute;
  right: 24px;
  top: 20px;
}

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

.item-title {
  margin-bottom: 10px;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.65);
  font-family: Microsoft YaHei;
  font-weight: bold;
}

.item-content {
  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 {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  opacity: 1;
  margin-bottom: 0;

  span {
    cursor: pointer;
  }
}

.date-box {
  width: 160px !important;
  text-align: center;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding: 0 !important;

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

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

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

.source-time {
  margin-bottom: 0;
}

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