|
|
@@ -1,14 +1,15 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view id="map" class='map' />
|
|
|
+ <view id="map" :style="{ height: mapHeight + 'px' }" class='map' />
|
|
|
|
|
|
- <view class="fab">
|
|
|
+ <!-- <view class="fab">
|
|
|
<uni-fab ref="fab" :pattern="fab.pattern" :content="fab.content" :horizontal="fab.horizontal"
|
|
|
:vertical="fab.vertical" :direction="fab.direction" @trigger="trigger" @fabClick="fabClick" />
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
|
|
|
- <div ref="testdiv" class="dragLayer" :class="testdiv" :style="{top: topSize + 'rpx' }"
|
|
|
- @touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchmove="handleTouchMove">
|
|
|
+ <!-- <div ref="testdiv" class="dragLayer" :class="testdiv" :style="{top: topSize + 'rpx' }"
|
|
|
+ @touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchmove="handleTouchMove"> -->
|
|
|
+ <view :v-show="popupShow" :style="{ height: popupHeight + 'px' }">
|
|
|
<uni-list>
|
|
|
<uni-list :border="true">
|
|
|
<!-- 右侧带角标 -->
|
|
|
@@ -17,15 +18,16 @@
|
|
|
</uni-list-chat>
|
|
|
</uni-list>
|
|
|
</uni-list>
|
|
|
- </div>
|
|
|
+ <!-- </div> -->
|
|
|
+ </view>
|
|
|
|
|
|
<!-- 普通弹窗 -->
|
|
|
- <uni-popup ref="popup" :is-mask-click="false" background-color="#fff" @change="onPopupChange">
|
|
|
+ <!-- <uni-popup ref="popup" :is-mask-click="false" background-color="#fff" @change="onPopupChange">
|
|
|
<view class="popup-content"
|
|
|
:class="{ 'popup-bottom': popupType === 'bottom', 'popup-right': popupType === 'right' }">
|
|
|
<text class="text">popup 内容</text>
|
|
|
</view>
|
|
|
- </uni-popup>
|
|
|
+ </uni-popup> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -45,57 +47,17 @@
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- mapHeight: 1334,
|
|
|
- // 屏幕高度
|
|
|
- screenHeight: 667,
|
|
|
- latitude: 39.909,
|
|
|
- longitude: 116.39742,
|
|
|
- polylines: [],
|
|
|
-
|
|
|
- testdiv: "testdiv",
|
|
|
- topSize: 769,
|
|
|
- // 向上滑动的距离
|
|
|
- topHeight: 0,
|
|
|
- isTop: false,
|
|
|
- // 初始化禁止滑动
|
|
|
- scrollable: false,
|
|
|
- refreshing: false,
|
|
|
- contentOffsetY: 10,
|
|
|
-
|
|
|
- fab: {
|
|
|
- horizontal: 'left',
|
|
|
- vertical: 'bottom',
|
|
|
- direction: 'horizontal',
|
|
|
- pattern: {
|
|
|
- color: '#7A7E83',
|
|
|
- backgroundColor: '#fff',
|
|
|
- selectedColor: '#007AFF',
|
|
|
- buttonColor: '#007AFF',
|
|
|
- iconColor: '#fff'
|
|
|
- },
|
|
|
- is_color_type: false,
|
|
|
- content: [{
|
|
|
- iconPath: '/static/image.png',
|
|
|
- selectedIconPath: '/static/image-active.png',
|
|
|
- text: '玩家',
|
|
|
- active: false
|
|
|
- },
|
|
|
- {
|
|
|
- iconPath: '/static/home.png',
|
|
|
- selectedIconPath: '/static/home-active.png',
|
|
|
- text: '统计',
|
|
|
- active: false
|
|
|
- },
|
|
|
- {
|
|
|
- iconPath: '/static/star.png',
|
|
|
- selectedIconPath: '/static/star-active.png',
|
|
|
- text: '设置',
|
|
|
- active: false
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
+ windowInfo: null,
|
|
|
+ mapHeight: 0,
|
|
|
+ popupHeight: 300,
|
|
|
popupType: 'bottom',
|
|
|
popupShow: false,
|
|
|
+
|
|
|
+ actionId: 2,
|
|
|
+ actionDetail: {},
|
|
|
+ mapUrl: null,
|
|
|
+ mapInfo: {},
|
|
|
+
|
|
|
map: null,
|
|
|
checkPoints: [{
|
|
|
cp_id: 1, // 检查点ID
|
|
|
@@ -204,41 +166,89 @@
|
|
|
lng: 117.127873
|
|
|
}
|
|
|
],
|
|
|
- shopId: 0,
|
|
|
- mapUrl: null,
|
|
|
- mapInfo: {},
|
|
|
- shopList: [],
|
|
|
- controlInfoList: []
|
|
|
+
|
|
|
+ // fab: {
|
|
|
+ // horizontal: 'left',
|
|
|
+ // vertical: 'bottom',
|
|
|
+ // direction: 'horizontal',
|
|
|
+ // pattern: {
|
|
|
+ // color: '#7A7E83',
|
|
|
+ // backgroundColor: '#fff',
|
|
|
+ // selectedColor: '#007AFF',
|
|
|
+ // buttonColor: '#007AFF',
|
|
|
+ // iconColor: '#fff'
|
|
|
+ // },
|
|
|
+ // is_color_type: false,
|
|
|
+ // content: [{
|
|
|
+ // iconPath: '/static/image.png',
|
|
|
+ // selectedIconPath: '/static/image-active.png',
|
|
|
+ // text: '玩家',
|
|
|
+ // active: false
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // iconPath: '/static/home.png',
|
|
|
+ // selectedIconPath: '/static/home-active.png',
|
|
|
+ // text: '统计',
|
|
|
+ // active: false
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // iconPath: '/static/star.png',
|
|
|
+ // selectedIconPath: '/static/star-active.png',
|
|
|
+ // text: '设置',
|
|
|
+ // active: false
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // },
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
|
mounted() {
|
|
|
- this.handleDrawMap()
|
|
|
+ // this.handleDrawMap()
|
|
|
},
|
|
|
onLoad() {
|
|
|
- // this.getShopList()
|
|
|
- // this.getShopMap(8)
|
|
|
+ this.getToActionDetail(this.actionId)
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.layoutInit()
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
// console.log("beforeDestroy")
|
|
|
leafletHelper.free()
|
|
|
},
|
|
|
methods: {
|
|
|
- async getShopMap(shopId) {
|
|
|
+ // 布局初始化 设置地图高度
|
|
|
+ layoutInit() {
|
|
|
+ this.windowInfo = uni.getWindowInfo()
|
|
|
+ console.log('[layoutInit] windowInfo', this.windowInfo)
|
|
|
+ this.mapHeight = this.windowInfo.windowHeight
|
|
|
+ },
|
|
|
+ popupToggle() {
|
|
|
+ this.popupShow = !this.popupShow
|
|
|
+ if (this.popupShow) {
|
|
|
+ this.mapHeight = this.windowInfo.windowHeight - this.popupHeight
|
|
|
+ } else {
|
|
|
+ this.mapHeight = this.windowInfo.windowHeight
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getToActionDetail(actId) {
|
|
|
try {
|
|
|
// 创建请求参数并赋值
|
|
|
var request = new IdRequest()
|
|
|
- request.setId(shopId)
|
|
|
+ request.setId(actId)
|
|
|
// 调用客户端相应的grpc方法,发送grpc请求,并接受后台发送回来的返回值
|
|
|
- this.$client.assMapInfoDetail(request, {}, async (err, response) => {
|
|
|
+ this.$client.toActionDetail(request, {}, async (err, response) => {
|
|
|
if (err) {
|
|
|
- console.log(`[assMapInfoDetail] err: code = ${err.code}` +
|
|
|
+ console.log(`[toActionDetail] err: code = ${err.code}` +
|
|
|
`, message = "${err.message}"`)
|
|
|
} else {
|
|
|
let res = response.toObject()
|
|
|
- console.log('[assMapInfoDetail]', res)
|
|
|
- this.mapInfo = res
|
|
|
+ console.log('[toActionDetail]', res)
|
|
|
+ this.actionDetail = res
|
|
|
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: this.actionDetail.name
|
|
|
+ });
|
|
|
+
|
|
|
// await mapHelper.handleMapInfo(this, this.mapInfo)
|
|
|
this.handleDrawMap()
|
|
|
}
|
|
|
@@ -248,11 +258,17 @@
|
|
|
}
|
|
|
},
|
|
|
handleDrawMap() {
|
|
|
- leafletHelper.init(this, 'map', [36.67175772119628, 117.12792580603369], 17)
|
|
|
+ // leafletHelper.init(this, 'map', [36.67175772119628, 117.12792580603369], 17)
|
|
|
+
|
|
|
+ // const mapid = this.actionDetail.mapinfo.lid
|
|
|
+ const mapurl = this.actionDetail.mapinfo.mapurl
|
|
|
+ const centPoint = [this.actionDetail.mapinfo.centerlatitude, this.actionDetail.mapinfo.centerlongitude]
|
|
|
+ const zoomNum = this.actionDetail.mapinfo.defscale
|
|
|
+ leafletHelper.init(this, 'map', centPoint, zoomNum)
|
|
|
leafletHelper.global.setCheckPoints(this.checkPoints)
|
|
|
leafletHelper.global.setPlayers(this.players)
|
|
|
leafletHelper.global.setPlayersPosition(this.players_position)
|
|
|
- leafletHelper.addMapLayer(8)
|
|
|
+ leafletHelper.addMapLayer(mapurl)
|
|
|
|
|
|
leafletHelper.checkPoint.drawAllCheckPoints()
|
|
|
leafletHelper.checkPoint.drawPath()
|
|
|
@@ -305,126 +321,126 @@
|
|
|
|
|
|
// ========================================================= //
|
|
|
|
|
|
- getEl: function(el) {
|
|
|
- if (typeof el === 'string' || typeof el === 'number') return el;
|
|
|
- return el instanceof HTMLElement ? el : el.$el;
|
|
|
- },
|
|
|
+ // getEl: function(el) {
|
|
|
+ // if (typeof el === 'string' || typeof el === 'number') return el;
|
|
|
+ // return el instanceof HTMLElement ? el : el.$el;
|
|
|
+ // },
|
|
|
|
|
|
- // 获取角度
|
|
|
- getAngle(angx, angy) {
|
|
|
- return Math.atan2(angy, angx) * 180 / Math.PI;
|
|
|
- },
|
|
|
+ // // 获取角度
|
|
|
+ // getAngle(angx, angy) {
|
|
|
+ // return Math.atan2(angy, angx) * 180 / Math.PI;
|
|
|
+ // },
|
|
|
|
|
|
- // 根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
|
|
|
- getDirection(startx, starty, endx, endy) {
|
|
|
- var angx = endx - startx;
|
|
|
- var angy = endy - starty;
|
|
|
- var result = 0;
|
|
|
- //如果滑动距离太短
|
|
|
- if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
|
|
|
- return result;
|
|
|
- }
|
|
|
- var angle = this.getAngle(angx, angy);
|
|
|
- if (angle >= -135 && angle <= -45) {
|
|
|
- result = 1;
|
|
|
- } else if (angle > 45 && angle < 135) {
|
|
|
- result = 2;
|
|
|
- } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
|
|
|
- result = 3;
|
|
|
- } else if (angle >= -45 && angle <= 45) {
|
|
|
- result = 4;
|
|
|
- }
|
|
|
- return result;
|
|
|
- },
|
|
|
+ // // 根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
|
|
|
+ // getDirection(startx, starty, endx, endy) {
|
|
|
+ // var angx = endx - startx;
|
|
|
+ // var angy = endy - starty;
|
|
|
+ // var result = 0;
|
|
|
+ // //如果滑动距离太短
|
|
|
+ // if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
|
|
|
+ // return result;
|
|
|
+ // }
|
|
|
+ // var angle = this.getAngle(angx, angy);
|
|
|
+ // if (angle >= -135 && angle <= -45) {
|
|
|
+ // result = 1;
|
|
|
+ // } else if (angle > 45 && angle < 135) {
|
|
|
+ // result = 2;
|
|
|
+ // } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
|
|
|
+ // result = 3;
|
|
|
+ // } else if (angle >= -45 && angle <= 45) {
|
|
|
+ // result = 4;
|
|
|
+ // }
|
|
|
+ // return result;
|
|
|
+ // },
|
|
|
|
|
|
- // 手势滑动开始
|
|
|
- handleTouchStart(e) {
|
|
|
- this.startx = e.changedTouches[0].pageX;
|
|
|
- this.starty = e.changedTouches[0].pageY;
|
|
|
- },
|
|
|
+ // // 手势滑动开始
|
|
|
+ // handleTouchStart(e) {
|
|
|
+ // this.startx = e.changedTouches[0].pageX;
|
|
|
+ // this.starty = e.changedTouches[0].pageY;
|
|
|
+ // },
|
|
|
|
|
|
- // 手势滑动结束
|
|
|
- handleTouchEnd(e) {
|
|
|
- var endx, endy;
|
|
|
- endx = e.changedTouches[0].pageX;
|
|
|
- endy = e.changedTouches[0].pageY;
|
|
|
- var direction = this.getDirection(this.startx, this.starty, endx, endy);
|
|
|
- switch (direction) {
|
|
|
- // 未滑动!
|
|
|
- case 0:
|
|
|
- break;
|
|
|
- // 向上滑动
|
|
|
- case 1:
|
|
|
- if (!this.isTop) {
|
|
|
- this.goTop();
|
|
|
- this.isTop = true
|
|
|
- this.scrollable = true
|
|
|
- }
|
|
|
- break;
|
|
|
- // 向下滑动
|
|
|
- case 2:
|
|
|
- if (this.isTop && this.contentOffsetY == 0) {
|
|
|
- this.goBottom();
|
|
|
- this.isTop = false
|
|
|
- this.scrollable = false
|
|
|
- }
|
|
|
- break;
|
|
|
- // 向左
|
|
|
- case 3:
|
|
|
- break;
|
|
|
+ // // 手势滑动结束
|
|
|
+ // handleTouchEnd(e) {
|
|
|
+ // var endx, endy;
|
|
|
+ // endx = e.changedTouches[0].pageX;
|
|
|
+ // endy = e.changedTouches[0].pageY;
|
|
|
+ // var direction = this.getDirection(this.startx, this.starty, endx, endy);
|
|
|
+ // switch (direction) {
|
|
|
+ // // 未滑动!
|
|
|
+ // case 0:
|
|
|
+ // break;
|
|
|
+ // // 向上滑动
|
|
|
+ // case 1:
|
|
|
+ // if (!this.isTop) {
|
|
|
+ // this.goTop();
|
|
|
+ // this.isTop = true
|
|
|
+ // this.scrollable = true
|
|
|
+ // }
|
|
|
+ // break;
|
|
|
+ // // 向下滑动
|
|
|
+ // case 2:
|
|
|
+ // if (this.isTop && this.contentOffsetY == 0) {
|
|
|
+ // this.goBottom();
|
|
|
+ // this.isTop = false
|
|
|
+ // this.scrollable = false
|
|
|
+ // }
|
|
|
+ // break;
|
|
|
+ // // 向左
|
|
|
+ // case 3:
|
|
|
+ // break;
|
|
|
|
|
|
- // 向右
|
|
|
- case 4:
|
|
|
- break;
|
|
|
- default:
|
|
|
- }
|
|
|
+ // // 向右
|
|
|
+ // case 4:
|
|
|
+ // break;
|
|
|
+ // default:
|
|
|
+ // }
|
|
|
|
|
|
- },
|
|
|
+ // },
|
|
|
|
|
|
- handleTouchMove(e) {},
|
|
|
+ // handleTouchMove(e) {},
|
|
|
|
|
|
- // 上滑操作
|
|
|
- goTop() {
|
|
|
- console.log("上滑操作")
|
|
|
- let box = this.getEl(this.$refs.testdiv);
|
|
|
- let topHeight = this.topHeight
|
|
|
- // Binding.bind({
|
|
|
- // eventType: 'timing',
|
|
|
- // exitExpression: {
|
|
|
- // origin: 't>800'
|
|
|
- // },
|
|
|
- // props: [{
|
|
|
- // element: box,
|
|
|
- // property: 'transform.translateY',
|
|
|
- // expression: {
|
|
|
- // origin: "easeOutQuint(t, 0, - " + topHeight + ", 800)"
|
|
|
- // }
|
|
|
- // }]
|
|
|
- // });
|
|
|
- },
|
|
|
+ // // 上滑操作
|
|
|
+ // goTop() {
|
|
|
+ // console.log("上滑操作")
|
|
|
+ // let box = this.getEl(this.$refs.testdiv);
|
|
|
+ // let topHeight = this.topHeight
|
|
|
+ // // Binding.bind({
|
|
|
+ // // eventType: 'timing',
|
|
|
+ // // exitExpression: {
|
|
|
+ // // origin: 't>800'
|
|
|
+ // // },
|
|
|
+ // // props: [{
|
|
|
+ // // element: box,
|
|
|
+ // // property: 'transform.translateY',
|
|
|
+ // // expression: {
|
|
|
+ // // origin: "easeOutQuint(t, 0, - " + topHeight + ", 800)"
|
|
|
+ // // }
|
|
|
+ // // }]
|
|
|
+ // // });
|
|
|
+ // },
|
|
|
|
|
|
- // 下滑操作
|
|
|
- goBottom() {
|
|
|
- console.log("下滑操作")
|
|
|
- let box = this.getEl(this.$refs.testdiv);
|
|
|
- let topHeight = this.topHeight
|
|
|
- // Binding.bind({
|
|
|
- // eventType: 'timing',
|
|
|
- // exitExpression: {
|
|
|
- // origin: 't>800'
|
|
|
- // },
|
|
|
- // props: [{
|
|
|
- // element: box,
|
|
|
- // property: 'transform.translateY',
|
|
|
- // expression: {
|
|
|
- // origin: "easeOutQuint(t, - " + topHeight + ", " + topHeight + ", 800)"
|
|
|
- // }
|
|
|
- // }, ]
|
|
|
- // });
|
|
|
- // setTimeout(() => {
|
|
|
- // this.refreshing = false
|
|
|
- // }, 100)
|
|
|
- },
|
|
|
+ // // 下滑操作
|
|
|
+ // goBottom() {
|
|
|
+ // console.log("下滑操作")
|
|
|
+ // let box = this.getEl(this.$refs.testdiv);
|
|
|
+ // let topHeight = this.topHeight
|
|
|
+ // // Binding.bind({
|
|
|
+ // // eventType: 'timing',
|
|
|
+ // // exitExpression: {
|
|
|
+ // // origin: 't>800'
|
|
|
+ // // },
|
|
|
+ // // props: [{
|
|
|
+ // // element: box,
|
|
|
+ // // property: 'transform.translateY',
|
|
|
+ // // expression: {
|
|
|
+ // // origin: "easeOutQuint(t, - " + topHeight + ", " + topHeight + ", 800)"
|
|
|
+ // // }
|
|
|
+ // // }, ]
|
|
|
+ // // });
|
|
|
+ // // setTimeout(() => {
|
|
|
+ // // this.refreshing = false
|
|
|
+ // // }, 100)
|
|
|
+ // },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -433,8 +449,7 @@
|
|
|
.map {
|
|
|
z-index: 0;
|
|
|
width: 100vw;
|
|
|
- // height: 100vh;
|
|
|
- height: 35vh;
|
|
|
+ // height: 95vh;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|