Browse Source

【金茂地图初始化】

release
chenshengle 3 years ago
parent
commit
b5c7243cfd
41 changed files with 822 additions and 97 deletions
  1. +2
    -1
      app.json
  2. +2
    -0
      config/config.js
  3. +11
    -7
      index/index.wxml
  4. +3
    -1
      index/passCar.js
  5. +3
    -1
      index/passCar.wxml
  6. +92
    -58
      index/searchbar.js
  7. +6
    -0
      pages/marketAtlas/marketAtlas.js
  8. +14
    -13
      pages/marketAtlas/marketAtlas.wxml
  9. +2
    -2
      pages/ques/ques.wxml
  10. +28
    -0
      pages2/component/FMAllLayerControl/FMAllLayerControl.js
  11. +4
    -0
      pages2/component/FMAllLayerControl/FMAllLayerControl.json
  12. +6
    -0
      pages2/component/FMAllLayerControl/FMAllLayerControl.wxml
  13. +11
    -0
      pages2/component/FMAllLayerControl/FMAllLayerControl.wxss
  14. BIN
      pages2/component/FMAllLayerControl/image/layer.png
  15. BIN
      pages2/component/FMAllLayerControl/image/layers.png
  16. +101
    -0
      pages2/component/FMButtonGroupsControl/FMButtonGroupsControl.js
  17. +4
    -0
      pages2/component/FMButtonGroupsControl/FMButtonGroupsControl.json
  18. +14
    -0
      pages2/component/FMButtonGroupsControl/FMButtonGroupsControl.wxml
  19. +23
    -0
      pages2/component/FMButtonGroupsControl/FMButtonGroupsControl.wxss
  20. +112
    -0
      pages2/component/FMScrollGroupsControl/FMScrollGroupsControl.js
  21. +4
    -0
      pages2/component/FMScrollGroupsControl/FMScrollGroupsControl.json
  22. +25
    -0
      pages2/component/FMScrollGroupsControl/FMScrollGroupsControl.wxml
  23. +11
    -0
      pages2/component/FMScrollGroupsControl/FMScrollGroupsControl.wxss
  24. BIN
      pages2/component/FMScrollGroupsControl/image/arrow1.png
  25. BIN
      pages2/component/FMScrollGroupsControl/image/arrow2.png
  26. BIN
      pages2/component/FMScrollGroupsControl/image/arrow3.png
  27. BIN
      pages2/component/FMScrollGroupsControl/image/arrow4.png
  28. BIN
      pages2/component/FMScrollGroupsControl/image/layer.png
  29. BIN
      pages2/component/FMScrollGroupsControl/image/layers.png
  30. +38
    -0
      pages2/component/FMViewModeControl/FMViewModeControl.js
  31. +4
    -0
      pages2/component/FMViewModeControl/FMViewModeControl.json
  32. +6
    -0
      pages2/component/FMViewModeControl/FMViewModeControl.wxml
  33. +12
    -0
      pages2/component/FMViewModeControl/FMViewModeControl.wxss
  34. BIN
      pages2/component/FMViewModeControl/image/2D.png
  35. BIN
      pages2/component/FMViewModeControl/image/3D.png
  36. +232
    -0
      pages2/fengMap/fengMap.js
  37. +10
    -0
      pages2/fengMap/fengMap.json
  38. +19
    -0
      pages2/fengMap/fengMap.wxml
  39. +13
    -0
      pages2/fengMap/fengMap.wxss
  40. +2
    -0
      pages2/js/fengmap.miniprogram.min.js
  41. +8
    -14
      project.config.json

+ 2
- 1
app.json View File

@@ -80,7 +80,8 @@
"name": "pages2", "name": "pages2",
"independent": false, "independent": false,
"pages": [ "pages": [
"live/livelist/index"
"live/livelist/index",
"fengMap/fengMap"
] ]
} }
], ],


+ 2
- 0
config/config.js View File

@@ -355,6 +355,8 @@ var config = {
getRoomList: "/live/roomList", getRoomList: "/live/roomList",
//商城地图 //商城地图
getStoreMap:"/wxMallBuilding/getbuildingfloorlist", getStoreMap:"/wxMallBuilding/getbuildingfloorlist",
//判断有没有蜂鸟地图
ifFengMap:'/fengniaomap/getConfig',
//分享小程序二维码 //分享小程序二维码
getQrcodeFx:"/user/userinfoQrCode", getQrcodeFx:"/user/userinfoQrCode",
}, },


