202 lines
8.7 KiB
HTML
202 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="js/rem.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<div class="venue-type">
|
|
<div class="venue-type-box" @click="changeType('')">
|
|
<img src="image/venueall.png" alt="">
|
|
<p>全部</p>
|
|
</div>
|
|
<div class="venue-type-box" v-for="type in venueType" @click="changeType(type.dictionaryId)">
|
|
<img :src="requestUrl + 'venuebooking/route/file/downloadfile/true/' + type.dictionaryIcon" alt="">
|
|
<p>{{type.dictionaryName}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="select">
|
|
<div class="select-box" :class="{active: page.orderKey == ''}" @click="orderCheck('')">默认排序</div>
|
|
<div class="select-box" :class="{active: page.orderKey == 'timeDesc'}" @click="orderCheck('timeDesc')">最新发布</div>
|
|
<div class="select-box" @click="showAreaSelect = true">{{selectedAreaName}}</div>
|
|
</div>
|
|
<div class="venue-outer">
|
|
<div class="box-venue" v-for="venue in venueList" @click="checkDetail(venue.venuesInfoId)">
|
|
<div class="box-venue-top">
|
|
<div class="box-venue-left">
|
|
<h3>{{venue.venueName}}</h3>
|
|
<p class="time">{{venue.businessHours}}</p>
|
|
<p>{{venue.venuePosition}}</p>
|
|
</div>
|
|
<div class="box-venue-right">
|
|
<img :src="requestUrl + 'venuebooking/route/file/downloadfile/true/' + venue.venuePanorama" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="box-venue-bottom">
|
|
<p>{{venue.venueTelephone}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="load-more" v-if="haveMore && venueList && venueList.length > 0" @click="loadMore">加载更多</div>
|
|
</div>
|
|
<div class="bottom-nav">
|
|
<div class="bottom-nav-box" @click="goBottomNav('1')">
|
|
<div class="nav-icon"></div>
|
|
<span>首页</span>
|
|
</div>
|
|
<div class="bottom-nav-box" @click="goBottomNav('2')">
|
|
<div class="nav-icon"></div>
|
|
<span>活动</span>
|
|
</div>
|
|
<div class="bottom-nav-box active">
|
|
<div class="nav-icon"></div>
|
|
<span>场馆</span>
|
|
</div>
|
|
<div class="bottom-nav-box" @click="goBottomNav('4')">
|
|
<div class="nav-icon"></div>
|
|
<span>文化</span>
|
|
</div>
|
|
</div>
|
|
<div class="select-area" v-if="showAreaSelect" @click="showAreaSelect = false">
|
|
<div class="select-area-container">
|
|
<div class="select-area-box" :class="{active: page.venueArea == ''}" @click.stop="changeArea('','')">全部</div>
|
|
<div class="select-area-box" v-for="area in areaList" :class="{active: page.venueArea == area.areaId}" @click.stop="changeArea(area.areaId, area.areaName)">{{area.areaName}}</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="loading" v-if="isLoading">
|
|
<img src="image/loading.gif" alt="">
|
|
</div>
|
|
</div>
|
|
<script src="js/vue.js"></script>
|
|
<script src="js/jquery-2.1.4.min.js"></script>
|
|
<script src="js/ajax.js"></script>
|
|
<script src="js/layer/layer.js"></script>
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
requestUrl: 'http://219.159.20.131:8081/',
|
|
venueType: [],
|
|
page: {
|
|
page: 1,
|
|
rows: 10,
|
|
orderKey: '',
|
|
venueArea: '',
|
|
venueType: ''
|
|
},
|
|
venueList: [],
|
|
areaList: [],
|
|
showAreaSelect: false,
|
|
selectedAreaName: '选择区域',
|
|
haveMore: true,
|
|
isLoading: true
|
|
},
|
|
methods: {
|
|
getAreaList: function () {
|
|
var self = this
|
|
doGetForm(self.requestUrl + 'usercenter/app/dataarea/listareabyparentidrelease/110889', {}, null, function (code, data) {
|
|
self.areaList = data
|
|
})
|
|
},
|
|
changeArea: function (area, name) {
|
|
if (!this.isLoading) {
|
|
this.page.page = 1
|
|
this.page.venueArea = area
|
|
this.showAreaSelect = false
|
|
if (name) {
|
|
this.selectedAreaName = name
|
|
} else {
|
|
this.selectedAreaName = '选择区域'
|
|
}
|
|
this.getVenueList()
|
|
}
|
|
},
|
|
getVenueType: function () {
|
|
var self = this
|
|
doGetForm(self.requestUrl + 'venuebooking/app/venuedictionary/listvenuedictionarybyparentidrelease/df8b758c-f6d8-465a-9aa8-c451fde47076', {}, {} ,function (code, data) {
|
|
self.venueType = data.data
|
|
})
|
|
},
|
|
changeType: function (type) {
|
|
if (!this.isLoading) {
|
|
this.page.venueType = type
|
|
this.page.page = 1
|
|
this.getVenueList()
|
|
}
|
|
},
|
|
getVenueList: function () {
|
|
var self= this
|
|
self.isLoading = true
|
|
doGetForm(self.requestUrl + 'venuebooking/app/venuesinfo/listpagevenuesinforelease', self.page, {}, function (code, data) {
|
|
if (self.page.page == 1) {
|
|
if (data.rows.length > 0) {
|
|
for (let i = 0; i < data.rows.length; i++) {
|
|
data.rows[i].venuePanorama = data.rows[i].venuePanorama.split(',')[0]
|
|
}
|
|
self.venueList = data.rows
|
|
self.haveMore = true
|
|
} else {
|
|
layer.msg('暂无数据')
|
|
self.haveMore = false
|
|
self.venueList = []
|
|
}
|
|
self.isLoading = false
|
|
return
|
|
}
|
|
if (data.rows.length > 0) {
|
|
for (let i = 0; i < data.rows.length; i++) {
|
|
data.rows[i].venuePanorama = data.rows[i].venuePanorama.split(',')[0]
|
|
self.venueList.push(data.rows[i])
|
|
}
|
|
self.haveMore = true
|
|
} else {
|
|
layer.msg('暂无更多')
|
|
self.haveMore = false
|
|
self.page.page--
|
|
}
|
|
self.isLoading = false
|
|
})
|
|
},
|
|
orderCheck: function (order) {
|
|
if (!this.isLoading) {
|
|
this.page.orderKey = order
|
|
this.page.page = 1
|
|
this.getVenueList()
|
|
}
|
|
},
|
|
// 底部导航
|
|
goBottomNav: function (nav) {
|
|
if (nav == '2') {
|
|
window.location.href = 'activity.html'
|
|
} else if (nav == '1') {
|
|
window.location.href = 'index.html'
|
|
} else {
|
|
window.location.href = 'culture.html'
|
|
}
|
|
},
|
|
checkDetail: function (id) {
|
|
if (!this.isLoading) {
|
|
window.location.href = 'venue-detail.html?id=' + id
|
|
}
|
|
},
|
|
loadMore: function () {
|
|
if (!this.isLoading) {
|
|
this.page.page++
|
|
this.getVenueList()
|
|
}
|
|
},
|
|
},
|
|
mounted: function () {
|
|
this.getVenueType()
|
|
this.getVenueList()
|
|
this.getAreaList()
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |