xzrkz-web/src/pages/CultureVenue/CultureVenue.vue

<template>
    <div>
      <Header></Header>
      <div class="location">
        <div class="location-content">
          您的位置：<router-link to="/">首页</router-link> > 文化场馆
        </div>
      </div>
      <div class="select">
        <div class="select-container">
          <div class="select-line">
            <span>活动类别></span>
            <button :class="{active: page.venueType == ''}" @click="changeType(null)">全部</button>
            <button v-for="(btn,idx) in typeList" :key="idx" @click="changeType(btn.dictionaryId)" :class="{active: page.venueType == btn.dictionaryId}">{{btn.dictionaryName}}</button>
          </div>
          <div class="select-line">
            <span>选择区域></span>
            <div style="display: inline-block;width: 95%;">
              <button :class="{active: page.venueArea == ''}" @click="changeArea(null)">全部</button>
              <button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.areaId, btn.areaLevel)" :class="{active: page.venueArea == btn.areaId}">{{btn.areaName}}</button>
            </div>
          </div>
        </div>
      </div>
      <div class="venue">
        <div v-if="!isLoading">
          <ul v-if="hasData">
            <router-link :to="{path: '/cultureVenueDetail/' + list.venuesInfoId}" tag="li" class="venue-list" v-for="list in venueList" :key="list.id" :title="list.venueName">
              <img :src="url + '/venuebooking/route/file/downloadfile/false/' + list.venuePanorama" alt="">
              <div class="venue-name">
                <p>{{list.venueName}}</p>
              </div>
            </router-link>
          </ul>
          <div class="no-data" v-else>
            <img src="@/assets/images/no-data.png" alt="">
          </div>
        </div>
      </div>
      <div class="pager" v-if="hasData">
        <span @click="paging(1)">首页</span>
        <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
        <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
          <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
            {{cpage}}
          </li>
        </ul>
        <ul v-if="page.totalPage > 5">
          <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
            {{cpage}}
          </li>
          <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
            {{page.totalPage - 5 + cpage}}
          </li>
          <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
            {{page.page - (3 - cpage)}}
          </li>
        </ul>
        <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
        <span @click="paging(page.totalPage)">尾页</span>
        <input type="text" v-model="changePage" v-if="showJumpBtn">
        <i v-if="showJumpBtn">/{{page.totalPage}}页</i>
        <button v-if="showJumpBtn" @click="doJumpPage">跳转</button>
      </div>
      <div class="loading" v-if="isLoading">
        <img src="@/assets/images/loading.gif" alt="">
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
import Header from '@/common/components/Header'
import Footer from '@/common/components/Footer'
import common from '@/common/components/common.js'
import axios from 'axios'
export default {
  name: 'CultureVenue',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      changePage: 1,
      typeList: [],
      cityList: [],
      areaList: [],
      venueList: [],
      page: {
        page: 1,
        rows: 8,
        totalPage: 1,
        venueType: '',
        venueArea: '',
        areaLevel: ''
      },
      url: common.url,
      isLoading: false
    }
  },
  computed: {
    hasData () {
      return this.venueList.length > 0
    },
    showJumpBtn () {
      return this.page.totalPage > 1
    }
  },
  methods: {
    changeArea: function (area, lv) {
      this.page.page = 1
      this.changePage = 1
      if (area) {
        this.page.venueArea = area
        this.page.areaLevel = 'area' + (parseInt(lv) + 1)
      } else {
        this.page.venueArea = ''
      }
      this.getVenueList()
    },
    changeType: function (type) {
      this.page.page = 1
      this.changePage = 1
      if (type) {
        this.page.venueType = type
      } else {
        this.page.venueType = ''
      }
      this.getVenueList()
    },
    paging: function (page) {
      this.page.page = page
      this.getVenueList()
    },
    doJumpPage: function () {
      this.page.page = this.changePage
      this.getVenueList()
    },
    getTypeList: function () {
      var self = this
      axios.get(self.url + 'app/venuedictionary/listvenuedictionarybyparentidrelease/df8b758c-f6d8-465a-9aa8-c451fde47076').then(function (res) {
        self.typeList = res.data.data
      })
    },
    getAreaList: function () {
      var self = this
      axios.get(self.url + 'app/area/listbyparentidrelease/640675').then(function (res) {
        self.areaList = res.data
      })
    },
    getVenueList: function () {
      var self = this
      self.isLoading = true
      axios.get(self.url + 'app/venuesinfo/listpagevenuesinforelease', {
        params: self.page
      }).then(function (res) {
        for (var i = 0; i < res.data.rows.length; i++) {
          res.data.rows[i].venuePanorama = res.data.rows[i].venuePanorama.split(',')[0]
        }
        self.venueList = res.data.rows
        self.page.page = res.data.page
        self.changePage = res.data.page
        self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
        self.isLoading = false
      })
    }
  },
  mounted () {
    this.getTypeList()
    // this.getCityList()
    this.getAreaList()
    this.getVenueList()
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~styles/public.styl"
.location
  background #e5e5e5
  line-height 30px
  font-family 'zangwen'
  .location-content
    width 1200px
    margin 0 auto
    font-size 14px
    color #565656
.select
  font-family 'zangwen'
  padding 10px 0 0
  background #f0f0f0
  overflow hidden
  .select-container
    width 1200px
    margin 0 auto
    .select-line
      margin-bottom 10px
      font-size 14px
      span
        color #565656
        vertical-align top
        line-height 30px
      button
        font-family 'zangwen'
        width 80px
        height 30px
        padding 0 5px
        box-sizing border-box
        border none
        background none
        outline none
        color #565656
        border-radius 4px
        cursor pointer
        white-space nowrap
        overflow hidden
        text-overflow: ellipsis
        vertical-align middle
        &.active
          color #fff
          background $main-color
.venue
  width 1200px
  min-height 400px
  margin 20px auto
  ul
    &:after
      content ''
      display block
      clear both
    .venue-list
      float left
      width 280px
      height 185px
      position relative
      margin-right 26px
      margin-bottom 26px
      cursor pointer
      box-shadow:0px 0px 10px 0px rgba(176,176,176,0.3);
      &:nth-child(4n)
        margin-right 0
      &:hover
        box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
      img
        width 100%
        height 185px
      .venue-name
        position absolute
        bottom 0
        left 0
        width 100%
        height 35px
        padding 0 5px
        box-sizing border-box
        text-align center
        background rgba(0,0,0,0.6)
        p
          font-family '宋体'
          line-height 35px
          color #fff
          font-size 14px
          white-space nowrap
          overflow hidden
          text-overflow: ellipsis
  .no-data
    padding 80px 0
    text-align center
    img
      width 200px
.pager
  width 1200px
  margin 20px auto
  text-align center
  font-size 0
  font-family 'zangwen'
  span
    display inline-block
    padding 0 15px
    line-height 25px
    color #676767
    border 1px solid #d2d2d2
    font-size 14px
    margin 0 5px
    vertical-align middle
    cursor pointer
  ul
    display inline-block
    overflow hidden
    vertical-align middle
    li
      width 45px
      line-height 25px
      float left
      margin-right 10px
      border 1px solid #d2d2d2
      cursor pointer
      text-align center
      font-size 14px
      color #676767
      &.active
        background $main-color
        color #ffffff
        border 1px solid $main-color
      &:last-child
        margin: 0
  input
    width 50px
    height 25px
    border 1px solid #d2d2d2
    text-align center
    vertical-align middle
  i
    font-style normal
    color #676767
    font-size 14px
    line-height 25px
    display inline-block
    vertical-align middle
    margin 0 5px
  button
    border none
    outline none
    background $main-color
    cursor pointer
    width 50px
    height 25px
    vertical-align middle
    color #fff
    font-size 14px
.loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  background rgba(255,255,255,0.6)
  padding 30px
  border-radius 10px
  box-shadow 0 0 17px #DEDEDE
</style>