+ 11
- 7
index/index.wxml View File

@@ -52,11 +52,13 @@
<image src='{{typeLsit.sy_xfk.icon}}' mode='aspectFill'></image> <image src='{{typeLsit.sy_xfk.icon}}' mode='aspectFill'></image>
<view class="text">消费卡</view> <view class="text">消费卡</view>
</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>

<!-- <view class='kjBox' bindtap='gotogame'> <!-- <view class='kjBox' bindtap='gotogame'>
<image src='{{xingyun}}' mode='aspectFill' bindtap=''></image> <image src='{{xingyun}}' mode='aspectFill' bindtap=''></image>
<view>游戏频道</view> <view>游戏频道</view>
@@ -73,10 +75,12 @@
<image src='{{typeLsit.sy_jfsc.icon}}' mode='aspectFill'></image> <image src='{{typeLsit.sy_jfsc.icon}}' mode='aspectFill'></image>
<view class="text">积分商城</view> <view class="text">积分商城</view>
</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>
<view class="kjBox" wx:if="{{!liveFlag}}"></view>
</view> </view>
<!-- 频道 --> <!-- 频道 -->


+ 3
- 1
index/passCar.js View File

@@ -198,7 +198,7 @@ Page({
paySuccess: function () { paySuccess: function () {
wx.showModal({ wx.showModal({
title: '支付成功', title: '支付成功',
content: '请尽快离场',
content: '请15分钟内离场',
showCancel: false showCancel: false
}) })
}, },
@@ -209,9 +209,11 @@ Page({
}) })
}, },
bindfail: function (res) { bindfail: function (res) {
console.log(123)
console.log(res) console.log(res)
}, },
gotoCarMini: function (e) { gotoCarMini: function (e) {
console.log(478)
var that = this var that = this
// etcp parkVendor1 // etcp parkVendor1
// 泊链停车 parkVendor5 // 泊链停车 parkVendor5


+ 3
- 1
index/passCar.wxml View File

@@ -26,7 +26,7 @@
</view> </view>
<!-- <view class='coupon clearfix' bindtap='gotoquan' wx:if="{{couponList.length>0}}"> --> <!-- <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}}"> <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"> <view class="fr">
<text wx:if="{{quantitle}}">{{quantitle}}</text> <text wx:if="{{quantitle}}">{{quantitle}}</text>
<text wx:else>{{totalTicketNum}}张可用</text> <text wx:else>{{totalTicketNum}}张可用</text>
@@ -78,6 +78,8 @@
</navigator> </navigator>
<view wx:if="{{!canIUse}}" class='buy' data-flag="parkVendor1" bindtap='gotoCarMini'>立即支付</view> <view wx:if="{{!canIUse}}" class='buy' data-flag="parkVendor1" bindtap='gotoCarMini'>立即支付</view>
</view> </view>


<view class="buy-view" wx:if="{{stopFees.orderId&&stopFees.remainingFee>0&&parkVendor!=1&&parkVendor!=2&&parkVendor!=3&&parkVendor!=4&&parkVendor!=5&&extraDataFlag=='{}'}}"> <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}}"> <navigator bindfail="bindfail" path="{{generalPayPath}}" wx:if="{{canIUse}}" class='buy' target="miniProgram" open-type="navigate" app-id="{{generalAppId}}" version="{{carMiniVersion}}">
立即支付 立即支付


+ 92
- 58
index/searchbar.js View File

