green.v0.3/src/views/Activity/Activity.vue

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

<template>
  <div class="wrap">
    <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="div-box" v-for="(item, index) in lists">
        <div @click="jumpDetails(item)" style="cursor: pointer">
          <p class="item-title">{{ item.title }}</p>
          <p class="item-content">{{ item.content }}</p>
          <p class="source-time">
            <span class="source">时间：{{ item.releaseTime }}-{{ item.closeTime }}</span>
            <span class="time">地点：{{ item.address }}</span>
          </p>
        </div>
        <p class="original">
          <enroll :fnval="item.activityId" />
          <!-- <a-button type="primary">立即报名</a-button> -->
        </p>
      </div>
    </div>
    <a-pagination
      :current="actCurrent"
      :total="total"
      @change="onShowSizeChange"
      class="pagination"
      :page-size="pageSize"
      show-less-items
      show-quick-jumper
    />
  </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: 5,
      iptCon: '',
      sta: {
        ly: 0,
        jz: 0,
        sl: 0,
      },
      aList: [],
      lists: [],
    };
  },
  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();
  },
  methods: {
    ...mapMutations('home', ['setActList', 'setActIpCon', 'setActCurrent', 'setActDetail']),
    // 获取活动公告列表
    async getData() {
      try {
        this.setActIpCon(this.iptCon);
        const params = {
          param: {
            activityType: this.actList,
            pageNum: this.actCurrent,
            pageSize: 5,
            title: 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');
    },
  },
};
</script>

<style scoped lang="stylus">
.wrap {
  width: 1260px;
  min-height: 1037px;
  margin: 80px auto 28px auto;
  overflow: hidden;
  opacity: 1;
}

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

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

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

.item-content {
  text-indent: 2em;
  overflow: hidden;
  display: -webkit-box;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  font-family: Microsoft YaHei;
  font-weight: bold;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

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

.time {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  opacity: 1;
}

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

  span {
    cursor: pointer;
  }
}

.source-time {
  position: absolute;
  bottom: 60px;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 0;
}

.pagination {
  margin-top: 68px;
  text-align: right;
}

.search {
  position: absolute;
  right: 24px;
  top: 20px;
}
</style>