店铺

src/api/shop.js

+import { request } from '../utils/request';
+
+// 分类
+export function getStoreInformation(data) {
+  return request({
+    url: `/sgyrdd/shop/getById?shopId=${data}`,
+    method: 'GET',
+  });
+}

src/pages/shop/shop.vue

@@ -20,13 +20,14 @@
     <view class="swiper">
       <wd-swiper
         customClass="swiper-custom"
-        :list="swiperList"
+        :list="shopSwiperList"
         autoplay
         height="536rpx"
         customStyle="border-radius: 0rpx;"
         :current="current"
         @click="handleClick"
         @change="onChange"
+        :indicator="{ type: 'dots-bar' }"
       ></wd-swiper>
     </view>
     <view class="content">
@@ -34,33 +35,24 @@
       <view class="shop-info">
         <view class="shop-info-top">
           <view class="shop-info-detail">
-            <text class="shop-title">川心美蛙鱼头火锅(中环广场店)</text>
+            <text class="shop-title">{{ shopInfo.shopName }}</text>
             <view class="shop-tag-list">
-              <view class="tag-item">
-                <text>中环广场卤煮 第1名</text>
-              </view>
-              <view class="tag-item">
-                <text>火锅</text>
-              </view>
-              <view class="tag-item">
-                <text>免费wifi</text>
-              </view>
-              <view class="tag-item">
-                <text>朋友聚餐</text>
+              <view class="tag-item" v-for="(item, index) in shopInfo.tagList" :key="index">
+                <text>{{ item }}</text>
               </view>
             </view>
           </view>
           <view class="shop-info-right">
             <view class="shop-info-score">
               <view class="score-text">
-                <text class="score-num">4.5</text>
+                <text class="score-num">{{ shopInfo.grade }}</text>
                 <text class="tj">推荐</text>
               </view>
               <view class="score-icon">
                 <wd-rate
                   color="#fff"
                   readonly
-                  v-model="value"
+                  v-model="shopInfo.grade"
                   size="22rpx"
                   space="8rpx"
                   :active-color="['#FA5151']"
@@ -74,8 +66,8 @@
         </view>
         <view class="shop-info-bottom">
           <view class="shop-address">
-            <text class="shop-distance">距您＜150米 南明区</text>
-            <text class="shop-address-detail">南明区后巢乡花果园中环广场3号(M区3栋)一层104 号</text>
+            <text class="shop-distance">距您＜150米 {{ shopInfo.area }}</text>
+            <text class="shop-address-detail">{{ shopInfo.shopAddress }}(M区3栋)一层104 号</text>
           </view>
           <view class="shop-map-phone">
             <image class="img1" src="@/static/shop/map.png"></image>
@@ -249,10 +241,14 @@
 </template>
 
 <script setup>
-import navBar from '@/Components/navBar/navBar.vue';
+import { getStoreInformation } from '@/api/shop';
+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 tagList = ref([
   { name: '美食', id: 1 },
   { name: '休闲娱乐', id: 2 },
@@ -265,6 +261,13 @@ 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',
 ]);
+
+onLoad((options) => {
+  getStoreInformationFn('1626126617850544129');
+});
+onShow(() => {
+  getLocationFn();
+});
 const value = ref(5);
 const handleClick = (e) => {
   console.log(e);
@@ -276,6 +279,43 @@ 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);
+      },
+      function (error) {
+        console.error('获取位置失败：', error);
+      },
+    );
+  } else {
+    console.error('浏览器不支持Geolocation API');
+  }
+}
+
+// 获取店铺信息
+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(',');
+    }
+  });
+};
 function changeActie(id) {
   activeId.value = id;
 }
@@ -350,6 +390,9 @@ page {
     :deep(.wd-swiper__track) {
       border-radius: 0;
     }
+    :deep(.wd-swiper-nav--bottom) {
+      bottom: 100rpx;
+    }
   }
 
   .content {

vite.config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
-  },
+  }, 
   server: {
     open: true,
     // 代理配置