接口

src/api/shop.js

 import { request } from '../utils/request';
 
-// 分类
+// 店铺信息
 export function getStoreInformation(data) {
   return request({
     url: `/sgyrdd/shop/getById?shopId=${data}`,
     method: 'GET',
   });
 }
+
+// 店铺信息
+export function groupBuyList(data) {
+  return request({
+    url: `/sgyrdd/prod/groupBuyList?shopId=${data}`,
+    method: 'GET',
+  });
+}
+
+// 商家评论列表分页
+export function getEvaluationPage(data) {
+  return request({
+    url: `/sgyrdd/evaluation/page`,
+    method: 'GET',
+    data,
+  });
+}
+// 获取商家优惠券
+export function couponShopList(data) {
+  return request({
+    url: `/sgyrdd/coupon/couponShopList/${data}`,
+    method: 'GET',
+  });
+}

src/pages/shop/shop.vue

@@ -60,17 +60,21 @@
               </view>
             </view>
             <view class="shop-business-hours">
-              <texe>营业时间: 11:00-22:30</texe>
+              <texe>营业时间: {{ shopInfo.transactionStart }}-{{ shopInfo.transactionEnd }}</texe>
             </view>
           </view>
         </view>
         <view class="shop-info-bottom">
           <view class="shop-address">
-            <text class="shop-distance">距您＜150米 {{ shopInfo.area }}</text>
-            <text class="shop-address-detail">{{ shopInfo.shopAddress }}(M区3栋)一层104 号</text>
+            <text class="shop-distance">距您{{ shopInfo.distance }} {{ shopInfo.area }}</text>
+            <text class="shop-address-detail">{{ shopInfo.shopAddress }}</text>
           </view>
           <view class="shop-map-phone">
-            <image class="img1" src="@/static/shop/map.png"></image>
+            <image
+              @tap="callShopPhone(shopInfo.phone)"
+              class="img1"
+              src="@/static/shop/map.png"
+            ></image>
             <image src="@/static/shop/phone.png"></image>
           </view>
         </view>
@@ -81,16 +85,16 @@
       <view class="subsidy-content">
         <view class="subsidy">
           <image src="@/static/shop/subsidy.png" />
-          <text>立减10元</text>
+          <text>{{ merchantCoupons.activityName }}</text>
         </view>
-        <view class="more">
+        <view class="more" @tap="jumpTocouponPage">
           <text>更多</text>
           <wd-icon name="arrow-right" size="24rpx"></wd-icon>
         </view>
       </view>
       <!-- 补贴-end -->
       <!-- 商品下单列表 -->
-      <view class="goods-list">
+      <!-- <view class="goods-list">
         <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 class="item-box">
@@ -104,7 +108,7 @@
           <text>立即下单 到店秒提</text>
           （共45个商品）
         </wd-button>
-      </view>
+      </view> -->
       <!-- 商品下单列表-end -->
       <!-- 团购优惠-start -->
       <view class="group-buying-discounts">
@@ -113,24 +117,28 @@
           <text>团购优惠</text>
         </view>
         <view class="group-buying-list">
-          <view class="group-buying-item" v-for="i in 3" :key="i">
-            <image class="goods-picture" src="@/static/shop/ice.png"></image>
+          <view
+            class="group-buying-item"
+            v-for="(item, index) in listOfGroupBuyingProducts"
+            :key="index"
+          >
+            <image class="goods-picture" :src="item.pic"></image>
             <view class="goods-info-detail">
-              <text class="goods-title multi-line">双人田蛙尝鲜餐</text>
-              <text class="yh-fl multi-line">蔬菜免费，米饭免费</text>
-              <text class="yh-time multi-line">周一至周日 11:00-23:00 可用</text>
+              <text class="goods-title multi-line">{{ item.prodName }}</text>
+              <text class="yh-fl multi-line">{{ item.brief }}</text>
+              <text class="yh-time multi-line">{{ item.rule }}</text>
               <view class="tag-list">
-                <view class="tag">过期退</view>
-                <view class="tag">随时退</view>
+                <view class="tag">{{ item.labelNames }}</view>
+                <!-- <view class="tag">随时退</view> -->
               </view>
               <view class="price">
                 <text class="num0">到手</text>
