|
|
|
|
@ -2,14 +2,115 @@
|
|
|
|
|
<view>
|
|
|
|
|
<view class="page-body">
|
|
|
|
|
<view class="page-section page-section-gap">
|
|
|
|
|
<map id='map' ref='map' style="width: 100%; height: 100vh;position: relative;" :latitude="latitude"
|
|
|
|
|
:longitude="longitude" :markers="covers">
|
|
|
|
|
<!-- <cover-view slot='callout' style='position: relative;'>
|
|
|
|
|
<cover-view style='height:200px'>
|
|
|
|
|
<cover-image style="position: absolute;width:70px;height:70px" :src='covers[0].iconPath' :animation='animationData'>
|
|
|
|
|
</cover-image>
|
|
|
|
|
</cover-view>
|
|
|
|
|
|
|
|
|
|
<!-- H5环境：嵌入iframe地图 -->
|
|
|
|
|
<view v-if="isH5" class="h5-map-container">
|
|
|
|
|
<iframe
|
|
|
|
|
:src="getMapUrl()"
|
|
|
|
|
width="100%"
|
|
|
|
|
height="100vh"
|
|
|
|
|
frameborder="0"
|
|
|
|
|
class="h5-map-iframe">
|
|
|
|
|
</iframe>
|
|
|
|
|
|
|
|
|
|
<!-- H5环境：覆盖在地图上的UI内容 -->
|
|
|
|
|
<view class="book-box">
|
|
|
|
|
<view class="activityBox-content flex-col">
|
|
|
|
|
<view class="activityBox-row" style="margin-bottom: 56rpx;">
|
|
|
|
|
<text class="activityBox-title">{{info.name||""}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="activityBox-row">
|
|
|
|
|
<text class="icon-shijian iconfont"></text>
|
|
|
|
|
<text>可入场时间段：{{info.start_time||""}}-{{info.end_time||""}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="activityBox-row">
|
|
|
|
|
<text class="icon-huodong iconfont"></text>
|
|
|
|
|
<text>地址：{{info.address||""}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="activityBox-row flex-row align-center" style="margin-bottom: 0rpx;"
|
|
|
|
|
@click="openlocation">
|
|
|
|
|
<text class="icon-ditu-dibiao iconfont"></text>
|
|
|
|
|
<text>距离：{{distance||"0"}}km</text>
|
|
|
|
|
<view class="tomap">
|
|
|
|
|
<text class="icon-daohang1 iconfont" style="margin-right: 0;"></text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="parkbox">
|
|
|
|
|
<view class="parkbox-title">可预约车位</view>
|
|
|
|
|
<view class="parkbox-content flex-row justify-around">
|
|
|
|
|
<view class="parkbox-item flex-row align-center"
|
|
|
|
|
style="margin-right: 10rpx;padding: 28rpx 20rpx;" @click="handleSelectPark(2)"
|
|
|
|
|
:class="(currentPark==2?'parkbox-item-on':'')" v-if="remain_big_park>0">
|
|
|
|
|
<view class="parkbox-item-status" v-if="currentPark==2">
|
|
|
|
|
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
|
|
|
|
|
</view>
|
|
|
|
|
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
|
|
|
|
|
<view>
|
|
|
|
|
<text>大中(09:00-12:00)：{{remain_big_park}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="parkbox-item flex-col align-center"
|
|
|
|
|
:class="(currentPark==1?'parkbox-item-on':'')" @click="handleSelectPark(1)"
|
|
|
|
|
style="margin-right: 10rpx;" v-if="remain_small_park>0">
|
|
|
|
|
<view class="parkbox-item-status" v-if="currentPark==1">
|
|
|
|
|
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="flex-row align-center">
|
|
|
|
|
<text class="iconfont icon-tingchechang1"
|
|
|
|
|
style="font-size: 28rpx;"></text><text>小车：{{remain_small_park}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<text style="font-size: 24rpx;color: #828282;">可预约车位：{{remain_small_park}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="parkbox-item flex-row align-center"
|
|
|
|
|
style="margin-right: 10rpx;padding: 28rpx 20rpx;" @click="handleSelectPark(4)"
|
|
|
|
|
:class="(currentPark==4?'parkbox-item-on':'')" v-if="remain_big_park2>0">
|
|
|
|
|
<view class="parkbox-item-status" v-if="currentPark==4">
|
|
|
|
|
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
|
|
|
|
|
</view>
|
|
|
|
|
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
|
|
|
|
|
<view>
|
|
|
|
|
<text>大中(13:00-16:00)：{{remain_big_park2}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="parkbox-item flex-row align-center" style=""
|
|
|
|
|
@click="handleSelectPark(3)" :class="(currentPark==3?'parkbox-item-on':'')"
|
|
|
|
|
v-if="remain_special_park>0">
|
|
|
|
|
<view class="parkbox-item-status" v-if="currentPark==3">
|
|
|
|
|
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
|
|
|
|
|
</view>
|
|
|
|
|
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
|
|
|
|
|
<view>
|
|
|
|
|
<text>残疾人车位：{{remain_special_park}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="parkbox-item flex-row align-center" style=""
|
|
|
|
|
v-if="remain_special_park<=0&&remain_big_park<=0&&remain_small_park<=0">
|
|
|
|
|
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
|
|
|
|
|
<view>
|
|
|
|
|
<text>暂无可选停车位</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="activityBox-row" style="margin-top: 20rpx;color: #cf995a;"
|
|
|
|
|
@click="openselectorder">
|
|
|
|
|
<text>选择信息：{{selectInfo.info||"暂未选择"}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="footer">
|
|
|
|
|
<u-button type="primary" :disabled="btnDisabled" @click="tobook">预约</u-button>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 小程序环境：使用uni-app地图组件 -->
|
|
|
|
|
<map v-else id='map' ref='map' style="width: 100%; height: 100vh;position: relative;" :latitude="latitude"
|
|
|
|
|
:longitude="longitude" :markers="covers">
|
|
|
|
|
<!-- <cover-view slot='callout' style='position: relative;'>
|
|
|
|
|
<cover-view style='height:200px'>
|
|
|
|
|
<cover-image style="position: absolute;width:70px;height:70px" :src='covers[0].iconPath' :animation='animationData'>
|
|
|
|
|
</cover-image>
|
|
|
|
|
</cover-view>
|
|
|
|
|
|
|
|
|
|
</cover-view> -->
|
|
|
|
|
<view class="book-box">
|
|
|
|
|
<view class="activityBox-content flex-col">
|
|
|
|
|
@ -95,7 +196,7 @@
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="activityBox-row" style="margin-top: 20rpx;color: #cf995a;"
|
|
|
|
|
@click="showSelectorder=false">
|
|
|
|
|
@click="openselectorder">
|
|
|
|
|
<text>选择信息：{{selectInfo.info||"暂未选择"}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
@ -167,7 +268,7 @@
|
|
|
|
|
distance: 0,
|
|
|
|
|
info: {},
|
|
|
|
|
covers: [{
|
|
|
|
|
latitude: 31.297241,
|
|
|
|
|
latitude: 31.297241,
|
|
|
|
|
longitude: 120.580792,
|
|
|
|
|
width: 30,
|
|
|
|
|
height: 30,
|
|
|
|
|
@ -189,48 +290,86 @@
|
|
|
|
|
remain_big_park: 0,
|
|
|
|
|
remain_small_park: 0,
|
|
|
|
|
remain_special_park: 0,
|
|
|
|
|
remain_big_park2: 0,
|
|
|
|
|
animationData:null
|
|
|
|
|
remain_big_park2: 0,
|
|
|
|
|
animationData: null,
|
|
|
|
|
isH5: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onshow(){
|
|
|
|
|
var animation = uni.createAnimation({
|
|
|
|
|
duration:200,
|
|
|
|
|
timingFunction:'linear'
|
|
|
|
|
})
|
|
|
|
|
var next = true
|
|
|
|
|
setInterval(()=>{
|
|
|
|
|
if(next){
|
|
|
|
|
animation.translateY(-2).step()
|
|
|
|
|
}else{
|
|
|
|
|
animation.translateY(0).step()
|
|
|
|
|
}
|
|
|
|
|
next = !next
|
|
|
|
|
this.animationData = animation.export()
|
|
|
|
|
},800)
|
|
|
|
|
},
|
|
|
|
|
onShareAppMessage() {
|
|
|
|
|
return this.util.shareInfo
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onShareTimeline(){
|
|
|
|
|
return this.util.shareInfo
|
|
|
|
|
},
|
|
|
|
|
onshow(){
|
|
|
|
|
var animation = uni.createAnimation({
|
|
|
|
|
duration:200,
|
|
|
|
|
timingFunction:'linear'
|
|
|
|
|
})
|
|
|
|
|
var next = true
|
|
|
|
|
setInterval(()=>{
|
|
|
|
|
if(next){
|
|
|
|
|
animation.translateY(-2).step()
|
|
|
|
|
}else{
|
|
|
|
|
animation.translateY(0).step()
|
|
|
|
|
}
|
|
|
|
|
next = !next
|
|
|
|
|
this.animationData = animation.export()
|
|
|
|
|
},800)
|
|
|
|
|
},
|
|
|
|
|
onShareAppMessage() {
|
|
|
|
|
return this.util.shareInfo
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onShareTimeline(){
|
|
|
|
|
return this.util.shareInfo
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
var that = this;
|
|
|
|
|
|
|
|
|
|
let map = uni.createMapContext('map');
|
|
|
|
|
map.setCenterOffset({
|
|
|
|
|
offset: [0.5, 0.25]
|
|
|
|
|
})
|
|
|
|
|
wx.getLocation({
|
|
|
|
|
success(res) {
|
|
|
|
|
that.userlatitude = res.latitude;
|
|
|
|
|
that.userlongitude = res.longitude;
|
|
|
|
|
// 检测运行环境
|
|
|
|
|
this.isH5 = typeof window !== 'undefined' && window.location
|
|
|
|
|
|
|
|
|
|
// 根据环境选择定位方式
|
|
|
|
|
if (this.isH5) {
|
|
|
|
|
// H5环境：使用浏览器定位API
|
|
|
|
|
if (navigator.geolocation) {
|
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
|
|
|
function(position) {
|
|
|
|
|
that.userlatitude = position.coords.latitude;
|
|
|
|
|
that.userlongitude = position.coords.longitude;
|
|
|
|
|
console.log('H5定位成功:', that.userlatitude, that.userlongitude);
|
|
|
|
|
that.loadOrder(function(res) {
|
|
|
|
|
that.loadactivityOrder(function(r) {
|
|
|
|
|
if (res.length + r.length == 0) {
|
|
|
|
|
that.btnDisabled = true;
|
|
|
|
|
} else {
|
|
|
|
|
that.btnDisabled = true;
|
|
|
|
|
that.showSelectorder = false;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
function(error) {
|
|
|
|
|
console.log('H5定位失败:', error);
|
|
|
|
|
// 定位失败时使用默认位置继续加载
|
|
|
|
|
that.loadOrder(function(res) {
|
|
|
|
|
that.loadactivityOrder(function(r) {
|
|
|
|
|
if (res.length + r.length == 0) {
|
|
|
|
|
that.btnDisabled = true;
|
|
|
|
|
} else {
|
|
|
|
|
that.btnDisabled = true;
|
|
|
|
|
that.showSelectorder = false;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
enableHighAccuracy: true,
|
|
|
|
|
timeout: 15000,
|
|
|
|
|
maximumAge: 300000
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
console.log('浏览器不支持定位');
|
|
|
|
|
// 浏览器不支持定位时使用默认位置
|
|
|
|
|
that.loadOrder(function(res) {
|
|
|
|
|
that.loadactivityOrder(function(r) {
|
|
|
|
|
if (res.length + r.length == 0) {
|
|
|
|
|
// that.util.toast("您需要“参观预约”或“活动预约”成功后才能进行停车位预约。");
|
|
|
|
|
that.btnDisabled = true;
|
|
|
|
|
} else {
|
|
|
|
|
that.btnDisabled = true;
|
|
|
|
|
@ -239,10 +378,59 @@
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
// 小程序环境：使用wx.getLocation
|
|
|
|
|
wx.getLocation({
|
|
|
|
|
success(res) {
|
|
|
|
|
that.userlatitude = res.latitude;
|
|
|
|
|
that.userlongitude = res.longitude;
|
|
|
|
|
console.log('小程序定位成功:', that.userlatitude, that.userlongitude);
|
|
|
|
|
that.loadOrder(function(res) {
|
|
|
|
|
that.loadactivityOrder(function(r) {
|
|
|
|
|
if (res.length + r.length == 0) {
|
|
|
|
|
that.btnDisabled = true;
|
|
|
|
|
} else {
|
|
|
|
|
that.btnDisabled = true;
|
|
|
|
|
that.showSelectorder = false;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
fail(err) {
|
|
|
|
|
console.log('小程序定位失败:', err);
|
|
|
|
|
// 定位失败时使用默认位置继续加载
|
|
|
|
|
that.loadOrder(function(res) {
|
|
|
|
|
that.loadactivityOrder(function(r) {
|
|
|
|
|
if (res.length + r.length == 0) {
|
|
|
|
|
that.btnDisabled = true;
|
|
|
|
|
} else {
|
|
|
|
|
that.btnDisabled = true;
|
|
|
|
|
that.showSelectorder = false;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// H5环境：生成地图URL
|
|
|
|
|
getMapUrl() {
|
|
|
|
|
console.log('getMapUrl - info:', this.info);
|
|
|
|
|
console.log('getMapUrl - latitude:', this.info.latitude);
|
|
|
|
|
console.log('getMapUrl - longitude:', this.info.longitude);
|
|
|
|
|
|
|
|
|
|
if (this.info.latitude && this.info.longitude) {
|
|
|
|
|
// 使用真实的停车场坐标
|
|
|
|
|
const url = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${this.info.latitude},${this.info.longitude};title:${encodeURIComponent(this.info.name || '停车场')};addr:${encodeURIComponent(this.info.address || '')}&referer=myapp`;
|
|
|
|
|
console.log('使用真实坐标:', url);
|
|
|
|
|
return url;
|
|
|
|
|
}
|
|
|
|
|
// 如果没有坐标数据，使用默认坐标
|
|
|
|
|
console.log('使用默认坐标');
|
|
|
|
|
return 'https://apis.map.qq.com/uri/v1/marker?marker=coord:31.297241,120.580792;title:苏州革命博物馆停车场;addr:苏州市姑苏区&referer=myapp';
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
handleConfirmOrder() {
|
|
|
|
|
if (this.selectInfo.orderid === 0) {
|
|
|
|
|
this.util.toast("请选择预约的活动或者预约的参观");
|
|
|
|
|
@ -313,8 +501,8 @@
|
|
|
|
|
},
|
|
|
|
|
utilSuccess: function(res) {
|
|
|
|
|
for (var mod of res) {
|
|
|
|
|
mod.checked = false;
|
|
|
|
|
mod.active_start_time = mod.number[0]['start_time']
|
|
|
|
|
mod.checked = false;
|
|
|
|
|
mod.active_start_time = mod.number[0]['start_time']
|
|
|
|
|
mod.active_end_time = mod.number[0]['end_time']
|
|
|
|
|
}
|
|
|
|
|
that.listActivtyOrder = res;
|
|
|
|
|
@ -330,12 +518,31 @@
|
|
|
|
|
this.currentPark = type;
|
|
|
|
|
},
|
|
|
|
|
openlocation() {
|
|
|
|
|
uni.openLocation({
|
|
|
|
|
latitude: this.info.latitude,
|
|
|
|
|
longitude: this.info.longitude,
|
|
|
|
|
name: this.info.name,
|
|
|
|
|
address: this.info.address
|
|
|
|
|
});
|
|
|
|
|
if (this.isH5) {
|
|
|
|
|
// H5环境：使用微信JS-SDK或浏览器打开地图
|
|
|
|
|
if (typeof wx !== 'undefined' && wx.openLocation) {
|
|
|
|
|
// 微信JS-SDK
|
|
|
|
|
wx.openLocation({
|
|
|
|
|
latitude: this.info.latitude,
|
|
|
|
|
longitude: this.info.longitude,
|
|
|
|
|
name: this.info.name,
|
|
|
|
|
address: this.info.address,
|
|
|
|
|
scale: 14
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 降级方案：使用腾讯地图
|
|
|
|
|
const mapUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${this.info.latitude},${this.info.longitude};title:${encodeURIComponent(this.info.name)};addr:${encodeURIComponent(this.info.address)}&referer=myapp`;
|
|
|
|
|
window.open(mapUrl, '_blank');
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 小程序环境：使用uni.openLocation
|
|
|
|
|
uni.openLocation({
|
|
|
|
|
latitude: this.info.latitude,
|
|
|
|
|
longitude: this.info.longitude,
|
|
|
|
|
name: this.info.name,
|
|
|
|
|
address: this.info.address
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
loadInfo() {
|
|
|
|
|
var that = this;
|
|
|
|
|
@ -363,7 +570,7 @@
|
|
|
|
|
height: 30,
|
|
|
|
|
iconPath: '/static/img/location.png',
|
|
|
|
|
id: 1
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
that.covers = []
|
|
|
|
|
that.covers.push(mod);
|
|
|
|
|
let map = uni.createMapContext('map');
|
|
|
|
|
@ -441,7 +648,7 @@
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
color: #cf995a;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.book-box {
|
|
|
|
|
height: 60%;
|
|
|
|
|
@ -470,4 +677,30 @@
|
|
|
|
|
box-shadow: 2rpx 3rpx 10rpx 0rpx rgba(107, 94, 77, 0.3);
|
|
|
|
|
padding: 21rpx 25rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* H5地图iframe容器样式 */
|
|
|
|
|
.h5-map-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
position: relative;
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.h5-map-iframe {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border: none;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.map-loading {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
color: #666;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
linyongLynn