From 0e3acc365b285e6137e5d43a8135c48968cbc336 Mon Sep 17 00:00:00 2001
From: "34701892@qq.com" <34701892@qq.com>
Date: Mon, 4 Aug 2025 10:53:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(richedit):=20=E6=B7=BB=E5=8A=A0=E8=BF=94?=
 =?UTF-8?q?=E5=9B=9E=E9=A1=B6=E9=83=A8=E6=8C=89=E9=92=AE=E5=92=8C=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E7=8A=B6=E6=80=81=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增返回顶部按钮，滚动超过300px时显示
- 添加底部加载状态提示文本
- 修改排序字段为publishTime
- 优化滚动容器样式为overflow-y
- 添加滚动事件监听和清理逻辑
---
 src/views/pages/richedit/indexMobile.vue | 68 ++++++++++++++++++++++--
 1 file changed, 65 insertions(+), 3 deletions(-)

diff --git a/src/views/pages/richedit/indexMobile.vue b/src/views/pages/richedit/indexMobile.vue
index 19a32b7..71e9951 100644
--- a/src/views/pages/richedit/indexMobile.vue
+++ b/src/views/pages/richedit/indexMobile.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="all" ref="mescrollRef" v-infinite-scroll="getDataByScoll" style="overflow: auto">
+    <div class="all" ref="mescrollRef" v-infinite-scroll="getDataByScoll" style="overflow-y: auto">
         <div style="display: flex;align-items: center;">
             <el-input v-model="form.keyword" placeholder="输入关键字进行搜索（以空格隔开）" class="input-with-select"
                 @keyup.enter="handleSearch" style="width: 80%">
@@ -29,7 +29,7 @@
             <SortButton ref="sortRef" @changeSort="changeSort"></SortButton>
         </div>
 
-        <div class="r_list" v-loading="loading">
+        <div class="r_list" v-loading="loading" ref="listRef">
             <el-card v-for="(item, index) in tableData.data" :key="index" class="card">
                 <template #header>
                     <div class="card_header" @click.stop="goDetail(1, item, true)">
@@ -81,8 +81,17 @@
                     </div>
                 </template>
             </el-card>
+
+            <text class="bottom_load_text" v-if="tableData.data.length < tableData.total">--- 正在加载中 ---</text>
+            <text class="bottom_load_text" v-else>--- 已经到底了 ---</text>
+
         </div>
 
+        <div v-if="isShowBackTop" class="back_top" @click="goTop">
+            <el-icon>
+                <CaretTop />
+            </el-icon>
+        </div>
         <keep-alive>
             <DetailDrawer v-model="drawer" :data="newsData" :readOnly="readOnly" :type="newstype"
                 @handleEditStatus="handleEditStatus" @doNewsPublishFn="doNewsPublishFn" @doDeleteNewsFn="doDeleteNewsFn"
@@ -146,7 +155,7 @@ function changeTab(index) {
 }
 
 function changeSort(sort) {
-    form.value.orderBy = 'updateTime$' + sort;
+    form.value.orderBy = 'publishTime$' + sort;
     getData();
 }
 
@@ -330,11 +339,38 @@ function restData() {
 function handleEditStatus(val: boolean) {
     readOnly.value = val;
 }
+
+const mescrollRef = ref()
+function goTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+    })
+    mescrollRef.value.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+    });
+}
+
+const isShowBackTop = ref(false)
+function handleScroll() {
+    if (mescrollRef.value.scrollTop > 300) {
+        isShowBackTop.value = true
+    } else {
+        isShowBackTop.value = false
+
+    }
+}
+
 onMounted(() => {
     changeTab(0)
+    mescrollRef.value.addEventListener('scroll', handleScroll);
     // getData();
 })
 
+onUnmounted(() => {
+    mescrollRef.value.removeEventListener('scroll', handleScroll);
+})
 </script>
 
 <style scoped lang="scss">
@@ -347,6 +383,7 @@ onMounted(() => {
     /* Firefox */
     -ms-overflow-style: none;
     /* IE and Edge 旧版本 */
+
 }
 
 
@@ -450,4 +487,29 @@ onMounted(() => {
     color: #ff0000;
     font-weight: bold;
 }
+
+.bottom_load_text {
+    font-size: 14px;
+    color: #ccc;
+    width: 90vw;
+    height: 30px;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+}
+
+.back_top {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 40px;
+    height: 40px;
+    background-color: white;
+    border-radius: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 0 10px rgba($color: #363636, $alpha: 0.2);
+}
 </style>