|
|
|
// pages/reservr/index.js
|
|
|
|
import util from '../../utils/util';
|
|
|
|
import App from '../../utils/api';
|
|
|
|
import PubSub from '../../utils/PubSub'
|
|
|
|
const {regeneratorRuntime} = global
|
|
|
|
const mapScale = 15//18;
|
|
|
|
const def_latitude = 39.684670;
|
|
|
|
const def_longitude = 118.176300;
|
|
|
|
const cates_version = '?1.2';
|
|
|
|
Page({
|
|
|
|
data:{
|
|
|
|
map:{},
|
|
|
|
height:1000,
|
|
|
|
meTop:20,
|
|
|
|
hasLoading:true,
|
|
|
|
activeSellerID:'',//高亮商家
|
|
|
|
scrollSellerID:'',//滚动到商家
|
|
|
|
current:0,
|
|
|
|
},
|
|
|
|
user:{},
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面加载
|
|
|
|
*/
|
|
|
|
onLoad: function (options) {
|
|
|
|
const systeminfo=wx.getSystemInfoSync();
|
|
|
|
let ratio=750/systeminfo.windowWidth;
|
|
|
|
console.log(systeminfo)
|
|
|
|
this.setData({
|
|
|
|
height:systeminfo.windowHeight-(350/ratio)
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
|
*/
|
|
|
|
onReady: function () {
|
|
|
|
this.selectComponent('#getpos').getPos();
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面显示
|
|
|
|
*/
|
|
|
|
onShow: function () {
|
|
|
|
// PubSub.emit('custom-tab-bar')
|
|
|
|
if(wx.getMenuButtonBoundingClientRect){
|
|
|
|
let rect=wx.getMenuButtonBoundingClientRect()
|
|
|
|
this.setData({
|
|
|
|
meTop:rect.top-5,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
|
*/
|
|
|
|
onHide: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
|
*/
|
|
|
|
onUnload: function () {
|
|
|
|
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 用户点击右上角分享
|
|
|
|
*/
|
|
|
|
onShareAppMessage: function () {
|
|
|
|
return{
|
|
|
|
title:'请客订包间，就上周到安排'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
switchpage(){
|
|
|
|
wx.switchTab({
|
|
|
|
url: './index'
|
|
|
|
})
|
|
|
|
},
|
|
|
|
onpos(e) {
|
|
|
|
let res = e.detail;
|
|
|
|
console.log('onpos.res', res);
|
|
|
|
let map = this.data.map;
|
|
|
|
if (!res.latitude){
|
|
|
|
map.latitude = def_latitude;
|
|
|
|
map.longitude = def_longitude;
|
|
|
|
}else{
|
|
|
|
map.latitude = res.latitude;
|
|
|
|
map.longitude = res.longitude;
|
|
|
|
}
|
|
|
|
map.scale = mapScale;
|
|
|
|
this.user.latitude = res.latitude;
|
|
|
|
this.user.longitude = res.longitude;
|
|
|
|
let sdobj = {
|
|
|
|
map: map,
|
|
|
|
}
|
|
|
|
this.setData(sdobj)
|
|
|
|
},
|
|
|
|
setLoacl(e){
|
|
|
|
let pos=util.attr(e,'val').split(',');
|
|
|
|
let map = this.data.map
|
|
|
|
map.latitude = pos[0];
|
|
|
|
map.longitude = pos[1];
|
|
|
|
this.setData({
|
|
|
|
map:map
|
|
|
|
})
|
|
|
|
},
|
|
|
|
reduceMapScale(){
|
|
|
|
let map = this.data.map
|
|
|
|
map.scale=parseInt(map.scale)-1
|
|
|
|
this.setData({
|
|
|
|
map:map
|
|
|
|
})
|
|
|
|
},
|
|
|
|
moveToLocation() {
|
|
|
|
console.log('moveToLocation')
|
|
|
|
this.selectComponent('#getpos').getPos(true);
|
|
|
|
},
|
|
|
|
debounceTimer:null,
|
|
|
|
debounce(func,wait){
|
|
|
|
if(this.debounceTimer){
|
|
|
|
clearTimeout(this.debounceTimer)
|
|
|
|
}
|
|
|
|
this.debounceTimer=setTimeout(()=>{
|
|
|
|
this.debounceTimer=null;
|
|
|
|
func()
|
|
|
|
},wait);
|
|
|
|
},
|
|
|
|
regionChange(e){
|
|
|
|
if(e.type=='end'){
|
|
|
|
console.log('regionChange', e)
|
|
|
|
this.debounce(this.regionChangeDo,800)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mapCtx:null,
|
|
|
|
mapData: {
|
|
|
|
latitude: 0,
|
|
|
|
longitude: 0,
|
|
|
|
scale: 30,
|
|
|
|
hasRegionchange: false,
|
|
|
|
region: {
|
|
|
|
southwest: {},
|
|
|
|
northeast: {},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
regionChangeDo(){
|
|
|
|
console.log('regionChangeDo')
|
|
|
|
if(!this.mapCtx){
|
|
|
|
this.mapCtx = wx.createMapContext('map')
|
|
|
|
}
|
|
|
|
if(!this.mapCtx) return;
|
|
|
|
this.mapCtx.getScale({
|
|
|
|
success: (res) => {
|
|
|
|
this.mapScale = res.scale;
|
|
|
|
},
|
|
|
|
})
|
|
|
|
this.mapCtx.getRegion({
|
|
|
|
success: (res) => {
|
|
|
|
if (res.southwest.latitude) {
|
|
|
|
this.mapData.region = res
|
|
|
|
}
|
|
|
|
// this.selectComponent('#filter-group').hide();
|
|
|
|
this.getSellers();
|
|
|
|
},
|
|
|
|
})
|
|
|
|
},
|
|
|
|
hasSellers:0,
|
|
|
|
sellers:[],
|
|
|
|
getSellers(){
|
|
|
|
console.log('getSellers',this.mapScale,this.mapData)
|
|
|
|
this.setData({
|
|
|
|
hasLoading:true,
|
|
|
|
scrollSellerID:'',//清理，滚到顶
|
|
|
|
})
|
|
|
|
let param = {
|
|
|
|
lat: this.user.latitude == def_latitude ? '' : this.user.latitude,
|
|
|
|
lng: this.user.longitude == def_longitude ? '' : this.user.longitude,
|
|
|
|
offset: 0,
|
|
|
|
rows: 200,
|
|
|
|
distance: 100000,
|
|
|
|
map: JSON.stringify({...this.mapData.region, scale: 50})
|
|
|
|
}
|
|
|
|
if (param.lat) {
|
|
|
|
param.centre_pos = `${param.lat},${param.lng}`
|
|
|
|
} else {
|
|
|
|
let lat = (this.mapData.region.southwest.latitude + this.mapData.region.northeast.latitude) / 2
|
|
|
|
let lng = (this.mapData.region.southwest.longitude + this.mapData.region.northeast.longitude) / 2
|
|
|
|
param.centre_pos = `${lat},${lng}`
|
|
|
|
}
|
|
|
|
this.hasFilterData=false
|
|
|
|
if(this.filterGroupData.tags){
|
|
|
|
param.tags = this.filterGroupData.tags;
|
|
|
|
this.hasFilterData=true
|
|
|
|
}
|
|
|
|
if (this.filterGroupData.cuisine) {
|
|
|
|
param.cuisine = this.filterGroupData.cuisine;
|
|
|
|
this.hasFilterData=true
|
|
|
|
}
|
|
|
|
if(this.filterGroupData.average){
|
|
|
|
param.average = this.filterGroupData.average;
|
|
|
|
this.hasFilterData=true
|
|
|
|
}
|
|
|
|
this.param = param;
|
|
|
|
this.activeSellerID='';
|
|
|
|
App.Customer.SellerList(param).then(async res => {
|
|
|
|
if (res.ret == 200) {
|
|
|
|
this.hasSellers=res.data.flag;
|
|
|
|
res.data.list.forEach((v,i)=>{
|
|
|
|
v.distance=Math.round(Number(v.distance));
|
|
|
|
if(v.cate && v.cate.length>0){
|
|
|
|
v.cateStr=[];
|
|
|
|
v.cate.some(cate=>{
|
|
|
|
v.cateStr.push(cate.name);
|
|
|
|
if(v.cateStr.length>2){return true}
|
|
|
|
})
|
|
|
|
v.cateStr=v.cateStr.join('/')
|
|
|
|
}
|
|
|
|
})
|
|
|
|
this.sellers=res.data.list;
|
|
|
|
this.makeMarker();
|
|
|
|
this.makeSellers();
|
|
|
|
this.debounce(this.makeDefMarker,300)
|
|
|
|
}
|
|
|
|
}).catch(e=>{
|
|
|
|
this.debounce(this.getSellers,300)
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
makeMarker(){
|
|
|
|
this.mapCtx.getScale({
|
|
|
|
success: (res) => {
|
|
|
|
this.mapData.scale = res.scale;
|
|
|
|
let markers=[]
|
|
|
|
let sellersLength=this.sellers.length
|
|
|
|
this.sellers.forEach((seller,si)=>{
|
|
|
|
if(seller.scale>this.mapData.scale) return;
|
|
|
|
let marker = {
|
|
|
|
id: seller.id,
|
|
|
|
iconPath: "http://nosqn.colorcun.com/custom/lite-online/cates/circle1x5.png" + cates_version,
|
|
|
|
latitude: seller.lat,
|
|
|
|
longitude: seller.long,
|
|
|
|
width: 8,
|
|
|
|
height: 8,
|
|
|
|
//title:seller.seller_name,
|
|
|
|
zIndex: sellersLength - si,
|
|
|
|
zIndexBak: sellersLength - si,
|
|
|
|
//seller: seller,
|
|
|
|
};
|
|
|
|
// marker.callout={
|
|
|
|
// content: ' ' + seller.sellername + ' ',
|
|
|
|
// color: '#353535',
|
|
|
|
// fontSize: 12,
|
|
|
|
// borderWidth: 1,
|
|
|
|
// borderColor: '#cccccc',
|
|
|
|
// borderRadius: 50,
|
|
|
|
// bgColor: '#fefefe',
|
|
|
|
// padding: 5,
|
|
|
|
// textAlign: 'left',
|
|
|
|
// display:'BYCLICK',
|
|
|
|
// };
|
|
|
|
// marker.calloutDisplay='BYCLICK';
|
|
|
|
if (seller.mode.length > 0) {
|
|
|
|
seller.mode.forEach(x => {
|
|
|
|
if (x.id == 1) {//大图标
|
|
|
|
marker.iconPath = "http://nosqn.colorcun.com/custom/lite-online/cates/其他菜品.png";
|
|
|
|
if (seller.cate.length > 0) {
|
|
|
|
marker.iconPath = seller.cate[0].icon
|
|
|
|
}
|
|
|
|
marker.iconPath = marker.iconPath.replace(/\/cates\/(.*)\.png/, function ($0, $1) {
|
|
|
|
return '/cates/' + encodeURI($1) + '.png'
|
|
|
|
})
|
|
|
|
marker.iconPath += cates_version
|
|
|
|
marker.width = 20;
|
|
|
|
marker.height = 25;
|
|
|
|
}
|
|
|
|
// if(x.id==2){//商家名
|
|
|
|
// marker.callout.display='ALWAYS';
|
|
|
|
// marker.calloutDisplay='ALWAYS';
|
|
|
|
// }
|
|
|
|
})
|
|
|
|
}
|
|
|
|
markers.push(marker)
|
|
|
|
})
|
|
|
|
markers.push({
|
|
|
|
id: 'local',
|
|
|
|
iconPath: "http://nosqn.colorcun.com/2.0/home%20%288%29.png" + cates_version,
|
|
|
|
latitude: (this.user.latitude||def_latitude)+'',
|
|
|
|
longitude: (this.user.longitude||def_longitude)+'',
|
|
|
|
width: 25,
|
|
|
|
height: 41,
|
|
|
|
zIndex: 9999,
|
|
|
|
zIndexBak:9999,
|
|
|
|
})
|
|
|
|
this.setData({
|
|
|
|
markers:markers,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
})
|
|
|
|
},
|
|
|
|
makeSellers(){
|
|
|
|
this.setData({
|
|
|
|
sellers:this.sellers,
|
|
|
|
hasSellers:(this.hasSellers==1 || this.sellers.length>0) || this.hasFilterData,
|
|
|
|
hasLoading:false,
|
|
|
|
hasFilterData:this.hasFilterData,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
switchseller(e){
|
|
|
|
let current=e.detail.current;
|
|
|
|
let id=this.data.sellers[current].id;
|
|
|
|
this.markertap({markerId:id});
|
|
|
|
},
|
|
|
|
makeDefMarker(){
|
|
|
|
if(!this.activeSellerID && this.data.markers.length>0){
|
|
|
|
this.markertap({markerId:this.data.markers[0].id})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
hasScrollToIng:false,
|
|
|
|
markertap(e,scrollTo=true){
|
|
|
|
if(!e.markerId || e.markerId=='local') return;
|
|
|
|
let markers=this.data.markers
|
|
|
|
this.activeSellerID = e.markerId
|
|
|
|
let bl = 1.2;
|
|
|
|
markers.forEach((m, i) => {
|
|
|
|
m.iconPath = m.iconPath.replace('/cates-active/', '/cates/')
|
|
|
|
m.zIndex = m.zIndexBak
|
|
|
|
if (m.width == 20 * bl) {
|
|
|
|
m.width = 20;
|
|
|
|
m.height = 25;
|
|
|
|
}
|
|
|
|
if (m.width == 12) {
|
|
|
|
m.width = 8;
|
|
|
|
m.height = 8;
|
|
|
|
}
|
|
|
|
if(m.callout){
|
|
|
|
m.callout.borderColor= '#cccccc';
|
|
|
|
m.callout.bgColor= '#fefefe';
|
|
|
|
m.callout.color= '#353535';
|
|
|
|
m.callout.display=m.calloutDisplay;
|
|
|
|
}
|
|
|
|
if (m.id == e.markerId) {
|
|
|
|
m.iconPath = m.iconPath.replace('/cates/', '/cates-active/')
|
|
|
|
if (m.width == 20) {
|
|
|
|
m.width = 20 * bl;
|
|
|
|
m.height = 25 * bl;
|
|
|
|
} else {
|
|
|
|
m.width = 12;
|
|
|
|
m.height = 12;
|
|
|
|
}
|
|
|
|
m.zIndex = 9999
|
|
|
|
if(m.callout){
|
|
|
|
m.callout.borderColor= '#F05522';
|
|
|
|
m.callout.bgColor= '#F05522';
|
|
|
|
m.callout.color= '#fefefe';
|
|
|
|
m.callout.display='ALWAYS';
|
|
|
|
}
|
|
|
|
this.setData({
|
|
|
|
current:i,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
})
|
|
|
|
let obj = {
|
|
|
|
markers: markers,
|
|
|
|
activeSellerID:this.activeSellerID,
|
|
|
|
};
|
|
|
|
this.hasScrollToIng=false
|
|
|
|
if(scrollTo){
|
|
|
|
obj.scrollSellerID=this.activeSellerID
|
|
|
|
this.hasScrollToIng=true
|
|
|
|
}
|
|
|
|
this.setData(obj)
|
|
|
|
setTimeout(()=>{this.hasScrollToIng=false},800)
|
|
|
|
},
|
|
|
|
filterGroupData:{},
|
|
|
|
filterGroupEvent(e){
|
|
|
|
console.log('filterGroupEvent',e.detail)
|
|
|
|
this.filterGroupData=e.detail
|
|
|
|
this.debounce(this.getSellers,500)
|
|
|
|
},
|
|
|
|
sellerCardEvent(e){
|
|
|
|
if(e.detail.type=='phone'){
|
|
|
|
this.selectComponent('#as').show(e.detail.seller);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
scrollTop:0,
|
|
|
|
scrollEvent(e){
|
|
|
|
if(this.mapScale<12) return;
|
|
|
|
//console.log(e.detail.scrollTop)
|
|
|
|
this.scrollTop=e.detail.scrollTop
|
|
|
|
if(this.hasScrollToIng)return;
|
|
|
|
this.debounce(()=>{
|
|
|
|
this.scrollEventActive()
|
|
|
|
},300)
|
|
|
|
},
|
|
|
|
scrollEventActive(){
|
|
|
|
let idx=parseInt(this.scrollTop/162)
|
|
|
|
let po=this.scrollTop%((idx>0?idx:1)*162);
|
|
|
|
if(po>80){
|
|
|
|
idx+=1;
|
|
|
|
}
|
|
|
|
//console.log(idx,po)
|
|
|
|
if(this.sellers[idx]){
|
|
|
|
//this.activeSellerID=this.sellers[idx].id
|
|
|
|
this.markertap({markerId:this.sellers[idx].id},false)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
todetail(e){
|
|
|
|
let seller=this.data.sellers[e.currentTarget.dataset.index];
|
|
|
|
let url=util.http_build_query({id:seller.id},'/pages/reserve/detail');
|
|
|
|
return wx.navigateTo({
|
|
|
|
url:url,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
reserve(e){
|
|
|
|
let seller=this.data.sellers[e.currentTarget.dataset.index];
|
|
|
|
if(seller.is_online_reserve==1){
|
|
|
|
let url=util.http_build_query({id:seller.id,activeTab:'reserve'},'/pages/reserve/reserve')
|
|
|
|
// let cid=seller.id;
|
|
|
|
// if(cid){
|
|
|
|
// url=util.http_build_query({
|
|
|
|
// classID:cid,
|
|
|
|
// className:util.attr(e,'cname'),
|
|
|
|
// },url)
|
|
|
|
// }
|
|
|
|
return wx.navigateTo({
|
|
|
|
url:url,
|
|
|
|
})
|
|
|
|
}else{
|
|
|
|
this.selectComponent('#as').show(seller);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}) |
...
|
...
|
|
