323 lines
9.2 KiB
Vue
323 lines
9.2 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>
|
||
<button :class="{active: page.venueCity == ''}" @click="getAreaList(null)">全部</button>
|
||
<button v-for="(btn,idx) in cityList" :key="idx" @click="getAreaList(btn.dictionaryId)" :class="{active: page.venueCity == btn.dictionaryId}">{{btn.dictionaryName}}</button>
|
||
</div>
|
||
<div class="select-line">
|
||
<span>选择区域></span>
|
||
<div style="display: inline-block" v-if="hasArea">
|
||
<button :class="{active: page.venueArea == ''}" @click="changeArea(null)">全部</button>
|
||
<button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.dictionaryId)" :class="{active: page.venueArea == btn.dictionaryId}">{{btn.dictionaryName}}</button>
|
||
</div>
|
||
<div style="display: inline-block;line-height: 30px" v-else>请选择城市</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="venue">
|
||
<ul v-if="hasData">
|
||
<router-link :to="{path: '/cultureVenueDetail/' + list.venuesInfoId}" tag="li" class="venue-list" v-for="list in venueList" :key="list.id">
|
||
<img :src="'http://192.168.0.109:8082/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 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>
|
||
<Footer></Footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Header from '@/common/components/Header'
|
||
import Footer from '@/common/components/Footer'
|
||
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: '',
|
||
venueCity: '',
|
||
venueArea: ''
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
hasArea: function () {
|
||
return this.page.venueCity !== ''
|
||
},
|
||
hasData () {
|
||
return this.venueList.length > 0
|
||
},
|
||
showJumpBtn () {
|
||
return this.page.totalPage > 1
|
||
}
|
||
},
|
||
methods: {
|
||
changeArea: function (area) {
|
||
if (area) {
|
||
this.page.venueArea = area
|
||
} else {
|
||
this.page.venueArea = ''
|
||
}
|
||
this.getVenueList()
|
||
},
|
||
changeType: function (type) {
|
||
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('http://192.168.0.109:8082/venuebooking/app/venuedictionary/listvenuedictionarybyparentidrelease/df8b758c-f6d8-465a-9aa8-c451fde47076').then(function (res) {
|
||
self.typeList = res.data.data
|
||
})
|
||
},
|
||
getCityList: function () {
|
||
var self = this
|
||
axios.get('http://192.168.0.109:8082/venuebooking/app/venuedictionary/listvenuedictionarybyparentidrelease/5f61c256-2c91-4065-b8f3-0ccbd535e582').then(function (res) {
|
||
self.cityList = res.data.data
|
||
})
|
||
},
|
||
getAreaList: function (id) {
|
||
var self = this
|
||
if (id) {
|
||
self.page.venueCity = id
|
||
} else {
|
||
self.page.venueCity = ''
|
||
}
|
||
axios.get('http://192.168.0.109:8082/venuebooking/app/venuedictionary/listvenuedictionarybyparentidrelease/' + id).then(function (res) {
|
||
console.log(res)
|
||
self.areaList = res.data.data
|
||
})
|
||
},
|
||
getVenueList: function () {
|
||
var self = this
|
||
axios.get('http://192.168.0.109:8082/venuebooking/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)
|
||
console.log(self.venueList)
|
||
})
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getTypeList()
|
||
this.getCityList()
|
||
this.getVenueList()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||
.location
|
||
background #e5e5e5
|
||
line-height 30px
|
||
.location-content
|
||
width 1200px
|
||
margin 0 auto
|
||
font-size 14px
|
||
color #565656
|
||
.select
|
||
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
|
||
button
|
||
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 #01a9f8
|
||
.venue
|
||
width 1200px
|
||
min-height 400px
|
||
margin 20px auto
|
||
ul
|
||
overflow hidden
|
||
.venue-list
|
||
float left
|
||
width 280px
|
||
height 185px
|
||
position relative
|
||
margin-right 26px
|
||
margin-bottom 26px
|
||
cursor pointer
|
||
&:nth-child(4n)
|
||
margin-right 0
|
||
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
|
||
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
|
||
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 #01a9f8
|
||
color #ffffff
|
||
border 1px solid #01a9f8
|
||
&: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 #4792C2
|
||
width 50px
|
||
height 25px
|
||
vertical-align middle
|
||
color #fff
|
||
font-size 14px
|
||
</style>
|