建筑全景增加二级页面

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@types/node": "^20.5.0",
+        "easyscroller": "^1.0.1",
         "pinia": "^2.1.6",
         "swiper": "^10.2.0",
         "vant": "^4.6.4",
@@ -781,6 +782,11 @@
         }
       }
     },
+    "node_modules/easyscroller": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/easyscroller/-/easyscroller-1.0.1.tgz",
+      "integrity": "sha512-B+HKdH5EhPxFWmnr5sp97eGNjOU7bgGCzStw3W3HZ7Yt/cmzN9J3MPt2ctBvB/E4cmoFKQx/xW3z88dQ8M7EeA=="
+    },
     "node_modules/errno": {
       "version": "0.1.8",
       "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
@@ -2276,6 +2282,11 @@
         "ms": "2.1.2"
       }
     },
+    "easyscroller": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/easyscroller/-/easyscroller-1.0.1.tgz",
+      "integrity": "sha512-B+HKdH5EhPxFWmnr5sp97eGNjOU7bgGCzStw3W3HZ7Yt/cmzN9J3MPt2ctBvB/E4cmoFKQx/xW3z88dQ8M7EeA=="
+    },
     "errno": {
       "version": "0.1.8",
       "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@types/node": "^20.5.0",
+    "easyscroller": "^1.0.1",
     "pinia": "^2.1.6",
     "swiper": "^10.2.0",
     "vant": "^4.6.4",

src/store/Panorama/index.ts

@@ -1,16 +1,14 @@
 import { defineStore } from "pinia";
-export const useModel = defineStore("model", {
+export const usePanorama = defineStore("model", {
   // 相当于data
   state: () => {
     return {
-     
+      // 当前行政区下标
+      currentIndex: 0,
     };
   },
   // 相当于计算属性
-  getters: {
-  },
+  getters: {},
   // 相当于vuex的 mutation + action，可以同时写同步和异步的代码
-  actions: {
-
-  },
+  actions: {},
 });

src/utils/tool.ts

@@ -1,20 +1,20 @@
 // 随机生成0-maxNum 中 n个字符
-  const getNumNoRepeat = (maxNum: number, n: number) => {
+const getNumNoRepeat = (maxNum: number, n: number) => {
   let arr = [] as any;
   let nNumber = n;
-  while (getNumNoRepeat) {
+  while (nNumber) {
     var num = Math.floor(Math.random() * maxNum) + 1;
     if (-1 == arr.indexOf(num)) {
-      if (arr.length < n) {
-        arr.push(num);
-      } else if (arr.length === n) {
-        arr.push(num);
-        return arr;
-      }
+      arr.push(num);
     }
     nNumber--;
   }
-  
+  // console.log(arr)
+  return arr
 };
 
-export default getNumNoRepeat
+export const getAssetURL = (image: string) => {
+  return new URL(`../../assets/img/map/nornal/${image}`, import.meta.url).href;
+};
+
+export default getNumNoRepeat;

src/view/bldgMap/detail/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import ModelList from "@/assets/data/Model/index";
+import ModelList, { baseURL } from "@/assets/data/Model/index";
 import { ModelType } from "@/types/Model/index";
 import getNumNoRepeat from "@/utils/tool";
+import restaurantList, { hotelList } from "@/assets/data/recommend/index";
 import Swiper from "swiper";
 import "swiper/swiper-bundle.css";
 import { nextTick } from "vue";
@@ -22,15 +23,14 @@ const goVr = (code: string) => {
 };
 
 // 美食的两个随机推荐
-const recommendFoodIndexs = ref([]);
+const recommendFoods = ref([]);
 // 酒店的两个随机推荐
-const recommendHotelIndexs = ref([])
+const recommendHotels = ref([]);
 
 const lastY = ref(0);
 const bottomHeight = ref("50%");
 // 手指滑动
 const touchMove = (event: any) => {
-  console.log("查看随机数", recommendFoodIndexs, recommendHotelIndexs);
   // 左右切换为 X 即可
   let currentY = event.changedTouches[0].pageY;
   let ty = currentY - lastY.value;
@@ -51,19 +51,43 @@ const handletouchstart = (event: any) => {
 // 当前轮播下标
 const swiperActiveIndex = ref(0);
 
+const itRecommend = () => {
+  // 产生推荐的随机数
+  let recommendFoodIndexs = getNumNoRepeat(
+    currentScene.value.recommend.food.length - 1,
+    2
+  );
+  const recommendHotelIndexs = getNumNoRepeat(
+    currentScene.value.recommend.hotel.length - 1,
+    2
+  );
+  console.log(typeof recommendFoodIndexs);
+
+  if (recommendFoodIndexs && recommendHotelIndexs) {
+    // 获取推荐信息——美食
+    recommendFoodIndexs.forEach((index: number) => {
+      const res = restaurantList.find((item: any) => {
+        return item.id == currentScene.value.recommend.food[index];
+      });
+      recommendFoods.value.push(res);
+    });
+    // 获取推荐信息——酒店
+    recommendHotelIndexs.forEach((index: number) => {
+      const res = hotelList.find((item: any) => {
+        return item.id == currentScene.value.recommend.hotel[index];
+      });
+      recommendHotels.value.push(res);
+    });
+  }
+  console.log(recommendFoods.value, recommendHotels.value);
+};
+
 onMounted(async () => {
   await nextTick(() => {
     currentScene.value = ModelList.find((item: ModelType) => {
       return item.code === route.query.code;
     });
-    recommendFoodIndexs.value = getNumNoRepeat(
-      currentScene.value.recommend.food.length,
-      2
-    );
-    recommendHotelIndexs.value = getNumNoRepeat(
-      currentScene.value.recommend.hotel.length,
-      2
-    );
+    itRecommend();
   });
 
   var swiper = new Swiper(".mySwiper", {
@@ -159,24 +183,38 @@ onMounted(async () => {
         <div class="bottom-recommend-content">
           <!-- 食物 -->
           <div class="content-item">
-            <div class="item">
-              <img src="@/assets/img/map/recommend/1/food/1(1).jpg" alt="" />
-              <div>同庆楼</div>
-            </div>
-            <div class="item">
-              <img src="@/assets/img/map/recommend/1/food/2(1).jpg" alt="" />
-              <div>荣悦荟洋房海鲜火锅(滨江店)</div>
+            <div
+              class="item"
+              v-for="(item, index) in recommendFoods"
+              :key="item.id"
+            >
+              <img
+                :src="baseURL + '/image/service/food/' + item.coverName"
+                alt=""
+              />
+              <div>{{ item.name }}</div>
             </div>
           </div>
           <!-- 酒店 -->
           <div class="content-item">
-            <div class="item">
+            <!-- <div class="item">
               <img src="@/assets/img/map/recommend/1/hotel/2(1).jpg" alt="" />
               <div>MS美宿艺术品酒店</div>
             </div>
             <div class="item">
               <img src="@/assets/img/map/recommend/1/hotel/3(1).jpg" alt="" />
               <div>芜湖奇士商务酒店</div>
+            </div> -->
+            <div
+              class="item"
+              v-for="(item, index) in recommendHotels"
+              :key="item.id"
+            >
+              <img
+                :src="baseURL + '/image/service/hotel/' + item.coverImg"
+                alt=""
+              />
+              <div>{{ item.name }}</div>
             </div>
           </div>
         </div>
@@ -400,6 +438,7 @@ onMounted(async () => {
               text-overflow: ellipsis;
               overflow: hidden;
               white-space: nowrap;
+              margin-top: 0px;
             }
           }
         }

src/view/bldgModel/index.vue

@@ -11,6 +11,7 @@ const store = useModel();
 const baseImageUrl = computed(() => {
   return baseURL + "/image/bldgModel/";
 });
+
 // 跳转到模型详情页
 const goDetail = (code: string) => {
   console.log("code", code);
@@ -34,6 +35,13 @@ const goChange = () => {
 
 onMounted(() => {
   //   store.list = ModelList;
+  setTimeout(() => {
+    window.scrollTo({
+      top: 560,
+      left: 0,
+      behavior: "smooth",
+    });
+  });
 });
 </script>
 

src/view/bldgPanorama/index.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import Tabbar from "@/components/Tabbar.vue";
 import { countyMapData } from "@/assets/data/Model";
+import { usePanorama } from "@/store/Panorama/index";
 
 const currentIndex = ref(0);
 const router = useRouter();
+const store = usePanorama();
 const goDetail = (param: string | number) => {
-  console.log(param)
   if (typeof param == "number") {
     // 当前为芜湖市地图，更换地图
-    currentIndex.value = param;
+    currentIndex.value = param + 1;
   } else {
     router.push({
       path: "/bldgPanorama/detail",
@@ -17,12 +18,20 @@ const goDetail = (param: string | number) => {
       },
     });
   }
-  console.log(currentIndex.value)
+  console.log(currentIndex.value);
 };
 
 const getAssetURL = (image: string) => {
   return new URL(`../../assets/img/panorama/${image}`, import.meta.url).href;
 };
+
+watch(currentIndex, (newVale: any) => {
+  store.currentIndex = newVale;
+});
+
+onMounted(() => {
+  currentIndex.value = store.currentIndex;
+});
 </script>
 
 <template>
@@ -30,7 +39,7 @@ const getAssetURL = (image: string) => {
   <div class="panorama">
     <div v-for="(item, index) in countyMapData" :key="index">
       <div v-if="index === currentIndex">
-        <img :src="getAssetURL(item.bgImg)" alt="" />
+        <img :src="getAssetURL(item.bgImg)" alt="" id="box" />
         <div
           class="box-1"
           v-for="(label, index2) in item.labels"
@@ -38,17 +47,45 @@ const getAssetURL = (image: string) => {
           :style="{
             top: label.top,
             left: label.left,
-            height: label.name === '弋江区' ? '16rem' : '10rem',
+            height: label.height ? label.height : '10rem',
+            width: label.width ? label.width : 'auto',
           }"
         >
-          <div class="title" @click="goDetail(currentIndex === 0 ? index2: label.name)">{{ `${label.name}` }}</div>
+          <div
+            class="title"
+            @click="goDetail(currentIndex === 0 ? index2 : label.name)"
+            :style="{
+              transform: label.width ? `translate(${label.width},-50%)` : 'translate(-50%,-50%)',
+            }"
+          >
+            {{ `${label.name}` }}
+          </div>
           <div class="dian-small"></div>
           <div class="dian-big"></div>
         </div>
       </div>
     </div>
+    <div class="option-box">
+      <div
+        v-for="(item, index) in countyMapData"
+        :key="index"
+        class="btn"
+        :style="{ background: index == currentIndex ? '#fff' : '#767265' }"
+        @click="
+          () => {
+            currentIndex = index;
+          }
+        "
+      >
+        <div
+          class="circle"
+          :class="{ 'circle-active': index === currentIndex }"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
   </div>
-
   <Tabbar />
 </template>
 
@@ -69,9 +106,11 @@ const getAssetURL = (image: string) => {
     height: 10rem;
     background: rgba(0, 128, 0, 0);
     border-left: 1px dashed #2058bd;
+    border-top: 1px dashed #2058bd;
     position: absolute;
     left: 6.6rem;
     top: 16rem;
+    box-sizing: border-box;
     // position: relative;
 
     .title {
@@ -149,5 +188,51 @@ const getAssetURL = (image: string) => {
     //   left: -10px;
     // }
   }
+
+  .option-box {
+    width: 100%;
+    height: 9.5rem;
+    position: fixed;
+    bottom: 0;
+    background: rgba(83, 83, 83, 0.384);
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 10px 50px 10px;
+    box-sizing: border-box;
+
+    .btn {
+      border: 2px solid white;
+      width: 4rem;
+      text-align: center;
+      line-height: 2rem;
+      height: 2rem;
+      font-size: 1rem;
+      color: #767265;
+      font-weight: bold;
+      background: #767265;
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 0 10px #767265;
+
+      .circle {
+        width: 3.8rem;
+        height: 3.8rem;
+        background: white;
+        border-radius: 50%;
+        line-height: 3.8rem;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      .btn-active {
+        background: white !important;
+      }
+      .circle-active {
+        background: #767265;
+        color: white;
+      }
+    }
+  }
 }
 </style>