-                <text class="num">￥88</text>
-                <text class="num1">￥128</text>
+                <text class="num">￥{{ item.price }}</text>
+                <text class="num1">￥{{ item.oriPrice }}</text>
               </view>
             </view>
             <view class="pay">
-              <text class="sold-shares">已售36份</text>
+              <text class="sold-shares">已售{{ item.soldNum }}份</text>
               <view class="my-button-qg">抢购</view>
             </view>
           </view>
@@ -145,13 +153,13 @@
         </view>
         <!-- 评价列表 -->
         <view class="reviews-list">
-          <view class="reviews-item" v-for="i in 2" :key="i">
+          <view class="reviews-item" v-for="(item, index) in commentList" :key="index">
             <view class="user-info-box">
               <view class="u-info-detail">
                 <!-- 头像 -->
-                <image src="@/static/shop/ice.png" class="user-tx"></image>
+                <image :src="item.avatar" class="user-tx"></image>
                 <view class="u-name">
-                  <text>多多团购真好用</text>
+                  <text>{{ item.nickName }}</text>
                   <view class="u-pf">
                     <text>5分</text>
                     <wd-rate
@@ -165,10 +173,10 @@
                   </view>
                 </view>
               </view>
-              <text class="u-time">2024-07-14发表 南明区中环广场</text>
+              <text class="u-time">{{ item.createTime }}发表 南明区中环广场</text>
             </view>
             <view class="user-evaluate">
-              不得不说，味道非常好，很多配菜，份量很足，非常适合几个人聚 一起吃。
+              {{ item.evaluation }}
             </view>
             <view class="evaluate-img">
               <image v-for="i in 2" :key="i" src="@/static/shop/ice.png"></image>
@@ -241,14 +249,31 @@
 </template>
 
 <script setup>
-import { getStoreInformation } from '@/api/shop';
+import { getStoreInformation, groupBuyList, getEvaluationPage, couponShopList } from '@/api/shop';
+import { getDistance } from '@/utils/common';
 const imgUrl = import.meta.env.VITE_APP_IMG_URL;
 const current = ref(0);
 const old = reactive({ scrollTop: 0 });
 const activeId = ref(1);
 // 店铺信息
 const shopInfo = ref({});
+// 店铺轮播图
 const shopSwiperList = ref([]);
