From 11144f2fa7af379550b7058e58831329cade7e1c Mon Sep 17 00:00:00 2001
From: zzp <34701892@qq.com>
Date: Sun, 12 Oct 2025 13:15:54 +0800
Subject: [PATCH] =?UTF-8?q?fix(richedit):=20=E4=BF=AE=E5=A4=8D=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=AF=8C=E6=96=87=E6=9C=AC=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E6=BB=9A=E5=8A=A8=E5=8A=A0=E8=BD=BD=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复无限滚动加载逻辑，确保在接近底部时触发加载
调整容器样式解决滚动条显示问题
优化标签切换时的数据重置逻辑
---
 src/views/pages/richedit/indexMobile.vue | 945 ++++++++++++-----------
 1 file changed, 487 insertions(+), 458 deletions(-)

diff --git a/src/views/pages/richedit/indexMobile.vue b/src/views/pages/richedit/indexMobile.vue
index 1a9665e..d1bc8bb 100644
--- a/src/views/pages/richedit/indexMobile.vue
+++ b/src/views/pages/richedit/indexMobile.vue
@@ -1,61 +1,76 @@
 <template>
-    <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%">
-                <template #append>
-                    <el-button icon="Search" @click="handleSearch" />
-                </template>
-            </el-input>
+	<!-- v-infinite-scroll="getDataByScoll" -->
+	<div class="all" ref="mescrollRef" style="overflow: 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%"
+			>
+				<template #append>
+					<el-button icon="Search" @click="handleSearch" />
+				</template>
+			</el-input>
 
-            <el-button style="width: 20%" type="text" @click="restData">清空条件</el-button>
-        </div>
+			<el-button style="width: 20%" type="text" @click="restData">清空条件</el-button>
+		</div>
 
-        <el-date-picker style="margin-top: 20px; width: 100%; max-height: 40px" v-model="daterange" type="daterange"
-            range-separator="至" value-format="YYYY-MM-DD" start-placeholder="选择报道时间" end-placeholder="选择报道时间"
-            @change="handleSearch" />
+		<el-date-picker
+			style="margin-top: 20px; width: 100%; max-height: 40px"
+			v-model="daterange"
+			type="daterange"
+			range-separator="至"
+			value-format="YYYY-MM-DD"
+			start-placeholder="选择报道时间"
+			end-placeholder="选择报道时间"
+			@change="handleSearch"
+		/>
 
-        <div class="filter">
-            <div class="r_tabs">
-                <div class="tabItem" v-for="(item, index) in tabsList" :key="index" @click="changeTab(index)">
-                    <text :style="{
-                        color: tabIndex == index ? '#409eff' : '#333',
-                        fontWeight: tabIndex == index ? 'bold' : 'normal',
-                    }">{{ item.name }}</text>
-                    <div class="tab_line" v-if="tabIndex == index"></div>
-                </div>
-            </div>
+		<div class="filter">
+			<div class="r_tabs">
+				<div class="tabItem" v-for="(item, index) in tabsList" :key="index" @click="changeTab(index)">
+					<text
+						:style="{
+							color: tabIndex == index ? '#409eff' : '#333',
+							fontWeight: tabIndex == index ? 'bold' : 'normal',
+						}"
+						>{{ item.name }}</text
+					>
+					<div class="tab_line" v-if="tabIndex == index"></div>
+				</div>
+			</div>
 
-            <!-- <SortButton ref="sortRef" @changeSort="changeSort"></SortButton> -->
-        </div>
+			<!-- <SortButton ref="sortRef" @changeSort="changeSort"></SortButton> -->
+		</div>
 
