feat(recommend): 优化事件梳理展开收起功能

- 重构事件梳理组件的展开收起逻辑，统一处理方式
- 添加点击切换展开收起状态的方法
- 修复背景图片引用错误，上下箭头图标对调问题
- 优化样式代码格式，提升代码可读性

fix(detail): 修复进一步阅读数据初始化位置

src/pages/detail/indexNewsInfo.vue

@@ -72,11 +72,9 @@ const newList = async (columnId: number) => {
     page: 1,
     size: 5,
   });
-
   if (res.code === 200) {
     // console.log(res.data)
     columnList.value = res.data;
-    furtherReadData.value = res.data.furtherReadings || [];
   }
 };
 
@@ -242,6 +240,9 @@ onLoad(async (option: any) => {
     res.data.content = res.data.content.replace(/\n{3,}/g, "\n");
 
     columnName.value = res.data.columnName1;
+    
+    furtherReadData.value = res.data.furtherReadings || [];
+    
     newList(res.data.columnId1);
     wxShare();
   }

src/pages/recommend/index.vue

@@ -74,17 +74,18 @@
                   :class="['events-collapse']"
                   v-if="news.furtherReadings?.length > 0"
                 >
-                  <view class="events-collapse-top active">
+                  <view
+                    :class="[
+                      'events-collapse-top',
+                      { active: !selectKeys.includes(news.id) },
+                    ]"
+                    @click.stop="
+                      handleClickToggle(news.id, !selectKeys.includes(news.id))
+                    "
+                  >
                     <view class="t-1">事件梳理</view>
-                    <view
+                    <view v-if="!selectKeys.includes(news.id)" class="t-2">展开</view>
-                      v-if="!selectKeys.includes(news.id)"
+                    <view v-else class="t-2">收起</view>
-                      class="t-2"
-                      @click="handleOpenEvents(news.id)"
-                      >展开</view
-                    >
-                    <view v-else class="t-2" @click="handleCloseEvents(news.id)"
-                      >收起</view
-                    >
                   </view>
                   <view
                     v-show="selectKeys.includes(news.id)"
@@ -137,8 +138,12 @@ const handleBack = () => {
 };
 
 const selectKeys = ref([]);
-const handleOpenEvents = (id: string) => {
+const handleClickToggle = (id: string, type: string) => {
-  selectKeys.value.push(id);
+  if (!type) {
+    selectKeys.value = selectKeys.value.filter((item) => item !== id);
+  } else {
+    selectKeys.value.push(id);
+  }
 };
 
 const handleCloseEvents = (id: string) => {
@@ -194,6 +199,12 @@ const getList = async () => {
   if (result.code === 200) {
     const { list, total } = result.data;
     data.value = list;
+    list.forEach((o) => {
+      o.list.forEach((n) => {
+        selectKeys.value.push(n.id)
+      });
+    });
+    
   } else {
     data.value = [];
   }
@@ -414,7 +425,8 @@ onMounted(async () => {
             // height: 20rpx;
             margin-right: 10rpx;
             padding-right: 24rpx;
-            background: url("@/assets/images/page/star_icon@2x.png") no-repeat center right;
+            background: url("@/assets/images/page/star_icon@2x.png") no-repeat center
+              right;
             background-size: 20rpx 20rpx;
             font-size: 24rpx;
             line-height: 24rpx;
@@ -515,7 +527,7 @@ onMounted(async () => {
       }
       .t-2 {
         padding-right: 26rpx;
-        background-image: url("@/assets/images/page/down_icon@2x.png");
+        background-image: url("@/assets/images/page/up_icon@2x.png");
         background-repeat: no-repeat;
         background-position: right center;
         background-size: 19rpx 12rpx;
@@ -527,7 +539,7 @@ onMounted(async () => {
 
       &.active {
         .t-2 {
-          background-image: url("@/assets/images/page/up_icon@2x.png");
+          background-image: url("@/assets/images/page/down_icon@2x.png");
         }
       }
     }