酒店列表页

yfyc/src/views/Serve/HotelList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="hotel-list-page">
     <div class="banner-wrap">
-      <SearchBar class="search-bar" @search="onSearch"></SearchBar>
+      <SearchBar class="search-bar" @change="onChange"></SearchBar>
     </div>
     <div class="select-wrap">
       <Select
@@ -12,8 +12,8 @@
       ></Select>
       <Select
         class="select"
-        v-model="areaIdx"
-        :valueList="areaList"
+        v-model="attractionIdx"
+        :valueList="attractionList"
         :placeholder="'景点周边'"
       ></Select>
       <Select
@@ -25,7 +25,7 @@
     </div>
     
     <div class="card-list">
-      <article
+      <!-- <article
         v-for="(item, index) in hotelList"
         :key="index"
         @click="onClickHotelList(index)"
@@ -52,6 +52,34 @@
             电话：{{item.phone}}
           </div>
         </div>
+      </article> -->
+      <article
+        v-for="(item, index) in hotelListRaw"
+        :key="index"
+        @click="onClickHotelList(index)"
+      >
+        <div class="img-wrap">
+          <img class="photo" :src="require(`@/assets/img/service/hotel/${item.coverImg}`)" alt="" draggable="false">
+          <div class="star">{{item.star}}星级</div>
+          <div class="address">
+            <img class="icon" src="@/assets/img/service/address-white.png" alt="" draggable="false">
+            {{item.address}}
+          </div>
+          <!-- <div class="view-count">
+            <img class="icon" src="@/assets/img/service/eye-white.png" alt="" draggable="false">
+            {{item.viewCount}}
+          </div> -->
+        </div>
+        <h2>{{item.name}}</h2>
+        <div class="bottom-wrap">
+          <div class="reco">
+            推荐指数：
+            <img v-for="index in item.recoLevel" :key="index" class="" src="@/assets/img/service/star.png" alt="" draggable="false">
+          </div>
+          <div class="phone">
+            电话：{{item.phone}}
+          </div>
+        </div>
       </article>
     </div>
     
@@ -61,6 +89,8 @@
 <script>
 import SearchBar from "@/components/SearchTransparent.vue";
 import Select from "@/components/Select.vue";
+import serveData from "@/assets/data/serve/data.js";
+
 export default {
   components: {
     SearchBar,
@@ -68,8 +98,9 @@ export default {
   },
   data() {
     return {
+      keyword: '',
       starIdx: 0,
-      areaIdx: 0,
+      attractionIdx: 0,
       recoLevelIdx: 0,
       hotelList: [
         {
@@ -81,33 +112,6 @@ export default {
           reco: 5,
           phone: '0533-3888999',
         },
-        {
-          img: require('@/assets/img/service/hotel.png'),
-          star: 5,
-          address: '镜湖区中山北路77号',
-          viewCount: 157,
-          title: '芜湖金鹰尚美酒店',
-          reco: 5,
-          phone: '0533-3888999',
-        },
-        {
-          img: require('@/assets/img/service/hotel.png'),
-          star: 5,
-          address: '镜湖区中山北路77号',
-          viewCount: 157,
-          title: '芜湖金鹰尚美酒店',
-          reco: 5,
-          phone: '0533-3888999',
-        },
-        {
-          img: require('@/assets/img/service/hotel.png'),
-          star: 5,
-          address: '镜湖区中山北路77号',
-          viewCount: 157,
-          title: '芜湖金鹰尚美酒店',
-          reco: 5,
-          phone: '0533-3888999',
-        },
       ]
     }
   },
@@ -120,13 +124,8 @@ export default {
         '三星',
       ]
     },
-    areaList() {
-      return [
-        '全部',
-        '景点一',
-        '景点二',
-        '景点三',
-      ]
+    attractionList() {
+      return serveData.attractionList
     },
     recoLevelList() {
       return [
@@ -134,14 +133,24 @@ export default {
         '五星',
         '四星',
         '三星',
-        '二星',
-        '一星',
       ]
+    },
+    hotelListRaw() {
+      console.log(this.starList.length - this.starIdx);
+      return serveData.hotelList.filter((item) => {
+        return (6 - item.star) === this.starIdx || this.starIdx === 0
+      }).filter((item) => {
+        return (6 - item.recoLevel) === this.recoLevelIdx || this.recoLevelIdx === 0
+      }).filter((item) => {
+        return item.attractionIdx === (this.attractionList.length - this.attractionIdx) || this.attractionIdx === 0
+      }).filter((item) => {
+        return item.name.includes(this.keyword)
+      })
     }
   },
   methods: {
-    onSearch() {
-
+    onChange(v) {
+      this.keyword = v
     },
     onClickHotelList(index) {
       this.$router.push({name: 'HotelDetail'})