-        <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)">
-                        <text class="card_title" v-html="item.title"></text>
-                        <div class="r_point" :style="{ color: '#000' }">
-                            <div class="point" :style="{ backgroundColor: item.status == 2 ? '#52C41A' : '#D9D9D9' }">
-                            </div>
-                            <text v-if="item.status == 0" style="color: rgba(0, 0, 0, 0.65)">草稿</text>
-                            <text v-if="item.status == 1" style="color: rgba(0, 0, 0, 0.65)">
-                                {{ item.deleted ? '已删除' : '未发布' }}
-                            </text>
-                            <text v-if="item.status == 2" style="color: rgba(0, 0, 0, 0.65)">已发布</text>
-                            <text v-if="item.status == 3" style="color: rgba(0, 0, 0, 0.65)">审核中</text>
-                            <text v-if="item.status == 4" style="color: rgba(0, 0, 0, 0.65)">已二审</text>
+		<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)">
+						<text class="card_title" v-html="item.title"></text>
+						<div class="r_point" :style="{ color: '#000' }">
+							<div class="point" :style="{ backgroundColor: item.status == 2 ? '#52C41A' : '#D9D9D9' }"></div>
+							<text v-if="item.status == 0" style="color: rgba(0, 0, 0, 0.65)">草稿</text>
+							<text v-if="item.status == 1" style="color: rgba(0, 0, 0, 0.65)">
+								{{ item.deleted ? '已删除' : '未发布' }}
+							</text>
+							<text v-if="item.status == 2" style="color: rgba(0, 0, 0, 0.65)">已发布</text>
+							<text v-if="item.status == 3" style="color: rgba(0, 0, 0, 0.65)">审核中</text>
+							<text v-if="item.status == 4" style="color: rgba(0, 0, 0, 0.65)">已二审</text>
 
-                            <text v-if="item.status == -1 && !item.deleted" style="color: red"> 退改中 </text>
-                            <text v-if="item.status == -1 && item.deleted"> 已删除 </text>
-                        </div>
-                    </div>
-                </template>
-                <div style="display: flex; align-items: center" @click.stop="goDetail(1, item, true)">
-                    <div>
-                        <text>报道时间：</text>
-                        <text>{{ item.publishTime }}</text>
-                    </div>
-                    <!-- <div style="display: flex; align-items: center; gap: 5px" v-if="item.submitter">
+							<text v-if="item.status == -1 && !item.deleted" style="color: red"> 退改中 </text>
+							<text v-if="item.status == -1 && item.deleted"> 已删除 </text>
+						</div>
+					</div>
+				</template>
+				<div style="display: flex; align-items: center" @click.stop="goDetail(1, item, true)">
+					<div>
+						<text>报道时间：</text>
+						<text>{{ item.publishTime }}</text>
+					</div>
+					<!-- <div style="display: flex; align-items: center; gap: 5px" v-if="item.submitter">
                         <el-icon>
                             <UserFilled />
                         </el-icon>
@@ -66,90 +81,92 @@
                         <text>编辑评分：</text>
                         <text>{{ item.rating }}</text>
                     </div> -->
-                </div>
-                <template #footer>
-                    <div style="display: flex; justify-content: space-between; align-items: center; height: 10px">
-                        <div></div>
-                        <div class="option">
-                            <el-button v-if="item.deleted" type="text" style="margin-left: -10px"
-                                @click="doRecoverFn(item)">
-                                <text>恢复</text>
-                            </el-button>
-                            <div v-else
-                                style="display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; white-space: nowrap">
-                                <!-- 新闻状态 0-草稿 | 1-未发布 | 2-已发布 | 3-送审 | 4-已二审 | -1-退改中 -->
-                                <div v-if="Session.get('userInfoLocal').userType == '00'">
-                                    <!-- 普通账号 -->
-                                    <el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
-                                        type="text" @click="goDetail(1, item, false)">编辑</el-button>
+				</div>
+				<template #footer>
+					<div style="display: flex; justify-content: space-between; align-items: center; height: 10px">
+						<div></div>
+						<div class="option">
+							<el-button v-if="item.deleted" type="text" style="margin-left: -10px" @click="doRecoverFn(item)">
+								<text>恢复</text>
+							</el-button>
+							<div v-else style="display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; white-space: nowrap">
+								<!-- 新闻状态 0-草稿 | 1-未发布 | 2-已发布 | 3-送审 | 4-已二审 | -1-退改中 -->
+								<div v-if="Session.get('userInfoLocal').userType == '00'">
+									<!-- 普通账号 -->
+									<el-button v-if="item.status == 0 || item.status == 1 || item.status == -1" type="text" @click="goDetail(1, item, false)"
+										>编辑</el-button
+									>
 
-                                    <el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
-                                        type="text" @click="doApprovalFn(item, item.status)">送审</el-button>
-                                    <el-button v-else-if="item.status == 3" type="text"
-                                        @click="doApprovalFn(item, item.status)">撤审</el-button>
+									<el-button v-if="item.status == 0 || item.status == 1 || item.status == -1" type="text" @click="doApprovalFn(item, item.status)"
+										>送审</el-button
+									>
+									<el-button v-else-if="item.status == 3" type="text" @click="doApprovalFn(item, item.status)">撤审</el-button>
 
-                                    <el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
-                                        type="text" style="color: #ff1818" @click="doDeleteNewsFn(item)">删除</el-button>
-                                </div>
-                                <div v-if="Session.get('userInfoLocal').userType == '02'">
-                                    <el-button v-if="item.status == 4" type="text"
-                                        @click="doApprovalFn(item, item.status)">撤审</el-button>
+									<el-button
+										v-if="item.status == 0 || item.status == 1 || item.status == -1"
+										type="text"
+										style="color: #ff1818"
+										@click="doDeleteNewsFn(item)"
+										>删除</el-button
+									>
+								</div>
+								<div v-if="Session.get('userInfoLocal').userType == '02'">
+									<el-button v-if="item.status == 4" type="text" @click="doApprovalFn(item, item.status)">撤审</el-button>
 
-                                    <!-- 二审账号 -->
-                                    <el-button v-if="item.status == 3" type="text" style="color: #ff1818"
-                                        @click="doNewReturnFn(item)">退改</el-button>
+									<!-- 二审账号 -->
+									<el-button v-if="item.status == 3" type="text" style="color: #ff1818" @click="doNewReturnFn(item)">退改</el-button>
 
-                                    <el-button v-if="item.status == 3" type="text"
-                                        @click="goDetail(1, item, false)">编辑</el-button>
+									<el-button v-if="item.status == 3" type="text" @click="goDetail(1, item, false)">编辑</el-button>
 
-                                    <el-button v-if="item.status == 3" type="text"
-                                        @click="doNewCheckFn(item)">复审</el-button>
+									<el-button v-if="item.status == 3" type="text" @click="doNewCheckFn(item)">复审</el-button>
 
-                                    <el-button type="text" v-if="item.status == 4"
-                                        @click="doNewsPublishFn(item, 2)">发布</el-button>
-                                </div>
-                                <div v-if="Session.get('userInfoLocal').userType == '01'">
-                                    <!-- 终审账号 -->
-                                    <el-button v-if="item.status == 3 || item.status == 4" type="text"
-                                        @click="goDetail(1, item, false)">编辑</el-button>
+									<el-button type="text" v-if="item.status == 4" @click="doNewsPublishFn(item, 2)">发布</el-button>
+								</div>
+								<div v-if="Session.get('userInfoLocal').userType == '01'">
+									<!-- 终审账号 -->
+									<el-button v-if="item.status == 3 || item.status == 4" type="text" @click="goDetail(1, item, false)">编辑</el-button>
 
-                                    <el-button v-if="item.status == 4" type="text" style="color: #ff1818"
-                                        @click="doNewReturnFn(item)">退改</el-button>
+									<el-button v-if="item.status == 4" type="text" style="color: #ff1818" @click="doNewReturnFn(item)">退改</el-button>
 
