@@ -80,7 +80,8 @@ | |||
"name": "pages2", | |||
"independent": false, | |||
"pages": [ | |||
"live/livelist/index" | |||
"live/livelist/index", | |||
"fengMap/fengMap" | |||
] | |||
} | |||
], | |||
@@ -355,6 +355,8 @@ var config = { | |||
getRoomList: "/live/roomList", | |||
//商城地图 | |||
getStoreMap:"/wxMallBuilding/getbuildingfloorlist", | |||
//判断有没有蜂鸟地图 | |||
ifFengMap:'/fengniaomap/getConfig', | |||
//分享小程序二维码 | |||
getQrcodeFx:"/user/userinfoQrCode", | |||
}, | |||
@@ -52,11 +52,13 @@ | |||
<image src='{{typeLsit.sy_xfk.icon}}' mode='aspectFill'></image> | |||
<view class="text">消费卡</view> | |||
</view> | |||
<!-- wx:if="{{liveFlag}}"否配置直播条件预览 --> | |||
<view class='kjBox' bindtap='goLive'> | |||
<image src='{{typeLsit.sy_zbt.icon}}' mode='aspectFill'></image> | |||
<view class="text">直播厅</view> | |||
<view class='kjBox' bindtap='gotogame'> | |||
<image src='{{typeLsit.sy_yx.icon}}' mode='aspectFill'></image> | |||
<view class="text">游戏</view> | |||
</view> | |||
<!-- <view class='kjBox' bindtap='gotogame'> | |||
<image src='{{xingyun}}' mode='aspectFill' bindtap=''></image> | |||
<view>游戏频道</view> | |||
@@ -73,10 +75,12 @@ | |||
<image src='{{typeLsit.sy_jfsc.icon}}' mode='aspectFill'></image> | |||
<view class="text">积分商城</view> | |||
</view> | |||
<view class='kjBox' bindtap='gotogame'> | |||
<image src='{{typeLsit.sy_yx.icon}}' mode='aspectFill'></image> | |||
<view class="text">游戏</view> | |||
<!-- wx:if="{{liveFlag}}"否配置直播条件预览 --> | |||
<view class='kjBox' bindtap='goLive' wx:if="{{liveFlag}}"> | |||
<image src='{{typeLsit.sy_zbt.icon}}' mode='aspectFill'></image> | |||
<view class="text">直播厅</view> | |||
</view> | |||
<view class="kjBox" wx:if="{{!liveFlag}}"></view> | |||
</view> | |||
<!-- 频道 --> | |||
@@ -198,7 +198,7 @@ Page({ | |||
paySuccess: function () { | |||
wx.showModal({ | |||
title: '支付成功', | |||
content: '请尽快离场', | |||
content: '请15分钟内离场', | |||
showCancel: false | |||
}) | |||
}, | |||
@@ -209,9 +209,11 @@ Page({ | |||
}) | |||
}, | |||
bindfail: function (res) { | |||
console.log(123) | |||
console.log(res) | |||
}, | |||
gotoCarMini: function (e) { | |||
console.log(478) | |||
var that = this | |||
// etcp parkVendor1 | |||
// 泊链停车 parkVendor5 | |||
@@ -26,7 +26,7 @@ | |||
</view> | |||
<!-- <view class='coupon clearfix' bindtap='gotoquan' wx:if="{{couponList.length>0}}"> --> | |||
<view style="padding:0 25rpx;" class='coupon clearfix' bindtap='openTicketModal' wx:if="{{couponList.length>0&&stopFees.orderId}}"> | |||
<text class='fl'><text class='jians'>券</text>优惠券:</text> | |||
<text class='fl'><text class='jians'>券</text>使用停车券:</text> | |||
<view class="fr"> | |||
<text wx:if="{{quantitle}}">{{quantitle}}</text> | |||
<text wx:else>{{totalTicketNum}}张可用</text> | |||
@@ -78,6 +78,8 @@ | |||
</navigator> | |||
<view wx:if="{{!canIUse}}" class='buy' data-flag="parkVendor1" bindtap='gotoCarMini'>立即支付</view> | |||
</view> | |||
<view class="buy-view" wx:if="{{stopFees.orderId&&stopFees.remainingFee>0&&parkVendor!=1&&parkVendor!=2&&parkVendor!=3&&parkVendor!=4&&parkVendor!=5&&extraDataFlag=='{}'}}"> | |||
<navigator bindfail="bindfail" path="{{generalPayPath}}" wx:if="{{canIUse}}" class='buy' target="miniProgram" open-type="navigate" app-id="{{generalAppId}}" version="{{carMiniVersion}}"> | |||
立即支付 | |||
@@ -1,4 +1,4 @@ | |||
const navigationBarHeight = (getApp().statusBarHeight + 44)+"px" | |||
const navigationBarHeight = (getApp().statusBarHeight + 44) + "px" | |||
const Http = require("../utils/HttpBasics"); | |||
const imgurl = require("../utils/imgurl"); | |||
const config = require("../config/config"); | |||
@@ -11,20 +11,49 @@ Page({ | |||
data: { | |||
navigationBarHeight, | |||
lists: [], | |||
merchantVoList:[], | |||
merchantVoList: [], | |||
indexId: 0, | |||
businessId:0, | |||
windowHeight:"", | |||
page:1, | |||
isFirstPage:false, | |||
isLastPage:false, | |||
businessId: 0, | |||
windowHeight: "", | |||
page: 1, | |||
isFirstPage: false, | |||
isLastPage: false, | |||
teljpgUrl: imgurl.teljpg.url, | |||
map: imgurl.map.url,//商场地图 | |||
map: imgurl.map.url, //商场地图 | |||
mapUrl: '/pages/marketAtlas/marketAtlas', //跳转地图的路径 | |||
}, | |||
getFemgMap() { //判断时候对接封了地图 | |||
Http.get({ | |||
url: config.api.ifFengMap | |||
}).then(res => { | |||
if (res.data) { // | |||
let initMpa = { | |||
appName: res.data.appName, | |||
key: res.data.appKey, | |||
defaultThemeName: res.data.themeId, | |||
tenantId: res.data.tenantId, | |||
mapId: res.data.mapId | |||
} | |||
console.log(initMpa, "initMpa") | |||
this.setData({ | |||
mapUrl: `/pages2/fengMap/fengMap?initMap=${JSON.stringify(initMpa)}` | |||
}) | |||
} else { | |||
this.setData({ | |||
mapUrl: "/pages/marketAtlas/marketAtlas" | |||
}) | |||
} | |||
}).catch(err => { | |||
this.setData({ | |||
mapUrl: "/pages/marketAtlas/marketAtlas" | |||
}) | |||
}) | |||
}, | |||
//跳转到地图 | |||
goMap(){ | |||
goMap() { | |||
wx.navigateTo({ | |||
url: '/pages/marketAtlas/marketAtlas', | |||
url: this.data.mapUrl, | |||
}) | |||
}, | |||
// 左侧点击事件 | |||
@@ -36,11 +65,11 @@ Page({ | |||
businessId: index | |||
}); | |||
that.setData({ | |||
page:1 | |||
page: 1 | |||
}) | |||
that.getList(1, that.data.businessId); | |||
}, | |||
goSearchBar(){ | |||
goSearchBar() { | |||
wx.navigateTo({ | |||
url: '/pages/searchbar/searchbar', | |||
}) | |||
@@ -48,7 +77,7 @@ Page({ | |||
/** | |||
* 跳转到门店列表的详情页面 | |||
*/ | |||
gotoDetail(e){ | |||
gotoDetail(e) { | |||
wx.navigateTo({ | |||
url: `/pages/index/searchbar/detail/index?id=${e.currentTarget.dataset.id}` | |||
}) | |||
@@ -56,7 +85,7 @@ Page({ | |||
/** | |||
* 生命周期函数--监听页面加载 | |||
*/ | |||
onLoad: function (options) { | |||
onLoad: function(options) { | |||
let that = this; | |||
that.getBussiness(); | |||
that.getList(1, 0); | |||
@@ -64,7 +93,8 @@ Page({ | |||
title: '加载中...', | |||
}) | |||
}, | |||
onShow(){ | |||
onShow() { | |||
this.getFemgMap() | |||
let that = this; | |||
if (typeof this.getTabBar === 'function' && | |||
that.getTabBar()) { | |||
@@ -73,43 +103,47 @@ Page({ | |||
}) | |||
}; | |||
wx.getSystemInfo({ | |||
success: function (res) { | |||
success: function(res) { | |||
that.setData({ | |||
windowHeight: res.windowHeight | |||
windowHeight: res.windowHeight | |||
}) | |||
}, | |||
}) | |||
}, | |||
getBussiness:function(){ | |||
getBussiness: function() { | |||
let that = this; | |||
Http.get({ | |||
url: config.api.businessList, | |||
data:{ | |||
filter:1 | |||
} | |||
}).then(res => { | |||
that.setData({ | |||
lists: [{ id: 0, title: "全部", type: 1 }].concat(res.data) | |||
}); | |||
}) | |||
.catch(err => { | |||
wx.showToast({ | |||
title: err.errMsg, | |||
icon: 'none', | |||
duration: 2000, | |||
mask: false | |||
}); | |||
}) | |||
url: config.api.businessList, | |||
data: { | |||
filter: 1 | |||
} | |||
}).then(res => { | |||
that.setData({ | |||
lists: [{ | |||
id: 0, | |||
title: "全部", | |||
type: 1 | |||
}].concat(res.data) | |||
}); | |||
}) | |||
.catch(err => { | |||
wx.showToast({ | |||
title: err.errMsg, | |||
icon: 'none', | |||
duration: 2000, | |||
mask: false | |||
}); | |||
}) | |||
}, | |||
getList: function (page, businessId) { | |||
getList: function(page, businessId) { | |||
let that = this; | |||
let data; | |||
if(businessId == 0){ | |||
if (businessId == 0) { | |||
data = { | |||
pageNum: page, | |||
pageSize: 8 | |||
} | |||
}else{ | |||
} else { | |||
data = { | |||
pageNum: page, | |||
pageSize: 8, | |||
@@ -117,25 +151,25 @@ Page({ | |||
} | |||
} | |||
Http.get({ | |||
url: config.api.merchantList, | |||
data: data | |||
}).then(res => { | |||
wx.hideLoading(); | |||
if (page == 1) { | |||
url: config.api.merchantList, | |||
data: data | |||
}).then(res => { | |||
wx.hideLoading(); | |||
if (page == 1) { | |||
that.setData({ | |||
merchantVoList: [], | |||
}) | |||
} | |||
var tmpArr = that.data.merchantVoList; | |||
tmpArr.push.apply(tmpArr, res.data.list); | |||
// console.log(tmpArr) | |||
that.setData({ | |||
merchantVoList: [], | |||
merchantVoList: tmpArr, | |||
isFirstPage: res.data.isFirstPage, | |||
isLastPage: res.data.isLastPage | |||
}) | |||
} | |||
var tmpArr = that.data.merchantVoList; | |||
tmpArr.push.apply(tmpArr, res.data.list); | |||
// console.log(tmpArr) | |||
that.setData({ | |||
merchantVoList: tmpArr, | |||
isFirstPage: res.data.isFirstPage, | |||
isLastPage: res.data.isLastPage | |||
// console.log(that.data.merchantVoList) | |||
}) | |||
// console.log(that.data.merchantVoList) | |||
}) | |||
.catch(err => { | |||
wx.hideLoading(); | |||
wx.showToast({ | |||
@@ -146,7 +180,7 @@ Page({ | |||
}); | |||
}) | |||
}, | |||
phone: function (e) { | |||
phone: function(e) { | |||
let that = this; | |||
if (e.currentTarget.dataset.merchantlinkphone) { | |||
wx.makePhoneCall({ | |||
@@ -157,7 +191,7 @@ Page({ | |||
/** | |||
* 页面上拉触底事件的处理函数 | |||
*/ | |||
onReachBottom: function () { | |||
onReachBottom: function() { | |||
let that = this; | |||
that.data.page++; | |||
that.setData({ | |||
@@ -166,8 +200,8 @@ Page({ | |||
console.log(that.data.page); | |||
// 如果是最后一页 | |||
//就不发送请求 | |||
if (!that.data.isLastPage || that.data.isFirstPage && that.data.isLastPage){ | |||
if (!that.data.isLastPage || that.data.isFirstPage && that.data.isLastPage) { | |||
that.getList(that.data.page, that.data.businessId); | |||
} | |||
} | |||
}) | |||
}) |
@@ -13,6 +13,7 @@ Page({ | |||
tierFalg:0,//楼层标识 | |||
dataLsit:[],//楼层信息 | |||
tmpePicture:'',//零时存放 图片 | |||
url:"", | |||
}, | |||
lookimg(){ | |||
app.globalData.previewFlag = true | |||
@@ -21,6 +22,7 @@ Page({ | |||
urls: [this.data.tmpePicture] // 需要预览的图片http链接列表 | |||
}) | |||
}, | |||
setFalgFloor(e){//设置选中楼层 | |||
let index = e.currentTarget.dataset.index | |||
this.setData({ | |||
@@ -88,6 +90,10 @@ Page({ | |||
*/ | |||
onLoad: function (options) { | |||
this.getStoreMap() | |||
this.setData({ | |||
url: config.url +'/wapmaphtml/index.html' | |||
}) | |||
console.log(this.data.url,"url") | |||
}, | |||
/** | |||
@@ -2,24 +2,25 @@ | |||
</navbar> | |||
<view style="height:{{navigationBarHeight}} "></view> | |||
<view class="Box"> | |||
<view class="le_box"> | |||
<view class="{{tierFalg==index?'floor_a':'floor'}}" wx:for="{{dataLsit[falgFloor].floors}}" wx:key="index" bindtap="setTierFalg" data-index="{{index}}"> | |||
<text class="text">{{item.floorName}}</text> | |||
<!-- <text class="active" wx:if="{{tierFalg==index}}"></text> --> | |||
</view> | |||
<view class="area"> | |||
<view class="{{falgFloor==index?'areaItemActivity':'areaItem'}}" wx:for="{{dataLsit}}" wx:key="index" bindtap="setFalgFloor" data-index="{{index}}">{{item.buildingName}}</view> | |||
<!-- <view class="areaItem">B座</view> --> | |||
</view> | |||
<view class="Box" > | |||
<view class="le_box"> | |||
<view class="{{tierFalg==index?'floor_a':'floor'}}" wx:for="{{dataLsit[falgFloor].floors}}" wx:key="index" bindtap="setTierFalg" data-index="{{index}}"> | |||
<text class="text">{{item.floorName}}</text> | |||
<!-- <text class="active" wx:if="{{tierFalg==index}}"></text> --> | |||
</view> | |||
<view class="area"> | |||
<view class="{{falgFloor==index?'areaItemActivity':'areaItem'}}" wx:for="{{dataLsit}}" wx:key="index" bindtap="setFalgFloor" data-index="{{index}}">{{item.buildingName}}</view> | |||
<!-- <view class="areaItem">B座</view> --> | |||
</view> | |||
</view> | |||
<view class="dt_box"> | |||
<view class="ri_box"> | |||
<image mode="widthFix" class="dt_2_img" src="{{tmpePicture}}" wx:if="{{tmpePicture!=''}}" bindtap="lookimg" bindload="imgload"></image> | |||
<!-- <image class="dt_2_img_w_H" src="{{tmpePicture}}" wx:if="{{tmpePicture!=''}}" bindtap="lookimg" bindload="imgload" wx:if="{{img_W_H_flag}}"></image> --> | |||
<!-- <image class="dt_2_img_w_H" src="{{tmpePicture}}" wx:if="{{tmpePicture!=''}}" bindtap="lookimg" bindload="imgload" wx:if="{{img_W_H_flag}}"></image> --> | |||
<view class="noIMg" wx:if="{{tmpePicture==''}}">该商场暂未配置</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- <web-view wx:if="{{ifFengMap}}" src="{{url}}" ></web-view> --> |
@@ -3,7 +3,7 @@ | |||
<view class='contain' > | |||
<view class='content'> | |||
<view class="tit"><view class='Q'>Q</view><view class='right'>我怎么添加车牌呢?</view></view> | |||
<view class='description'>首次使用“停车缴费”的用户需绑定车牌号,即可为车辆进行缴费 。您可以最多添加三张车牌。</view> | |||
<view class='description'>首次使用“停车缴费”的用户需绑定车牌号,即可为车辆进行缴费 。您可以最多添加四张车牌。</view> | |||
</view> | |||
<view class='content'> | |||
<view class="tit"><view class='Q'>Q</view><view class='right'>有哪些方式可以支持停车费?</view></view> | |||
@@ -31,7 +31,7 @@ | |||
</view> | |||
<view class='content'> | |||
<view class="tit"><view class='Q'>Q</view><view class='right'>我为什么绑定(解绑)不了车牌?</view></view> | |||
<view class='description'>每位用户最多可同时绑定三张车牌。当您绑定的车牌在停车场内是无法解绑车牌的,支付离场后才可以进行变更哦!</view> | |||
<view class='description'>每位用户最多可同时绑定四张车牌。当您绑定的车牌在停车场内是无法解绑车牌的,支付离场后才可以进行变更哦!</view> | |||
</view> | |||
<view class='content'> | |||
<view class="tit"><view class='Q'>Q</view><view class='right'>每个用户可以绑定几个车牌?</view></view> | |||
@@ -0,0 +1,28 @@ | |||
// component/FMAllLayerControl/FMAllLayerControl.js | |||
Component({ | |||
/** | |||
* 组件的属性列表 | |||
*/ | |||
properties: { | |||
allLayer: { | |||
type: Boolean, | |||
} | |||
}, | |||
/** | |||
* 组件的初始数据 | |||
*/ | |||
data: { | |||
btnUrl: './image/', | |||
}, | |||
/** | |||
* 组件的方法列表 | |||
*/ | |||
methods: { | |||
// 切换单多层 | |||
switchLayers: function () { | |||
this.triggerEvent('switchLayers'); | |||
}, | |||
} | |||
}) |
@@ -0,0 +1,4 @@ | |||
{ | |||
"component": true, | |||
"usingComponents": {} | |||
} |
@@ -0,0 +1,6 @@ | |||
<!-- component/FMAllLayerControl/FMAllLayerControl.wxml --> | |||
<view class="fm-control-layer"> | |||
<cover-view style="padding: 20rpx;cursor: pointer;" bindtap="switchLayers"> | |||
<cover-image src="{{btnUrl}}{{allLayer ? 'layers' :'layer'}}.png" style="width: 44rpx; height: 44rpx;"></cover-image> | |||
</cover-view> | |||
</view> |
@@ -0,0 +1,11 @@ | |||
/* component/FMAllLayerControl/FMAllLayerControl.wxss */ | |||
.fm-control-layer { | |||
width: 84rpx; | |||
position: absolute; | |||
background-color: white; | |||
box-shadow: rgba(0, 0, 0, 0.3) 4rpx 4rpx 6rpx; | |||
border-radius: 4rpx; | |||
top: 328rpx; | |||
left: 40rpx; | |||
z-index: 1; | |||
} |
@@ -0,0 +1,101 @@ | |||
// component/FMScrollGroupsControl/FMScrollGroupsControl.js | |||
Component({ | |||
/** | |||
* 组件的属性列表 | |||
*/ | |||
properties: { | |||
//楼层数组 | |||
groupIDs: { | |||
type: Array, | |||
value: null | |||
}, | |||
//视野内显示多少个按钮,可手触上下滚动 | |||
showBtnCount: { | |||
type: Number, | |||
value: 0, | |||
observer: function (newVal, oldVal) { | |||
console.log('height----', this.properties.showBtnCount * 84); | |||
if (this.properties.showBtnCount < this.properties.groupIDs.length) { | |||
this.setData({ | |||
needArrow: true, | |||
scrollHeight: this.properties.showBtnCount * 84 | |||
}) | |||
} | |||
} | |||
}, | |||
//当前的聚焦楼层id | |||
focusGroupID: { | |||
type: Number, | |||
value: 1, | |||
observer: function (newVal, oldVal) { | |||
console.log("focusGroupID", this.properties.focusGroupID) | |||
this._setFocusGroupName(this.properties.focusGroupID); | |||
} | |||
}, | |||
// 展开控件 | |||
expand: { | |||
type: Boolean, | |||
value: true, | |||
observer: function (newVal, oldVal) { | |||
this.setData({ | |||
isShowList: newVal, | |||
}) | |||
} | |||
}, | |||
// 是否允许展开控件操作 | |||
enableExpand: { | |||
type: Boolean, | |||
value: true, | |||
}, | |||
}, | |||
/** | |||
* 组件的初始数据 | |||
*/ | |||
data: { | |||
scrollHeight: 250, | |||
focusGroupName: "F1", | |||
isShowList: true, | |||
}, | |||
/** | |||
* 组件的方法列表 | |||
*/ | |||
methods: { | |||
/** | |||
* 切换聚焦楼层 | |||
* @param {*} e | |||
*/ | |||
switchGroup: function (e) { | |||
let focusId = e.currentTarget.dataset.gid; | |||
this.triggerEvent('switchGroup', focusId); | |||
this._setFocusGroupName(focusId); | |||
}, | |||
/** | |||
* 收起下拉压缩 | |||
*/ | |||
folderGroupBtns: function () { | |||
if (!this.properties.enableExpand) return; | |||
this.setData({ | |||
isShowList: !this.data.isShowList | |||
}) | |||
}, | |||
/** | |||
* 设置聚焦楼层的楼层名称 | |||
* @param {*} gid 聚焦楼层id | |||
*/ | |||
_setFocusGroupName: function (gid) { | |||
let group = this.properties.groupIDs.find((gd) => gd.gid === gid); | |||
if (group) { | |||
this.setData({ | |||
focusGroupName: group.gname | |||
}) | |||
console.log(group.gname); | |||
} | |||
} | |||
} | |||
}) |
@@ -0,0 +1,4 @@ | |||
{ | |||
"component": true, | |||
"usingComponents": {} | |||
} |
@@ -0,0 +1,14 @@ | |||
<!-- component/FMScrollGroupsControl/FMScrollGroupsControl.wxml --> | |||
<view class="fm-control-groups-btn" style="width: 84rpx; height: 84rpx; position: absolute; background-color: white; box-shadow: rgba(0, 0, 0, 0.3) 4rpx 4rpx 6rpx; border-radius: 4rpx; text-align: center; cursor: pointer; font-size: 0.8em; font-weight: bold; text-transform: uppercase; line-height: 84rpx; color: rgb(30, 130, 250);" bindtap="folderGroupBtns"> | |||
{{focusGroupName}} | |||
</view> | |||
<scroll-view class="fm-layer-list fm-groups" scroll-y="true" style="overflow: hidden; height: {{scrollHeight}}rpx;" scroll-into-view="gid_{{focusGroupID}}" scroll-with-animation="true" wx:if="{{isShowList === true}}"> | |||
<view wx:for="{{groupIDs}}" wx:key="key"> | |||
<view id="gid_{{item.gid}}" style="display: inline-block; text-align: center; width: 84rpx; height: 84rpx; line-height: 84rpx; margin: 0px; cursor: pointer; font-size: 0.8em; font-weight: bold; color: rgb(102, 102, 102);" bindtap="switchGroup" data-gid="{{item.gid}}"> | |||
<view style="color:{{focusGroupID == item.gid ? 'rgb(30, 130, 250)':'rgb(102, 102, 102)'}}; text-transform: uppercase;"> | |||
{{item.gname}} | |||
</view> | |||
</view> | |||
<view wx:if="{{item.gid !== 1}}" style="height: 1px; border-top: 1px solid rgba(153, 153, 153, 0.45); border-right: none; border-bottom: none; border-left: none; border-image: initial; width: 60%; margin: 0px 20%;"></view> | |||
</view> | |||
</scroll-view> |
@@ -0,0 +1,23 @@ | |||
/* component/FMScrollGroupsControl/FMScrollGroupsControl.wxss */ | |||
.fm-control-groups-btn { | |||
width: 84rpx; | |||
height: 84px; | |||
position: absolute; | |||
background-color: white; | |||
box-shadow: rgba(0, 0, 0, 0.3) 4rpx 4rpx 6rpx; | |||
border-radius: 4rpx; | |||
top: 40rpx; | |||
left: 40rpx; | |||
z-index: 1; | |||
} | |||
.fm-layer-list { | |||
width: 84rpx; | |||
position: absolute; | |||
background-color: white; | |||
box-shadow: rgba(0, 0, 0, 0.3) 4rpx 4rpx 6rpx; | |||
border-radius: 4rpx; | |||
top: 184rpx; | |||
left: 40rpx; | |||
z-index: 1; | |||
} |
@@ -0,0 +1,112 @@ | |||
// component/FMScrollGroupsControl/FMScrollGroupsControl.js | |||
Component({ | |||
/** | |||
* 组件的属性列表 | |||
*/ | |||
properties: { | |||
//楼层数组 | |||
groupIDs: { | |||
type: Array, | |||
value: null | |||
}, | |||
//视野内显示多少个按钮,可手触上下滚动 | |||
showBtnCount: { | |||
type: Number, | |||
value: 0, | |||
observer: function (newVal, oldVal) { | |||
// console.log('height----', this.properties.showBtnCount * 84); | |||
if (this.properties.showBtnCount < this.properties.groupIDs.length) { | |||
this.setData({ | |||
needArrow: true, | |||
scrollHeight: this.properties.showBtnCount * 84 | |||
}) | |||
} | |||
} | |||
}, | |||
//当前的聚焦楼层id | |||
focusGroupID: { | |||
type: Number, | |||
value: 1, | |||
observer: function (newVal, oldVal) { | |||
console.log("focusGroupID") | |||
this._setArrowBtnStatus(this.properties.focusGroupID); | |||
} | |||
}, | |||
allLayer: { | |||
type: Boolean | |||
} | |||
}, | |||
/** | |||
* 组件的初始数据 | |||
*/ | |||
data: { | |||
btnUrl: './image/', | |||
scrollHeight: 250, | |||
isTop: false, | |||
isBottom: true, | |||
needArrow: false | |||
}, | |||
/** | |||
* 组件的方法列表 | |||
*/ | |||
methods: { | |||
/** | |||
* 切换聚焦楼层 | |||
* @param {*} e | |||
*/ | |||
switchGroup: function (e) { | |||
let focusId = e.currentTarget.dataset.gid; | |||
this.triggerEvent('switchGroup', focusId); | |||
this._setArrowBtnStatus(focusId); | |||
}, | |||
/** | |||
* 设置上下箭头按钮的状态 | |||
* @param {*} focusId 聚焦楼层id | |||
*/ | |||
_setArrowBtnStatus: function (focusId) { | |||
if (focusId === 1) { | |||
this.setData({ | |||
isBottom: true | |||
}) | |||
} else if (focusId === this.properties.groupIDs.length - 1) { | |||
this.setData({ | |||
isTop: true | |||
}) | |||
} else { | |||
this.setData({ | |||
isTop: false, | |||
isBottom: false | |||
}) | |||
} | |||
}, | |||
/** | |||
* 切换单层多层 | |||
*/ | |||
switchLayers: function () { | |||
this.triggerEvent('switchLayers'); | |||
}, | |||
/** | |||
* 向上切换楼层 | |||
*/ | |||
goTop: function () { | |||
let gid = this.properties.focusGroupID + 1; | |||
this.triggerEvent('switchGroup', gid); | |||
this._setArrowBtnStatus(gid); | |||
}, | |||
/** | |||
* 向下切换楼层 | |||
*/ | |||
goBottom: function () { | |||
let gid = this.properties.focusGroupID - 1; | |||
this.triggerEvent('switchGroup', gid); | |||
this._setArrowBtnStatus(gid); | |||
} | |||
} | |||
}) |
@@ -0,0 +1,4 @@ | |||
{ | |||
"component": true, | |||
"usingComponents": {} | |||
} |
@@ -0,0 +1,25 @@ | |||
<!-- component/FMScrollGroupsControl/FMScrollGroupsControl.wxml --> | |||
<view class='fm-control-groups'> | |||
<cover-view class="fm-control-groups-layer fm-btn-layer" style="padding: 20rpx; cursor: pointer;" bindtap="switchLayers"> | |||
<cover-image wx:if="{{!allLayer}}" src="{{btnUrl}}layer.png" style="width: 44rpx; height: 44rpx;"></cover-image> | |||
<cover-image wx:else src="{{btnUrl}}layers.png" style="width: 44rpx; height: 44rpx;"></cover-image> | |||
</cover-view> | |||
<cover-view wx:if="{{needArrow}}" bindtap="goTop" class="scroll" style="height: 18px; cursor: pointer;"> | |||
<cover-image wx:if="{{!isTop}}" src="{{btnUrl}}arrow1.png" style="width: 20rpx; height: 12rpx; margin-left:32rpx"></cover-image> | |||
<cover-image wx:else src="{{btnUrl}}arrow3.png" style="width: 20rpx; height: 12rpx; margin-left:32rpx"></cover-image> | |||
</cover-view> | |||
<scroll-view class="fm-layer-list" scroll-y="true" style="overflow: hidden; height: {{scrollHeight}}rpx;" scroll-into-view="gid_{{focusGroupID}}" scroll-with-animation="true"> | |||
<view wx:for="{{groupIDs}}" wx:key="key"> | |||
<view id="gid_{{item.gid}}" style="display: inline-block; text-align: center; width: 84rpx; height: 84rpx; line-height: 84rpx; margin: 0px; cursor: pointer; font-size: 0.8em; font-weight: bold; color: rgb(102, 102, 102);" bindtap="switchGroup" data-gid="{{item.gid}}"> | |||
<view style="color:{{focusGroupID == item.gid ? 'rgb(30, 130, 250)':'rgb(102, 102, 102)'}};text-transform: uppercase;"> | |||
{{item.gname}} | |||
</view> | |||
</view> | |||
<view wx:if="{{item.gid !== 1}}" style="height: 1px; border-top: 1px solid rgba(153, 153, 153, 0.45); border-right: none; border-bottom: none; border-left: none; border-image: initial; width: 60%; margin: 0px 20%;"></view> | |||
</view> | |||
</scroll-view> | |||
<cover-view wx:if="{{needArrow}}" class="scroll" style="height: 18px; cursor: pointer;"> | |||
<cover-image wx:if="{{!isBottom}}" bindtap="goBottom" src="{{btnUrl}}arrow2.png" style="width: 20rpx; height: 12rpx; margin-left:32rpx"></cover-image> | |||
<cover-image wx:else src="{{btnUrl}}arrow4.png" style="width: 20rpx; height: 12rpx; margin-left:32rpx"></cover-image> | |||
</cover-view> | |||
</view> |
@@ -0,0 +1,11 @@ | |||
/* component/FMScrollGroupsControl/FMScrollGroupsControl.wxss */ | |||
.fm-control-groups { | |||
width: 84rpx; | |||
position: absolute; | |||
background-color: white; | |||
box-shadow: rgba(0, 0, 0, 0.3) 4rpx 4rpx 6rpx; | |||
border-radius: 4rpx; | |||
/* top: 40rpx; */ | |||
bottom: 350rpx; | |||
right: 40rpx; | |||
} |
@@ -0,0 +1,38 @@ | |||
// component/FMViewModeControl/FMViewModeControl.js | |||
Component({ | |||
/** | |||
* 组件的属性列表 | |||
*/ | |||
properties: { | |||
// 2、3D状态 | |||
is3D: { | |||
type: Boolean, | |||
value: true, | |||
observer: function (newVal, oldVal) { | |||
// console.log("is allLayer") | |||
this.setData({ | |||
viewMode: newVal ? '3D' : '2D' | |||
}) | |||
} | |||
} | |||
}, | |||
/** | |||
* 组件的初始数据 | |||
*/ | |||
data: { | |||
btnUrl: './image/', | |||
viewMode: '3D', | |||
}, | |||
/** | |||
* 组件的方法列表 | |||
*/ | |||
methods: { | |||
// 切换2、3D状态 | |||
changeMode() { | |||
this.triggerEvent('changeMode'); | |||
} | |||
} | |||
}) |
@@ -0,0 +1,4 @@ | |||
{ | |||
"component": true, | |||
"usingComponents": {} | |||
} |
@@ -0,0 +1,6 @@ | |||
<!-- component/FMViewModeControl/FMViewModeControl.wxml --> | |||
<view class="fm-control-mode"> | |||
<cover-view style="cursor: pointer;" bindtap="changeMode"> | |||
<cover-image src="{{btnUrl}}{{viewMode}}.png" style="width: 76rpx; height: 76rpx;margin:4rpx auto;"></cover-image> | |||
</cover-view> | |||
</view> |
@@ -0,0 +1,12 @@ | |||
/* component/FMViewModeControl/FMViewModeControl.wxss */ | |||
.fm-control-mode { | |||
width: 84rpx; | |||
height: 84rpx; | |||
position: absolute; | |||
background-color: white; | |||
box-shadow: rgba(0, 0, 0, 0.3) 4rpx 4rpx 6rpx; | |||
border-radius: 4rpx; | |||
bottom: 700rpx; | |||
right: 40rpx; | |||
z-index: 1; | |||
} |
@@ -0,0 +1,232 @@ | |||
// pages/FMController/index.js | |||
import { fengmap } from '../js/fengmap.miniprogram.min.js'; | |||
const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px' | |||
const Http = require("../../utils/HttpBasics"); | |||
const config = require("../../config/config"); | |||
let app = getApp(); | |||
Page({ | |||
/** | |||
* 页面的初始数据 | |||
*/ | |||
data: { | |||
mapLoaded: false, //地图是否加载完成 | |||
focusGroupID: 1, | |||
mapGroupIDs: [], | |||
is3D: true, | |||
isAllLayer: false, | |||
initMap:{}, | |||
}, | |||
// 定义全局map变量 | |||
fmap: null, | |||
/** | |||
* 生命周期函数--监听页面加载 | |||
*/ | |||
onLoad: function (options) { | |||
this.setData({ | |||
initMap: JSON.parse(options.initMap) | |||
}) | |||
}, | |||
/** | |||
* 生命周期函数--监听页面初次渲染完成 | |||
*/ | |||
onReady() { | |||
console.log(this.data.initMap) | |||
// 获取canvas | |||
wx.createSelectorQuery().select('#fengMap').node().exec((res) => { | |||
const canvas = res[0].node; | |||
this.canvas = canvas | |||
wx.createSelectorQuery().select("#temp").node().exec((tempRes) => { | |||
const tmpCanvas = tempRes[0].node; | |||
const fmapID = this.data.initMap.mapId; | |||
const mapOptions = { | |||
//必要,地图容器 | |||
canvas: canvas, | |||
// 必要,2d画布 | |||
tempCanvas: tmpCanvas, | |||
// 地图默认旋转角度 | |||
defaultControlsPose: 90, | |||
// 地图默认倾斜角 | |||
defaultTiltAngle: 60, | |||
// 初始二维/三维状态,默认3D显示 | |||
defaultViewMode: this.data.is3D ? fengmap.FMViewMode.MODE_3D : fengmap.FMViewMode.MODE_2D, | |||
// 设置初始指南针的偏移量 | |||
compassOffset: [40, 40], | |||
// 设置指南针大小 | |||
compassSize: 48, | |||
//必要,地图应用名称,通过蜂鸟云后台创建 | |||
appName: this.data.initMap.appName, | |||
//必要,地图应用密钥,通过蜂鸟云后台获取 | |||
key: this.data.initMap.key, | |||
mapServerURL: config.url + `/fengniaoMapfile/${this.data.initMap.tenantId}/${this.data.initMap.mapId}`, | |||
mapThemeURL: config.url + `/fengniaoMapfile/${this.data.initMap.tenantId}/theme/`, | |||
defaultThemeName: this.data.initMap.defaultThemeName, | |||
defaultMapScaleLevel:19, | |||
// compassOffset:[28,100] | |||
}; | |||
console.log(mapOptions,"mapOptions") | |||
//初始化地图对象 | |||
this.fmap = new fengmap.FMMap(mapOptions); | |||
//打开Fengmap服务器的地图数据和主题 | |||
this.fmap.openMapById(fmapID, function (error) { | |||
//打印错误信息 | |||
// console.log(error); | |||
}); | |||
//地图加载完成事件 | |||
this.fmap.on('loadComplete', () => { | |||
console.log('地图加载完成'); | |||
this.setData({ | |||
mapLoaded: true | |||
}) | |||
// 设置楼层数据 | |||
this.loadScrollFloorCtrl(); | |||
// 显示指北针 | |||
this.showCompass(); | |||
}) | |||
}) | |||
}) | |||
}, | |||
/** | |||
* 生命周期函数--监听页面卸载 | |||
*/ | |||
onUnload: function () { | |||
if (this.fmap) { | |||
this.fmap.dispose(); | |||
this.fmap = null; | |||
} | |||
}, | |||
// 手指触摸动作开始 | |||
touchStart(e) { | |||
this.canvas.dispatchTouchEvent({ | |||
...e, | |||
type: 'touchstart' | |||
}) | |||
}, | |||
// 手指触摸后移动 | |||
touchMove(e) { | |||
this.canvas.dispatchTouchEvent({ | |||
...e, | |||
type: 'touchmove' | |||
}) | |||
}, | |||
// 手指触摸动作结束 | |||
touchEnd(e) { | |||
this.canvas.dispatchTouchEvent({ | |||
...e, | |||
type: 'touchend' | |||
}) | |||
}, | |||
/** | |||
* 显示指北针 | |||
*/ | |||
showCompass() { | |||
/** | |||
* 显示指北针,设置背景色需要在加载指北针之前设置 | |||
* */ | |||
// this.fmap.compass.setBgImage('../../images/compass_bg.png'); //设置背景图片 | |||
// this.fmap.compass.setFgImage('../../images/compass_fg.png'); //设置前景图片 | |||
this.fmap.showCompass = true; | |||
// 点击指北针事件, 使角度归0 | |||
this.fmap.on('mapClickCompass', () => { | |||
this.fmap.rotateTo({ | |||
//设置角度 | |||
to: 0, | |||
//动画持续时间,默认为。3秒 | |||
duration: 0.3, | |||
callback: function () { //回调函数 | |||
console.log('rotateTo complete!'); | |||
} | |||
}) | |||
}); | |||
}, | |||
/** | |||
* 2D/3D切换 | |||
*/ | |||
changeMode() { | |||
if (this.fmap) { | |||
if (!this.data.is3D) { | |||
// 切换地图为三维模式 | |||
this.fmap.viewMode = fengmap.FMViewMode.MODE_3D; | |||
} else { | |||
// 切换地图为二维模式 | |||
this.fmap.viewMode = fengmap.FMViewMode.MODE_2D; | |||
} | |||
} | |||
//更改状态 | |||
this.setData({ | |||
is3D: !this.data.is3D | |||
}) | |||
}, | |||
/////////////////////////////////////////////// | |||
// 楼层控件回调事件(start) | |||
////////////////////////////////////////////// | |||
// 设置楼层数据 | |||
loadScrollFloorCtrl: function () { | |||
// 获取楼层id | |||
let groupIDs = []; | |||
this.fmap.listGroups.map((ls) => { | |||
let obj = { | |||
alias: ls.alias, | |||
gid: ls.gid, | |||
gname: ls.gname | |||
} | |||
groupIDs.push(obj); | |||
return obj; | |||
}); | |||
this.setData({ | |||
mapGroupIDs: groupIDs.reverse(), | |||
focusGroupID: this.fmap.focusGroupID | |||
}) | |||
}, | |||
// 切换楼层 | |||
switchGroup(e) { | |||
if (this.fmap) { | |||
this.fmap.focusGroupID = e.detail; | |||
this.setData({ | |||
focusGroupID: e.detail | |||
}) | |||
} | |||
}, | |||
/** | |||
* 切换单、多层 | |||
* @param {*} e | |||
*/ | |||
switchLayers() { | |||
if (this.fmap) { | |||
if (!this.data.isAllLayer) { | |||
this.fmap.visibleGroupIDs = this.fmap.groupIDs; | |||
} else { | |||
this.fmap.visibleGroupIDs = [this.fmap.focusGroupID]; | |||
} | |||
} | |||
//更改状态 | |||
this.setData({ | |||
isAllLayer: !this.data.isAllLayer | |||
}) | |||
} | |||
/////////////////////////////////////////////// | |||
//楼层控件回调事件(end) | |||
////////////////////////////////////////////// | |||
}) |
@@ -0,0 +1,10 @@ | |||
{ | |||
"navigationBarTitleText": "UI控件", | |||
"usingComponents": { | |||
"FMScrollGroupsControl": "../component/FMScrollGroupsControl/FMScrollGroupsControl", | |||
"FMButtonGroupsControl": "../component/FMButtonGroupsControl/FMButtonGroupsControl", | |||
"FMViewModeControl": "../component/FMViewModeControl/FMViewModeControl", | |||
"FMAllLayerControl": "../component/FMAllLayerControl/FMAllLayerControl", | |||
"navbar": "../../components/navbar/navbar" | |||
} | |||
} |
@@ -0,0 +1,19 @@ | |||
<!-- pages/FMController/index.wxml --> | |||
<navbar home back text="商场地图"> | |||
</navbar> | |||
<view style="height:{{navigationBarHeight}} "></view> | |||
<view class="container"> | |||
<!-- 加载地图容器 --> | |||
<canvas type="webgl" id="fengMap" style="width: 100%; height: 100%;" disable-scroll bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"> | |||
<!-- 楼层控件一 滚动型楼层控件 --> | |||
<FMScrollGroupsControl id="scrollGroupsControl" wx:if="{{mapLoaded == true }}" focusGroupID="{{focusGroupID}}" groupIDs="{{mapGroupIDs}}" allLayer="{{isAllLayer}}" showBtnCount="3" bind:switchGroup="switchGroup" bind:switchLayers="switchLayers" /> | |||
<!-- 楼层控件二 按钮型楼层控件 --> | |||
<!-- <FMButtonGroupsControl id="buttonGroupsControl" wx:if="{{mapLoaded == true }}" focusGroupID="{{focusGroupID}}" groupIDs="{{mapGroupIDs}}" showBtnCount="3" bind:switchGroup="switchGroup" /> --> | |||
<!-- 2、3D控件 --> | |||
<FMViewModeControl wx:if="{{mapLoaded == true }}" is3D="{{is3D}}" bind:changeMode="changeMode" /> | |||
<!-- 单、多楼层控件 --> | |||
<!-- <FMAllLayerControl wx:if="{{mapLoaded == true }}" allLayer="{{isAllLayer}}" bind:switchLayers="switchLayers" /> --> | |||
</canvas> | |||
<!-- 2d画布 --> | |||
<canvas type="2d" id="temp"></canvas> | |||
</view> |
@@ -0,0 +1,13 @@ | |||
/* pages/FMController/index.wxss */ | |||
.container { | |||
height: 100vh; | |||
overflow: hidden; | |||
} | |||
#temp{ | |||
position: fixed; | |||
top:0; | |||
left: -100%; | |||
} | |||
page{ | |||
padding-bottom:0; | |||
} |
@@ -61,13 +61,6 @@ | |||
"miniprogram": { | |||
"current": -1, | |||
"list": [ | |||
{ | |||
"id": 0, | |||
"name": "签到", | |||
"pathName": "pages/activityCalendar/activityCalendar", | |||
"query": "", | |||
"scene": null | |||
}, | |||
{ | |||
"id": 1, | |||
"name": "直播列表", | |||
@@ -110,13 +103,6 @@ | |||
"query": "", | |||
"scene": null | |||
}, | |||
{ | |||
"id": -1, | |||
"name": "投书建议", | |||
"pathName": "pages/complaint/complaint", | |||
"query": "", | |||
"scene": null | |||
}, | |||
{ | |||
"id": 8, | |||
"name": "pages/questionnaire/questionnaireLsit/questionnaireLsit", | |||
@@ -128,8 +114,16 @@ | |||
"id": -1, | |||
"name": "index/index", | |||
"pathName": "index/index", | |||
"query": "", | |||
"scene": 1036, | |||
"referrerInfo": {} | |||
}, | |||
{ | |||
"id": 8, | |||
"name": "pages2/fengMap/fengMap", | |||
"pathName": "pages2/fengMap/fengMap", | |||
"query": "", | |||
"scene": null | |||
} | |||
] | |||
} | |||