112 lines
4.1 KiB
HTML
112 lines
4.1 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/swiper.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="js/rem.js"></script>
|
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=aFhfSbQy2GVc92I4ue7i5w8WiQjouRYF&s=1"></script>
|
|
</head>
|
|
<body style="background: #f1f1f1">
|
|
<div id="app" v-cloak>
|
|
<div class="toilet-search">
|
|
<input type="text" v-model="page.search" @keyup.enter="doSearch" placeholder="请输入搜索内容">
|
|
</div>
|
|
<div class="toilet-container">
|
|
<a :href="'toilet.html?uid=' + toilet.uid" class="toilet-box" v-for="toilet in toiletList">
|
|
<div class="toilet-img">
|
|
<img :src="'http://www.wlcbsyzl.cn/systemetl/route/file/download/true/' + toilet.photo" alt="" v-if="toilet.photo">
|
|
<img src="image/toilet-default.png" alt="" v-else>
|
|
</div>
|
|
<div class="toilet-info">
|
|
<h3>{{toilet.name}}</h3>
|
|
<p>位置：{{toilet.address}}</p>
|
|
<p>距离：{{toilet.distance}}km</p>
|
|
</div>
|
|
</a>
|
|
<div class="load-more" v-if="haveMore" @click="loadMore">加载更多</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/swiper.js"></script>
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
requestUrl: 'http://219.159.20.131:8081/',
|
|
token: sessionStorage.getItem('token'),
|
|
toiletList: [],
|
|
page: {
|
|
page: 1,
|
|
rows: 15,
|
|
search:'',
|
|
lng: '',
|
|
lat: ''
|
|
},
|
|
isLoading: false,
|
|
haveMore: true
|
|
},
|
|
methods: {
|
|
getToiletList: function () {
|
|
var self = this
|
|
self.isLoading = true
|
|
doGetForm('http://www.wlcbsyzl.cn/systemetl/app/datacensus/sql/CS00001', self.page, null, function (code, data) {
|
|
if (data.length == 0) {
|
|
self.haveMore = false
|
|
self.page.page--
|
|
}
|
|
if (self.page.page == '1') {
|
|
self.toiletList = data
|
|
} else {
|
|
for (let i = 0; i < data.length; i++) {
|
|
self.toiletList.push(data[i])
|
|
}
|
|
}
|
|
self.isLoading = false
|
|
if (data.length < self.page.rows) {
|
|
self.haveMore = false
|
|
}
|
|
}, null, function (res) {
|
|
res.setRequestHeader('token',self.token)
|
|
})
|
|
},
|
|
loadMore: function () {
|
|
this.page.page++
|
|
this.getToiletList()
|
|
},
|
|
doSearch: function () {
|
|
this.page.page = 1
|
|
this.getToiletList()
|
|
},
|
|
getLocationInfo: function () {
|
|
var self = this
|
|
var geolocation = new BMap.Geolocation();
|
|
geolocation.getCurrentPosition(function(r){
|
|
if(this.getStatus() == BMAP_STATUS_SUCCESS){
|
|
mk = new BMap.Marker(r.point);
|
|
self.page.lat = r.point.lat
|
|
self.page.lng = r.point.lng
|
|
self.getToiletList()
|
|
// getAddress(r.point);
|
|
}else {
|
|
alert('获取当前位置失败');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
mounted: function () {
|
|
|
|
this.getLocationInfo()
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |