酒店详情页功能

yfyc/src/views/Construct/components/HomeList.vue

@@ -111,6 +111,9 @@ export default {
   created() {
     document.querySelector("#app").style.maxWidth = "500px";
     this.getList();
+    if (this.$route.query.autoWatch) {
+      this.handlClick(this.$route.query.autoWatch)
+    }
   },
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前

yfyc/src/views/Serve/Booking.vue

@@ -199,6 +199,7 @@ export default {
 
 <style lang="less" scoped>
 @import "../../assets/libs/swiper.css";
+
 .booking {
   background: #f1eff2;
   height: calc(100% - 80px);

yfyc/src/views/Serve/FoodDetail.vue

@@ -72,7 +72,7 @@
       </div>
       <div class="swiper-container-attractions">
         <div class="swiper-wrapper">
-          <div class="swiper-slide">
+          <div class="swiper-slide" @click="onClickAttraction">
             <img src="@/assets/img/service/老芜湖海关.png" alt="">
             <div class="title-wrap">
               <h4>{{attractionList[info.attractionIdx]}}</h4>
@@ -113,7 +113,7 @@ export default {
         })
       }
       return ret
-    }
+    },
   },
   methods: {
     onClickNav() {
@@ -125,6 +125,14 @@ export default {
           name: this.info.name,
         },
       })
+    },
+    onClickAttraction() {
+      this.$router.push({
+        name: 'HomeList',
+        query: {
+          autoWatch: 1,
+        }
+      })
     }
   },
   mounted() {

yfyc/src/views/Serve/HotelDetail.vue

@@ -1,26 +1,35 @@
 <template>
   <div class="hotel-detail">
     <div class="banner">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide"
+          v-for="(item, index) in bannerList"
+          :key="index"
+        >
+          <img :src="item" alt="">
+        </div>
+      </div>
+      <div class="swiper-pagination"></div>
     </div>
     <div class="title-area">
       <div class="title-bar">
         <div class="left">
-          <h2>芜湖金鹰尚美酒店</h2>
-          <div class="star">5星级</div>
+          <h2>{{info && info.name}}</h2>
+          <div class="star">{{info && info.star}}星级</div>
         </div>
-        <div class="right">
+        <!-- <div class="right">
           427余套客房· 684张床位
-        </div>
+        </div> -->
       </div>
       <div class="address-bar">
         <div class="left-wrap">
           <img class="icon" src="@/assets/img/service/address-gray.png" alt="" draggable="false">
           <div class="info">
-            <div class="address">芜湖市镜湖区中山北路77号</div>
-            <div class="distance">距您2.8km</div>
+            <div class="address">{{info && info.address}}</div>
+            <!-- <div class="distance">距您2.8km</div> -->
           </div>
         </div>
-        <button>
+        <button @click="onClickNav">
           <img class="icon" src="@/assets/img/service/navigation.png" alt="" draggable="false">
           <span>开启导航</span>
         </button>
@@ -33,14 +42,14 @@
               咨询电话
             </div>
             <div class="phone">
-              0533-3888999
+              {{info && info.phone}}
             </div>
           </div>
         </div>
-        <button>
+        <a :href="`tel: ${info && info.phone}`">
           <img class="icon" src="@/assets/img/service/phone-blue.png" alt="" draggable="false">
           <span>快速拨通</span>
-        </button>
+        </a>
       </div>
     </div>
     <div class="splitter">
@@ -55,8 +64,7 @@
           expand: isExpanded
         }"
       >
-        酒店位于芜湖市中心位置—中山北路，毗邻八佰伴、凤凰美食街、华强吾悦广场、苏宁广场，以及一步之遥的中山路步行街。酒店“闹中取静”，背靠繁华交通主干道，拥有独立的地下及地面停车场。<br>
-        酒店有三百余间客房，客房位于酒店21F以上，透过房间落地窗，可以饱览赭山或长江美景。房内提供无线宽带、频道选择、私人保险箱、咖啡和茶、配有浴缸和独立淋浴间的宽敞浴室。同时，酒店还为儿童们准备了独具特色的儿童主题房，希望能成为您和家人心中“行业的佼佼者”。
+        <p v-html="info && info.desc"></p>
         <button
           class="expand-content"
           v-show="!isExpanded"
@@ -69,57 +77,139 @@
     <div class="splitter" />
     <div class="food">
       <h2>周边美食</h2>
-      <button class="more">
+      <!-- <button class="more">
         更多
         <img class="" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
-      </button>
+      </button> -->
       <div class="food-photo-wrap"
-        v-for="n in 2"
-        :key="n"
+        v-for="(item, index) in relativeRestaurant"
+        :key="index"
+        @click=onClickFood(item)
       >
-        <img class="food-photo" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
-        <div class="food-name">无为板鸭</div>
+        <img class="food-photo" :src="require(`@/assets/img/service/food/${item.coverName}`)" alt="" draggable="false">
+        <div class="food-name">{{item.name}}</div>
       </div>
     </div>
     <div class="attractions">
       <h2>周边景点</h2>
-      <button class="more">
+      <!-- <button class="more">
         更多
         <img class="" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
-      </button>
-      <div class="attraction-photo-wrap"
-        v-for="n in 2"
-        :key="n"
+      </button> -->
+      <div
+        class="attraction-photo-wrap"
+        @click="onClickAttraction"
       >
-        <img class="attraction-photo" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
-        <div class="attraction-name">鸠兹古镇</div>
+        <img class="attraction-photo" src="@/assets/img/service/老芜湖海关.png" alt="" draggable="false">
+        <div class="attraction-name">老芜湖海关</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import serveData from "@/assets/data/serve/data.js";
+import Swiper, { Pagination } from "../../assets/libs/swiper.js";
+
 export default {
   data() {
     return {
       isExpanded: false,
+      info: null
+    }
+  },
+  computed: {
+    bannerList() {
+      const ret = []
+      if (this.info) {
+        for (let index = 0; index < this.info.imgNum; index++) {
+          const element = require(`@/assets/img/service/hotel/${this.info.id} (${index + 1}).jpg`)
+          ret.push(element)
+        }
+      }
+      return ret
+    },
+    relativeRestaurant() {
+      let ret = []
+      if (this.info) {
+        for (const restId of this.info.relativeRestaurant) {
+          ret.push(serveData.restaurantList.find((item) => {
+            return item.id === restId
+          }))
+        }
+      }
+      return ret
     }
   },
+  mounted() {
+    this.info = serveData.hotelList.find((item) => {
+      return item.id === this.$route.query.id
+    })
+    this.$nextTick(() => {
+      new Swiper(".banner", {
+          pagination: {
+            el: '.swiper-pagination',
+          },
+        // slidesPerView: 1.4,
+        // spaceBetween: 15,
+        // centeredSlides: true,
+      })
+    })
+  },
+  methods: {
+    onClickNav() {
+      this.$router.push({
+        name: 'MapNav',
+        params: {
+          x: this.info.x,
+          y: this.info.y,
+          name: this.info.name,
+        },
+      })
+    },
+    onClickFood(foodItem) {
+      this.$router.push({
+        name: 'FoodDetail',
+        query: {
+          id: foodItem.id,
+        }
+      })
+    },
+    onClickAttraction() {
+      this.$router.push({
+        name: 'HomeList',
+        query: {
+          autoWatch: 1,
+        }
+      })
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
+@import "../../assets/libs/swiper.css";
+
 .hotel-detail {
   background-color: #fff;
   height: calc(100% - 80px);
   overflow: auto;
   .banner {
     height: 62.9vw;
-    background-image: url(~@/assets/img/service/hotel-detail-banner.png);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
     overflow: hidden;
+    position: relative;
+    > .swiper-wrapper {
+      height: 100%;
+      .swiper-slide {
+        // width: 100vw;
+        height: 100%;
+        > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
   }
   .title-area {
     padding: 4vw;
@@ -136,6 +226,7 @@ export default {
           font-weight: bold;
           color: #515151;
           white-space: nowrap;
+          margin-right: 1.2vw;
         }
         .star {
           white-space: nowrap;
@@ -229,7 +320,7 @@ export default {
           }
         }
       }
-      > button {
+      > button, a {
         display: flex;
         align-items: center;
         .icon {

yfyc/src/views/Serve/HotelList.vue

@@ -56,7 +56,7 @@
       <article
         v-for="(item, index) in hotelListRaw"
         :key="index"
-        @click="onClickHotelList(index)"
+        @click="onClickHotelList(item)"
       >
         <div class="img-wrap">
           <img class="photo" :src="require(`@/assets/img/service/hotel/${item.coverImg}`)" alt="" draggable="false">
@@ -152,8 +152,8 @@ export default {
     onChange(v) {
       this.keyword = v
     },
-    onClickHotelList(index) {
-      this.$router.push({name: 'HotelDetail'})
+    onClickHotelList(item) {
+      this.$router.push({name: 'HotelDetail', query: {id: item.id}})
     },
   },
 }