usoft-town/components/garden/list.vue

<template>
  <div class="garden">
    <div class="container">
      <div class="top">
        <ul class="list-inline">
          <li :class="{active: step === ''}" @click="selectEvent()">全部</li>
          <li v-for="item in typeList" v-text="item.at_name" @click="selectEvent(item.at_name)" :class="{active: item.active === true}">旅行</li>
        </ul>
      </div>
      <div class="content">
        <div class="empty" v-if="listCount.list.length === 0">无相关活动信息！</div>
        <div class="info-list" v-for="item in listCount.list">
          <div class="img">
            <img :src="item.ac_icon">
          </div>
          <div class="list-right">
            <p v-text="item.ac_title">企业为员工打造全新潼湖小镇，舒服办公环境</p>
            <span v-text="item.ac_desc">2017年，优软科技携手碧桂园创办全新智慧生态园，发扬优软新势力，适应互联网潮流 发展.</span>
          </div>
          <div class="detail">
            <h4 v-text="item.ac_title">12</h4>
            <span v-text="item.ac_desc">3213ffds</span>
            <p v-text="formatDate(item.ac_startdate)">32342</p>
            <p v-text="item.ac_addr">32342</p>
            <p>{{item.ac_enternum}}&nbsp;参加活动</p>
            <a :href="'/townInfo/' + item.ac_id">查看详情</a>
          </div>
        </div>
      </div>
      <div class="page" v-if="listCount.total > count">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="count"
          layout="total, prev, pager, next, jumper"
          :total="listCount.total"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {formatDate} from '@/utils/date.js'
    export default {
      name: 'GardenList',
      data () {
        return {
          step: '',
          count: 16,
          page: 1,
          typeList: {}
        }
      },
      mounted () {
        let list = this.$store.state.gardens.gardenType.data.list
        for(let i = 0; i < list.length; i++) {
          list[i].active = false
        }
        this.typeList = JSON.parse(JSON.stringify(list))
      },
      computed: {
        listCount () {
          return this.$store.state.gardens.list.data
        }
      },
      methods: {
        // 格式化时间
        formatDate (row) {
          let date = new Date(row)
          return formatDate(date, 'yyyy-MM-dd hh:mm')
        },
        selectEvent (type) {
          for(let i = 0; i < this.typeList.length; i++) {
            if(type) {
              this.step = type
              this.typeList[i].at_name === type ? this.typeList[i].active = true : this.typeList[i].active = false
            } else {
              this.typeList[i].active = false
              this.step = ''
            }
          }
          this.$store.dispatch('loadGardenList', {limit: 16, page: this.page, type: type})
        },
        handleCurrentChange(val) {
          this.$store.dispatch('loadGardenList', {limit: 16, page: val, type: this.step})
        }
      }
    }
</script>

<style scoped type="text/scss" lang="scss">
.garden{
  background: #f4f4f4;
  padding-bottom:80px;
  .top{
    margin: 0 auto;
    overflow: hidden;
    padding:55px 0;
    text-align: center;
    ul{
      li{
        padding:0 24px;
        font-size: 14px;
        color:#333;
        font-weight: bold;
        border-right:1px solid #bfbfbf;
        &:last-child{
          border:none;
        }
        &:hover,&.active{
          cursor:pointer;
          color:#149ccf;
        }
      }
    }
  }
  .content{
    .empty{
      padding:50px 0;
      font-size: 28px;
      text-align: center;
      color:#333;
    }
    .info-list{
      position:relative;
      display:inline-block;
      width:24%;
      height:430px;
      vertical-align: top;
      margin-right:10px;
      margin-bottom:30px;
      background: #fff;
      overflow: hidden;
      &:last-child{
        margin:0;
      }
      &:hover{
        cursor:pointer;
        .detail{
          opacity:1;
          top:0;
        }
      }
      .img{
        width:280px;
        height:250px;
        img{
          width:100%;
          height:100%;
          border:none;
          padding:0;
        }
      }
      .list-right{
        padding:24px 16px 0 16px;
        overflow: hidden;
        p{
          font-size: 20px;
          color:#333;
          margin-bottom:25px;
          width:98%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span{
          font-size: 14px;
          line-height: 20px;
          color:#969696;
        }
      }
      .detail{
        position:absolute;
        top:100%;
        opacity:0;
        transition: all .5s ease;
        background: rgba(0,0,0,.8);
        width:100%;
        height:430px;
        padding:30px 16px;
        h4{
          font-size: 20px;
          color:#fff;
          margin-bottom:25px;
        }
        span{
          display:block;
          font-size: 14px;
          color:#fff;
          line-height: 20px;
          margin-bottom:10px;
        }
        p{
          font-size: 14px;
          color:#b4b4b4;
          margin-bottom:10px;
        }
        a{
          display: block;
          width:200px;
          height:40px;
          line-height: 38px;
          text-align: center;
          margin:0 auto;
          margin-top:30px;
          font-size: 16px;
          color:#fff;
          border:1px solid #fff;
          &:hover{
            cursor:pointer;
            color:#149ccf;
            border: 1px solid #149ccf;
          }
        }
      }
    }
  }
  .page{
    text-align: center;
    padding: 55px 0;
  }
}
</style>