From c6af813654dd47da7eeeeec8c8a1b66b0b4cdeba Mon Sep 17 00:00:00 2001
From: jiangx <jiangx@1000mu.com>
Date: Wed, 8 Nov 2023 11:27:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20=E5=A4=A7?=
 =?UTF-8?q?=E5=B1=8F=E9=A1=BE=E5=AE=A2=E5=BF=83=E5=A3=B0=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?ui=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  27 ++++
 package.json                                  |   2 +
 src/App.vue                                   |   2 +-
 src/assets/images/arrow.svg                   |   5 +
 src/components/ScrollList/ScrollList.vue      | 119 +++++++++---------
 .../ScrollListItem/ScrollListItem.vue         |   4 +-
 6 files changed, 94 insertions(+), 65 deletions(-)
 create mode 100644 src/assets/images/arrow.svg

diff --git a/package-lock.json b/package-lock.json
index 855a33e..1b0c359 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5858,6 +5858,14 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-4.0.6.tgz",
+      "integrity": "sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==",
+      "requires": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -9290,6 +9298,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -12235,6 +12248,11 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
+    "ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -12885,6 +12903,15 @@
         }
       }
     },
+    "swiper": {
+      "version": "8.4.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-8.4.5.tgz",
+      "integrity": "sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==",
+      "requires": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      }
+    },
     "table": {
       "version": "6.8.1",
       "resolved": "https://registry.npmmirror.com/table/-/table-6.8.1.tgz",
diff --git a/package.json b/package.json
index 55b5613..331b61a 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,9 @@
     "@better-scroll/scroll-bar": "^2.5.0",
     "axios": "^1.3.3",
     "core-js": "^3.8.3",
+    "lodash-es": "^4.17.21",
     "pinia": "^2.0.30",
+    "swiper": "^8.4.5",
     "vue": "^3.2.13"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 758e7e7..0d0f941 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@ const mallCode = ref<string>('')
 
 const { checkHandleScreen } = useAutoBack(_checkHandleScreen)
 function _checkHandleScreen() {
-  scrollList.value?.scrollTop?.scrollTo(0, 0)
+  scrollList.value?.start()
 }
 
 onMounted(() => {
diff --git a/src/assets/images/arrow.svg b/src/assets/images/arrow.svg
new file mode 100644
index 0000000..c373b43
--- /dev/null
+++ b/src/assets/images/arrow.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="white"/>
+<rect x="3" y="3" width="42" height="42" rx="21" stroke="#C70082"/>
+<path d="M35 24L24.75 34.25L20.5074 34.25L29.2574 25.5L13.3756 25.5L13.3756 22.5L29.2574 22.5L20.5074 13.75L24.75 13.75L35 24Z" fill="#C70082"/>
+</svg>
diff --git a/src/components/ScrollList/ScrollList.vue b/src/components/ScrollList/ScrollList.vue
index c3d8755..03f0439 100644
--- a/src/components/ScrollList/ScrollList.vue
+++ b/src/components/ScrollList/ScrollList.vue
@@ -1,43 +1,43 @@
 <template>
-  <div class="relative rounded-[10px] bg-[#E9E9E9] mx-10 h-[936px]">
-    <ScrollView
-      ref="scrollTop"
-      pull-up
-      :scroll-top="false"
-      class="relative w-[1840px]"
-      :list="customerList"
-      scroll-x
-      @scroll-end="scrollEnd"
-    >
-      <div class="inline-grid grid-rows-[repeat(2,430px)] grid-flow-col gap-4 pl-6 pr-10 whitespace-nowrap pt-[30px] pb-3">
-        <ScrollListItem v-for="item of customerList" :key="item.addTime" :customer="item" />
-        <div class="flex-center row-span-2" :class="[isFirst ? 'col-end-[56]' : '']">
-          <Loading v-if="loading" />
-          <div v-if="loaded && customerList.length >= total && customerList.length" class="text-24 text-gray-400 tb">没有更多数据</div>
-        </div>
-      </div>
-      <img
-        v-if="!customerList.length && loaded"
-        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-        src="../../assets/images/nodata.svg"
-        alt=""
-      />
-      <div v-if="customerList.length > 4" class="absolute left-1/2 -translate-x-1/2 bottom-5 flex flex-col items-center">
-        <img src="../../assets/images/hand.png" class="fadeInRight mb-[6px]" alt="" />
-        <p class="text-14 text-[#666]">左右滑动查看更多</p>
-      </div>
-    </ScrollView>
+  <div class="flex relative items-stretch rounded-[10px] bg-[#E9E9E9] mx-10">
+    <div class="swiper-container w-[calc(100%-104px)] my-[30px]">
+      <Swiper
+        v-if="chunkList.length"
+        :autoplay="chunkList.length > 6"
+        :modules="modules"
+        :slides-offset-before="24"
+        style="height: 879px"
+        @swiper="swiperInit"
+      >
+        <SwiperSlide v-for="item of chunkList" :key="JSON.stringify(item)">
+          <div class="flex flex-wrap gap-4">
+            <ScrollListItem v-for="customer of item" :key="customer.addTime" :customer="customer" />
+          </div>
+        </SwiperSlide>
+      </Swiper>
+    </div>
+    <div class="flex shrink-0 flex-col items-center w-[104px] rounded-[10px] bg-[#C70082] pt-[120px]">
+      <img src="../../assets/images/arrow.svg" alt="" />
+      <p class="text-20 text-white pt-4 tb tracking-[10px]">请在右边的写字台书写您的心声和建议吧</p>
+      <i class="text-20 text-white">!</i>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from 'vue'
+import { ref, toRefs, watch, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRootStore } from '@/store/root'
 import { getCustomerList } from '@/http/api/base'
 import { HTTP_CODE } from '@/enums'
-import ScrollView from '@/base/ScrollView/ScrollView.vue'
+import { chunk } from 'lodash-es'
 import ScrollListItem from '@/components/ScrollListItem/ScrollListItem.vue'
-import Loading from '@/base/Loading/Loading.vue'
+import SwiperCore, { Autoplay } from 'swiper'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+
+import 'swiper/css'
+
+const modules = [Autoplay]
+SwiperCore.use(modules)
 
 type Props = {
   mallCode: string
@@ -59,53 +59,48 @@ const { config } = toRefs(store)
 
 const customerList = ref<Customer[]>([])
 const pageIndex = ref(1)
-const loading = ref(false)
-const loaded = ref(false)
-const isFirst = ref(true)
-const total = ref(0)
-
-function scrollEnd() {
-  pageIndex.value++
-  _getCustomerList()
-}
+const chunkList = computed(() => chunk(customerList.value, 6))
 
 function _getCustomerList() {
-  if (loading.value || loaded.value) {
-    return
-  }
-  loading.value = true
   const params = {
     pageIndex: pageIndex.value,
-    pageSize: 10,
+    pageSize: 1000,
     mallCode: props.mallCode
   }
-  getCustomerList(config.value.smallUrl, params)
-    .then(({ code, data }) => {
-      if (code === HTTP_CODE.ERR_OK) {
-        customerList.value.push(...data.list)
-        total.value = data.allCount
-      }
-    })
-    .finally(() => {
-      isFirst.value = false
-      loading.value = false
-      if (customerList.value.length >= total.value) {
-        loaded.value = true
-      }
-    })
+  getCustomerList(config.value.smallUrl, params).then(({ code, data }) => {
+    if (code === HTTP_CODE.ERR_OK) {
+      customerList.value.push(...data.list)
+    }
+  })
 }
 
-const scrollTop = ref()
+const swiper = ref()
+
+function swiperInit(_swiper: any) {
+  swiper.value = _swiper
+}
+function start() {
+  swiper.value?.autoplay?.start()
+}
+function stop() {
+  swiper.value?.autoplay?.stop()
+}
+
+onMounted(() => {
+  window.addEventListener('touchend', stop)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('touchend', stop)
+})
 
 defineExpose({
-  scrollTop
+  start
 })
 </script>
 
 <style>
 .tb {
   writing-mode: tb;
-  letter-spacing: 6px;
 }
 .fadeInRight {
   animation: fade-in-right 1s infinite;
diff --git a/src/components/ScrollListItem/ScrollListItem.vue b/src/components/ScrollListItem/ScrollListItem.vue
index a639bb2..7e677ea 100644
--- a/src/components/ScrollListItem/ScrollListItem.vue
+++ b/src/components/ScrollListItem/ScrollListItem.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-wrap pt-6 pl-6 pr-[6px] space-x-8 relative w-[720px] rounded-xl bg-white shadow-[3px_3px_0_0_rgba(0,0,0,0.10)]">
+  <div class="flex flex-wrap pt-6 pl-6 pr-[6px] space-x-8 relative w-[556px] rounded-xl bg-white shadow-[3px_3px_0_0_rgba(0,0,0,0.10)]">
     <div class="flex-1 justify-between">
       <div class="text-justify text-[#808080] text-12 font-normal leading-[18px] mb-2">
         {{ formatDate(customer.addTime) }}
       </div>
-      <ScrollView class="relative h-[356px]" scrollbar :list="[]">
+      <ScrollView class="relative h-[380px]" scrollbar :list="[]">
         <div class="text-justify text-[#C70082] text-16 font-normal leading-normal whitespace-normal pr-[14px]">
           Q:
           <div>{{ customer.suggestionContent }}</div>