店铺距离

src/pages/shop/shop.vue

@@ -311,6 +311,8 @@ const shopInfo = ref({});
 const shopSwiperList = ref([]);
 // 当前位置的经纬度-// 店铺的经纬度
 const currentLatitudeAndLongitude = ref({ latitude: 0, longitude: 0 });
+// 店铺经纬度
+const shopLocation = ref({ lat: 0, lon: 0 });
 // 团购商品列表
 const listOfGroupBuyingProducts = ref([]);
 // 商家优惠券
@@ -331,24 +333,77 @@ const commentTotal = ref(0);
 const recommendedTypesOfPeripherals = ref([]);
 // 商户id
 const shopId = ref('');
-const tagList2 = ref([{ name: '免费停车', id: 1 }]);
 // 周边推荐-商家列表
 const recommendedListOfPeripherals = ref([]);
-onLoad((options) => {
+// onLoad((options) => {
+//   params.value.shopId = options.shopId;
+//   getStoreInformationFn(options.shopId).then(() => {
+//     peripheryRecomFn();
+//   });
+//   groupBuyListFn(options.shopId);
+//   shopId.value = options.shopId;
+//   couponShopListFn(options.shopId);
+//   getEvaluationPageFn();
+// });
+// onShow(() => {
+//   getStoreInformationFn(params.value.shopId).then(() => {
+//     // 获取位置
+//     getLocationFn().then((res) => {
+//       const distance = getDistance(
+//         res.lat,
+//         res.lon,
+//         shopLocation.value.lat,
+//         shopLocation.value.lon,
+//         1,
+//       );
+//       shopInfo.value.distance = distance;
+//     });
+//   });
+// });
+onLoad(async (options) => {
   params.value.shopId = options.shopId;
-  getStoreInformationFn(options.shopId).then(() => {
-    peripheryRecomFn();
-  });
-  groupBuyListFn(options.shopId);
   shopId.value = options.shopId;
-  couponShopListFn(options.shopId);
+
+  // 使用 Promise.all 并行请求，提升性能
+  await Promise.all([
+    getStoreInformationFn(options.shopId),
+    groupBuyListFn(options.shopId),
+    couponShopListFn(options.shopId),
+  ]);
+
+  // 获取周边推荐信息
+  peripheryRecomFn();
+
+  // 获取评价信息
   getEvaluationPageFn();
+
+  // 获取位置并计算距离
+  calculateDistance();
 });
-onShow(() => {
-  // 获取位置
-  getLocationFn();
+
+onShow(async () => {
+  await getStoreInformationFn(params.value.shopId);
+
+  // 获取位置并计算距离
+  calculateDistance();
 });
-const value = ref(5);
+// 计算距离的函数封装
+async function calculateDistance() {
+  try {
+    const res = await getLocationFn();
+    const distance = getDistance(
+      res.lat,
+      res.lon,
+      shopLocation.value.lat,
+      shopLocation.value.lon,
+      1,
+    );
+    shopInfo.value.distance = distance;
+    console.log('distance', distance, shopLocation.value.lat, shopLocation.value.lon);
+  } catch (error) {
+    console.error('Error calculating distance:', error);
+  }
+}
 const handleClick = (e) => {
   const { index } = e;
   const imgSrc = shopSwiperList.value[index];
@@ -369,9 +424,9 @@ function scroll(e) {
  */
 function peripheryRecomFn() {
   // 维度
-  const lat = currentLatitudeAndLongitude.value.latitude;
+  const lat = shopLocation.value.lat;
   // 经度
-  const lon = currentLatitudeAndLongitude.value.longitude;
+  const lon = shopLocation.value.lon;
   peripheryRecom({ lat, lon, distance: 10 }).then((res) => {
     if (res.code === 0) {
       recommendedTypesOfPeripherals.value = res.data;
@@ -406,27 +461,27 @@ function sgyrddShopPageFn(categoryIds, lat, lon) {
         .filter((item) => {
           return item !== '';
         });
+      console.log('res.data.content', res.data.content);
+
       recommendedListOfPeripherals.value = res.data.content;
       xma.hideLoading();
     }
   });
 }
 function getLocationFn() {
-  xma.getLocation({
-    type: 'wgs84',
-    isHighAccuracy: true,
-    success: function (res) {
-      // 经纬度
-      console.log('res.latitude, res.longitude', res.latitude, res.longitude);
-      // 店铺的经纬度
-      const myLatitude = currentLatitudeAndLongitude.value.latitude;
-      const myLongitude = currentLatitudeAndLongitude.value.longitude;
-      const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1);
-      shopInfo.value.distance = distance;
-    },
-    fail: function (err) {
-      return err;
-    },
+  return new Promise((resolve, reject) => {
+    xma.getLocation({
+      type: 'wgs84',
+      isHighAccuracy: true,
+      success: function (res) {
+        // 经纬度
+        console.log('res.latitude, res.longitude', res.latitude, res.longitude);
+        resolve({ lat: res.latitude, lon: res.longitude });
+      },
+      fail: function (err) {
+        return err;
+      },
+    });
   });
 }
 /**
@@ -475,8 +530,9 @@ const getStoreInformationFn = (id) => {
         if (res.data.shop.labels && res.data.shop.labels !== '') {
           shopInfo.value.tagList = res.data.shop.labels.split(',');
         }
-        currentLatitudeAndLongitude.value.latitude = res.data.shop.location.lat;
-        currentLatitudeAndLongitude.value.longitude = res.data.shop.location.lon;
+        const { lat, lon } = res.data.shop.location;
+        shopLocation.value.lat = lat;
+        shopLocation.value.lon = lon;
         resolve();
       }
     });