6b575dab27
- 在MomentListItem中新增点赞功能，用户点击按钮可触发点赞请求。 - 使用MVVM+Combine架构管理点赞状态，确保UI与状态同步。 - 添加加载状态和错误处理，提升用户体验和交互反馈。 - 更新相关视图以支持新的点赞逻辑，优化代码可读性和维护性。
160 lines
7.4 KiB
Swift
160 lines
7.4 KiB
Swift
import SwiftUI
|
||
|
||
// MARK: - BackgroundView
|
||
struct MomentListBackgroundView: View {
|
||
var body: some View {
|
||
Image("bg")
|
||
.resizable()
|
||
.aspectRatio(contentMode: .fill)
|
||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||
.clipped()
|
||
.ignoresSafeArea(.all)
|
||
}
|
||
}
|
||
|
||
// MARK: - MomentListHomePage
|
||
struct MomentListHomePage: View {
|
||
@StateObject private var viewModel = MomentListHomeViewModel()
|
||
|
||
// MARK: - 图片预览状态
|
||
@State private var previewItem: PreviewItem? = nil
|
||
@State private var previewCurrentIndex: Int = 0
|
||
|
||
var body: some View {
|
||
GeometryReader { geometry in
|
||
ZStack {
|
||
// 背景
|
||
MomentListBackgroundView()
|
||
|
||
VStack(alignment: .center, spacing: 0) {
|
||
// 标题
|
||
Text(LocalizedString("feedList.title", comment: "Enjoy your Life Time"))
|
||
.font(.system(size: 22, weight: .semibold))
|
||
.foregroundColor(.white)
|
||
.frame(maxWidth: .infinity, alignment: .center)
|
||
.padding(.top, 60)
|
||
|
||
// Volume 图标
|
||
Image("Volume")
|
||
.frame(width: 56, height: 41)
|
||
.padding(.top, 16)
|
||
|
||
// 标语
|
||
Text(LocalizedString("feedList.slogan",
|
||
comment: ""))
|
||
.font(.system(size: 16))
|
||
.multilineTextAlignment(.leading)
|
||
.foregroundColor(.white.opacity(0.9))
|
||
.padding(.horizontal, 30)
|
||
.padding(.bottom, 30)
|
||
|
||
// 动态列表内容
|
||
if !viewModel.moments.isEmpty {
|
||
ScrollView {
|
||
LazyVStack(spacing: 16) {
|
||
ForEach(Array(viewModel.moments.enumerated()), id: \.element.dynamicId) { index, moment in
|
||
MomentListItem(
|
||
moment: moment,
|
||
onImageTap: { images, tappedIndex in
|
||
// 处理图片点击事件
|
||
previewCurrentIndex = tappedIndex
|
||
previewItem = PreviewItem(images: images, index: tappedIndex)
|
||
debugInfoSync("📸 MomentListHomePage: 图片被点击")
|
||
debugInfoSync(" 动态索引: \(index)")
|
||
debugInfoSync(" 图片索引: \(tappedIndex)")
|
||
debugInfoSync(" 图片数量: \(images.count)")
|
||
}
|
||
)
|
||
.padding(.leading, 16)
|
||
.padding(.trailing, 32)
|
||
.onAppear {
|
||
// 当显示倒数第三个项目时，开始加载更多
|
||
if index == viewModel.moments.count - 3 {
|
||
viewModel.loadMoreData()
|
||
}
|
||
}
|
||
}
|
||
|
||
// 加载更多状态指示器
|
||
if viewModel.isLoadingMore {
|
||
HStack {
|
||
ProgressView()
|
||
.progressViewStyle(CircularProgressViewStyle(tint: .white))
|
||
.scaleEffect(0.8)
|
||
Text("加载更多...")
|
||
.font(.system(size: 14))
|
||
.foregroundColor(.white.opacity(0.8))
|
||
}
|
||
.padding(.vertical, 20)
|
||
}
|
||
|
||
// 没有更多数据提示
|
||
if !viewModel.hasMore && !viewModel.moments.isEmpty {
|
||
Text("没有更多数据了")
|
||
.font(.system(size: 14))
|
||
.foregroundColor(.white.opacity(0.6))
|
||
.padding(.vertical, 20)
|
||
}
|
||
}
|
||
.padding(.bottom, 160) // 为底部导航栏留出空间
|
||
}
|
||
.refreshable {
|
||
// 下拉刷新
|
||
viewModel.refreshData()
|
||
}
|
||
.onAppear {
|
||
// 调试信息
|
||
debugInfoSync("📱 MomentListHomePage: 显示动态列表")
|
||
debugInfoSync(" 动态数量: \(viewModel.moments.count)")
|
||
debugInfoSync(" 是否有更多: \(viewModel.hasMore)")
|
||
debugInfoSync(" 是否正在加载更多: \(viewModel.isLoadingMore)")
|
||
}
|
||
} else if viewModel.isLoading {
|
||
ProgressView()
|
||
.progressViewStyle(CircularProgressViewStyle(tint: .white))
|
||
.padding(.top, 20)
|
||
} else if let error = viewModel.error {
|
||
VStack(spacing: 16) {
|
||
Text(error)
|
||
.font(.system(size: 14))
|
||
.foregroundColor(.red)
|
||
.multilineTextAlignment(.center)
|
||
.padding(.horizontal, 20)
|
||
|
||
// 重试按钮
|
||
Button(action: {
|
||
viewModel.refreshData()
|
||
}) {
|
||
Text("重试")
|
||
.font(.system(size: 14, weight: .medium))
|
||
.foregroundColor(.white)
|
||
.padding(.horizontal, 20)
|
||
.padding(.vertical, 8)
|
||
.background(Color.white.opacity(0.2))
|
||
.cornerRadius(8)
|
||
}
|
||
}
|
||
.padding(.top, 20)
|
||
}
|
||
|
||
Spacer()
|
||
}
|
||
}
|
||
}
|
||
.ignoresSafeArea()
|
||
.onAppear {
|
||
viewModel.onAppear()
|
||
}
|
||
// MARK: - 图片预览弹窗
|
||
.fullScreenCover(item: $previewItem) { item in
|
||
ImagePreviewPager(
|
||
images: item.images as [String],
|
||
currentIndex: $previewCurrentIndex
|
||
) {
|
||
previewItem = nil
|
||
debugInfoSync("📸 MomentListHomePage: 图片预览已关闭")
|
||
}
|
||
}
|
||
}
|
||
}
|