feat: 首页推荐品牌模块，能够支持手动滑动

src/views/Foods/Foods.vue

@@ -14,7 +14,7 @@ import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
 
 const store = useStore()
 const storeRefs = storeToRefs(store)
-const { config, shopList, indexList } = storeRefs
+const { config, shopList } = storeRefs
 const shop = ref(null)
 const selectedList = ref([])
 

src/views/Index/Index.vue

@@ -33,27 +33,79 @@
             扫我导航
           </div>
         </div>
-        <div v-if="showFood" class="food" @click="goPage({ title: '推荐美食', path: '/foods' })">
-          <div class="title">
+        <div v-if="showFood" class="food">
+          <div
+            class="title"
+            @click="
+              () => {
+                clearShop()
+                goPage({ title: '推荐美食', path: '/foods' })
+              }
+            "
+          >
             <h1>推荐美食</h1>
             <h2>此时此刻，美食正在等你</h2>
           </div>
-          <div class="marquee">
-            <div class="grid" :style="foodList.length <= 12 ? '' : `animation: marquee ${foodList.length}s linear infinite;`">
-              <img class="item" v-for="shop of foodList" :key="shop.shopId" :src="config.sourceUrl + shop.logoUrl" alt="" @click="setShopById(shop.shopId)" />
+          <Swiper
+            class="brandSwiper"
+            :watchOverflow="true"
+            :slides-per-view="3"
+            :loop="foodList.length > 3"
+            :modules="[Autoplay]"
+            :direction="'vertical'"
+            :speed="3000"
+            :autoplay="
+              foodList.length > 3
+                ? {
+                    delay: 0,
+                    disableOnInteraction: false
+                  }
+                : false
+            "
+          >
+            <SwiperSlide class="brandSlide" v-for="(list, i) of foodList" :key="i">
+              <div class="grid">
+                <img class="item" v-for="shop of list" :key="shop.shopId" :src="config.sourceUrl + shop.logoUrl" alt="" @click="handleFood(shop.shopId)" />
               </div>
+            </SwiperSlide>
+          </Swiper>
         </div>
-        </div>
-        <div v-else class="rec" @click="goPage({ title: '品牌列表', path: '/brand' })">
-          <div class="title" :style="{ backgroundImage: `url(${theme.images.recBg})` }">
+        <div v-else class="rec">
+          <div
+            class="title"
+            :style="{ backgroundImage: `url(${theme.images.recBg})` }"
+            @click="
+              () => {
+                clearShop()
+                goPage({ title: '品牌列表', path: '/brand' })
+              }
+            "
+          >
             <h1>推荐品牌</h1>
             <h2>心动之选，拥抱美好生活</h2>
           </div>
-          <div class="marquee">
-            <div class="grid" :style="recommendShops.length <= 12 ? '' : `animation: marquee ${recommendShops.length}s linear infinite;`">
-              <img class="item" v-for="shop of recommendShops" :key="shop.shopId" :src="config.sourceUrl + shop.logoUrl" alt="" @click="setShopById(shop.shopId)" />
-            </div>
+          <Swiper
+            class="brandSwiper"
+            :slides-per-view="3"
+            :loop="recommendShops.length > 3"
+            :modules="[Autoplay]"
+            :direction="'vertical'"
+            :speed="3000"
+            :autoplay="
+              recommendShops.length > 3
+                ? {
+                    delay: 0,
+                    disableOnInteraction: false
+                  }
+                : false
+            "
+          >
+            <SwiperSlide class="brandSlide" v-for="(list, i) of recommendShops" :key="i">
+              <div class="grid">
+                <img class="item" v-for="shop of list" :key="shop.shopId" :src="config.sourceUrl + shop.logoUrl" alt="" @click="handleRecBrand(shop.shopId)" />
               </div>
+            </SwiperSlide>
+          </Swiper>
         </div>
 
         <div class="menu">
@@ -90,14 +142,42 @@ import View from '@/layouts/View.vue'
 import EffectFade from '@/components/EffectFade/EffectFade.vue'
 import { useTime } from '@/composables/useTime'
 import QRCodeFromText from '@/components/QRCodeFromText/QRCodeFromText.vue'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import SwiperCore, { Autoplay } from 'swiper'
+
+const splitBy = (array, chunkSize = 4) => {
+  const result = []
+  for (let i = 0; i < array.length; i += chunkSize) {
+    const chunk = array.slice(i, i + chunkSize)
+    result.push(chunk)
+  }
+  return result
+}
 
 const router = useRouter()
 const store = useStore()
 const { indexList, currentFloor, buildingList, shopList, sidebarList, config, theme } = storeToRefs(store)
 const guideDesc = ref('')
-const foodList = computed(() => shopList.value.filter(({ isSpecial }) => isSpecial) ?? [])
+const foodList = computed(() => {
+  const arr = shopList.value.filter(({ isSpecial }) => isSpecial)
+  if (arr.length > 12) {
+    while (arr.length % 4 !== 0) {
+      arr.push(arr[Math.floor(Math.random() * arr.length)])
+    }
+  }
+  return splitBy(arr)
+})
 const hotRecommend = computed(() => indexList.value.hotSearch.slice(0, 5) ?? [])
-const recommendShops = computed(() => indexList.value.recommendList ?? [])
+const recommendShops = computed(() => {
+  const arr = indexList.value.recommendList
+  if (arr.length > 12) {
+    while (arr.length % 4 !== 0) {
+      arr.push(arr[Math.floor(Math.random() * arr.length)])
+    }
+  }
+
+  return splitBy(arr)
+})
 const bf = computed(() => (buildingList.length > 1 ? currentFloor.value.building + '-' : '') + currentFloor.value.floor)
 const activityList = ref([])
 const { currentHour } = useTime()
@@ -114,7 +194,6 @@ const goPage = item => {
 }
 
 const setShopById = id => {
-  console.log(id)
   const shop = shopList.value.find(_shop => _shop.shopId === id)
   store.SET_SHOP(shop)
 }
@@ -128,19 +207,32 @@ getActivityList(3).then(({ data }) => {
   activityList.value = data?.activityList ?? []
   console.log(data.activityList)
 })
+
+const clearShop = () => {
+  store.SET_SHOP(null)
+}
+
+const handleRecBrand = id => {
+  setShopById(id)
+  goPage({ title: '品牌列表', path: '/brand' })
+}
+const handleFood = id => {
+  setShopById(id)
+  goPage({ title: '推荐美食', path: '/foods' })
+}
 </script>
 <style lang="scss">
-@keyframes marquee {
-  from {
-    transform: translateY(0);
-  }
-  95% {
-    transform: translateY(calc(-100% + 389px - 40px - 15px));
-  }
-  to {
-    transform: translateY(0);
-  }
-}
+// @keyframes marquee {
+//   from {
+//     transform: translateY(0);
+//   }
+//   95% {
+//     transform: translateY(calc(-100% + 389px - 40px - 15px));
+//   }
+//   to {
+//     transform: translateY(0);
+//   }
+// }
 </style>
 <style lang="scss" scoped>
 .index-container {
@@ -316,6 +408,15 @@ getActivityList(3).then(({ data }) => {
         line-height: 19px;
         color: rgba(255, 255, 255, 0.8);
       }
+      .brandSwiper {
+        height: 389px;
+        z-index: 0;
+        :deep() {
+          .swiper-wrapper {
+            transition-timing-function: linear;
+          }
+        }
+      }
 
       .marquee {
         z-index: 0;