享服务-酒店列表

src/components/SearchTransparent.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="search-wrap">
+    <button
+      @click="onClickSearch"
+      class="search"
+    >
+      <img class="icon" src="@/assets/img/service/search-white.png" alt="" draggable="false">
+    </button>
+    <input
+      v-model.trim="keyword"
+      maxlength="30"
+      type="text"
+      :placeholder="placeholder"
+      @keydown.enter="onClickSearch"
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: '请输入酒店名称',
+    }
+  },
+  data() {
+    return {
+      keyword: '',
+    }
+  },
+  methods: {
+    onClickSearch() {
+      this.$emit('search', this.keyword)
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.search-wrap {
+  height: 10.7vw;
+  background: rgba(0, 0, 0, 0.65);
+  border: 1px solid #FFFFFF;
+  border-radius: 2.7vw;
+  display: flex;
+  align-items: center;
+  font-size: 4.3vw;
+  padding: 0 3.5vw;
+  > button.search {
+    flex: 0 0 auto;
+    width: 4vw;
+    height: 4vw;
+    position: relative;
+    margin-right: 2.1vw;
+    > img.icon {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  > input {
+    flex: 1 0 1px;
+    height: 100%;
+    color: #fff;
+  }
+}
+</style>

src/components/Select.vue

@@ -7,7 +7,7 @@
       }"
       @click="isExpand = !isExpand"
     >
-      {{value ? value : placeholder}}
+      {{value ? valueList[value] : placeholder}}
       <img
         class="pulldown-icon"
         :src="isExpand ? require('@/assets/img/service/arrow-down-active.png') : require('@/assets/img/service/arrow-down.png')"
@@ -18,9 +18,9 @@
     <div class="menu" v-show="isExpand">
       <button v-for="(item, index) of valueList" :key="index"
         :class="{
-          active: item === value,
+          active: index === value,
         }"
-        @click="onSelect(item)"
+        @click="onSelect(index)"
       >
         {{item}}
       </button>
@@ -35,8 +35,7 @@ export default {
       type: Array,
       default: function() {
         return [
-        '111',
-        '222',
+        'all',
         ]
       },
     },
@@ -45,8 +44,8 @@ export default {
       default: '',
     },
     value: {
-      type: String,
-      default: '111'
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -60,9 +59,9 @@ export default {
         this.isExpand = false
       }
     },
-    onSelect(item) {
+    onSelect(index) {
       this.isExpand = false
-      this.$emit('input', item)
+      this.$emit('input', index)
     }
   }
 }

src/router/index.js

@@ -152,6 +152,15 @@ const routes = [{
         },
         component: () => import('../views/Serve/HelpCenter.vue')
       },
+      {
+        path: '/layout/serve/hotel-list',
+        name: 'HotelList',
+        meta: {
+          myInd: 2,
+          myTitle: '酒店',
+        },
+        component: () => import('../views/Serve/HotelList.vue')
+      },
       /**
        * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        */

src/views/Serve/DontMiss.vue

@@ -5,12 +5,12 @@
       <Select
         class="select"
         :valueList="typeList"
-        v-model="type"
+        v-model="typeIdx"
         :placeholder="'分类'"
       ></Select>
       <Select
         class="select"
-        v-model="area"
+        v-model="areaIdx"
         :valueList="areaList"
         :placeholder="'区域'"
       ></Select>
@@ -42,8 +42,8 @@ export default {
   },
   data() {
     return {
-      type: '',
-      area: '',
+      typeIdx: 0,
+      areaIdx: 0,
       attractionList: [
         {
           img: require(`@/assets/img/service/【西洋建筑】.png`),
@@ -91,6 +91,7 @@ export default {
   computed: {
     typeList() {
       return [
+        '全部',
         '分类一',
         '分类二',
         '分类三',
@@ -98,6 +99,7 @@ export default {
     },
     areaList() {
       return [
+        '全部',
         '镜湖区',
         '弋江区',
         '鸠江区',

src/views/Serve/HotelList.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="hotel-list-page">
+    <div class="banner-wrap">
+      <SearchBar class="search-bar" @search="onSearch"></SearchBar>
+    </div>
+    <div class="select-wrap">
+      <Select
+        class="select"
+        :valueList="starList"
+        v-model="starIdx"
+        :placeholder="'星级'"
+      ></Select>
+      <Select
+        class="select"
+        v-model="areaIdx"
+        :valueList="areaList"
+        :placeholder="'景点周边'"
+      ></Select>
+      <Select
+        class="select"
+        v-model="recoLevelIdx"
+        :valueList="recoLevelList"
+        :placeholder="'推荐指数'"
+      ></Select>
+    </div>
+    
+    <div class="card-list">
+      <article
+        v-for="(item, index) in hotelList"
+        :key="index"
+      >
+        <div class="img-wrap">
+          <img class="photo" :src="item.img" 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.title}}</h2>
+        <div class="bottom-wrap">
+          <div class="reco">
+            推荐指数：
+            <img v-for="index in item.reco" :key="index" class="" src="@/assets/img/service/star.png" alt="" draggable="false">
+          </div>
+          <div class="phone">
+            电话：{{item.phone}}
+          </div>
+        </div>
+      </article>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import SearchBar from "@/components/SearchTransparent.vue";
+import Select from "@/components/Select.vue";
+export default {
+  components: {
+    SearchBar,
+    Select,
+  },
+  data() {
+    return {
+      starIdx: 0,
+      areaIdx: 0,
+      recoLevelIdx: 0,
+      hotelList: [
+        {
+          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',
+        },
+        {
+          img: require('@/assets/img/service/hotel.png'),
+          star: 5,
+          address: '镜湖区中山北路77号',
+          viewCount: 157,
+          title: '芜湖金鹰尚美酒店',
+          reco: 5,
+          phone: '0533-3888999',
+        },
+      ]
+    }
+  },
+  computed: {
+    starList() {
+      return [
+        '全部',
+        '五星',
+        '四星',
+        '三星',
+      ]
+    },
+    areaList() {
+      return [
+        '全部',
+        '景点一',
+        '景点二',
+        '景点三',
+      ]
+    },
+    recoLevelList() {
+      return [
+        '全部',
+        '五星',
+        '四星',
+        '三星',
+        '二星',
+        '一星',
+      ]
+    }
+  },
+  methods: {
+    onSearch() {
+
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.hotel-list-page {
+  height: calc(100% - 80px);
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  > .banner-wrap {
+    flex: 0 0 auto;
+    height: 40vw;
+    background-image: url(~@/assets/img/service/hotel-banner.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    overflow: hidden;
+    margin-bottom: 4.1vw;
+    position: relative;
+    > .search-bar {
+      position: absolute;
+      bottom: 4.8vw;
+      left: 50%;
+      width: 80.1vw;
+      transform: translateX(-50%);
+    }
+  }
+  > .select-wrap {
+    flex: 0 0 auto;
+    margin: 0 4vw 4vw 4vw;
+    > .select {
+      display: inline-block;
+      margin-right: 5vw;
+    }
+  }
+  > .card-list {
+    flex: 1 0 1px;
+    margin-left: 4vw;
+    margin-right: 4vw;
+    overflow: auto;
+    > article {
+      padding-bottom: 2.7vw;
+      margin-bottom: 4vw;
+      > .img-wrap {
+        height: 53.3vw;
+        border-radius: 1.1vw;
+        position: relative;
+        overflow: hidden;
+        > img.photo {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        > .star {
+          position: absolute;
+          top: 0;
+          right: 0;
+          background: rgba(200, 17, 17, 0.75);
+          padding: 2vw 2.5vw;
+          font-size: 4vwpx;
+          font-weight: 500;
+          color: #ffe400;
+        }
+        > .address {
+          position: absolute;
+          left: 2vw;
+          bottom: 2vw;
+          font-size: 3.2vw;
+          font-weight: 500;
+          color: #FFFFFF;
+          display: flex;
+          align-items: center;
+          > img.icon {
+            width: 2.7vw;
+            height: 3.6vw;
+            margin-right: 1.2vw;
+          }
+        }
+        > .view-count {
+          position: absolute;
+          right: 2.3vw;
+          bottom: 2vw;
+          font-size: 3.2vw;
+          font-weight: 500;
+          color: #FFFFFF;
+          display: flex;
+          align-items: center;
+          > img.icon {
+            width: 4.3vw;
+            height: 3.1vw;
+            margin-right: 1.3vw;
+          }
+        }
+      }
+      > h2 {
+        margin: 2.7vw 2vw 3vw 2vw;
+        font-size: 4.8vw;
+        font-weight: 500;
+        color: #515151;
+      }
+      > .bottom-wrap {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 2vw;
+        > .reco {
+          font-size: 3.5vw;
+          color: #515151;
+          > img {
+            width: 3.3vw;
+            height: 3.3vw;
+            margin-right: 0.2vw;
+          }
+        }
+        > .phone {
+          font-size: 3.5vw;
+          color: #515151;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Serve/index.vue

@@ -21,7 +21,7 @@
         <img src="@/assets/img/service/出行.png" alt="" draggable="false">
         <div>出行</div>
       </router-link>
-      <router-link class="entry" to="/">
+      <router-link class="entry" :to="{name: 'HotelList'}">
         <img src="@/assets/img/service/酒店住宿.png" alt="" draggable="false">
         <div>酒店住宿</div>
       </router-link>