lfs3
6 years ago
20 changed files with 1136 additions and 484 deletions
Split View
Diff Options
-
5config/index.js
-
1package.json
-
16src/api/chooseCommunity.js
-
10src/api/home.js
-
7src/api/wxShare.js
-
8src/assets/styles/common/common.scss
-
5src/assets/styles/index.scss
-
4src/main.js
-
24src/models/choose-community.js
-
24src/models/home-model.js
-
2src/models/utils-model.js
-
51src/models/wxLocation.js
-
6src/models/wxShare-model.js
-
172src/models/wxShare.js
-
7src/router/index.js
-
20src/utils/scroll.js
-
440src/view/choose-community.vue
-
2src/view/goods-classify.vue
-
808src/view/home.vue
-
8src/view/order-check.vue
@ -0,0 +1,16 @@ |
|||
export default { |
|||
getAddressInfo:{ |
|||
method:"get", |
|||
url:"/mall/web/estate/addressInfo" |
|||
}, |
|||
// -- 查询单个小区信息 --
|
|||
getEstateInfo: { |
|||
method: 'GET', |
|||
url: '/mall/web/estate/query/estateInfo', |
|||
}, |
|||
getEstateList: { |
|||
method: 'GET', |
|||
url: '/mall/web/estate/query/estateList', |
|||
}, |
|||
|
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
import utilsModel from "./utils-model"; |
|||
import chooseCommunity from "../api/chooseCommunity"; |
|||
|
|||
export default { |
|||
getAddressInfo : (params) => |
|||
utilsModel |
|||
.config(chooseCommunity.getAddressInfo) |
|||
.request({ |
|||
params : params, |
|||
}), |
|||
getEstateInfo : (params) => |
|||
utilsModel |
|||
.config(chooseCommunity.getEstateInfo) |
|||
.request({ |
|||
params : params, |
|||
}), |
|||
|
|||
getEstateList : (params) => |
|||
utilsModel |
|||
.config(chooseCommunity.getEstateList) |
|||
.request({ |
|||
params : params, |
|||
}) |
|||
} |
|||
@ -0,0 +1,51 @@ |
|||
import Vue from "vue"; |
|||
import wx from "weixin-js-sdk"; |
|||
import axios from "axios"; |
|||
import wxShareModel from "../models/wxShare-model.js"; |
|||
|
|||
|
|||
Vue.prototype.wxLocation = function () { |
|||
wxShareModel.getWXCheck().then(response =>{ |
|||
if (response.code != 0) { |
|||
return; |
|||
} |
|||
var jsApiSignConfig = response.response.jsApiSignConfig; |
|||
wx.config({ |
|||
debug: false, // 开启调试模式,开发时可以开启
|
|||
appId: jsApiSignConfig.appId, // 必填，公众号的唯一标识 由接口返回
|
|||
timestamp: jsApiSignConfig.timestamp, // 必填，生成签名的时间戳 由接口返回
|
|||
nonceStr: jsApiSignConfig.nonceStr, // 必填，生成签名的随机串 由接口返回
|
|||
signature: jsApiSignConfig.signature, // 必填，签名 由接口返回
|
|||
jsApiList: [ |
|||
"onMenuShareAppMessage", |
|||
"onMenuShareTimeline", |
|||
"onMenuShareQQ", |
|||
"onMenuShareWeibo", |
|||
"onMenuShareQZone" |
|||
] |
|||
}); |
|||
wx.ready(() => { |
|||
// 首次进入页面进会弹窗确认地理位置
|
|||
if (localStorage.getItem("latitude") == null) { |
|||
wx.getLocation({ |
|||
type: "gcj02", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
|
|||
success: function (res) { |
|||
localStorage.setItem("latitude", res.latitude); |
|||
localStorage.setItem("longitude", res.longitude); |
|||
}, |
|||
cancel: function () { |
|||
alter("拒绝定位"); |
|||
} |
|||
}); |
|||
} else { |
|||
|
|||
} |
|||
alert("lat:" + localStorage.getItem("latitude") + ";lng:" + localStorage.getItem("longitude")); |
|||
wx.error(function (res) { |
|||
alter("wx-js初始化: " + res); |
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
} |
|||
|
|||
@ -0,0 +1,20 @@ |
|||
/** |
|||
* 本文件用于 keep-alive的页面返回离开前的位置使用 |
|||
* 未知 Vue-Router scrollBehavior 记录有误，所以使用手动记录位置。 |
|||
*/ |
|||
var myScroll = { |
|||
activated() { |
|||
console.log("pageNum---pages:"+this.pageNum,this.pages) |
|||
if (this.pageNum < this.pages) this.busy = false |
|||
|
|||
this.$nextTick(function() { |
|||
const position = this.$route.meta.savedPosition // 返回页面取出来
|
|||
window.scroll(0, position) |
|||
}) |
|||
}, |
|||
deactivated() { |
|||
this.busy = true |
|||
} |
|||
} |
|||
|
|||
export default myScroll |
|||
@ -1,19 +1,427 @@ |
|||
<template> |
|||
<div class="container goods"> |
|||
<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 f-h40"> |
|||
|
|||
<el-input placeholder="请输入小区名称" type="search" v-model="form.customerName" @keyup.enter.native="searchByName" @clear="clear" clearable> |
|||
<i slot="prefix" class="el-input__icon el-icon-search"></i> |
|||
</el-input> |
|||
<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" @click="show = true"> |
|||
<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> |
|||
<div class="content"> |
|||
<el-input style="border-left: 1px solid #c1c1c1;" placeholder="请输入小区名称" type="search" 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" v-if="item.housingEstateId != estateId" 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> |
|||
</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"; |
|||
export default { |
|||
components: { |
|||
Toast, |
|||
Loading, |
|||
Alert, |
|||
"popup-picker": popupPicker |
|||
}, |
|||
data() { |
|||
return { |
|||
show: false, |
|||
defaultCity: "天河区", |
|||
districtId: "440106000", //区id 默认值 不需要去掉 |
|||
provinceId: "", |
|||
cityId: "", |
|||
estateId: "", |
|||
nowEstate: "", |
|||
nowAddress: "", |
|||
lat: -1, |
|||
lng: -1, |
|||
addressData: [], |
|||
addressValue: [ |
|||
"440000000&广东省", |
|||
"440100000&广州市", |
|||
"440106000&天河区&2" |
|||
], |
|||
communityName: "", |
|||
communityList: [], |
|||
pageSize: 10, |
|||
pageNum: 1, |
|||
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: { |
|||
getCity() { |
|||
let _this = this; |
|||
var geolocation = new BMap.Geolocation(); |
|||
|
|||
geolocation.getCurrentPosition(function(r) { |
|||
if (this.getStatus() == BMAP_STATUS_SUCCESS) { |
|||
// if(r.accuracy==null){ |
|||
// alert('您已拒绝地理位置授权'); |
|||
// //用户决绝地理位置授权 |
|||
// return; |
|||
// }else{ |
|||
const myGeo = new BMap.Geocoder(); |
|||
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), data => { |
|||
if (data.addressComponents) { |
|||
const result = data.addressComponents; |
|||
const location = { |
|||
creditLongitude: r.point.lat, // 经度 |
|||
creditLatitude: r.point.lng, // 纬度 |
|||
creditProvince: result.province || "", // 省 |
|||
creditCity: result.city || "", // 市 |
|||
creditArea: result.district || "", // 区 |
|||
creditStreet: |
|||
(result.street || "") + (result.streetNumber || "") // 街道 |
|||
}; |
|||
_this.location = location; |
|||
localStorage.setItem("latitude", location.creditLatitude); |
|||
localStorage.setItem("longitude", location.creditLongitude); |
|||
// alert( |
|||
// "省-" + |
|||
// location.creditProvince + |
|||
// ";市-" + |
|||
// location.creditCity + |
|||
// ";区-" + |
|||
// location.creditArea + |
|||
// ";街道-" + |
|||
// location.creditStreet + |
|||
// ";lat-" + |
|||
// location.creditLatitude + |
|||
// ";lng-" + |
|||
// location.creditLongitude |
|||
// ); |
|||
} |
|||
}); |
|||
// } |
|||
} |
|||
}); |
|||
}, |
|||
//返回上一页 |
|||
goBack() { |
|||
// history.go(-1) |
|||
let estateStr = localStorage.getItem("estate") || ""; |
|||
if (!estateStr || estateStr.length == 0) { |
|||
this.$vux.toast.text("请选择一个小区", "middle"); |
|||
return; |
|||
} |
|||
this.$router.push({ |
|||
name: "首页" |
|||
}); |
|||
}, |
|||
//确定时保存记录 |
|||
confirm(list) { |
|||
console.log("list:" + list); |
|||
let arr = list[2].split("&") || ""; |
|||
this.districtId = arr[0]; |
|||
this.defaultCity = arr[1]; |
|||
this.addressValue = list.slice(); |
|||
// localStorage.setItem("cityName", list); |
|||
this.show = false; |
|||
this.pageNum = 1; |
|||
this.communityName = ""; |
|||
|
|||
this.fetchCommunityList(); |
|||
}, |
|||
cancel() { |
|||
let str = localStorage.getItem("cityName") || ""; |
|||
//首次取消也需要请求 |
|||
if (!str) { |
|||
this.defaultCity = "天河区"; |
|||
//商户编号 |
|||
this.merchantNo = 2; |
|||
//区id |
|||
this.districtId = "440106000"; |
|||
this.addressValue = [ |
|||
"440000000&广东省", |
|||
"440100000&广州市", |
|||
"440106000&天河区&2" |
|||
]; |
|||
this.fetchCommunityList(); |
|||
} |
|||
this.show = false; |
|||
}, |
|||
clear() { |
|||
// 清除搜索条件 |
|||
this.showFlag = false; |
|||
this.communityName = ""; |
|||
this.busy = false; |
|||
this.pageNum++; |
|||
this.loadMoreHide = false; |
|||
this.loadMoreTips = false; |
|||
this.communityList = []; |
|||
this.fetchCommunityList(); |
|||
}, |
|||
searchByName(event) { |
|||
this.showFlag = false; |
|||
if (event.keyCode === 13) { |
|||
event.preventDefault(); // 禁止键盘默认事件 |
|||
this.fetchCommunityList(); |
|||
} |
|||
}, |
|||
fetchCommunityList() { |
|||
if (this.isRequesting || this.loadMoreHide) { |
|||
return; |
|||
} |
|||
this.isRequesting = true; |
|||
//this.busy = true; |
|||
var _this = this; |
|||
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; |
|||
|
|||
</div> |
|||
<!-- Loading --> |
|||
<loading :show="showLoading" text="loading"></loading> |
|||
</div> |
|||
</template> |
|||
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) { |
|||
var addressValue = [ |
|||
item.provinceId + "&" + item.provinceName, |
|||
item.cityId + "&" + item.cityName, |
|||
item.districtId + "&" + item.districtName + "&" + item.merchantNo |
|||
]; |
|||
localStorage.setItem("cityName", addressValue.slice()); |
|||
localStorage.setItem( |
|||
"estate", |
|||
item.housingEstateId + "&" + item.housingEstateName |
|||
); |
|||
this.estateId = item.housingEstateId; |
|||
this.countPartner(); |
|||
this.$router.push({ |
|||
name: "首页" |
|||
}); |
|||
}, |
|||
ShareWenXin() { |
|||
var merchantNo = this.merchantNo; |
|||
this.wxShare({ |
|||
merchantNo: merchantNo, |
|||
source: 0, |
|||
url: encodeURIComponent(location.href), |
|||
shareUrl: encodeURIComponent("http://" + location.host + "/v2/home") |
|||
}); |
|||
}, |
|||
countExtend() { |
|||
return new Promise((resolve, reject) => { |
|||
var params = { |
|||
buryingPointType: 0, |
|||
salesmanUniqueIdentity: this.uniqueId, |
|||
timeStr: this.getTime(Date.now()) |
|||
}; |
|||
homeApi.countExtend(params).then(res => { |
|||
resolve(); |
|||
}); |
|||
}); |
|||
}, |
|||
countPartner() { |
|||
return new Promise((resolve, reject) => { |
|||
var params = { |
|||
buryingPointType: 0, |
|||
housingEstateId: this.estateId, |
|||
timeStr: this.getTime(Date.now()) |
|||
}; |
|||
homeApi.countPartner(params).then(res => { |
|||
resolve(); |
|||
}); |
|||
}); |
|||
}, |
|||
getTime(time) { |
|||
let date = new Date(time); |
|||
let year = date.getFullYear(); |
|||
let month = this.checkTime(date.getMonth() + 1); |
|||
let day = this.checkTime(date.getDate()); |
|||
let str = year + "-" + month + "-" + day; |
|||
return str; |
|||
}, |
|||
checkTime(i) { |
|||
if (i < 10) { |
|||
i = "0" + i; |
|||
} |
|||
return i; |
|||
}, |
|||
getAddressInfo() { |
|||
this.getId(); |
|||
this.showLoading = true; |
|||
return new Promise((resolve, reject) => { |
|||
chooseCommunityApi |
|||
.getAddressInfo({ |
|||
cityId: this.cityId ? this.cityId : "", |
|||
estateId: this.estateId ? this.estateId : "", |
|||
lat: this.lat, |
|||
lng: this.lng |
|||
}) |
|||
.then(res => { |
|||
if (res.response.allAddress && res.response.userAddress) { |
|||
this.addressData = res.response.allAddress; |
|||
this.flag = true; |
|||
this.fetchCommunityList(); |
|||
resolve(); |
|||
} |
|||
this.showLoading = false; |
|||
}) |
|||
.catch(error => { |
|||
this.showLoading = false; |
|||
}); |
|||
}); |
|||
}, |
|||
getId() { |
|||
let str = localStorage.getItem("cityName") || ""; |
|||
let estateStr = localStorage.getItem("estate") || ""; |
|||
this.lat = localStorage.getItem("latitude") || -1; |
|||
this.lng = localStorage.getItem("longitude") || -1; |
|||
// 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.merchantNo = cityNameArr[2]; |
|||
this.nowAddress = |
|||
arr[0].split("&")[1] + arr[1].split("&")[1] + cityNameArr[1]; |
|||
} |
|||
if (!estateStr) { |
|||
} else { |
|||
let estateArr = estateStr.split("&"); |
|||
this.estateId = estateArr[0]; |
|||
this.nowEstate = estateArr[1]; |
|||
} |
|||
let eId = this.$route.query.estateId; |
|||
if (eId !== undefined && eId !== null && eId !== "") { |
|||
this.estateId = eId; |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
//判断是否在微信环境下操作 |
|||
var ua = window.navigator.userAgent.toLowerCase(); |
|||
//通过正则表达式匹配ua中是否含有MicroMessenger字符串 |
|||
let _this = this; |
|||
if (ua.match(/MicroMessenger/i) == "micromessenger") { |
|||
//微信环境 |
|||
this.wxLocation({}); |
|||
} else { |
|||
// TODO 非微信环境用百度api |
|||
this.getCity(); |
|||
} |
|||
this.getAddressInfo(); |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.container { |
|||
background-color: #fff; |
|||
.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