Fix：5058 【商城小程序】体验店详情页，位置信息下方增加定位距离显示

pkg_product/views/experienceProjectDetail.vue

@@ -44,14 +44,20 @@
           </view>
           <view class="store-meta">
             <view class="meta-left">
-              <u-icon
+              <!-- <u-icon
                 :name="webUrl + '/page/qianxian/icon-location.png'"
                 size="20"
                 color="#C52733"
-              />
-              <text class="meta-text">
-                {{ project.cityName }}{{ project.address }}
-              </text>
+              /> -->
+              <view class="meta-info">
+                <text class="meta-text">
+                  {{ project.cityName }}{{ project.address }}
+                </text>
+              </view>
+              <view v-if="distanceText" class="distance-row">
+                <u-icon :name="webUrl + '/orderIcon/map.png'" size="16"></u-icon>
+                <text class="distance-text">距该地{{ distanceText }}</text>
+              </view>
             </view>
             <view class="meta-actions">
               <view class="action-item" @click="handleNavigate">
@@ -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;