diff --git a/pkg_product/views/experienceProjectDetail.vue b/pkg_product/views/experienceProjectDetail.vue index 73d35a3..69ca3d5 100644 --- a/pkg_product/views/experienceProjectDetail.vue +++ b/pkg_product/views/experienceProjectDetail.vue @@ -44,14 +44,20 @@ - - - {{ project.cityName }}{{ project.address }} - + /> --> + + + {{ project.cityName }}{{ project.address }} + + + + + 距该地{{ distanceText }} + @@ -182,7 +188,10 @@ export default { videoContext: null, swiperAutoplay: true, isVideoPlaying: false, - projectList: [] + projectList: [], + userLatitude: null, + userLongitude: null, + distanceText: '' } }, computed: { @@ -214,6 +223,7 @@ export default { this.validFrom = query.validFrom || '' this.validTo = query.validTo || '' this.usageNotice = decode(query.usageNotice || '') + this.getUserLocation() if (query.detailList) { try { const list = JSON.parse(decode(query.detailList)) @@ -280,6 +290,7 @@ export default { this.project.address = data.address || this.project.address this.project.latitude = data.latitude || this.project.latitude this.project.longitude = data.longitude || this.project.longitude + this.updateDistance() this.project.phone = data.phone || this.project.phone this.project.wechat = data.wechat || this.project.wechat this.project.qualification = data.qualification || this.project.qualification @@ -316,6 +327,50 @@ export default { uni.hideLoading() }) }, + getUserLocation() { + uni.getLocation({ + type: 'gcj02', + success: res => { + this.userLatitude = Number(res.latitude) + this.userLongitude = Number(res.longitude) + this.updateDistance() + } + }) + }, + calculateDistance(lat1, lon1, lat2, lon2) { + if (!lat1 || !lon1 || !lat2 || !lon2) { + return '' + } + const R = 6371 + const dLat = (lat2 - lat1) * Math.PI / 180 + const dLon = (lon2 - lon1) * Math.PI / 180 + const a = + Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLon / 2) * Math.sin(dLon / 2) + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)) + const d = R * c + return d.toFixed(1) + 'km' + }, + updateDistance() { + const storeLatitude = Number(this.project.latitude) + const storeLongitude = Number(this.project.longitude) + if ( + this.userLatitude == null || + this.userLongitude == null || + !storeLatitude || + !storeLongitude + ) { + this.distanceText = '' + return + } + this.distanceText = this.calculateDistance( + this.userLatitude, + this.userLongitude, + storeLatitude, + storeLongitude + ) + }, handleNavigate() { if (!this.project.latitude || !this.project.longitude) { uni.showToast({ @@ -443,17 +498,33 @@ export default { .store-meta { margin-top: 32rpx; padding-top: 32rpx; - border-top: 1rpx solid #f0f0f0; + // border-top: 1rpx solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; } .meta-left { flex: 1; - display: flex; + // display: flex; align-items: center; padding-right: 32rpx; } +.meta-info { + display: flex; + flex-direction: column; + row-gap: 8rpx; +} +.distance-row { + margin-left: 4rpx; + display: flex; + align-items: center; + column-gap: 8rpx; +} +.distance-text { + font-size: 22rpx; + color: #666; + margin-top: 8rpx; +} .meta-text { margin-left: 12rpx; font-size: 26rpx;