YFYC-H5/yfyc/src/views/Serve/index.vue

<template>
  <div class="service" id="service-first-page">
    <div
      class="banner"
      :style="{
        backgroundImage: `url(${bannerImgUrl})`
      }"
    >
      <!-- <SearchBar class="search-bar" @search="onSearch" @click.stop></SearchBar> -->
    </div>
    
    <menu>
      <button class="entry" @click="onClickBooking">
        <img src="@/assets/img/service/booking.png" alt="" draggable="false">
        <div>预约</div>
      </button>
      <router-link class="entry" :to="{name: 'FoodList'}">
        <img src="@/assets/img/service/美食.png" alt="" draggable="false">
        <div>美食</div>
      </router-link>
      <router-link class="entry" :to="{name: 'HotelList'}">
        <img src="@/assets/img/service/酒店住宿.png" alt="" draggable="false">
        <div>酒店住宿</div>
      </router-link>
      <router-link
        class="entry"
        :to="{
          name: 'MapNav',
          query: {
            x: 118.35714,
            y: 31.336011,
            name: '老芜湖海关',
          },
        }"
      >
        <img src="@/assets/img/service/路线.png" alt="" draggable="false">
        <div>导航</div>
      </router-link>
    </menu>

    <!-- <div class="travel-route-1">
      <router-link class="entry" to="/">一日游推荐路线</router-link>
    </div> -->

    <div class="travel-route-2">
      <h3>推荐路线</h3>
      <router-link class="more" :to="{name: 'RecommendedPath'}">更多  》</router-link>
      <div class="grid-wrap">
        <div class="left-wrap card" @click="onClickPathItem(recoPathList[0].id)">
          <img src="@/assets/img/service/推荐路线-动感滨江.jpg" alt="" draggable="false">
          <h4>{{recoPathList[0].name}}</h4>
        </div>
        <div class="right-wrap">
          <div class="card" @click="onClickPathItem(recoPathList[1].id)">
            <img src="@/assets/img/service/推荐路线-魅力湾沚.png" alt="" draggable="false">
            <h4>{{recoPathList[1].name}}</h4>
          </div>
          <div class="card" @click="onClickPathItem(recoPathList[2].id)">
            <img src="@/assets/img/service/推荐路线-探源繁昌.png" alt="" draggable="false">
            <h4>{{recoPathList[2].name}}</h4>
          </div>
          <div class="card" @click="onClickPathItem(recoPathList[3].id)">
            <img src="@/assets/img/service/推荐路线-乡约南陵.png" alt="" draggable="false">
            <h4>{{recoPathList[3].name}}</h4>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="travel-plague">
      <h3>出游防疫</h3>
      <router-link class="more" :to="{name: 'TravelPlague'}">更多  》</router-link>
      <TabbarSmall :tabList="['景点开放', '出行政策']" @change="onTravelPlageTabbarChange"></TabbarSmall>
      <div class="open-status" v-show="travelPlagueActiveIdx === 0">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="@/assets/img/service/【古建筑】.png" alt="">
              <div class="title-wrap">
                <h4>芜湖方特旅游区</h4>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="@/assets/img/service/【快速浏览】.png" alt="">
              <div class="title-wrap">
                <h4>芜湖方特旅游区</h4>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="@/assets/img/service/【西洋建筑】.png" alt="">
              <div class="title-wrap">
                <h4>芜湖方特旅游区</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="open-status" v-show="travelPlagueActiveIdx === 1">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="@/assets/img/service/【古建筑】.png" alt="">
              <div class="title-wrap">
                <h4>电话1</h4>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="@/assets/img/service/【快速浏览】.png" alt="">
              <div class="title-wrap">
                <h4>电话2</h4>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="@/assets/img/service/【西洋建筑】.png" alt="">
              <div class="title-wrap">
                <h4>电话3</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <!-- <div class="help-center">
      <h3>帮助中心</h3>
      <router-link class="more" :to="{name: 'HelpCenter'}">更多  》</router-link>
      <TabbarSmall :tabList="['常见问题', '服务电话']" @change="onHelpCenterTabbarChange"></TabbarSmall>
      <ul class="questions" v-show="helpCenterActiveIdx === 0">
        <div v-for="n in 10" :key="n">
          <h4>芜湖全员核酸检测点最新安排出炉</h4>
          <span class="name">佚名用户</span>
          <span class="time">2022-10-10</span>
        </div>
      </ul>
      <ul class="phones" v-show="helpCenterActiveIdx === 1">
        <div v-for="n in 10" :key="n">
          <h4>电话电话电话</h4>
          <span class="name">佚名用户</span>
          <span class="time">2022-10-10</span>
        </div>
      </ul>
    </div> -->

    <!-- <div class="public-service" @click="pleaseWait">
      <h3>公共服务</h3>
      <router-link class="more" :to="{name: ''}">更多  》</router-link>
      <menu>
        <router-link class="entry" :to="{name: ''}">
          <img src="@/assets/img/service/景区舒适区.png" alt="" draggable="false">
          <div>景区舒适区</div>
        </router-link>
        <router-link class="entry" :to="{name: ''}">
          <img src="@/assets/img/service/找厕所.png" alt="" draggable="false">
          <div>找厕所</div>
        </router-link>
        <router-link class="entry" :to="{name: ''}">
          <img src="@/assets/img/service/停车场.png" alt="" draggable="false">
          <div>停车场</div>
        </router-link>
        <router-link class="entry" :to="{name: ''}">
          <img src="@/assets/img/service/12348.png" alt="" draggable="false">
          <div>12348</div>
        </router-link>
      </menu>
    </div> -->

   <!-- <div class="wen-chuang-zuo-pin"  @click="pleaseWait">
      <h3>文创作品</h3>
      <router-link class="more" :to="{name: ''}">更多  》</router-link>
      <div class="card-list">
        <div
          class="card"
          v-for="(item, index) in wenChuangZuoPinList"
          :key="index"
        >
          <img class="photo" :src="item.img" alt="" draggable="false">
          <h3>{{item.title}}</h3>
          <div class="bottom-bar">
            <div class="price">
              ￥ {{item.price}} 元
            </div>
            <img class="icon" src="@/assets/img/service/购物车.png" alt="">
          </div>
        </div>
      </div>
    </div> -->

    <BackTop class="back-top" :targetId="'service-first-page'">
      <img src="@/assets/img/service/back-top.png" alt="" draggable="false">
    </BackTop>
  </div>
