1

src/api/shop.js

@@ -39,3 +39,19 @@ export function likeOrDislike(data) {
     data,
   });
 }
+// 周边推荐
+export function peripheryRecom(data) {
+  return request({
+    url: `/sgyrdd/category/peripheryRecomm`,
+    method: 'GET',
+    data,
+  });
+}
+// 商家列表分页-搜索列表
+export function sgyrddShopPage(data) {
+  return request({
+    url: `/sgyrdd/shop/page`,
+    method: 'GET',
+    data,
+  });
+}

src/pages/packageDetails/packageDetails.vue

@@ -4,13 +4,14 @@
     <view class="swiper">
       <wd-swiper
         customClass="swiper-custom"
-        :list="swiperList"
+        :list="prodInfo.imgs"
         autoplay
         height="512rpx"
         customStyle="border-radius: 0rpx;"
         :current="current"
         @click="handleClick"
         @change="onChange"
+        :indicator="{ type: 'dots-bar' }"
       ></wd-swiper>
     </view>
     <!-- 轮播-end -->
@@ -19,12 +20,12 @@
       <view class="package-details-num">
         <view class="num">
           <text class="icon">￥</text>
-          <text class="amount-of-money">88</text>
+          <text class="amount-of-money">{{ prodInfo.price }}</text>
         </view>
-        <view class="num2">￥128</view>
-        <view class="num3">共省￥30</view>
+        <view class="num2">￥{{ prodInfo.oriPrice }}</view>
+        <view class="num3">共省￥{{ (prodInfo.oriPrice - prodInfo.price).toFixed(2) }}</view>
       </view>
-      <view class="title">双人田蛙尝鲜餐(30元代金券一张，除酒水 饮料外全场通用，仅能使用一张)</view>
+      <view class="title">{{ prodInfo.prodName }}</view>
       <view class="info-card">
         <view class="yh">
           <text class="yh-name">优惠：</text>
@@ -134,7 +135,10 @@ const swiperList = ref([
   'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
   'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
 ]);
+const prodInfo = ref({});
 const myProdId = ref('');