@@ -1,4 +1,4 @@
const navigationBarHeight = (getApp().statusBarHeight + 44)+"px"
const navigationBarHeight = (getApp().statusBarHeight + 44) + "px"
const Http = require("../utils/HttpBasics"); const Http = require("../utils/HttpBasics");
const imgurl = require("../utils/imgurl"); const imgurl = require("../utils/imgurl");
const config = require("../config/config"); const config = require("../config/config");
@@ -11,20 +11,49 @@ Page({
data: { data: {
navigationBarHeight, navigationBarHeight,
lists: [], lists: [],
merchantVoList:[],
merchantVoList: [],
indexId: 0, indexId: 0,
businessId:0,
windowHeight:"",
page:1,
isFirstPage:false,
isLastPage:false,
businessId: 0,
windowHeight: "",
page: 1,
isFirstPage: false,
isLastPage: false,
teljpgUrl: imgurl.teljpg.url, 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({ wx.navigateTo({
url: '/pages/marketAtlas/marketAtlas',
url: this.data.mapUrl,
}) })
}, },
// 左侧点击事件 // 左侧点击事件
@@ -36,11 +65,11 @@ Page({
businessId: index businessId: index
}); });
that.setData({ that.setData({
page:1
page: 1
}) })
that.getList(1, that.data.businessId); that.getList(1, that.data.businessId);
}, },
goSearchBar(){
goSearchBar() {
wx.navigateTo({ wx.navigateTo({
url: '/pages/searchbar/searchbar', url: '/pages/searchbar/searchbar',
}) })
@@ -48,7 +77,7 @@ Page({
/** /**
* 跳转到门店列表的详情页面 * 跳转到门店列表的详情页面
*/ */
gotoDetail(e){
gotoDetail(e) {
wx.navigateTo({ wx.navigateTo({
url: `/pages/index/searchbar/detail/index?id=${e.currentTarget.dataset.id}` 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; let that = this;
that.getBussiness(); that.getBussiness();
that.getList(1, 0); that.getList(1, 0);
@@ -64,7 +93,8 @@ Page({
title: '加载中...', title: '加载中...',
}) })
}, },
onShow(){
onShow() {
this.getFemgMap()
let that = this; let that = this;
if (typeof this.getTabBar === 'function' && if (typeof this.getTabBar === 'function' &&
that.getTabBar()) { that.getTabBar()) {
@@ -73,43 +103,47 @@ Page({
}) })
}; };
wx.getSystemInfo({ wx.getSystemInfo({
success: function (res) {
success: function(res) {
that.setData({ that.setData({
windowHeight: res.windowHeight
windowHeight: res.windowHeight
}) })
}, },
}) })
}, },
getBussiness:function(){
getBussiness: function() {
let that = this; let that = this;
Http.get({ 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 that = this;
let data; let data;
if(businessId == 0){
if (businessId == 0) {
data = { data = {
pageNum: page, pageNum: page,
pageSize: 8 pageSize: 8
} }
}else{
} else {
data = { data = {
pageNum: page, pageNum: page,
pageSize: 8, pageSize: 8,
@@ -117,25 +151,25 @@ Page({
} }
} }
Http.get({ 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({ 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 => { .catch(err => {
wx.hideLoading(); wx.hideLoading();
wx.showToast({ wx.showToast({
@@ -146,7 +180,7 @@ Page({
}); });
}) })
}, },
phone: function (e) {
phone: function(e) {
let that = this; let that = this;
if (e.currentTarget.dataset.merchantlinkphone) { if (e.currentTarget.dataset.merchantlinkphone) {
wx.makePhoneCall({ wx.makePhoneCall({
@@ -157,7 +191,7 @@ Page({
/** /**
* 页面上拉触底事件的处理函数 * 页面上拉触底事件的处理函数
*/ */
onReachBottom: function () {
onReachBottom: function() {
let that = this; let that = this;
that.data.page++; that.data.page++;
that.setData({ that.setData({
@@ -166,8 +200,8 @@ Page({
console.log(that.data.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); that.getList(that.data.page, that.data.businessId);
} }
} }
})
})

+ 6
- 0
pages/marketAtlas/marketAtlas.js View File

@@ -13,6 +13,7 @@ Page({
tierFalg:0,//楼层标识 tierFalg:0,//楼层标识
dataLsit:[],//楼层信息 dataLsit:[],//楼层信息
tmpePicture:'',//零时存放 图片 tmpePicture:'',//零时存放 图片
url:"",
}, },
lookimg(){ lookimg(){
app.globalData.previewFlag = true app.globalData.previewFlag = true
@@ -21,6 +22,7 @@ Page({
urls: [this.data.tmpePicture] // 需要预览的图片http链接列表 urls: [this.data.tmpePicture] // 需要预览的图片http链接列表
}) })
}, },
setFalgFloor(e){//设置选中楼层 setFalgFloor(e){//设置选中楼层
let index = e.currentTarget.dataset.index let index = e.currentTarget.dataset.index
this.setData({ this.setData({
@@ -88,6 +90,10 @@ Page({
*/ */
onLoad: function (options) { onLoad: function (options) {
this.getStoreMap() this.getStoreMap()
this.setData({
url: config.url +'/wapmaphtml/index.html'
})
console.log(this.data.url,"url")
}, },


/** /**


+ 14
- 13
pages/marketAtlas/marketAtlas.wxml View File

@@ -2,24 +2,25 @@
</navbar> </navbar>
<view style="height:{{navigationBarHeight}} "></view> <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>
<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="dt_box">
<view class="ri_box"> <view class="ri_box">
<image mode="widthFix" class="dt_2_img" src="{{tmpePicture}}" wx:if="{{tmpePicture!=''}}" bindtap="lookimg" bindload="imgload"></image> <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 class="noIMg" wx:if="{{tmpePicture==''}}">该商场暂未配置</view>
</view> </view>
</view> </view>
</view>
</view>
<!-- <web-view wx:if="{{ifFengMap}}" src="{{url}}" ></web-view> -->

+ 2
- 2
pages/ques/ques.wxml View File

@@ -3,7 +3,7 @@
<view class='contain' > <view class='contain' >
<view class='content'> <view class='content'>
<view class="tit"><view class='Q'>Q</view><view class='right'>我怎么添加车牌呢?</view></view> <view class="tit"><view class='Q'>Q</view><view class='right'>我怎么添加车牌呢?</view></view>
<view class='description'>首次使用“停车缴费”的用户需绑定车牌号,即可为车辆进行缴费 。您可以最多添加张车牌。</view>
<view class='description'>首次使用“停车缴费”的用户需绑定车牌号,即可为车辆进行缴费 。您可以最多添加张车牌。</view>
</view> </view>
<view class='content'> <view class='content'>
<view class="tit"><view class='Q'>Q</view><view class='right'>有哪些方式可以支持停车费?</view></view> <view class="tit"><view class='Q'>Q</view><view class='right'>有哪些方式可以支持停车费?</view></view>
@@ -31,7 +31,7 @@
</view> </view>
<view class='content'> <view class='content'>
<view class="tit"><view class='Q'>Q</view><view class='right'>我为什么绑定(解绑)不了车牌?</view></view> <view class="tit"><view class='Q'>Q</view><view class='right'>我为什么绑定(解绑)不了车牌?</view></view>
<view class='description'>每位用户最多可同时绑定张车牌。当您绑定的车牌在停车场内是无法解绑车牌的,支付离场后才可以进行变更哦!</view>
<view class='description'>每位用户最多可同时绑定张车牌。当您绑定的车牌在停车场内是无法解绑车牌的,支付离场后才可以进行变更哦!</view>
</view> </view>
<view class='content'> <view class='content'>
<view class="tit"><view class='Q'>Q</view><view class='right'>每个用户可以绑定几个车牌?</view></view> <view class="tit"><view class='Q'>Q</view><view class='right'>每个用户可以绑定几个车牌?</view></view>


+ 28
- 0
pages2/component/FMAllLayerControl/FMAllLayerControl.js View File

@@ -0,0 +1,28 @@
// component/FMAllLayerControl/FMAllLayerControl.js
Component({
/**
* 组件的属性列表
*/
properties: {
allLayer: {
type: Boolean,
}
},

/**
* 组件的初始数据
*/
data: {
btnUrl: './image/',
},

/**
* 组件的方法列表
*/
methods: {
// 切换单多层
switchLayers: function () {
this.triggerEvent('switchLayers');
},
}
})

+ 4
- 0
pages2/component/FMAllLayerControl/FMAllLayerControl.json View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

+ 6
- 0
pages2/component/FMAllLayerControl/FMAllLayerControl.wxml View File

@@ -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>

+ 11
- 0
pages2/component/FMAllLayerControl/FMAllLayerControl.wxss View File

@@ -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;
}

BIN
pages2/component/FMAllLayerControl/image/layer.png View File

Before After
Width: 42  |  Height: 42  |  Size: 623 B

BIN
pages2/component/FMAllLayerControl/image/layers.png View File

Before After
Width: 40  |  Height: 40  |  Size: 1.1 KiB

+ 101
- 0
pages2/component/FMButtonGroupsControl/FMButtonGroupsControl.js View File

@@ -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);
}
}

}
})

+ 4
- 0
pages2/component/FMButtonGroupsControl/FMButtonGroupsControl.json View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

+ 14
- 0
pages2/component/FMButtonGroupsControl/FMButtonGroupsControl.wxml View File

@@ -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>

+ 23
- 0
pages2/component/FMButtonGroupsControl/FMButtonGroupsControl.wxss View File

@@ -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;
}

+ 112
- 0
pages2/component/FMScrollGroupsControl/FMScrollGroupsControl.js View File

@@ -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);
}
}
})

+ 4
- 0
pages2/component/FMScrollGroupsControl/FMScrollGroupsControl.json View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

+ 25
- 0
pages2/component/FMScrollGroupsControl/FMScrollGroupsControl.wxml View File

@@ -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>

+ 11
- 0
pages2/component/FMScrollGroupsControl/FMScrollGroupsControl.wxss View File

@@ -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;
}

BIN
pages2/component/FMScrollGroupsControl/image/arrow1.png View File

Before After
Width: 10  |  Height: 6  |  Size: 266 B

BIN
pages2/component/FMScrollGroupsControl/image/arrow2.png View File

Before After
Width: 10  |  Height: 6  |  Size: 267 B

BIN
pages2/component/FMScrollGroupsControl/image/arrow3.png View File

Before After
Width: 10  |  Height: 6  |  Size: 259 B

BIN
pages2/component/FMScrollGroupsControl/image/arrow4.png View File

Before After
Width: 10  |  Height: 6  |  Size: 257 B

BIN
pages2/component/FMScrollGroupsControl/image/layer.png View File

Before After
Width: 42  |  Height: 42  |  Size: 623 B

BIN
pages2/component/FMScrollGroupsControl/image/layers.png View File

Before After
Width: 40  |  Height: 40  |  Size: 1.1 KiB

+ 38
- 0
pages2/component/FMViewModeControl/FMViewModeControl.js View File

@@ -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');
}
}
})

+ 4
- 0
pages2/component/FMViewModeControl/FMViewModeControl.json View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

+ 6
- 0
pages2/component/FMViewModeControl/FMViewModeControl.wxml View File

@@ -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>

+ 12
- 0
pages2/component/FMViewModeControl/FMViewModeControl.wxss View File

@@ -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;
}

BIN
pages2/component/FMViewModeControl/image/2D.png View File

Before After
Width: 38  |  Height: 38  |  Size: 823 B

BIN
pages2/component/FMViewModeControl/image/3D.png View File

Before After
Width: 38  |  Height: 38  |  Size: 823 B

+ 232
- 0
pages2/fengMap/fengMap.js View File

@@ -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)
//////////////////////////////////////////////
})

+ 10
- 0
pages2/fengMap/fengMap.json View File

@@ -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"
}
}

+ 19
- 0
pages2/fengMap/fengMap.wxml View File

@@ -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>

+ 13
- 0
pages2/fengMap/fengMap.wxss View File

@@ -0,0 +1,13 @@
/* pages/FMController/index.wxss */
.container {
height: 100vh;
overflow: hidden;
}
#temp{
position: fixed;
top:0;
left: -100%;
}
page{
padding-bottom:0;
}

+ 2
- 0
pages2/js/fengmap.miniprogram.min.js
File diff suppressed because it is too large
View File


+ 8
- 14
project.config.json View File

@@ -61,13 +61,6 @@
"miniprogram": { "miniprogram": {
"current": -1, "current": -1,
"list": [ "list": [
{
"id": 0,
"name": "签到",
"pathName": "pages/activityCalendar/activityCalendar",
"query": "",
"scene": null
},
{ {
"id": 1, "id": 1,
"name": "直播列表", "name": "直播列表",
@@ -110,13 +103,6 @@
"query": "", "query": "",
"scene": null "scene": null
}, },
{
"id": -1,
"name": "投书建议",
"pathName": "pages/complaint/complaint",
"query": "",
"scene": null
},
{ {
"id": 8, "id": 8,
"name": "pages/questionnaire/questionnaireLsit/questionnaireLsit", "name": "pages/questionnaire/questionnaireLsit/questionnaireLsit",
@@ -128,8 +114,16 @@
"id": -1, "id": -1,
"name": "index/index", "name": "index/index",
"pathName": "index/index", "pathName": "index/index",
"query": "",
"scene": 1036, "scene": 1036,
"referrerInfo": {} "referrerInfo": {}
},
{
"id": 8,
"name": "pages2/fengMap/fengMap",
"pathName": "pages2/fengMap/fengMap",
"query": "",
"scene": null
} }
] ]
} }


Loading…
Cancel
Save