style：首页-生产计划-展开收起列表按钮

src/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="page-container">
-    <scroll-view scroll-y class="main-scroll" @scroll="onScroll">
+    <scroll-view scroll-y class="main-scroll" :scroll-top="scrollTop" scroll-with-animation @scroll="onScroll">
       <view class="banner-section">
         <view class="banner-bg">
           <view class="banner-content">
@@ -48,10 +48,13 @@
         <view class="plan-section">
           <view class="section-header">
             <text class="section-title">生产计划</text>
-            <text class="section-more" @click="viewMorePlans">查看更多 ›</text>
+            <text v-if="hasMorePlans || isShowAllPlans" class="section-more" @click="viewMorePlans">
+              {{ isShowAllPlans ? '收起列表' : '查看更多 ›' }}
+            </text>
           </view>
           <view class="plan-list">
-            <view v-for="(plan, index) in planList" :key="index" class="plan-card" @click="handlePlanClick(plan)">
+            <view v-for="(plan, index) in displayPlanList" :key="index" class="plan-card"
+              @click="handlePlanClick(plan)">
               <view class="plan-header">
                 <text class="plan-code">{{ plan.code }}</text>
                 <view class="plan-status" :class="'status-' + plan.statusType">
@@ -86,6 +89,10 @@
       </view>
     </scroll-view>
 
+    <view v-if="showGoTop" class="go-top-btn" @click="goTop">
+      <text class="go-top-icon">↑</text>
+    </view>
+
     <uni-popup ref="todoPopup" type="right" background-color="#fff">
       <view class="todo-popup">
         <view class="todo-header">
@@ -123,6 +130,10 @@ import request from '@/utils/request'
 
 const todoPopup = ref(null);
 const todoCount = ref(0);
+const scrollTop = ref(0)
+const currentScrollTop = ref(0)
+const showGoTop = ref(false)
+const isShowAllPlans = ref(false)
 const badgeVisible = computed(() => Number(todoCount.value) > 0)
 const badgeText = computed(() => {
   const count = Number(todoCount.value)
@@ -147,6 +158,11 @@ const statsData = reactive([
 ]);
 
 const planList = reactive([]);
+const hasMorePlans = computed(() => planList.length > 3)
+const displayPlanList = computed(() => {
+  if (isShowAllPlans.value) return planList
+  return planList.slice(0, 3)
+})
 
 const todoList = reactive([]);
 
@@ -186,13 +202,21 @@ function handlePlanClick(plan) {
 }
 
 function viewMorePlans() {
-  uni.showToast({
+  if (!hasMorePlans.value && !isShowAllPlans.value) return
-    title: '查看更多计划',
+  isShowAllPlans.value = !isShowAllPlans.value
-    icon: 'none'
-  });
 }
 
 function onScroll(e) {
+  const top = Number(e?.detail?.scrollTop || 0)
+  currentScrollTop.value = top
+  showGoTop.value = top > 600
+}
+
+function goTop() {
+  scrollTop.value = currentScrollTop.value + 1
+  setTimeout(() => {
+    scrollTop.value = 0
+  }, 0)
 }
 
 function formatDate(ms) {
@@ -260,8 +284,9 @@ async function loadPlanList() {
       planEndTimeText: formatDate(p?.planEndTime),
     }
   })
-  if (mapped.length) {
   planList.splice(0, planList.length, ...mapped)
+  if (mapped.length <= 3) {
+    isShowAllPlans.value = false
   }
 }
 
@@ -441,6 +466,7 @@ onMounted(() => {
   .section-more {
     font-size: 26rpx;
     color: #666666;
+    margin-bottom: 0.75rem;
   }
 }
 
@@ -773,4 +799,29 @@ onMounted(() => {
   background: rgba(24, 188, 55, 0.1);
   color: #18bc37;
 }
+
+.go-top-btn {
+  position: fixed;
+  bottom: 140rpx;
+  right: 30rpx;
+  width: 88rpx;
+  height: 88rpx;
+  background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(26, 58, 92, 0.3);
+  z-index: 999;
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.go-top-icon {
+  font-size: 44rpx;
+  color: #ffffff;
+  font-weight: bold;
+}
 </style>