+const current = ref(0);
+const imgUrl = import.meta.env.VITE_APP_IMG_URL;
 onLoad((options) => {
   const { prodId } = options;
   myProdId.value = prodId;
@@ -148,9 +152,37 @@ function getProdDetailFn(prodId) {
   getProdDetail(prodId).then((res) => {
     if (res.code === 0) {
       console.log('res', res);
+      res.data.data.prod.imgs = res.data.data.prod.imgs.split(',');
+      res.data.data.prod.imgs.push(res.data.data.prod.pic);
+      res.data.data.prod.imgs = res.data.data.prod.imgs
+        .map((item) => {
+          if (item !== '') {
+            item = imgUrl + item;
+          }
+          return item;
+        })
+        .filter((item) => {
+          return item !== '';
+        });
+      prodInfo.value = res.data.data.prod;
     }
   });
 }
+const handleClick = (e) => {
+  const { index } = e;
+  const imgSrc = prodInfo.value.imgs[index];
+  previewImage(imgSrc);
+};
+const onChange = (e) => {};
+/**
+ * 图片预览
+ */
+function previewImage(imgSrc) {
+  xma.previewImage({
+    current: imgSrc, // 当前显示图片的链接，不填则默认为 urls 的第一张
+    urls: [imgSrc], // 需要预览的图片链接列表
+  });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -169,6 +201,9 @@ page {
     :deep(.wd-swiper__track) {
       border-radius: 0;
     }
+    :deep(.wd-swiper-nav--bottom) {
+      bottom: 100rpx;
+    }
   }
   .package-details-card {
     width: 710rpx;
@@ -208,7 +243,7 @@ page {
         border-radius: 14rpx 14rpx 14rpx 0rpx;
         font-size: 10 * 2rpx;
         margin-left: 10rpx;
-        padding: 2rpx;
+        padding: 4rpx;
         color: #ff494e;
       }
     }

src/pages/shop/shop.vue

@@ -221,25 +221,30 @@
         <text class="title">周边推荐</text>
         <view class="tag-list">
           <view
-            @click="changeActie(item.id)"
-            :class="activeId == item.id ? 'active-tag' : ''"
+            @click="changeActie(item.categoryId)"
+            :class="activeId == item.categoryId ? 'active-tag' : ''"
             class="tag"
-            v-for="item in tagList"
-            :key="item.id"
+            v-for="item in recommendedTypesOfPeripherals"
+            :key="item.categoryId"
           >
-            {{ item.name }}
+            {{ item.categoryName }}
           </view>
         </view>
         <view class="goods-list-tg">
           <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
-            <view :id="i" class="scroll-view-item_H" v-for="i in 10" :key="i">
+            <view
+              :id="i"
+              class="scroll-view-item_H"
+              v-for="(item, index) in recommendedListOfPeripherals"
+              :key="index"
+            >
               <view class="item-box">
-                <image mode="aspectFill" src="@/static/shop/ice.png"></image>
-                <text class="goods-name multi-line">健康生态调味品</text>
+                <image mode="aspectFill" :src="imgUrl + item.shopLogo"></image>
+                <text class="goods-name multi-line">{{ item.shopName }}</text>
                 <view class="goods-pf-rs">
-                  <text class="goods-fs">4.3</text>
+                  <text class="goods-fs">{{ item.grade }}</text>
                   <text class="goods-fs-2">分</text>
-                  <text class="goods-rs">36/人</text>
+                  <!-- <text class="goods-rs">36/人</text> -->
                 </view>
                 <view class="tag-list">
                   <view class="tag" v-for="item in tagList2" :key="item.id">
@@ -267,8 +272,10 @@ import {
   groupBuyList,
   getEvaluationPage,
   couponShopList,
+  peripheryRecom,
+  sgyrddShopPage,
 } from '@/api/shop';
-import { addImgUrlPrefixToImages, getDistance, addImgUrlPrefix } from '@/utils/common';
+import { debounce, addImgUrlPrefixToImages, getDistance, addImgUrlPrefix } from '@/utils/common';
 const imgUrl = import.meta.env.VITE_APP_IMG_URL;
 const current = ref(0);
 const old = reactive({ scrollTop: 0 });
@@ -301,12 +308,17 @@ const tagList = ref([
   { name: '景点', id: 3 },
   { name: '生活服务', id: 4 },
 ]);
+// 周边推荐类型列表
+const recommendedTypesOfPeripherals = ref([]);
 // 商户id
 const shopId = ref('1626126617850544129');
 const tagList2 = ref([{ name: '免费停车', id: 1 }]);
-
+// 周边推荐-商家列表
+const recommendedListOfPeripherals = ref([]);
 onLoad((options) => {
-  getStoreInformationFn('1626126617850544129');
+  getStoreInformationFn('1626126617850544129').then(() => {
+    peripheryRecomFn();
+  });
   groupBuyListFn('1626126617850544129');
   couponShopListFn('1626126617850544129');
   getEvaluationPageFn();
@@ -326,6 +338,39 @@ function scroll(e) {
   old.scrollTop = e.detail.scrollTop;
 }
 
+/**
+ * 周边推荐类型列表
+ */
+function peripheryRecomFn() {
+  // 维度
+  const lat = currentLatitudeAndLongitude.value.latitude;
+  // 经度
+  const lon = currentLatitudeAndLongitude.value.longitude;
+  peripheryRecom({ lat, lon, distance: 200 }).then((res) => {
+    if (res.code === 0) {
+      recommendedTypesOfPeripherals.value = res.data;
+      const id = recommendedTypesOfPeripherals.value[0].categoryId;
+      activeId.value = id;
+      sgyrddShopPageFn(id);
+    }
+  });
+}
+function sgyrddShopPageFn(categoryIds) {
+  const params = {
+    current: 1,
+    size: 15,
+    lat: currentLatitudeAndLongitude.value.latitude,
+    lon: currentLatitudeAndLongitude.value.longitude,
+    categoryIds,
+    distance: 200,
+  };
+  sgyrddShopPage(params).then((res) => {
+    if (res.code === 0) {
+      recommendedListOfPeripherals.value = res.data.content;
+      console.log('res', res);
+    }
+  });
+}
 function getLocationFn() {
   xma.getLocation({
     type: 'wgs84',
@@ -343,14 +388,17 @@ function getLocationFn() {
 
 // 获取店铺信息
 const getStoreInformationFn = (id) => {
-  getStoreInformation(id).then((res) => {
-    if (res.code === 0) {
-      shopInfo.value = res.data.shop;
-      shopSwiperList.value = res.data.imgList.map((item) => imgUrl + item.imgUrl);
-      shopInfo.value.tagList = res.data.shop.labels.split(',');
-      currentLatitudeAndLongitude.value.latitude = res.data.shop.location.lat;
-      currentLatitudeAndLongitude.value.longitude = res.data.shop.location.lon;
-    }
+  return new Promise((resolve, reject) => {
+    getStoreInformation(id).then((res) => {
+      if (res.code === 0) {
+        shopInfo.value = res.data.shop;
+        shopSwiperList.value = res.data.imgList.map((item) => imgUrl + item.imgUrl);
+        shopInfo.value.tagList = res.data.shop.labels.split(',');
+        currentLatitudeAndLongitude.value.latitude = res.data.shop.location.lat;
+        currentLatitudeAndLongitude.value.longitude = res.data.shop.location.lon;
+        resolve();
+      }
+    });
   });
 };
 /**
@@ -373,7 +421,6 @@ const groupBuyListFn = (shopId) => {
 const couponShopListFn = (shopId) => {
   couponShopList(shopId).then((res) => {
     if (res.code === 0) {
-      console.log('res', res);
       merchantCoupons.value = res.data[0];
     }
   });
@@ -496,17 +543,23 @@ const viewAll = () => {
     }
   });
 };
+
+// 创建一个防抖后的函数
+const debouncedLog = debounce((id) => {
+  sgyrddShopPageFn(id);
+}, 800);
 function changeActie(id) {
   activeId.value = id;
+  debouncedLog(id);
 }
-onReachBottom(() => {
-  console.log('到底了');
-  if (isLoadReachBottom.value === true) return;
-  isLoadReachBottom.value = true;
-  getEvaluationPageFn().then(() => {
-    isLoadReachBottom.value = false;
-  });
-});
+// onReachBottom(() => {
+//   console.log('到底了');
+//   if (isLoadReachBottom.value === true) return;
+//   isLoadReachBottom.value = true;
+//   getEvaluationPageFn().then(() => {
+//     isLoadReachBottom.value = false;
+//   });
+// });
 /**
  * 拨打商家电话
  * @param {*} phoneNumber
@@ -1098,6 +1151,7 @@ page {
           padding: 6rpx 20rpx;
           margin-right: 20rpx;
           font-size: 11 * 2rpx;
+          margin-top: 20rpx;
         }
         .active-tag {
           border-radius: 10 * 2rpx;

src/utils/common.js

 // 根据经纬度计算距离，参数分别为第一点的纬度、经度；第二点的纬度、经度
-export function getDistance(lat1, lng1, lat2, lng2) {
+/**
+ *
+ * @param {*} lat1 第一个纬度
+ * @param {*} lng1 第一个经度
+ * @param {*} lat2 第二个纬度
+ * @param {*} lng2 第二个经度
+ * @param {*} type 0 中文 1 英文
+ * @returns
+ */
+export function getDistance(lat1, lng1, lat2, lng2, type = 1) {
   const R = 6371; // 地球半径，单位为千米
   const dLat = deg2rad(lat2 - lat1);
   const dLng = deg2rad(lng2 - lng1);
@@ -8,12 +17,13 @@ export function getDistance(lat1, lng1, lat2, lng2) {
     Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLng / 2) * Math.sin(dLng / 2);
   const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
   const distance = R * c;
-
-  if (distance >= 1) {
-    return distance.toFixed(2) + '千米';
-  } else {
-    return (distance * 1000).toFixed(2) + '米';
-  }
+  return distance >= 1
+    ? type === 0
+      ? distance.toFixed(2) + '千米'
+      : distance.toFixed(2) + 'km'
+    : type === 1
+      ? (distance * 1000).toFixed(2) + '米'
+      : (distance * 1000).toFixed(2) + 'm';
 }
 
 // 将角度转换为弧度
@@ -52,3 +62,14 @@ export function addImgUrlPrefixToImages(imgUrl, imagePaths) {
     return [];
   }
 }
+
+// 防抖
+export function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      func.apply(this, args);
+    }, wait);
+  };
+}