+// 当前位置的经纬度
+const currentLatitudeAndLongitude = ref({ latitude: 0, longitude: 0 });
+// 团购商品列表
+const listOfGroupBuyingProducts = ref([]);
+// 商家优惠券
+const merchantCoupons = ref({});
+// 评论分页
+const params = ref({
+  current: 1,
+  size: 50,
+  shopId: '1626126617850544129',
+  isEnd: false,
+});
+// 评价列表
+const commentList = ref([]);
 const tagList = ref([
   { name: '美食', id: 1 },
   { name: '休闲娱乐', id: 2 },
@@ -264,46 +289,34 @@ const swiperList = ref([
 
 onLoad((options) => {
   getStoreInformationFn('1626126617850544129');
+  groupBuyListFn('1626126617850544129');
+  couponShopListFn('1626126617850544129');
+  getEvaluationPageFn();
 });
 onShow(() => {
+  // 获取位置
   getLocationFn();
 });
 const value = ref(5);
-const handleClick = (e) => {
-  console.log(e);
-};
-const onChange = (e) => {
-  console.log(e);
-};
+const handleClick = (e) => {};
+const onChange = (e) => {};
 function scroll(e) {
-  console.log(e);
   old.scrollTop = e.detail.scrollTop;
 }
 
 function getLocationFn() {
-  // xma.getLocation({
-  //   type: 'wgs84',
-  //   success: function (res) {
-  //     console.log('经度：' + res.longitude);
-  //     console.log('纬度：' + res.latitude);
-  //   },
-  //   fail: function (err) {
-  //     console.error('获取位置失败：', err);
-  //   },
-  // });
-  if (navigator.geolocation) {
-    navigator.geolocation.getCurrentPosition(
-      function (position) {
-        console.log('经度123：' + position.coords.longitude);
-        console.log('纬度：' + position.coords.latitude);
+  xma.getLocation({
+    type: 'wgs84',
+    success: function (res) {
+      const myLatitude = currentLatitudeAndLongitude.value.latitude;
+      const myLongitude = currentLatitudeAndLongitude.value.longitude;
+      const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude);
+      shopInfo.value.distance = distance;
     },
-      function (error) {
-        console.error('获取位置失败：', error);
+    fail: function (err) {
+      return err;
     },
-    );
-  } else {
-    console.error('浏览器不支持Geolocation API');
-  }
+  });
 }
 
 // 获取店铺信息
@@ -313,12 +326,87 @@ const getStoreInformationFn = (id) => {
       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;
+    }
+  });
+};
+/**
+ * 获取团购列表
+ * @param {*} id
+ */
+const groupBuyListFn = (shopId) => {
+  groupBuyList(shopId).then((res) => {
+    if (res.code === 0) {
+      listOfGroupBuyingProducts.value = res.data.map((item) => {
+        item.pic = imgUrl + item.pic;
+        return item;
+      });
+
+      console.log('result', listOfGroupBuyingProducts);
+    }
+  });
+};
+/**
+ * 获取商家优惠券
+ */
+const couponShopListFn = (shopId) => {
+  couponShopList(shopId).then((res) => {
+    if (res.code === 0) {
+      console.log('res', res);
+      merchantCoupons.value = res.data[0];
+    }
+  });
+};
+/**
+ * 获取评价列表
+ */
+const getEvaluationPageFn = () => {
+  if (params.value.isEnd === true)
+    return new Promise((resolve) => {
+      resolve();
+    });
+  xma.showLoading({
+    title: '加载中...',
+    mask: true,
+  });
+  return getEvaluationPage({
+    current: params.value.current,
+    size: params.value.size,
+    shopId: params.value.shopId,
+  }).then((res) => {
+    if (res.code === 0) {
+      if (res.data.records.length < params.value.size) {
+        params.value.isEnd = true;
+      }
+      params.value.size += 1;
+      return new Promise((resolve) => {
+        commentList.value = commentList.value.concat(res.data.records);
+        xma.hideLoading();
+      });
     }
   });
 };
+/**
+ * 跳转优惠券页面
+ */
+const jumpTocouponPage() =>{
+xma.navigateTo({
+  url:`/pages`
+})
+}
 function changeActie(id) {
   activeId.value = id;
 }
+/**
+ * 拨打商家电话
+ * @param {*} phoneNumber
+ */
+function callShopPhone(phoneNumber) {
+  xma.makePhoneCall({
+    phoneNumber, // 仅为示例
+  });
+}
 </script>
 
 <style lang="scss">
@@ -401,6 +489,7 @@ page {
     // 商家信息
     .shop-info-box {
       height: 146 * 2rpx;
+      height: 116 * 2rpx;
     }
     .shop-info {
       width: 750rpx;
@@ -654,12 +743,15 @@ page {
       .group-buying-list {
         width: 100%;
         margin-top: 40rpx;
+        background: #fff;
         .group-buying-item {
           border-bottom: 2rpx solid #efefef;
           display: flex;
           align-items: center;
           padding-bottom: 40rpx;
+          padding-top: 20rpx;
           width: 100%;
+          background: #fdfdfd;
           image {
             width: 60 * 2rpx;
             height: 60 * 2rpx;
@@ -748,7 +840,7 @@ page {
     // 用户评价-start
     .user-reviews {
       width: 100%;
-      background-color: #fff;
+      background-color: #fdfdfd;
       box-sizing: border-box;
       padding: 11 * 2rpx;
       margin-top: 10rpx;
@@ -874,7 +966,7 @@ page {
     .surrounding-recommendations {
       width: 100%;
       border-radius: 8 * 2rpx 8 * 2rpx 0 0;
-      background: #ffffff;
+      background: #fdfdfd;
       display: flex;
       flex-direction: column;
       box-sizing: border-box;
@@ -991,3 +1083,4 @@ page {
   }
 }
 </style>
+@/utils/common.js

src/utils/common.js

+// 根据经纬度计算距离，参数分别为第一点的纬度、经度；第二点的纬度、经度
+export function getDistance(lat1, lng1, lat2, lng2) {
+  const R = 6371; // 地球半径，单位为千米
+  const dLat = deg2rad(lat2 - lat1);
+  const dLng = deg2rad(lng2 - lng1);
+  const a =
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    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) + '米';
+  }
+}
+
+// 将角度转换为弧度
+function deg2rad(deg) {
+  return deg * (Math.PI / 180);
+}