341 lines
9.3 KiB
Vue
341 lines
9.3 KiB
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>
|