374 lines
9.5 KiB
JavaScript
374 lines
9.5 KiB
JavaScript
const app = getApp();
|
|
import apiAddr from '../../api/base';
|
|
import { setData, isObjEmpty, wechatMiniPagesJump } from '../../utils/index';
|
|
Page({
|
|
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
host:apiAddr.host,
|
|
navBarDetail: app.initCustomNavbar(),
|
|
safeArea: {},
|
|
isSelect: true,
|
|
mapList: [],
|
|
mapMarker: [],
|
|
mapMarkerId: -1,
|
|
header_color:'',
|
|
button_font_color:'',
|
|
button_bg_color:'',
|
|
userlng:'',
|
|
userlat:'',
|
|
selectId: '',
|
|
selectLeftIndex: 0,
|
|
selectLeftKeyWord: '',
|
|
selectLeft: [
|
|
{
|
|
type: '',
|
|
name: '类型选择'
|
|
},
|
|
{
|
|
type: '2',
|
|
name: '共享空间'
|
|
},
|
|
{
|
|
type: '3',
|
|
name: '服务预约'
|
|
},
|
|
{
|
|
type: '4',
|
|
name: '在线商城'
|
|
}
|
|
],
|
|
selectRight: [
|
|
{
|
|
type: '',
|
|
name: '附近商家'
|
|
},
|
|
{
|
|
type: '2',
|
|
name: '共享空间'
|
|
},
|
|
{
|
|
type: '3',
|
|
name: '服务预约'
|
|
},
|
|
{
|
|
type: '4',
|
|
name: '在线商城'
|
|
}
|
|
],
|
|
hidden:true,
|
|
},
|
|
initMapMarker(){
|
|
setData(this, 'hidden', true);
|
|
// setData(this, 'mapMarkerId', -1);
|
|
},
|
|
selectToggle(event){
|
|
let { dataset: { id } } = event.currentTarget;
|
|
let { isSelect } = this.data;
|
|
setData(this, 'isSelect', !isSelect);
|
|
setData(this, 'selectId', id);
|
|
},
|
|
selectItem(event){
|
|
let { dataset: { type, index } } = event.currentTarget;
|
|
let { selectId, selectLeftIndex, selectLeftKeyWord } = this.data;
|
|
let handleFun = {
|
|
'1': () => setData(this, 'selectLeftIndex', index),
|
|
'2': () => {
|
|
this.getShopList(type);
|
|
this.initMapMarker();
|
|
if (selectLeftIndex > 0) setData(this, 'selectLeftIndex', 0);
|
|
if (selectLeftKeyWord) setData(this, 'selectLeftKeyWord', '');
|
|
}
|
|
}
|
|
handleFun[selectId]();
|
|
},
|
|
searchInput(event){
|
|
let { detail: { value } } = event;
|
|
setData(this, 'selectLeftKeyWord', value);
|
|
},
|
|
searchConfirm(){
|
|
let { selectLeft, selectLeftIndex, selectLeftKeyWord } = this.data;
|
|
let { type } = selectLeft[selectLeftIndex];
|
|
if (type && !selectLeftKeyWord) {
|
|
wx.showToast({ title: '请输入关键词', icon: 'none', duration: 2000, mask: true });
|
|
return false;
|
|
}
|
|
this.getShopList(type, selectLeftKeyWord);
|
|
this.initMapMarker();
|
|
},
|
|
/**
|
|
* @description 获取屏幕宽高比
|
|
* @method getSafeArea
|
|
*/
|
|
getSafeArea(){
|
|
let { safeArea } = wx.getSystemInfoSync();
|
|
setData(this, 'safeArea', safeArea);
|
|
},
|
|
/**
|
|
* @description 获取当前用户所在位置附近的商家
|
|
* @method getShopList
|
|
*/
|
|
getShopList(selectType, searchKeyWord){
|
|
// console.log('获取当前用户所在位置附近的商家');
|
|
selectType = selectType || '';
|
|
searchKeyWord = searchKeyWord || '';
|
|
let { selectId, userlng,userlat } = this.data;
|
|
let sendData = {
|
|
type: selectType,
|
|
keyword: searchKeyWord,
|
|
lng: userlng,
|
|
lat: userlat
|
|
};
|
|
if (selectId && selectId === '2' && selectType === '2') {
|
|
this.getReserveList();
|
|
return false;
|
|
};
|
|
wx.showLoading({ title: '请求数据中...', mask: true });
|
|
wx.request({
|
|
url: apiAddr.get_map_shop_list,
|
|
method: 'post',
|
|
header: {
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
data: sendData,
|
|
dataType: 'json',
|
|
success: (result) => {
|
|
// console.log('获取商家列表');
|
|
wx.hideLoading()
|
|
console.log(result);
|
|
let { data: { map_shop_list } } = result;
|
|
if ( map_shop_list ) {
|
|
setData(this, 'mapList', map_shop_list);
|
|
setData(this, 'mapMarker', this.setMarker(map_shop_list));
|
|
}
|
|
},
|
|
complete: () => wx.hideLoading()
|
|
})
|
|
},
|
|
getReserveList(){
|
|
let { userlng, userlat } = this.data;
|
|
let sendData = {
|
|
lng: userlng,
|
|
lat: userlat
|
|
};
|
|
wx.showLoading({ title: '请求数据中...', mask: true });
|
|
wx.request({
|
|
url: apiAddr.get_booking_type,
|
|
method: 'post',
|
|
header: {
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
data: sendData,
|
|
dataType: 'json',
|
|
success: (result) => {
|
|
wx.hideLoading()
|
|
let { data: { booking_type } } = result;
|
|
if (booking_type) {
|
|
setData(this, 'mapList', booking_type);
|
|
setData(this, 'mapMarker', this.setMarker(booking_type));
|
|
}
|
|
},
|
|
complete: () => wx.hideLoading()
|
|
})
|
|
},
|
|
/**
|
|
* @description 设置地图坐标点信息
|
|
* @method setMarker
|
|
* @param {Array} list // 传入获取的坐标数据数组
|
|
* @returns {Array} // 返回地图坐标点列表
|
|
*/
|
|
setMarker(list){
|
|
let marker = list.map((item, index) => {
|
|
if (!isObjEmpty(item)) {
|
|
let markerItem = {
|
|
id: index,
|
|
width: '80rpx',
|
|
height: '80rpx',
|
|
latitude: item.lat,
|
|
longitude: item.lng,
|
|
iconPath: '/img/location.png',
|
|
callout: {
|
|
content: item.shop_name,
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
borderRadius: 5,
|
|
borderWidth: 0,
|
|
borderColor: '#fff',
|
|
bgColor: '#249dee',
|
|
padding: 5,
|
|
display: 'ALWAYS',
|
|
textAlign: 'center',
|
|
anchorY: 0,
|
|
anchorX: 0
|
|
}
|
|
};
|
|
return markerItem;
|
|
}
|
|
});
|
|
return marker;
|
|
},
|
|
/**
|
|
* @description 点击坐标的气泡显示所对应的商家
|
|
* @method handleMapCallout
|
|
* @param {Object} event // 传入的商家列表下标值
|
|
*/
|
|
handleMapCallout(event){
|
|
// console.log('点击坐标的气泡显示所对应的商家');
|
|
// console.log(event);
|
|
let { markerId } = event.detail;
|
|
setData(this, 'hidden', false);
|
|
setData(this, 'mapMarkerId', markerId);
|
|
},
|
|
linkBack(){
|
|
wx.navigateBack();
|
|
},
|
|
linkWebView(event){
|
|
let { dataset: { link } } = event.currentTarget;
|
|
let { mapList, mapMarkerId } = this.data;
|
|
let baseUrl = apiAddr.host;
|
|
let navList = ['shopList'];
|
|
if (mapMarkerId > -1 && navList.indexOf(link) < 0) {
|
|
let id = mapList[mapMarkerId].shop_id || mapList[mapMarkerId].room_id;
|
|
let paramsUrl = {
|
|
shopDetail: `${baseUrl}/wap/shop/detail/shop_id/${id}`,
|
|
shopMall: `${baseUrl}/wap/mall/index/shop_id/${id}`,
|
|
shopWorker: `${baseUrl}/wap/appoint/worker_list/shop_id/${id}`,
|
|
shopBooking: `${baseUrl}/wap/booking/room_list/shop_id/${id}`,
|
|
typeDetail: `${baseUrl}/wap/booking/room_detail/room_id/${id}`
|
|
};
|
|
|
|
wechatMiniPagesJump(2, `/pages/index/index?q=${encodeURIComponent(paramsUrl[link])}`);
|
|
return false;
|
|
}
|
|
let navUrl = {
|
|
shopList: `${baseUrl}/wap/shop/index`
|
|
};
|
|
wechatMiniPagesJump(2, `/pages/index/index?q=${encodeURIComponent(navUrl[link])}`);
|
|
},
|
|
/**
|
|
* @description 打开地图导航
|
|
* @method openNavigation
|
|
*/
|
|
openNavigation(){
|
|
let { mapList, mapMarkerId } = this.data;
|
|
if ( mapMarkerId > -1 ) {
|
|
let openOptions = {
|
|
latitude: mapList[mapMarkerId].lat,
|
|
longitude: mapList[mapMarkerId].lng,
|
|
name: mapList[mapMarkerId].shop_name,
|
|
address: mapList[mapMarkerId].addr
|
|
};
|
|
wx.openLocation(openOptions);
|
|
}
|
|
},
|
|
goH5Link: function(event){
|
|
app.goH5Link(event);
|
|
},
|
|
goPagesLink: function(event){
|
|
app.goPagesLink(event);
|
|
},
|
|
makeCall:function(event){
|
|
app.makeCall(event);
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad: function (options) {
|
|
//修改顶部导航颜色
|
|
wx.request({
|
|
url: apiAddr.get_site_color,
|
|
method: 'post',
|
|
header: {
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
dataType:'json',
|
|
success: (result) => {
|
|
console.log(result);
|
|
var color = result.data.mobile_color ? result.data.mobile_color : '#249dee';
|
|
var font_color = result.data.font_color ? result.data.font_color : '#ffffff';
|
|
|
|
setData(this,'header_color',color);
|
|
setData(this,'button_font_color',result.data.button_font_color);
|
|
setData(this,'button_bg_color',result.data.button_bg_color);
|
|
wx.setNavigationBarColor({
|
|
frontColor: font_color,
|
|
backgroundColor: color,
|
|
animation: {
|
|
duration: 0,
|
|
timingFunc: 'linear'
|
|
}
|
|
})
|
|
},
|
|
})
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow: function () {
|
|
// console.log('onShow');
|
|
this.getSafeArea();
|
|
|
|
wx.getLocation({
|
|
// altitude: false,
|
|
// isHighAccuracy: true,
|
|
// highAccuracyExpireTime: 5000,
|
|
success: (res) => {
|
|
// console.log(res);
|
|
setData(this, 'userlat', res.latitude);
|
|
setData(this, 'userlng', res.longitude);
|
|
// console.log(this.data.userlat);
|
|
// console.log(this.data.userlng);
|
|
this.getShopList();
|
|
// this.initMapMarker();
|
|
},
|
|
fail: () => wx.showToast({ title: '请点击右上角三个点并开启位置权限', icon: 'none', mask: true })
|
|
})
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom: function () {
|
|
|
|
},
|
|
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage: function () {
|
|
|
|
}
|
|
}) |