-                                    <el-button type="text" v-if="item.status == 2"
-                                        @click="doNewsPublishFn(item, 1)">撤稿</el-button>
-                                    <el-button type="text" v-else-if="item.status != -1 && item.status == 4"
-                                        @click="doNewsPublishFn(item, 2)">发布</el-button>
+									<el-button type="text" v-if="item.status == 2" @click="doNewsPublishFn(item, 1)">撤稿</el-button>
+									<el-button type="text" v-else-if="item.status != -1 && item.status == 4" @click="doNewsPublishFn(item, 2)">发布</el-button>
 
-                                    <el-button v-if="item.status == 3" type="text"
-                                        style="color: #ff1818; margin-left: 5px"
-                                        @click="doNewReturnFn(item)">退改</el-button>
-                                </div>
+									<el-button v-if="item.status == 3" type="text" style="color: #ff1818; margin-left: 5px" @click="doNewReturnFn(item)"
+										>退改</el-button
+									>
+								</div>
 
-                                <!-- <el-icon size="16" @click="goRecord(scope.row)">
+								<!-- <el-icon size="16" @click="goRecord(scope.row)">
 								<Tickets />
 							</el-icon> -->
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </el-card>
+							</div>
+						</div>
+					</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>
+			<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"
-                @getData="getData" />
-        </keep-alive>
-    </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"
+				@getData="getData"
+			/>
+		</keep-alive>
+	</div>
 </template>
 <script setup lang="ts" name="loginIndex">
 import { onUnmounted, onMounted, reactive, ref } from 'vue';
