搜索页 对接接口

src/api.js

@@ -1,7 +1,7 @@
 import axios from "axios"
 
 export default {
-  getRelicList: function() {
+  getRelicList: function(searchKey, region) {
     return axios({
       method: 'get',
       url: `${process.env.VUE_APP_DEPLOY_ORIGIN}/api/show/visit/getList`,
@@ -11,6 +11,8 @@ export default {
       // },
       params: {
         type: 'scene',
+        searchKey,
+        region
       },
     }).then((res) => {
       return res.data.data

src/views/HomeView.vue

@@ -669,6 +669,7 @@ function onClickArea(idx) {
         justify-content: space-between;
         align-items: center;
         margin-bottom: 29px;
+        cursor: pointer;
         >img{
           flex: 0 0 auto;
           width: 39px;
@@ -698,7 +699,7 @@ function onClickArea(idx) {
             color: #589498;
             line-height: 16px;
             overflow: hidden;
-            white-space: pre;
+            white-space: nowrap;
             text-overflow: ellipsis;
           }
         }

src/views/RelicSearch.vue

@@ -15,44 +15,14 @@
     </div>
     <menu class="tab-bar">
       <button
+        v-for="(item, idx) in areaList"
+        :key="idx"
         :class="{
-          active: activeTabIdx === 0
+          active: activeAreaIdx === idx
         }"
-        @click="activeTabIdx = 0"
+        @click="activeAreaIdx = idx"
       >
-        全部
-      </button>
-      <button
-        :class="{
-          active: activeTabIdx === 1
-        }"
-        @click="activeTabIdx = 1"
-      >
-        行政区1
-      </button>
-      <button
-        :class="{
-          active: activeTabIdx === 2
-        }"
-        @click="activeTabIdx = 2"
-      >
-        行政区2
-      </button>
-      <button
-        :class="{
-          active: activeTabIdx === 3
-        }"
-        @click="activeTabIdx = 3"
-      >
-        行政区3
-      </button>
-      <button
-        :class="{
-          active: activeTabIdx === 4
-        }"
-        @click="activeTabIdx = 4"
-      >
-        行政区4
+        {{ item }}
       </button>
     </menu>
     <ul class="relic-list">
@@ -62,7 +32,7 @@
         class="relic-item"
       >
         <img
-          :src="require(`@/assets/images/${item.photo}`)"
+          :src="item.thumb"
           alt=""
           class="photo"
         >
@@ -71,7 +41,7 @@
             {{ item.name }}
           </div>
           <div class="desc">
-            {{ item.desc }}
+            {{ item.description }}
           </div>
         </div>
         <button class="go">
@@ -88,7 +58,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue"
+import { ref, computed, watch, onMounted, watchEffect } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 
@@ -98,256 +68,33 @@ const store = useStore()
 
 const keyword = ref('')
 
-const relicList = ref([
-  {
-    id: 1,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 2,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 3,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 4,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 5,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 6,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 7,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 8,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 9,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 10,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 11,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 12,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 13,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 14,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 15,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 16,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 17,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 18,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 19,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 20,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 21,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 22,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 23,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 24,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 25,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 26,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 27,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 28,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 29,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 30,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 31,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 32,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 33,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 34,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 35,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 36,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 37,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 38,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 39,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 40,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
-  {
-    id: 41,
-    photo: 'icon_user-active.png',
-    name: '点位名称',
-    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
-  },
+const areaList = ref([
+  '全部',
+  '锡山区',
+  '惠山区',
+  '滨湖区',
+  '梁溪区',
+  '宜兴市',
+  '江阴市',
+  '新吴区',
 ])
+const activeAreaIdx = ref(0)
+
+// {
+//   id: 1,
+//   photo: 'icon_user-active.png',
+//   name: '点位名称',
+//   desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+// },
+const relicList = ref([])
+
+watchEffect(() => {
+  api.getRelicList(keyword.value, activeAreaIdx.value > 0 ? areaList.value[activeAreaIdx.value] : null).then((res) => {
+    console.log('sdfsdf', res)
+    relicList.value = res
+  })
+})
 
-const activeTabIdx = ref(0)
 
 </script>
 
@@ -398,11 +145,11 @@ const activeTabIdx = ref(0)
     }
   }
   >menu.tab-bar{
+    width: 100%;
     flex: 0 0 auto;
     display: flex;
-    justify-content: center;
+    justify-content: space-evenly;
     align-items: center;
-    gap: 150px;
     margin-bottom: 89px;
     >button{
       font-family: Source Han Sans CN, Source Han Sans CN;
@@ -428,6 +175,7 @@ const activeTabIdx = ref(0)
       align-items: center;
       margin-right: 97px;
       margin-bottom: 40px;
+      cursor: pointer;
       >img{
         width: 65px;
         height: 65PX;
@@ -456,7 +204,7 @@ const activeTabIdx = ref(0)
           color: #FFFFFF;
           line-height: 19px;
           overflow: hidden;
-          white-space: pre;
+          white-space: nowrap;
           text-overflow: ellipsis;
         }
       }