|
|
|
|
@ -0,0 +1,278 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="boxContent">
|
|
|
|
|
|
|
|
|
|
<view class="box-header">
|
|
|
|
|
<view class="search-wrap">
|
|
|
|
|
<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
|
|
|
|
|
<u-search v-model="keyword" placeholder="请输入关键词查看更多街道信息" @search="tosearch()" height="56"
|
|
|
|
|
:action-style="{color: '#fff'}">
|
|
|
|
|
</u-search>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
<view :class="mask?'list listfixed':'list'" style="padding-top: 100rpx;">
|
|
|
|
|
<view class='showclear' v-if='showClear'>附近街道:</view>
|
|
|
|
|
<u-radio-group :wrap="true">
|
|
|
|
|
<u-radio
|
|
|
|
|
@change="radioChange"
|
|
|
|
|
v-for="(item, index) in dataList" :key="index"
|
|
|
|
|
:name="item.id+','+item.name"
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
{{item.name}}
|
|
|
|
|
</u-radio>
|
|
|
|
|
</u-radio-group>
|
|
|
|
|
<u-loadmore class="loadmore" :status="loadStatus" :load-text="loadText"/>
|
|
|
|
|
<u-empty text="暂无数据" margin-top="200" v-if="dataList.length==0" mode="list"></u-empty>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="box-footer">
|
|
|
|
|
<u-button type="primary">确认</u-button>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
background: {
|
|
|
|
|
backgroundColor: '#007AFF'
|
|
|
|
|
},
|
|
|
|
|
mask: false,
|
|
|
|
|
loadStatus:"loadmore",
|
|
|
|
|
loadText:{
|
|
|
|
|
loadmore:"加载更多",
|
|
|
|
|
nomore:"已经到底了"
|
|
|
|
|
},
|
|
|
|
|
dataList: [],
|
|
|
|
|
currentPage: 0,
|
|
|
|
|
lastPage:0,
|
|
|
|
|
keyword: "",
|
|
|
|
|
title: "",
|
|
|
|
|
longitude:"",
|
|
|
|
|
latitude:"",
|
|
|
|
|
showClear:false,
|
|
|
|
|
towhere:"",
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onReachBottom: function(e) {
|
|
|
|
|
if(this.currentPage>=this.lastPage){
|
|
|
|
|
this.loadStatus = "nomore"
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.loadPage(this.currentPage + 1);
|
|
|
|
|
},
|
|
|
|
|
onPullDownRefresh: function(e) {
|
|
|
|
|
this.loadPage(1);
|
|
|
|
|
},
|
|
|
|
|
onShow: function() {
|
|
|
|
|
var that = this;
|
|
|
|
|
},
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
let that = this;
|
|
|
|
|
uni.getLocation({
|
|
|
|
|
type: "gcj02",
|
|
|
|
|
geocode:true,
|
|
|
|
|
success(res) {
|
|
|
|
|
console.log(res)
|
|
|
|
|
that.latitude = res.latitude;
|
|
|
|
|
that.longitude = res.longitude;
|
|
|
|
|
that.loadPage(1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
radioChange(val){
|
|
|
|
|
console.log("val",val)
|
|
|
|
|
},
|
|
|
|
|
tosearch() {
|
|
|
|
|
this.latitude=""
|
|
|
|
|
this.longitude=""
|
|
|
|
|
this.loadPage(1)
|
|
|
|
|
},
|
|
|
|
|
towhat(id){
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url:"../rainmaintain/rainmaintain?id="+id
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
loadPage: function(page) {
|
|
|
|
|
uni.hideKeyboard()
|
|
|
|
|
var that = this;
|
|
|
|
|
this.util.request({
|
|
|
|
|
bindThis: that,
|
|
|
|
|
api: '/api/mobile/other/road',
|
|
|
|
|
customLoading: false,
|
|
|
|
|
data: {
|
|
|
|
|
page: 1,
|
|
|
|
|
page_size: 30,
|
|
|
|
|
longitude: that.longitude,
|
|
|
|
|
latitude: that.latitude,
|
|
|
|
|
name: that.keyword,
|
|
|
|
|
},
|
|
|
|
|
utilSuccess: function(r) {
|
|
|
|
|
console.log("r",that.longitude)
|
|
|
|
|
if(that.longitude!=""){
|
|
|
|
|
// var res = r;
|
|
|
|
|
that.showClear = true
|
|
|
|
|
that.loadStatus = "nomore";
|
|
|
|
|
that.dataList = r;
|
|
|
|
|
}else{
|
|
|
|
|
that.showClear = false
|
|
|
|
|
that.loadStatus = "loadmore"
|
|
|
|
|
var res = r.data;
|
|
|
|
|
|
|
|
|
|
that.lastPage = r.last_page;
|
|
|
|
|
uni.stopPullDownRefresh(); // 服务器总条数 < 每页条数, 会将第一页的条数重新返回
|
|
|
|
|
if(r.total<30){
|
|
|
|
|
that.loadStatus = "nomore";
|
|
|
|
|
}
|
|
|
|
|
var hasNoMore = that.dataList.length < 30 && page > 1;
|
|
|
|
|
if (hasNoMore || res.length == 0 && page > 1) {
|
|
|
|
|
// 已加载到最后一页
|
|
|
|
|
that.loadStatus = "nomore";
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '已加载到最后一页',
|
|
|
|
|
icon: 'none'
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var dataList = that.dataList;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (page == 1) {
|
|
|
|
|
dataList = res;
|
|
|
|
|
} else {
|
|
|
|
|
dataList.push(...res);
|
|
|
|
|
}
|
|
|
|
|
console.log(dataList)
|
|
|
|
|
|
|
|
|
|
that.currentPage = page;
|
|
|
|
|
that.dataList = dataList;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log("res",res)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
utilFail: function(res) {
|
|
|
|
|
uni.stopPullDownRefresh();
|
|
|
|
|
|
|
|
|
|
if (page == 1) {
|
|
|
|
|
|
|
|
|
|
that.currentPage = page;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.util.alert(res);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
.boxContent {
|
|
|
|
|
background: #f3f4f6;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-header {
|
|
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
/* top: 0; */
|
|
|
|
|
width: 100%;
|
|
|
|
|
z-index: 99;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.u-row {
|
|
|
|
|
margin: 10rpx 0;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
}
|
|
|
|
|
.u-card{
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.search-wrap {
|
|
|
|
|
background: #007AFF;
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.u-radio{
|
|
|
|
|
margin: 5px 10px;
|
|
|
|
|
}
|
|
|
|
|
.showclear{
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
padding:24rpx;
|
|
|
|
|
}
|
|
|
|
|
.overflowmask{
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.loadmore{
|
|
|
|
|
padding:24rpx!important;
|
|
|
|
|
height: 281rpx!important;
|
|
|
|
|
margin-top: -61rpx!important;
|
|
|
|
|
}
|
|
|
|
|
.box-footer{
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom:0;
|
|
|
|
|
width:100%;
|
|
|
|
|
z-index:99;
|
|
|
|
|
}
|
|
|
|
|
.listfixed{
|
|
|
|
|
position: fixed;
|
|
|
|
|
width:100%;
|
|
|
|
|
}
|
|
|
|
|
.u-config-wrap {
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg-purple {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slot-content {
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
padding: 24rpx;
|
|
|
|
|
|
|
|
|
|
.item-box {
|
|
|
|
|
margin-bottom: 50rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
border: 1px solid $u-type-primary;
|
|
|
|
|
color: $u-type-primary;
|
|
|
|
|
padding: 8rpx 40rpx;
|
|
|
|
|
border-radius: 100rpx;
|
|
|
|
|
margin-top: 30rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
background-color: $u-type-primary;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
