lfs3
6 years ago
2 changed files with 300 additions and 0 deletions
Split View
Diff Options
@ -0,0 +1,294 @@ |
|||
<template> |
|||
<form action="javascript:return true"> |
|||
<div class="container" style="background:#fff"> |
|||
<div class="top f-bb-gray"> |
|||
<img src="../assets/images/icon/arrow-left.png" v-on:click="goBack" />选择服务小区 |
|||
</div> |
|||
<!--搜索和筛选--> |
|||
<div class="f-flex f-flex-justify f-mr16 f-ml15 " style="background: #EDEDED;margin-top:5px;height: 35px;"> |
|||
<div class="f-flex f-mr16 f-ml15 f-ws-nowrap" > |
|||
<div :class="show?'f-font-13 text-blue f-mr3':'f-font-13 f-text-666 f-mr3'"> |
|||
{{defaultCity}} |
|||
</div> |
|||
<!-- <div :class="show?'triangle_border_top':'triangle_border_down'"> |
|||
</div> --> |
|||
</div> |
|||
<el-input type="search" style="border-left: 1px solid #c1c1c1;" placeholder="请输入小区名称" v-model="communityName" @keyup.enter.native="searchByName" @clear="clear" clearable> |
|||
<i slot="prefix" class="el-input__icon el-icon-search"></i> |
|||
</el-input> |
|||
</div> |
|||
<div class="content" style="margin-bottom: 50px;"> |
|||
<!-- <div v-if="nowEstate.length > 0" style="border-bottom: 10px solid #f3f3f3;"> |
|||
<div class="title"> |
|||
<span class="f-ml15 f-font-14 f-text-666">当前小区</span> |
|||
</div> |
|||
<div class="f-flex f-flex-justify f-h60 f-ml15 f-mr15" style="border-bottom: 1px solid #f3f3f3;"> |
|||
<div> |
|||
<div class="f-text-333 f-font-16">{{nowEstate}}</div> |
|||
<div class="f-text-666 f-font-12">{{nowAddress}}</div> |
|||
</div> |
|||
<div class="f-text-666 f-font-12 "></div> |
|||
</div> |
|||
</div> --> |
|||
<div> |
|||
<div class="title"> |
|||
<span class="f-ml15 f-font-14 f-text-666">服务小区</span> |
|||
</div> |
|||
<div v-for="item in communityList" :key="item.housingEstateId" class="f-flex f-flex-justify f-h60 f-ml15 f-mr15" style="border-bottom: 1px solid #f3f3f3;" @click="chooseCommunity(item)"> |
|||
<div> |
|||
<div class="f-text-333 f-font-16">{{item.housingEstateName}}</div> |
|||
<div class="f-text-666 f-font-12">{{item.prefixAddress}}</div> |
|||
</div> |
|||
<div class="f-text-666 f-font-12 ">距离{{item.distance}}m</div> |
|||
</div> |
|||
</div> |
|||
<!-- 无限加载 --> |
|||
<div :class="loadMoreHide ? 'load-more-hide' : 'load-more-normal'" v-infinite-scroll="fetchCommunityList" infinite-scroll-disabled="busy" infinite-scroll-distance="10"> |
|||
<span class="load-more-tips f-flex f-flex-center" v-show="!noRecords && loadMoreTips" style="padding-top:4px">没有更多了</span> |
|||
</div> |
|||
</div> |
|||
<popup-picker :show="show" @cancel="cancel" @confirm="confirm" :data-list="addressData" :value="addressValue"></popup-picker> |
|||
<!-- Loading --> |
|||
<loading :show="showLoading" text="loading"></loading> |
|||
</div> |
|||
</form> |
|||
</template> |
|||
<script> |
|||
import myScroll from "@/utils/scroll"; |
|||
import chooseCommunityApi from "../models/choose-community"; |
|||
import homeApi from "../models/home-model.js"; |
|||
import { Alert, Toast, Loading } from "vux"; |
|||
import popupPicker from "../components/popup-picker.vue"; |
|||
import chooseCommunity from "../api/chooseCommunity"; |
|||
import { countPartner } from "@/common/util"; |
|||
import { isEmpty } from "@/common/util"; |
|||
export default { |
|||
components: { |
|||
Toast, |
|||
Loading, |
|||
Alert, |
|||
"popup-picker": popupPicker |
|||
}, |
|||
data() { |
|||
return { |
|||
show: false, |
|||
templateNo: this.$route.query.templateNo || "", |
|||
defaultCity: "", |
|||
districtId: "", //区id 默认值 不需要去掉 |
|||
provinceId: "", |
|||
cityId: "", |
|||
estateId: "", |
|||
nowEstate: "", |
|||
nowAddress: "", |
|||
lat: -1, |
|||
lng: -1, |
|||
addressData: [], |
|||
addressValue: [ |
|||
], |
|||
communityName: "", |
|||
communityList: [], |
|||
pageSize: 10, |
|||
pageNum: 0, |
|||
isRequesting: false, |
|||
loadMoreHide: false, |
|||
loadMoreTips: false, |
|||
loadingShow: false, // 加载显示标识 |
|||
busy: false, // 判断是否还继续滚动加载 |
|||
noRecords: false, // 是否还有列表记录 |
|||
noRecordsText: "没有当前城市的小区数据", |
|||
showLoading: false |
|||
}; |
|||
}, |
|||
beforeRouteLeave(to, from, next) { |
|||
from.meta.keepAlive = false; |
|||
next(); |
|||
}, |
|||
mixins: [myScroll], |
|||
methods: { |
|||
|
|||
//返回上一页 |
|||
goBack() { |
|||
history.go(-1); |
|||
}, |
|||
//确定时保存记录 |
|||
confirm(list) { |
|||
console.log("list:" + list); |
|||
// let addressArr = list.split(","); |
|||
let arr = list[2].split("&") || ""; |
|||
this.districtId = arr[0]; |
|||
this.defaultCity = arr[1]; |
|||
this.addressValue = list.slice(); |
|||
console.log("arr:" + this.defaultCity); |
|||
// localStorage.setItem("cityName", list); |
|||
this.show = false; |
|||
this.pageNum = 0; |
|||
this.busy = false; |
|||
this.loadMoreHide = false; |
|||
this.loadMoreTips = false; |
|||
this.communityList = []; |
|||
this.fetchCommunityList(); |
|||
}, |
|||
cancel() { |
|||
this.show = false; |
|||
}, |
|||
clear() { |
|||
// 清除搜索条件 |
|||
this.showFlag = false; |
|||
this.communityName = ""; |
|||
this.busy = false; |
|||
this.pageNum = 0; |
|||
this.loadMoreHide = false; |
|||
this.loadMoreTips = false; |
|||
this.communityList = []; |
|||
|
|||
this.fetchCommunityList(); |
|||
}, |
|||
searchByName(event) { |
|||
this.showFlag = false; |
|||
if (event.keyCode === 13) { |
|||
event.preventDefault(); // 禁止键盘默认事件 |
|||
this.pageNum = 0; |
|||
this.busy = false; |
|||
this.loadMoreHide = false; |
|||
this.loadMoreTips = false; |
|||
this.communityList = []; |
|||
this.fetchCommunityList(); |
|||
} |
|||
}, |
|||
fetchCommunityList() { |
|||
this.getArea(); |
|||
if(isEmpty(this.districtId)){ |
|||
this.$vux.toast.text('请先选择省市区', "middle"); |
|||
return; |
|||
} |
|||
if (this.isRequesting || this.loadMoreHide) { |
|||
return; |
|||
} |
|||
this.isRequesting = true; |
|||
//this.busy = true; |
|||
var _this = this; |
|||
console.log("communityName:" + this.defaultCity); |
|||
return new Promise((resolve, reject) => { |
|||
var params = { |
|||
pageNo: this.pageNum, |
|||
pageSize: this.pageSize, |
|||
districtId: this.districtId, |
|||
estateName: this.communityName, |
|||
draw: 0, |
|||
lat: this.lat, |
|||
lng: this.lng |
|||
}; |
|||
chooseCommunityApi.getEstateList(params).then(res => { |
|||
_this.showLoading = false; |
|||
_this.isRequesting = false; |
|||
if (res.code == 0) { |
|||
_this.communityList = _this.communityList.concat(res.dataList); |
|||
if (!_this.communityList.length) _this.noRecords = true; |
|||
|
|||
if (_this.pageSize > res.dataList.length) { |
|||
_this.busy = true; // 已经是最后一页了，不需要再触发滚动加载了 |
|||
_this.loadMoreHide = true; |
|||
_this.loadMoreTips = true; |
|||
} else { |
|||
_this.busy = false; |
|||
_this.pageNum++; |
|||
_this.loadMoreHide = false; |
|||
_this.loadMoreTips = false; |
|||
} |
|||
// this.communityList = res.dataList; |
|||
} else { |
|||
this.$vux.toast.text(res.msg, "middle"); |
|||
} |
|||
resolve(); |
|||
}); |
|||
}); |
|||
}, |
|||
chooseCommunity(item) { |
|||
|
|||
this.$vux.confirm.show({ |
|||
title: "确定选择", |
|||
content: item.cityName+item.districtName +"【" + item.housingEstateName + "】", |
|||
confirmText: "确定", |
|||
cancelText: "取消", |
|||
onCancel: () => {}, |
|||
onConfirm: () => { |
|||
localStorage.setItem( |
|||
"choosedAddr",item.housingEstateId + "&" + item.housingEstateName |
|||
); |
|||
history.go(-1); |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
ShareWenXin() { |
|||
var merchantNo = this.merchantNo; |
|||
this.wxShare({ |
|||
merchantNo: merchantNo, |
|||
source: 0, |
|||
url: encodeURIComponent(location.href), |
|||
shareUrl: encodeURIComponent("http://" + location.host + "/v2/home") |
|||
}); |
|||
}, |
|||
|
|||
getArea() { |
|||
let str = localStorage.getItem("choosedArea") || ""; |
|||
// this.lng = 23.127191 |
|||
// this.lat = 113.355747 |
|||
if (!str) { |
|||
} else { |
|||
let arr = str.split(","); |
|||
this.addressValue = arr; |
|||
this.provinceId = arr[0].split("&")[0]; |
|||
this.cityId = arr[1].split("&")[0]; |
|||
let cityNameArr = arr[2].split("&"); |
|||
this.districtId = cityNameArr[0]; |
|||
this.defaultCity = cityNameArr[1]; |
|||
this.nowAddress = |
|||
arr[0].split("&")[1] + arr[1].split("&")[1] + cityNameArr[1]; |
|||
} |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
|
|||
.container { |
|||
background-color: #fff; |
|||
-webkit-search-cancel-button{ |
|||
-webkit-appearance: none!important;//此处只是去掉默认的小× |
|||
}; |
|||
.top { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 0.9rem; |
|||
line-height: 0.9rem; |
|||
text-align: center; |
|||
font-size: 0.36rem; |
|||
color: #249e6c; |
|||
img { |
|||
position: absolute; |
|||
width: 0.2rem; |
|||
height: 0.35rem; |
|||
top: 50%; |
|||
left: 0.4rem; |
|||
margin-top: -0.17rem; |
|||
} |
|||
} |
|||
.content { |
|||
width: 100%; |
|||
background: #fff; |
|||
-webkit-overflow-scrolling: touch; |
|||
.title { |
|||
margin-top: 10px; |
|||
line-height: 35px; |
|||
height: 35px; |
|||
width: 100%; |
|||
border-bottom: 1px solid #f3f3f3; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save