</template>

<script>
import BackTop from "@/components/BackTop.vue";
import TabbarSmall from "@/components/TabbarSmall.vue";
import Swiper from "../../assets/libs/swiper.js";
import SearchBar from "@/components/SearchRedBtn.vue";
import serveData from "@/assets/data/serve/data.js";

export default {
components: {
  BackTop,
  TabbarSmall,
  SearchBar,
},
data() {
  return {
    searchKeyword: '',
    // travelPlagueActiveIdx: '',
    wenChuangZuoPinList: [
      {
        img: require('@/assets/img/service/goods1.png'),
        title: '文创作品名称',
        price: '35',
      },
      {
        img: require('@/assets/img/service/goods2.png'),
        title: '文创作品名称',
        price: '35',
      },
      {
        img: require('@/assets/img/service/goods3.png'),
        title: '文创作品名称',
        price: '35',
      },
      {
        img: require('@/assets/img/service/goods4.png'),
        title: '文创作品名称',
        price: '35',
      },
    ]
  };
},
computed: {
  ...globalMapState([
    'latestConstructId',
  ]),
  recoPathList() {
    return serveData.pathList
  },
  bannerImgUrl() {
    return require(`@/assets/img/home/${this.latestConstructId}.jpg`)
  }
},
watch: {},
methods: {
  onSearch(v) {
    console.log('search: ', v);
  },
  // onTravelPlageTabbarChange(idx) {
  //   this.travelPlagueActiveIdx = idx
  //   this.$nextTick(() => {
  //     new Swiper(".swiper-container", {
  //       slidesPerView: 1.4,
  //       spaceBetween: 15,
  //       centeredSlides: true,
  //     })
  //   })
  // },
  onClickBooking() {
    const loginStatus = globalUtils.checkLoginStatus()
    // const loginStatus = false
    // const loginStatus = true
    if (loginStatus) {
      this.$router.push({name: 'Booking'})
    } else {
      globalUtils.getUserCode('https://yifangyice.4dage.com/web/index.html#/layout/serve/booking')
    }
  },
  onClickPathItem(id) {
    this.$router.push({name: 'RecommendedPathDetail', query: {id}})
  },
  pleaseWait() {
    globalToast("敬请期待!")
  }
},
created() {
  document.querySelector("#app").style.maxWidth = "";
},
mounted() {
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {
  document.querySelector("#app").style.maxWidth = "500px";
}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
@import "~@/assets/libs/swiper.css";
.service {
  background-color: #f0f0f0;
  height: calc(100% - 80px);
  overflow: auto;
  .banner {
    height: 57.9vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    margin-bottom: 3.3vw;
    text-align: center;
    .search-bar {
      margin: 6.1vw 4.4vw 0 4.4vw;
    }
  }

  > menu {
    margin: 0 0.8vw 4vw 0.8vw;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 23.5vw;
    border-radius: 1.1vw;
    > .entry {
      flex: 0 0 auto;
      width: 18vw;
      height: 12.2vw;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: 3.5vw;
      font-weight: bold;
      color: #535353;
      line-height: 1.1em;
      white-space: pre;
      > img {
        width: 8vw;
        height: auto;
        margin-bottom: 2.7vw;
      }
    }
  }

  // > .travel-route-1 {
  //   margin: 0 0 4vw 0;
  //   height: 41.5vw;
  //   background-image: url(~@/assets/img/service/travel-route-bg.png);
  //   background-size: cover;
  //   background-repeat: no-repeat;
  //   background-position: center center;
  //   overflow: hidden;
  //   position: relative;
  //   .entry {
  //     position: absolute;
  //     top: 1.5vw;
  //     right: 0.7vw;
  //     padding: 3.1vw 1.5vw;
  //     background: rgba(15, 5, 9, 0.39);
  //     font-size: 3.5vw;
  //     font-weight: bold;
  //     color: #FFFAFA;
  //   }
  // }

  > .travel-route-2 {
    border-radius: 1.1vw;
    margin: 0 0.7vw 4vw 0.7vw;
    overflow: hidden;
    position: relative;
    padding: 3.7vw 3.5vw 4.5vw;
    background: #fff;
    > h3 {
      font-size: 3.5vw;
      font-weight: bold;
      color: #000000;
    }
    .more {
      position: absolute;
      top: 4vw;
      right: 3.6vw;
      font-size: 2.7vw;
      color: #333333;
    }
    .grid-wrap {
      margin-top: 3.1vw;
      display: flex;
      align-items: center;
      .left-wrap {
        flex: 0 1 auto;
        display: inline-block;
        position: relative;
        width: 41.9vw;
        height: 56.8vw;
        border-radius: 1.3vw;
        margin-right: 2vw;
        > img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        > h4 {
          position: absolute;
          left: 3.9vw;
          top: 3.1vw;
          font-size: 6.4vw;
          font-weight: bold;
          color: #FFFFFF;
          text-shadow: 0px 4px 4px #3A180F;
          writing-mode: vertical-lr;
        }
      }
      .right-wrap {
        display: inline-block;
        flex: 0 1 auto;
        width: 47.5vw;
        > .card {
          position: relative;
          width: 100%;
          height: 18.4vw;
          margin-bottom: 0.8vw;
          &:last-of-type {
            margin-bottom: initial;
          }
          > img {
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
          }
          > h4 {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(270deg, rgba(38,146,237,0.79) 15%, rgba(0,0,0,0) 100%);
            padding-right: 1.1vw;
            padding-top: 2.5vw;
            padding-bottom: 2.5vw;
            height: 100%;
            font-size: 2.7vw;
            font-weight: 500;
            color: #FEFEFE;
            writing-mode: vertical-rl;
            letter-spacing: 0.12em;
          }
        }
      }
    }
  }

  // > .travel-plague {
  //   border-radius: 1.1vw;
  //   margin: 0 0.7vw 4vw 0.7vw;
  //   overflow: hidden;
  //   position: relative;
  //   padding: 1.9vw 3.5vw 4.5vw;
  //   background: #fff;
  //   > h3 {
  //     font-size: 3.5vw;
  //     font-weight: bold;
  //     color: #000000;
  //   }
  //   .more {
  //     position: absolute;
  //     top: 2.7vw;
  //     right: 3.6vw;
  //     font-size: 2.7vw;
  //     color: #333333;
  //   }
  //   .open-status {
  //     margin-top: 6vw;
  //     .swiper-slide {
  //       width: 75.5vw;
  //       height: 31.2vw;
  //       > img {
  //         position: absolute;
  //         left: 0;
  //         top: 0;
  //         width: 100%;
  //         height: 100%;
  //       }
  //       > .title-wrap {
  //         position: absolute;
  //         left: 0;
  //         bottom: 0;
  //         width: 100%;
  //         height: 8.5vw;
  //         background-color: rgba(15, 5, 9, 0.54);
  //         display: flex;
  //         justify-content: center;
  //         align-items: center;
  //         > h4 {
  //           font-size: 3.2vw;
  //           font-weight: 600;
  //           color: #FFFFFF;
  //         }
  //       }
  //     }
  //   }
  // }

  // > .help-center {
  //   border-radius: 1.1vw;
  //   margin: 0 0.7vw 4vw 0.7vw;
  //   position: relative;
  //   padding: 1.9vw 3.5vw 4.5vw;
  //   background: #fff;
  //   // 滚动条整体部分，其中的属性有width,height,background,border等。
  //   ::-webkit-scrollbar { width: 1.3vw; height: 1.3vw; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
  //   // 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，改变颜色。
  //   ::-webkit-scrollbar-button { display: none; }
  //   // 滑动轨道。可以用display:none让其不显示，也可以添加背景图片，改变颜色。另外还有::webkit-scrollbar-track-piece这个是内层轨道？有吗？
  //   ::-webkit-scrollbar-track { background: rgba(84, 84, 84, 0.11); border-radius: 0.5vw; }
  //   // 滑块
  //   ::-webkit-scrollbar-thumb { background: linear-gradient(0deg, #FF615C 0%, #FF9877 100%); border-radius: 0.5vw; }
  //   // 横竖滚动条轨道交汇处
  //   ::-webkit-scrollbar-corner { display: none; }
  //   ::-webkit-scrollbar-resizer { display: none; }
  //   > h3 {
  //     font-size: 3.5vw;
  //     font-weight: bold;
  //     color: #000000;
  //   }
  //   .more {
  //     position: absolute;
  //     top: 2.7vw;
  //     right: 3.6vw;
  //     font-size: 2.7vw;
  //     color: #333333;
  //   }
  //   > ul {
  //     margin-top: 6vw;
  //     height: 42vw;
  //     overflow: auto;
  //     > div {
  //       border-bottom: 1px solid #E5E5E5;
  //       margin-bottom: 7.1vw;
  //       &:last-of-type {
  //         border-bottom: initial;
  //         margin-bottom: initial;
  //       }
  //       > h4 {
  //         font-size: 3.2vw;
  //         font-weight: bold;
  //         color: #000000;
  //         overflow: hidden;
  //         white-space: pre;
  //         text-overflow: ellipsis;
  //         margin-bottom: 3.9vw;
  //       }
  //       > span {
  //         display: inline-block;
  //         margin-right: 2em;
  //         margin-bottom: 1.5vw;
  //         font-size: 3.2vw;
  //         color: #DCDCDC;
  //       }
  //     }
  //   }
  // }

  > .public-service {
    margin: 0 0.8vw 6.5vw 0.8vw;
    background: #fff;
    border-radius: 1.1vw;
    overflow: hidden;
    position: relative;
    padding: 3.7vw 3.5vw 2vw;
    > h3 {
      font-size: 3.5vw;
      font-weight: bold;
      color: #000000;
    }
    .more {
      position: absolute;
      top: 4vw;
      right: 3.6vw;
      font-size: 2.7vw;
      color: #333333;
    }
    > menu {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 23.5vw;
      border-radius: 1.1vw;
      > .entry {
        flex: 0 0 auto;
        width: 15vw;
        height: 15vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        font-size: 2.9vw;
        font-weight: bold;
        color: #535353;
        line-height: 1.1em;
        white-space: pre;
        > img {
          height: 8vw;
          margin-bottom: 2.7vw;
        }
      }
    }
  }
  
  > .wen-chuang-zuo-pin {
    margin: 0 0.8vw 6.5vw 0.8vw;
    background: #fff;
    border-radius: 1.1vw;
    overflow: hidden;
    position: relative;
    padding: 3.7vw 3.5vw 4.5vw;
    > h3 {
      font-size: 3.5vw;
      font-weight: bold;
      color: #000000;
      margin-bottom: 4vw;;
    }
    .more {
      position: absolute;
      top: 4vw;
      right: 3.6vw;
      font-size: 2.7vw;
      color: #333333;
    }
    > div.card-list {
      margin-right: -4.1vw;
      > .card {
        display: inline-block;
        width: calc(50% - 4.1vw);
        height: 64.7vw;
        background: #F7F8FA;
        border-radius: 1.1vw;
        overflow: hidden;
        margin-right: 4.1vw;
        margin-bottom: 2.3vw;
        > img.photo {
          width: 100%;
          height: 44.5vw;
          object-fit: cover;
          margin-bottom: 3.1vw;
        }
        > h3 {
          font-size: 3.2vw;
          font-weight: bold;
          color: #333333;
          margin-left: 2.3vw;
          margin-right: 2.3vw;
          margin-bottom: 3.5vw;
        }
        > .bottom-bar {
          margin-left: 2.3vw;
          margin-right: 2.3vw;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > .price {
            font-size: 2.7vw;
            font-weight: bold;
            color: #FF0000;
          }
          > img.icon {
            width: 4.1vw;
            height: 4.1vw;
          }
        }
      }
    }
  }
  
  > .back-top {
    position: fixed;
    bottom: calc(1.7vw + 80px);
    right: 1.7vw;
    width: 9.3vw;
    height: 9.3vw;
    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>