TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/view/smart-class/PastReview.vue

<template>
  <div class="container">
    <div class="review-page">
      <div class="reviews-header">
        <p class="title">
          往届回顾
          <span class="sub">
            <span>{{activities.length}}</span>
            个活动已结束
          </span>
        </p>
        <div class="selections">
          <span class="name">年份：</span>
          <ul>
            <li :class="activeIndex == 0 ? 'active':''" @click="handleMenuClick(0,0)"><span class="item">不限</span></li>
            <li :class="activeIndex == 1 ? 'active':''" @click="handleMenuClick(1,2015)"><span class="item">2015</span></li>
            <li :class="activeIndex == 2 ? 'active':''" @click="handleMenuClick(2,2016)"><span class="item">2016</span></li>
            <li :class="activeIndex == 3 ? 'active':''" @click="handleMenuClick(3,2017)"><span class="item">2017</span></li>
            <li :class="activeIndex == 4 ? 'active':''" @click="handleMenuClick(4,2018)"><span class="item">2018</span></li>
            <li :class="activeIndex == 5 ? 'active':''" @click="handleMenuClick(5,2019)"><span class="item">2019</span></li>

          </ul>
        </div>
        <div class="selections">
          <span class="name">排序：</span>
          <ul>
            <li :class="activeOrder == 0 ? 'active':''" @click="handleOrderClick(0)"><span class="item">最新</span></li>
            <li :class="activeOrder == 1 ? 'active':''" @click="handleOrderClick(1)"><span class="item">最热</span></li>
          </ul>
        </div>
        <div style="clear:both;"></div>
        <Input search v-model="searchVal" placeholder="输入活动名称或者关键词" style="width:300px;margin-top:10px" @on-search="handleSearch" @on-change="handleSearch" />
        <div class="activities">
          <div class="activity" v-for="(item,index) in activities" @click="activityClick">
              <div class="img-box">
                <span class="state" style="background: rgb(149, 155, 155); visibility: visible;">{{item.statusTip}}</span>
                  <span class="time">{{item.text}}</span>
              </div>
            <div class="infos">
                <p class="actName">{{item.name}}</p>
                <p class="actOrganizer">
                  <span class="organizer">
                    {{item.submitTimeTip}}
                  </span>
                  <span style="display:none;">主办</span>
                </p>
              </div>
            </div>
          </div>
        </div>

        <Page show-total
              :current="1"
              :total="activities.length"
              :page-size="pageSize"
              class="page-box"
              style="margin:20px 0" />
      </div>
    </div>
  </div>
</template>
<script>
  import acList from '@/static/pastAcList.json'
  export default {
    components: {
    },
    data() {
      return {
        activeIndex: 0,
        activeOrder: 0,
        pageSize: 9,
        searchVal:"",
        activities: acList.data.list
      }
    },
    methods: {
      activityClick() {
        this.$router.push('rewardDetails');
      },
      handleMenuClick(index,val) {
        this.activeIndex = index;
        this.activities = index == 0 ? acList.data.list : acList.data.list.filter(item => item.submitTimeTip.substring(0,4) == val);
      },
      handleOrderClick(index) {
        this.activeOrder = index;
        let list = acList.data.list;
        this.activities = list.sort(this.compare('applyCount'));
      },
      compare(property){
        return function(a,b){
            var value1 = a[property];
            var value2 = b[property];
            return value1 - value2;
        }
      },
      handleSearch() {
        console.log(acList.data.list.filter(item => item.name.indexOf(this.searchVal) != -1));
        this.activities = acList.data.list.filter(item => item.name.indexOf(this.searchVal) != -1);
      }

    },
    mounted() {
    }
  }
</script>
<style scoped>
  .container {
    width: 1200px;
    margin: 100px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .review-page {
    background-color: #fff;
    width: 1120px;
    padding: 30px;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  .reviews-header .title {
    height: 20px;
    line-height: 20px;
    color: #444;
    font-size: 16px;
    padding-left: 10px;
    border-left: 3px solid #20a1f8;
    margin-bottom: 30px;
  }
  .sub {
    color: #cbb;
    font-size: 16px;
    margin-left: 10px;
  }

  .selections .name {
    color: #999;
    font-size: 14px;
    float: left;
    clear: left;
  }
  .selections ul {
    height:30px;
    margin-top:10px;
  }
  .selections ul li {
    float: left;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    padding: 0 0 0 40px;
  }

  .selections ul li.active {
    color: #33aeff;
    font-weight:bold;
  }
  .activities {
    min-height: 300px;
    overflow: hidden;
    margin-top: 30px;
  }

    .activities .activity {
      margin-right: 25px;
      margin-bottom: 40px;
      width: 335px;
      height:292px;
      float: left;
      cursor: pointer;
      border: 1px solid #ddd;
      box-sizing: border-box
    }

 .activities .activity:hover {
    box-shadow: 0 26px 40px -24px rgba(0,36,100,.3);
    transform: translateY(-6px);
    transition: all .3s ease 0s
}

.activities .activity:nth-child(3n) {
    margin-right: 0
}

.img-box {
    height:185px;
    position:relative;
    background:url(../../assets/image/cover.png);
    background-size:cover;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}

.img-box .state {
    padding: 5px 8px;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 1;
    background-color: #13ce66;
    color: #fff
}

.img-box .time {
    margin-top:130px;
    z-index: 1;
    color: #dbd8d8;
    font-size:18px;
    font-weight:bold;
}

.img-box img {
    width: 333px;
    height: 210px;
    position: relative;
    left: 0;
    top:-21px;
    padding-top: 1px
}

.infos {
    background-color: #fff
}

.infos .actName {
    color: #444;
    font-size: 16px;
    padding: 20px 10px 10px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 280px
}

.infos .actOrganizer {
    color: #999;
    font-size: 14px;
    padding-left: 20px;
    padding-bottom: 20px
}

.infos .actTime {
    color: #aaa;
    font-size: 14px;
    padding-left: 20px;
    padding-bottom: 10px
}

.view-more {
    text-decoration: none;
    float: right
}

  .page-box {
    float:right;
  }
</style>