推荐路线功能

yfyc/src/assets/data/serve/data.js

@@ -192,10 +192,19 @@ export default {
 
   
   
-  
+  pathTagList: [
+    '一日游',
+    '古建筑',
+    '美食',
+    '快速浏览',
+    '美食',
+  ],
   pathList: [
     {
+      id: '1',
       name: '动感滨江旅游廊道',
+      tagList: ['古建筑', ],
+      publicDate: '2022-10-10',
       stationList: [
         {
           name: '天门山',
@@ -260,7 +269,10 @@ export default {
       ]
     },
     {
+      id: '2',
       name: '魅力湾沚旅游廊道',
+      tagList: ['古建筑', ],
+      publicDate: '2022-10-10',
       stationList: [
         {
           name: '枕水官巷',
@@ -310,7 +322,10 @@ export default {
       ]
     },
     {
+      id: '3',
       name: '欢乐国庆·探源繁昌旅游廊道',
+      tagList: ['古建筑', ],
+      publicDate: '2022-10-10',
       stationList: [
         {
           name: '江南第一茶市',
@@ -360,7 +375,10 @@ export default {
       ]
     },
     {
+      id: '4',
       name: '乡约南陵风景道',
+      tagList: ['古建筑', ],
+      publicDate: '2022-10-10',
       stationList: [
         {
           name: '奎湖省级湿地公园',
@@ -395,7 +413,10 @@ export default {
       ]
     },
     {
+      id: '5',
       name: '自在无为  旅游廊道',
+      tagList: ['古建筑', ],
+      publicDate: '2022-10-10',
       stationList: [
         {
           name: '红色山水涧',
@@ -431,6 +452,7 @@ export default {
           name: '泊山洞景区',
           address: '无为市蜀山镇黄姑社区',
           desc: '泊山洞风景区地处无为、庐江、巢湖交界处。形成于2亿4千万年前的古老的石灰溶洞，奇景天然，鬼斧神工，被人们誉为“江淮独秀”。洞中钟乳石光怪陆离，石花、石枝洁白美丽，石柱、石旗晶莹剔透，堪称绝妙。',
+
         },
         {
           name: '万年台景区',

yfyc/src/views/Serve/RecommendedPath.vue

@@ -5,34 +5,44 @@
       <h2>推荐</h2>
       <button
         class="keyword"
-        v-for="(item, index) in recoKeywordList"
+        :class="{
+          active: item.isActive,
+        }"
+        v-for="(item, index) in tagList"
         :key="index"
-        @click="onClickTag(item)"
+        @click="onClickTag(index)"
       >
-        {{item}}
+        {{item.name}}
       </button>
     </div>
     <div class="card-list">
       <article
-        v-for="n in 10"
-        :key="n"
-        @click="$router.push({name: 'RecommendedPathDetail'})"
+        v-for="(item, idx) in pathList"
+        :key="item.id"
+        @click="$router.push({
+          name: 'RecommendedPathDetail', query: {id: item.id}
+        })"
       >
         <div class="left">
-          <img src="@/assets/img/service/一日游.png" alt="" draggable="false">
+          <img :src="require(`@/assets/img/service/path/${item.id}/1.jpg`)" alt="" draggable="false">
         </div>
         <div class="right">
-          <h3>【一日游】方特  欢乐世界+梦幻王国+中江塔+老海关客流数据格式的克里夫拉萨大家反抗拉萨酱豆腐考虑离开</h3>
+          <h3>{{item.name}}</h3>
           <ul class="tags">
-            <li class="tag">一日游</li>
-            <li class="tag">自驾</li>
+            <li
+              class="tag"
+              v-for="(item, index) in item.tagList"
+              :key="index"
+            >
+              {{item}}
+            </li>
           </ul>
           <div class="bottom">
-            <div class="time">2022-10-10</div>
-            <div class="view-count">
+            <div class="time">{{item.publicDate}}</div>
+            <!-- <div class="view-count">
               <img class="icon" src="@/assets/img/service/eye.png" alt="" draggable="false">
               666
-            </div>
+            </div> -->
           </div>
         </div>
       </article>
@@ -42,6 +52,7 @@
 
 <script>
 import SearchBar from "@/components/SearchRedBtn.vue";
+import serveData from "@/assets/data/serve/data.js";
 
 export default {
   components: {
@@ -49,21 +60,48 @@ export default {
   },
   data() {
     return {
-      recoKeywordList: [
-        '一日游',
-        '古建筑',
-        '美食',
-        '快速浏览',
-        '美食',
-      ]
+      keyword: '',
+      tagList: serveData.pathTagList.map((item) => {
+        return {
+          name: item,
+          isActive: false,
+        }
+      }),
+    }
+  },
+  computed: {
+    pathList() {
+      return serveData.pathList.filter((item) => {
+        const activeTagList = this.tagList.filter((item) => {
+          return item.isActive
+        })
+        if (!activeTagList.length) {
+          return true
+        } else {
+          let ret = false
+          for (const activeTag of activeTagList) {
+            if (item.tagList.includes(activeTag.name)) {
+              ret = true
+              break
+            }
+          }
+          return ret
+        }
+      }).filter((item) => {
+        if (!this.keyword) {
+          return true
+        } else {
+          return item.name.includes(this.keyword)
+        }
+      })
     }
   },
   methods: {
     onSearch(v) {
-      console.log('on search: ', v);
+      this.keyword = v
     },
-    onClickTag(v) {
-      console.log('on click tag: ', v);
+    onClickTag(idx) {
+      this.tagList[idx].isActive = !this.tagList[idx].isActive
     }
   }
 }
@@ -91,6 +129,10 @@ export default {
       margin-bottom: 3.2vw;
     }
     > button {
+      &.active {
+        background: #fe726b;
+        color: #fff;
+      }
       background: #F4F4F4;
       border-radius: 0.5vw;
       padding: 2.5vw 4vw;
@@ -138,7 +180,7 @@ export default {
           margin-bottom: 3vw;
         }
         > ul.tags {
-          margin-bottom: 2vw;
+          margin-bottom: 5vw;
           > li.tag {
             border: 0.3vw solid #FE6E69;
             border-radius: 0.5vw;

yfyc/src/views/Serve/RecommendedPathDetail.vue

@@ -1,31 +1,31 @@
 <template>
   <div class="one-day-tour" id="back-top-target">
-    <h1>【一日游】方特欢乐世界 + 梦幻王国 + 中江塔 + 老海关</h1>
+    <h1>{{pathInfo.name}}</h1>
     <ul class="tag-list">
       <li
         class="tag"
-        v-for="(item, index) in tagList"
+        v-for="(item, index) in pathInfo.tagList"
         :key="index"
       >
         {{item}}
       </li>
     </ul>
     <article
-      v-for="(item, index) in landscapeList"
+      v-for="(item, index) in pathInfo.stationList"
       :key="index"
     >
-      <img :src="item.img" alt="" draggable="false">
-      <h2>{{item.title}}</h2>
-      <p>{{item.content}}</p>
+      <img :src="require(`@/assets/img/service/path/${pathInfo.id}/${index + 1}.jpg`)" alt="" draggable="false">
+      <h2>{{item.name}}</h2>
+      <p>{{item.desc}}</p>
       <div class="bottom-wrap">
-        <div class="address-wrap">
+        <div class="address-wrap" v-if="item.address">
           <img src="@/assets/img/service/address.png" alt="" draggable="false">
           <span>{{item.address}}</span>
         </div>
-        <div class="phone-wrap">
+        <!-- <div class="phone-wrap">
           <img src="@/assets/img/service/phone.png" alt="" draggable="false">
           <span>{{item.phone}}</span>
-        </div>
+        </div> -->
       </div>
     </article>
 
@@ -37,6 +37,7 @@
 
 <script>
 import BackTop from "@/components/BackTop.vue";
+import serveData from "@/assets/data/serve/data.js";
 
 export default {
   components: {
@@ -44,43 +45,13 @@ export default {
   },
   data() {
     return {
-      tagList: [
-        '梦幻游乐王国',
-        '古建筑',
-        '美食',
-      ],
-      landscapeList: [
-        {
-          img: require('@/assets/img/service/【西洋建筑】.png'),
-          title: '方特欢乐世界',
-          content: '方特欢乐世界拥有多个超大型项目，如国际一流的高空飞翔体验VR Soaring项目《飞越极限》，妙趣奇幻的大型MR Theater项目《海螺湾》，大型恐龙复活灾难体验MR Ride项目《恐龙危机》，惊险刺激的悬挂式过山车《火流星》，大型火山探险项目《维苏威火山》，专为小朋友量身设计的主题项目区《儿童王国》、主题卡通表演项目《熊出没舞台》等。',
-          address: '安徽省芜湖市镜湖区银湖北路80号',
-          phone: '400-166-0006',
-        },
-        {
-          img: require('@/assets/img/service/【西洋建筑】.png'),
-          title: '方特欢乐世界',
-          content: '方特欢乐世界拥有多个超大型项目，如国际一流的高空飞翔体验VR Soaring项目《飞越极限》，妙趣奇幻的大型MR Theater项目《海螺湾》，大型恐龙复活灾难体验MR Ride项目《恐龙危机》，惊险刺激的悬挂式过山车《火流星》，大型火山探险项目《维苏威火山》，专为小朋友量身设计的主题项目区《儿童王国》、主题卡通表演项目《熊出没舞台》等。',
-          address: '安徽省芜湖市镜湖区银湖北路80号',
-          phone: '400-166-0006',
-        },
-        {
-          img: require('@/assets/img/service/【西洋建筑】.png'),
-          title: '方特欢乐世界',
-          content: '方特欢乐世界拥有多个超大型项目，如国际一流的高空飞翔体验VR Soaring项目《飞越极限》，妙趣奇幻的大型MR Theater项目《海螺湾》，大型恐龙复活灾难体验MR Ride项目《恐龙危机》，惊险刺激的悬挂式过山车《火流星》，大型火山探险项目《维苏威火山》，专为小朋友量身设计的主题项目区《儿童王国》、主题卡通表演项目《熊出没舞台》等。',
-          address: '安徽省芜湖市镜湖区银湖北路80号',
-          phone: '400-166-0006',
-        },
-        {
-          img: require('@/assets/img/service/【西洋建筑】.png'),
-          title: '方特欢乐世界',
-          content: '方特欢乐世界拥有多个超大型项目，如国际一流的高空飞翔体验VR Soaring项目《飞越极限》，妙趣奇幻的大型MR Theater项目《海螺湾》，大型恐龙复活灾难体验MR Ride项目《恐龙危机》，惊险刺激的悬挂式过山车《火流星》，大型火山探险项目《维苏威火山》，专为小朋友量身设计的主题项目区《儿童王国》、主题卡通表演项目《熊出没舞台》等。',
-          address: '安徽省芜湖市镜湖区银湖北路80号',
-          phone: '400-166-0006',
-        },
-      ]
+      pathInfo: serveData.pathList.find((item) => {
+        return item.id === this.$route.query.id
+      }),
     }
   },
+  created() {
+  }
 }
 </script>
 

yfyc/src/views/Serve/index.vue

@@ -41,22 +41,22 @@
       <h3>推荐路线</h3>
       <router-link class="more" :to="{name: 'RecommendedPath'}">更多  》</router-link>
       <div class="grid-wrap">
-        <div class="left-wrap card" @click="onClickPathItem">
+        <div class="left-wrap card" @click="onClickPathItem(recoPathList[0].id)">
           <img src="@/assets/img/service/推荐路线-动感滨江.jpg" alt="" draggable="false">
-          <h4>动感滨江</h4>
+          <h4>{{recoPathList[0].name}}</h4>
         </div>
         <div class="right-wrap">
-          <div class="card" @click="onClickPathItem">
+          <div class="card" @click="onClickPathItem(recoPathList[1].id)">
             <img src="@/assets/img/service/推荐路线-魅力湾沚.png" alt="" draggable="false">
-            <h4>【魅力湾沚】</h4>
+            <h4>{{recoPathList[1].name}}</h4>
           </div>
-          <div class="card" @click="onClickPathItem">
+          <div class="card" @click="onClickPathItem(recoPathList[2].id)">
             <img src="@/assets/img/service/推荐路线-探源繁昌.png" alt="" draggable="false">
-            <h4>【探源繁昌】</h4>
+            <h4>{{recoPathList[2].name}}</h4>
           </div>
-          <div class="card" @click="onClickPathItem">
+          <div class="card" @click="onClickPathItem(recoPathList[3].id)">
             <img src="@/assets/img/service/推荐路线-乡约南陵.png" alt="" draggable="false">
-            <h4>【乡约南陵】</h4>
+            <h4>{{recoPathList[3].name}}</h4>
           </div>
         </div>
       </div>
@@ -191,6 +191,7 @@ 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: {
@@ -226,7 +227,11 @@ data() {
     ]
   };
 },
-computed: {},
+computed: {
+  recoPathList() {
+    return serveData.pathList
+  }
+},
 watch: {},
 methods: {
   onSearch(v) {
@@ -245,8 +250,8 @@ methods: {
   onClickBanner() {
     this.pleaseWait()
   },
-  onClickPathItem() {
-    this.$router.push({name: 'RecommendedPathDetail'})
+  onClickPathItem(id) {
+    this.$router.push({name: 'RecommendedPathDetail', query: {id}})
   },
   pleaseWait() {
     globalToast("敬请期待!")
@@ -378,11 +383,10 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
           left: 3.9vw;
           top: 3.1vw;
           font-size: 6.4vw;
-          letter-spacing: 0.3em;
           font-weight: bold;
           color: #FFFFFF;
           text-shadow: 0px 4px 4px #3A180F;
-          writing-mode: vertical-rl;
+          writing-mode: vertical-lr;
         }
       }
       .right-wrap {
@@ -406,13 +410,19 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
           }
           > h4 {
             position: absolute;
-            right: 1.1vw;
+            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;
-            text-align: center;
             letter-spacing: 0.12em;
           }
         }