@@ -170,119 +187,122 @@ import { highlightTitle } from '/@/utils/highlight';
 const loading = ref(false);
 
 const tabsList = ref([
-    {
-        name: '审核中',
-        status: 3,
-    },
-    {
-        name: '已发布',
-        status: 2,
-    },
-    {
-        name: '全部',
-        status: null,
-    },
+	{
+		name: '审核中',
+		status: 3,
+	},
+	{
+		name: '已发布',
+		status: 2,
+	},
+	{
+		name: '全部',
+		status: null,
+	},
 ]);
 
 const tabIndex = ref(0);
 
 function changeTab(index) {
-    tabIndex.value = index;
-    form.value.status = tabsList.value[index].status;
-    getData();
+	tableData.page = 1;
+	tabIndex.value = index;
+	form.value.status = tabsList.value[index].status;
+	getData();
 }
 
 function changeSort(sort) {
-    form.value.orderBy = 'publishTime$' + sort;
-    getData();
+	form.value.orderBy = 'publishTime$' + sort;
+	getData();
 }
 
 const form = ref({
-    // orderBy: 'updateTime$desc',
-    orderBy: null,
-    // direction: 'desc',
-    keyword: '',
-    minScore: '',
-    maxScore: '',
-    industry: [],
+	// orderBy: 'updateTime$desc',
+	orderBy: null,
+	// direction: 'desc',
+	keyword: '',
+	minScore: '',
+	maxScore: '',
+	industry: [],
 });
 
 const tableData = reactive({
-    data: [],
-    total: 0,
-    page: 1,
-    size: 10,
+	data: [],
+	total: 0,
+	page: 1,
+	size: 10,
 });
 
 function getDataByScoll() {
-    if (tableData.data.length < tableData.total) {
-        tableData.page++;
-        getData();
-    }
+	console.log('🚀 ~ getDataByScoll ~ tableData.data.length :', tableData.data.length);
+	console.log('🚀 ~ getDataByScoll ~ tableData.total:', tableData.total);
+	if (tableData.data.length < tableData.total) {
+		tableData.page++;
+		getData();
+	}
 }
 
 const tableLoading = ref(false);
 const daterange = ref('');
 // 获取列表
 async function getData() {
-    // return
-    if (form.value.minScore && form.value.maxScore && Number(form.value.maxScore) < Number(form.value.minScore)) {
-        ElMessage.error('最高分不能小于最低分');
-        return;
-    }
+	// return
+	if (form.value.minScore && form.value.maxScore && Number(form.value.maxScore) < Number(form.value.minScore)) {
+		ElMessage.error('最高分不能小于最低分');
+		return;
+	}
 
-    let _sdate = '';
-    let _edate = '';
-    if (daterange.value) {
-        _sdate = daterange.value[0];
-        _edate = daterange.value[1];
-    }
-    console.log('🚀 ~ getData ~ _edate:', _edate);
+	let _sdate = '';
+	let _edate = '';
+	if (daterange.value) {
+		_sdate = daterange.value[0];
+		_edate = daterange.value[1];
+	}
+	console.log('🚀 ~ getData ~ _edate:', _edate);
 
-    const industry = form.value.industry?.length > 0 ? encodeURIComponent(JSON.stringify(form.value.industry)) : '';
+	const industry = form.value.industry?.length > 0 ? encodeURIComponent(JSON.stringify(form.value.industry)) : '';
 
-    try {
-        loading.value = true;
-        let { code, data, total } = await getNews({
-            ...form.value,
-            industry,
-            // page: tableData.page,
-            current: tableData.page,
-            size: tableData.size,
-            dateline_from: _sdate || undefined,
-            dateline_to: _edate || undefined,
-            range: Session.get('userInfoLocal').userType == '01' ? 'review' : Session.get('userInfoLocal').userType == '02' ? 'secondReview' : 'all',
-        });
-        loading.value = false;
-        if (code == 200) {
-            tableData.total = total;
+	try {
+		loading.value = true;
+		let { code, data, total } = await getNews({
+			...form.value,
+			industry,
+			// page: tableData.page,
+			current: tableData.page,
+			size: tableData.size,
+			dateline_from: _sdate || undefined,
+			dateline_to: _edate || undefined,
+			range: Session.get('userInfoLocal').userType == '01' ? 'review' : Session.get('userInfoLocal').userType == '02' ? 'secondReview' : 'all',
+		});
+		loading.value = false;
+		if (code == 200) {
+			tableData.total = total;
 
-            if (tableData.page == 1) {
-                tableData.data = data;
-            } else {
-                tableData.data.push(...data);
-            }
+			if (tableData.page == 1) {
+				tableData.data = data;
+			} else {
+				tableData.data.push(...data);
+			}
 
-            tableData.data.forEach((item, index) => {
-                item.columns.forEach((childItem, childIndex) => {
-                    if (childIndex < 2) {
-                        if (!item.columnsMin) {
-                            item.columnsMin = [];
-                        }
-                        item.columnsMin.push(childItem);
-                    }
-                });
-                item.title = highlightTitle(item.title, form.value.keyword);
-            });
-        }
-    } catch (error) {
-        loading.value = false;
-    }
+			tableData.data.forEach((item, index) => {
+				item.columns.forEach((childItem, childIndex) => {
+					if (childIndex < 2) {
+						if (!item.columnsMin) {
+							item.columnsMin = [];
+						}
+						item.columnsMin.push(childItem);
+					}
+				});
+				item.title = highlightTitle(item.title, form.value.keyword);
+			});
+		}
+	} catch (error) {
+		loading.value = false;
+	}
 }
 
 function handleSearch() {
-    tableData.page = 1;
-    getData();
+	tableData.page = 1;
+	getData();
 }
 
 /**
@@ -291,35 +311,35 @@ function handleSearch() {
  * @param status   1：下架 2：上架
  */
 async function doNewsPublishFn(item, status) {
-    let str = '请确认要下架该篇资讯？撤稿后前台将不可见本文章';
-    if (status == 1) {
-        str = '请确认要下架该篇资讯？撤稿后前台将不可见本文章';
-    } else {
-        str = '请确认已审核该篇资讯，发布后前台将展示本资讯';
-    }
-    ElMessageBox.confirm(str, '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-    })
-        .then(async () => {
-            let { code } =
-                status == 1
-                    ? await doNewRevoke({
-                        id: item.id,
-                        status: status,
-                    })
-                    : await doNewsPublish({
-                        id: item.id,
-                        status: status,
-                    });
-            if (code == 200) {
-                ElMessage.success('操作成功');
-                drawer.value = false;
-                getData();
-            }
-        })
-        .catch(() => { });
+	let str = '请确认要下架该篇资讯？撤稿后前台将不可见本文章';
+	if (status == 1) {
+		str = '请确认要下架该篇资讯？撤稿后前台将不可见本文章';
+	} else {
+		str = '请确认已审核该篇资讯，发布后前台将展示本资讯';
+	}
+	ElMessageBox.confirm(str, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(async () => {
+			let { code } =
+				status == 1
+					? await doNewRevoke({
+							id: item.id,
+							status: status,
+					  })
+					: await doNewsPublish({
+							id: item.id,
+							status: status,
+					  });
+			if (code == 200) {
+				ElMessage.success('操作成功');
+				drawer.value = false;
+				getData();
+			}
+		})
+		.catch(() => {});
 }
 
 /**  管理后台需求文件0519（V1.1） start */
@@ -334,311 +354,320 @@ const newstype = ref(0);
  * @param type 0：创建 1：编辑
  */
 function goDetail(type, item, readonly) {
-    readOnly.value = readonly;
-    newsData.value = item;
-    newstype.value = type;
-    drawer.value = true;
+	readOnly.value = readonly;
+	newsData.value = item;
+	newstype.value = type;
+	drawer.value = true;
 
-    // router.push({
-    //     path: '/detailMobile',
-    //     query: {
-    //         type,
-    //         item,
-    //         readonly,
-    //     }
-    // })
+	// router.push({
+	//     path: '/detailMobile',
+	//     query: {
+	//         type,
+	//         item,
+	//         readonly,
+	//     }
+	// })
 }
 
 const sortRef = ref(null);
 
 function restData() {
-    form.value.keyword = null;
-    form.value.industry = null;
-    form.value.tag = null;
-    daterange.value = null;
-    form.value.minScore = null;
-    form.value.maxScore = null;
-    form.value.mediaId = null;
-    form.value.deleted = null;
+	form.value.keyword = null;
+	form.value.industry = null;
+	form.value.tag = null;
+	daterange.value = null;
+	form.value.minScore = null;
+	form.value.maxScore = null;
+	form.value.mediaId = null;
+	form.value.deleted = null;
 
-    form.value.status = null;
-    form.value.rating = null;
-    form.value.orderBy = null;
+	// form.value.status = null;
+	form.value.rating = null;
+	form.value.orderBy = null;
 
-    // sortRef.value.clearSort();
+	// sortRef.value.clearSort();
 
-    tableData.page = 1;
-    getData();
+	tableData.page = 1;
+	getData();
 }
 
 function handleEditStatus(val: boolean) {
-    readOnly.value = val;
+	readOnly.value = val;
 }
 
 const mescrollRef = ref();
 function goTop() {
-    window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-    });
-    mescrollRef.value.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-    });
+	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;
-    }
+function handleScroll(e) {
+	console.log('🚀 ~ handleScroll ~ e:', e);
+	if (mescrollRef.value.scrollTop > 300) {
+		isShowBackTop.value = true;
+	} else {
+		isShowBackTop.value = false;
+	}
+
+	const { scrollTop, clientHeight, scrollHeight } = mescrollRef.value;
+
+	// 计算是否接近底部（这里设置为距离底部200px时触发）
+	const isNearBottom = scrollTop + clientHeight >= scrollHeight - 50;
+
+	// 如果接近底部且不在加载中，则加载更多
+	if (isNearBottom) {
+		getDataByScoll();
+	}
 }
 
 // 复审
 async function doNewCheckFn(item) {
-    let { code, data } = await doNewCheck({
-        id: item.id,
-    });
-    if (code == 200) {
-        ElMessage.success('操作成功');
-        getData();
-    }
+	let { code, data } = await doNewCheck({
+		id: item.id,
+	});
+	if (code == 200) {
+		ElMessage.success('操作成功');
+		getData();
+	}
 }
 
 // 退改
 async function doNewReturnFn(item) {
-    let { code, data } = await doNewReturn({
-        id: item.id,
-    });
-    if (code == 200) {
-        ElMessage.success('操作成功');
-        getData();
-    }
+	let { code, data } = await doNewReturn({
+		id: item.id,
+	});
+	if (code == 200) {
+		ElMessage.success('操作成功');
+		getData();
+	}
 }
 
 async function doApprovalFn(item, status) {
-    let str = '确认初审完成并提交复核？送审后不支持再次编辑';
-    if (status == 3 || status == 4) {
-        str = '确认撤销该篇资讯审核？';
-    } else {
-        str = '确认初审完成并提交复核？送审后不支持再次编辑';
-    }
-    ElMessageBox.confirm(str, '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-    })
-        .then(async () => {
-            let { code } =
-                status == 3 || status == 4
-                    ? await doNewRevoke({
-                        id: item.id,
-                    })
-                    : await doNewSubmit({
-                        id: item.id,
-                    });
-            if (code == 200) {
-                ElMessage.success('操作成功');
-                drawer.value = false;
-                getData();
-            }
-        })
-        .catch(() => { });
+	let str = '确认初审完成并提交复核？送审后不支持再次编辑';
+	if (status == 3 || status == 4) {
+		str = '确认撤销该篇资讯审核？';
+	} else {
+		str = '确认初审完成并提交复核？送审后不支持再次编辑';
+	}
+	ElMessageBox.confirm(str, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(async () => {
+			let { code } =
+				status == 3 || status == 4
+					? await doNewRevoke({
+							id: item.id,
+					  })
+					: await doNewSubmit({
+							id: item.id,
+					  });
+			if (code == 200) {
+				ElMessage.success('操作成功');
+				drawer.value = false;
+				getData();
+			}
+		})
+		.catch(() => {});
 }
 
 onMounted(() => {
+	if (Session.get('userInfoLocal').userType == '02') {
+		tabsList.value = [
+			{
+				name: '审核中',
+				status: 3,
+			},
+			{
+				name: '已二审',
+				status: 4,
+			},
+			{
+				name: '已发布',
+				status: 2,
+			},
+			{
+				name: '退改中',
+				status: -1,
+			},
+			{
+				name: '全部',
+				status: null,
+			},
+		];
+	} else if (Session.get('userInfoLocal').userType == '01') {
+		tabsList.value = [
+			{
+				name: '已二审',
+				status: 4,
+			},
+			{
+				name: '已发布',
+				status: 2,
+			},
+			{
+				name: '退改中',
+				status: -1,
+			},
+			{
+				name: '全部',
+				status: null,
+			},
+		];
+	}
 
-    if (Session.get('userInfoLocal').userType == '02') {
-        tabsList.value = [
-            {
-                name: '审核中',
-                status: 3,
-            },
-            {
-                name: '已二审',
-                status: 4,
-            },
-            {
-                name: '已发布',
-                status: 2,
-            },
-            {
-                name: '退改中',
-                status: -1,
-            },
-            {
-                name: '全部',
-                status: null,
-            },
-        ]
-    } else if (Session.get('userInfoLocal').userType == '01') {
-        tabsList.value = [
-            {
-                name: '已二审',
-                status: 4,
-            },
-            {
-                name: '已发布',
-                status: 2,
-            },
-            {
-                name: '退改中',
-                status: -1,
-            },
-            {
-                name: '全部',
-                status: null,
-            },
-        ]
-    }
-
-    changeTab(0);
-    mescrollRef.value.addEventListener('scroll', handleScroll);
-    // getData();
-
-
+	changeTab(0);
+	mescrollRef.value.addEventListener('scroll', handleScroll);
+	// getData();
 });
 
 onUnmounted(() => {
-    mescrollRef.value.removeEventListener('scroll', handleScroll);
+	mescrollRef.value.removeEventListener('scroll', handleScroll);
 });
 </script>
 
 <style scoped lang="scss">
 .all {
-    display: flex;
-    flex-direction: column;
-    max-width: 100vw;
-    height: 100vh;
-    scrollbar-width: none;
-    /* Firefox */
-    -ms-overflow-style: none;
-    /* IE and Edge 旧版本 */
+	display: flex;
+	flex-direction: column;
+	// max-width: 100vw;
+	height: 100vh;
+	overflow-y: auto;
+	scrollbar-width: none;
+	/* Firefox */
+	-ms-overflow-style: none;
+	/* IE and Edge 旧版本 */
 }
 
 /* 隐藏容器的滚动条 */
 .all::-webkit-scrollbar {
-    display: none;
-    /* Chrome, Safari, Edge, Opera */
+	display: none;
+	/* Chrome, Safari, Edge, Opera */
 }
 
 .filter {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 15px;
-    padding: 0 5px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 15px;
+	padding: 0 5px;
 }
 
 .r_tabs {
-    display: flex;
-    gap: 30px;
-    margin-top: 10px;
+	display: flex;
+	gap: 30px;
+	margin-top: 10px;
 
-    .tabItem {
-        font-size: 16px;
-        color: #333;
-        // font-weight: bold;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-    }
+	.tabItem {
+		font-size: 16px;
+		color: #333;
+		// font-weight: bold;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: center;
+	}
 
-    .tab_line {
-        width: 20px;
-        height: 5px;
-        background-color: #409eff;
-        border-radius: 20px;
-        margin-top: 5px;
-    }
+	.tab_line {
+		width: 20px;
+		height: 5px;
+		background-color: #409eff;
+		border-radius: 20px;
+		margin-top: 5px;
+	}
 }
 
 .r_list {
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-    gap: 15px;
+	display: flex;
+	flex-direction: column;
+	margin-top: 20px;
+	gap: 15px;
 }
 
 .card_header {
-    display: flex;
-    justify-content: space-between;
+	display: flex;
+	justify-content: space-between;
 
-    .card_title {
-        font-size: 15px;
-        font-weight: bold;
-        width: 73%;
-        // overflow: hidden;
-        // text-overflow: ellipsis;
-        // white-space: nowrap;
+	.card_title {
+		font-size: 15px;
+		font-weight: bold;
+		width: 73%;
+		// overflow: hidden;
+		// text-overflow: ellipsis;
+		// white-space: nowrap;
 
-        height: 43px;
-        overflow: hidden;
-        display: -webkit-box;
-        text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情  text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
-        -webkit-line-clamp: 2;
-        /*要显示的行数*/
-        /* autoprefixer: off */
-        -webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
-    }
+		height: 43px;
+		overflow: hidden;
+		display: -webkit-box;
+		text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情  text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
+		-webkit-line-clamp: 2;
+		/*要显示的行数*/
+		/* autoprefixer: off */
+		-webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
+	}
 
-    .r_point {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        font-weight: 400;
-    }
+	.r_point {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		font-weight: 400;
+	}
 
-    .point {
-        width: 8px;
-        height: 8px;
-        border-radius: 100px;
-    }
+	.point {
+		width: 8px;
+		height: 8px;
+		border-radius: 100px;
+	}
 }
 
 .card {
-    box-shadow: 0 0 5px rgba($color: #474747, $alpha: 0.1);
-    border-radius: 5px;
+	box-shadow: 0 0 5px rgba($color: #474747, $alpha: 0.1);
+	border-radius: 5px;
 }
 
 .option {
-    display: flex;
+	display: flex;
 
-    button {
-        padding: 0 0px 0 0px;
-    }
+	button {
+		padding: 0 0px 0 0px;
+	}
 }
 
 :deep(.highlight) {
-    color: #ff0000;
-    font-weight: bold;
+	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;
+	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);
+	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>