用户故事功能优化

pages/home/index.vue

@@ -99,7 +99,7 @@
                 </view>
                 <view class="like-count" @click.stop="toggleLike(story, !story.liked, index)">
                   <text class="icon-heart">{{ story.liked ? '❤️' : '♡' }}</text>
-                  <text class="like-number">{{ story.likes }}</text>
+                  <text class="like-number">{{ formatLikeCount(story.likes) }}</text>
                 </view>
               </view>
             </view>
@@ -148,12 +148,25 @@ export default {
     this.loadStories();
   },
   onShow() {
+    this.noMore = false
+    this.page = 1
+    this.pageSize = 10
+    this.allStories = []
+    this.loadStories();
   },
   mounted() {
   },
   methods: {
+    formatLikeCount(count) {
+      if (count >= 1000) {
+        return '999+';
+      }
+      return count;
+    },
     toggleLike(item, likeStatus, index) {
+      let num =  likeStatus ? 1 : -1
       item.liked = likeStatus
+      item.likes = item.likes + num
       likeStory(item.id, (likeStatus ? 1 : 0));
     },
     swiperChange(e) {
@@ -372,25 +385,39 @@ export default {
   border-radius: 10rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  // 固定卡片大小
+  min-height: 100rpx; // 设置最小高度
+  max-height: 200rpx; // 可选，设置最大高度以适应不同屏幕尺寸
 }
 
 .story-img {
-  width: 180rpx;
-  height: 180rpx;
-  object-fit: cover;
+  width: 200rpx; // 固定宽度
+  height: 200rpx; // 固定高度
+  object-fit: cover; // 确保图片按比例缩放并覆盖整个区域
 }
 
 .story-content {
   flex: 1;
   padding: 20rpx;
   background-color: #fff;
+  // 限制story-content的高度，以配合卡片的整体布局
+  min-height: calc(100rpx - 40rpx); // 根据卡片最小高度减去padding计算得出
+  max-height: calc(200rpx - 40rpx); // 类似地，根据最大高度计算
 }
 
 .story-title {
   font-size: 32rpx;
   color: #03803B;
   font-weight: 500;
-  line-height: 1.4;
+  line-height: 1.4; // 确保合适的行间距
+  margin-bottom: 10rpx; // 可选：根据设计需求调整底部外边距
+
+  // 实现多行省略
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1; /* 设置你想要的最大行数 */
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .story-desc {
@@ -406,24 +433,23 @@ export default {
   text-overflow: ellipsis;
 }
 
+.avatar {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+}
+
 .story-footer {
   display: flex;
   align-items: center;
-  justify-content: space-between; /* 左右分离 */
+  justify-content: space-between;
   padding-right: 10rpx;
 }
 
-/* —— 左侧：头像 + 用户名 —— */
 .user-info {
   display: flex;
   align-items: center;
-  flex-shrink: 0; /* 防止被压缩 */
-}
-
-.avatar {
-  width: 40rpx;
-  height: 40rpx;
-  border-radius: 50%;
+  flex-shrink: 0;
 }
 
 .username {
@@ -432,7 +458,6 @@ export default {
   margin-left: 10rpx;
 }
 
-/* —— 右侧：点赞 —— */
 .like-count {
   display: flex;
   align-items: center;
@@ -441,14 +466,18 @@ export default {
 }
 
 .icon-heart {
-  font-size: 36rpx; /* 大红心 */
+  font-size: 36rpx;
   color: #ff4c4c;
   line-height: 1;
+  display: inline-block;
 }
 
 .like-number {
   font-size: 24rpx;
   color: #999;
+  line-height: 1;
+  min-width: 55rpx;
+  text-align: left;
 }
 
 .user-story-scroll {

pages/home/story/detail.vue

@@ -8,7 +8,7 @@
         <text class="username">{{ detail.userName }}</text>
         <view class="likes" @click="toggleLike">
           <text class="icon-heart">{{ detail.liked ? '❤️' : '♡' }}</text>
-          <text class="like-number">{{ detail.likes }}</text>
+          <text class="like-number">{{ detail.likes >= 1000 ? '999+' : detail.likes }}</text>
         </view>
       </view>
       <view class="detail-desc">{{ detail.content }}</view>
@@ -42,6 +42,8 @@ export default {
   methods: {
     toggleLike() {
       this.detail.liked = !this.detail.liked
+      let num =  this.detail.liked ? 1 : -1
+      this.detail.likes = this.detail.likes + num
       likeStory(this.detail.id, (this.detail.liked ? 1 : 0));
     },
     async fetchDetail(id) {