feat: 热搜

src/components/PublicComponent/PublicComponent.vue

@@ -12,6 +12,16 @@
 
   <Temperature />
   <Time />
+
+  <div class="hot-search">
+    <h1 class="title">{{ $t('hotSearch') }}</h1>
+    <div class="row">
+      <div class="item" v-for="item of hotRecommend" :key="item.shopId" @click="handleHot(item)">
+        <div class="text">{{ item.shopName }}</div>
+      </div>
+    </div>
+  </div>
+
   <div class="bottom">
     <div class="qrcode1"></div>
     <div class="qrcode2"></div>
@@ -22,7 +32,7 @@
 </template>
 
 <script setup>
-import { defineAsyncComponent, watch, onMounted, ref, onBeforeUnmount } from 'vue'
+import { defineAsyncComponent, watch, onMounted, ref, onBeforeUnmount, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { useRouter, useRoute } from 'vue-router'
@@ -38,10 +48,21 @@ const Time = defineAsyncComponent(() => import('@/base/Time/Time.vue'))
 const router = useRouter()
 const route = useRoute()
 const store = useStore()
-const { shop, sidebarList, language, enhanced } = storeToRefs(store)
+const { shop, sidebarList, language, enhanced, indexList, shopList } = storeToRefs(store)
 
 const { logoutRef, resetClickNumber, setLogoutRef, addTotalClick } = useLogout()
 const { title, countDownGif, countDownNum, send, checkHandleScreen } = useHandleScreen(handleScreen)
+const hotRecommend = computed(() => indexList.value?.hotSearch?.slice(0, 5) ?? [])
+
+const handleHot = item => {
+  const _ = shopList.value.find(_shop => _shop.shopId === item.shopId)
+  console.log(router.fullPath)
+  router.push('/guide')
+  store.SET_SHOP(null)
+  setTimeout(() => {
+    store.SET_SHOP(_)
+  }, 200)
+}
 
 function handleGO() {
   router.push('/nav')
@@ -83,6 +104,48 @@ watch(route, to => {
 })
 </script>
 <style lang="scss" scoped>
+.hot-search {
+  position: absolute;
+  top: 180px;
+  left: 68px;
+  right: 68px;
+  width: 100%;
+  z-index: 100;
+  .title {
+    font-style: normal;
+    font-weight: 900;
+    font-size: 20px;
+    line-height: 23px;
+    color: var(--index-hotSearchTitleColor);
+  }
+  .row {
+    margin-top: 16px;
+    .item {
+      position: relative;
+      display: inline-block;
+      max-width: 176px;
+      height: 52px;
+
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 8px;
+      .text {
+        text-align: center;
+        font-weight: 900;
+        font-size: 16px;
+        line-height: 52px;
+        color: rgba(0, 0, 0, 0.8);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: 0 32px;
+      }
+    }
+    .item + .item {
+      margin-left: 24px;
+    }
+  }
+}
+
 .logo {
   position: absolute;
   width: 101px;