lcw

2025-11-28 22:25:58 +08:00
parent 85f1f3a6f7
commit e2a54c16eb
90 changed files with 2451 additions and 511 deletions
--- a/src/views/home/model/strategyYp.vue
+++ b/src/views/home/model/strategyYp.vue
@ -0,0 +1,216 @@
+<template>
+
+  <div class="comom-cnt" >
+    <div class="zdryBox">
+      <ul class="ryBox" :infinite-scroll-distance="30" ref="carouselList" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll"
+        v-loading="loading" v-infinite-scroll="loadList">
+        <li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
+          <div>{{ item.title }}</div>
+          <div class="meta-info">{{ item.time }}{{ item.fbrxm }}</div>
+          <div>{{ item.content }}</div>
+        </li>
+        <MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
+      </ul>
+      <!-- 触底加载更多数据 -->
+      <div v-if="loadingMore" class="loading-more">加载中...</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { tbGsxtXxltSelectPage } from '@/api/tbGsxtXxltHf'
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
+import {useRouter} from 'vue-router'
+import * as MOSTY from "@/components/MyComponents/index";
+const router = useRouter()
+const emit = defineEmits(["reversalPush"])
+const reversalPush = () => {
+  emit('reversalPush')
+}
+// 数据相关
+const personList = ref([]);
+const loading = ref(false);
+const loadingMore = ref(false);
+const total = ref(0);
+const pageNum = ref(1);
+
+// 滚动相关
+const carouselList = ref(null);
+const isAutoScrolling = ref(false);
+let scrollTimer = null;
+
+// 获取数据
+const getList = (type) => {
+  loading.value = !type ? true : false;
+  loadingMore.value = !!type;
+  tbGsxtXxltSelectPage({ pageSize: 10, pageCurrent: pageNum.value }).then(res => {
+    loading.value = false;
+    loadingMore.value = false;
+    let arr = res.records || [];
+    personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
+    total.value = res.total;
+  }).catch(() => {
+    loading.value = false;
+    loadingMore.value = false;
+  })
+};
+
+// 触底加载
+const loadList = () => {
+  if (personList.value.length == total.value || loadingMore.value) return;
+  pageNum.value++;
+  getList(true)
+};
+
+// 自动滚动函数
+const autoScroll = () => {
+  if (!carouselList.value || !isAutoScrolling.value) return;
+  const container = carouselList.value;
+  const speed = 1; // 滚动速度
+  // 滚动容器
+  container.scrollTop += speed;
+  // 判断是否滚动到底部，如果是则回到顶部重新开始
+  if (container.scrollTop >= container.scrollHeight - container.clientHeight - 5) {
+    container.scrollTop = 0;
+  }
+};
+
+// 开始自动滚动
+const startAutoScroll = () => {
+  if (isAutoScrolling.value || !carouselList.value) return;
+  isAutoScrolling.value = true;
+  // 清除可能存在的定时器
+  if (scrollTimer) {
+    clearInterval(scrollTimer);
+  }
+  // 设置新的定时器，控制滚动速度
+  scrollTimer = setInterval(autoScroll, 30);
+};
+
+// 停止自动滚动
+const stopAutoScroll = () => {
+  isAutoScrolling.value = false;
+  if (scrollTimer) {
+    clearInterval(scrollTimer);
+    scrollTimer = null;
+  }
+};
+
+// 点击项
+const chooseItem = (item) => {
+  stopAutoScroll(); // 点击时停止自动滚动
+  router.push({
+    path: '/forumPost',
+    query: { id: item.id }
+  })
+};
+
+// 添加跳转
+const chooseForumPost = () => {
+  stopAutoScroll(); // 点击时停止自动滚动
+  router.push({ path: '/forumPost' })
+};
+
+// 生命周期
+onMounted(() => {
+  getList();
+  // 数据加载完成后启动自动滚动
+  setTimeout(() => {
+    if (personList.value.length > 0) {
+      startAutoScroll();
+    }
+  }, 1000);
+});
+
+// 组件卸载前清除定时器
+onBeforeUnmount(() => {
+  stopAutoScroll();
+});
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5);
+}
+</style>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+
+.loading-more {
+  text-align: center;
+  padding: 8px;
+  color: #83bff6;
+  background: rgba(0, 0, 0, 0.3);
+  font-size: 12px;
+}
+
+.zdryBox {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+
+  .ryBox {
+    height: 100%;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    // 隐藏滚动条但保留滚动功能
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    -ms-overflow-style: none;  // IE和Edge
+    scrollbar-width: none;  // Firefox
+
+    li {
+      padding: 12px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      transition: background-color 0.3s;
+      cursor: pointer;
+      box-sizing: border-box;
+
+      &:hover {
+        background-color: rgba(20, 107, 190, 0.2);
+      }
+
+      > div:first-child {
+        font-weight: bold;
+        color: #fff;
+        margin-bottom: 8px;
+        font-size: 14px;
+        /* 标题限制1行，超出用省略号 */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .meta-info {
+        text-align: right;
+        color: #83bff6;
+        font-size: 12px;
+        margin-bottom: 8px;
+      }
+
+      > div:last-child {
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 13px;
+        line-height: 1.6;
+        /* 内容限制3行，超出用省略号 */
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+.switchover{
+  cursor: pointer;
+  font-size: 14px;
+  margin-left: 20px;
+  color: rgb(255, 146, 4);
+}
+</style>