import SwiftUI import SwiftData import AVKit import Foundation // 添加通知名称 extension Notification.Name { static let blindBoxStatusChanged = Notification.Name("blindBoxStatusChanged") } private enum BlindBoxAnimationPhase { case loading case ready case opening case none } extension Notification.Name { static let navigateToMediaViewer = Notification.Name("navigateToMediaViewer") } // MARK: - 主视图 struct VisualEffectView: UIViewRepresentable { var effect: UIVisualEffect? func makeUIView(context: Context) -> UIVisualEffectView { let view = UIVisualEffectView(effect: nil) // Use a simpler approach without animator let blurEffect = UIBlurEffect(style: .systemUltraThinMaterialLight) // Create a custom blur effect with reduced intensity let blurView = UIVisualEffectView(effect: blurEffect) blurView.alpha = 0.3 // Reduce intensity // Add a white background with low opacity for better frosted effect let backgroundView = UIView() backgroundView.backgroundColor = UIColor.white.withAlphaComponent(0.1) backgroundView.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.contentView.addSubview(backgroundView) view.contentView.addSubview(blurView) blurView.frame = view.bounds blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight] return view } func updateUIView(_ uiView: UIVisualEffectView, context: Context) { // No need to update the effect } } struct AVPlayerController: UIViewControllerRepresentable { @Binding var player: AVPlayer? func makeUIViewController(context: Context) -> AVPlayerViewController { let controller = AVPlayerViewController() controller.player = player controller.showsPlaybackControls = false controller.videoGravity = .resizeAspect controller.view.backgroundColor = .clear return controller } func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) { uiViewController.player = player } } struct BlindBoxView: View { let mediaType: BlindBoxMediaType let currentBoxId: String? @StateObject private var viewModel: BlindBoxViewModel @State private var showModal = false // 控制用户资料弹窗显示 @State private var showSettings = false // 控制设置页面显示 @State private var showLogin = false // 按钮状态 倒计时 @State private var countdown: (minutes: Int, seconds: Int, milliseconds: Int) = (36, 50, 0) @State private var countdownTimer: Timer? // 盲盒数据 @State private var showScalingOverlay = false @State private var animationPhase: BlindBoxAnimationPhase = .none @State private var scale: CGFloat = 0.1 @State private var videoPlayer: AVPlayer? @State private var showControls = false @State private var isAnimating = true @State private var aspectRatio: CGFloat = 1.0 @State private var isPortrait: Bool = false @State private var displayImage: UIImage? @State private var showMedia = false // 查询数据 - 简单查询 @Query private var login: [Login] init(mediaType: BlindBoxMediaType, blindBoxId: String? = nil) { self.mediaType = mediaType self.currentBoxId = blindBoxId _viewModel = StateObject(wrappedValue: BlindBoxViewModel(mediaType: mediaType, currentBoxId: blindBoxId)) } // 倒计时 private func startCountdown() { // 重置为36:50:20 countdown = (36, 50, 0) countdownTimer?.invalidate() countdownTimer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in var (minutes, seconds, _) = countdown // 每秒更新 seconds -= 1 if seconds < 0 { seconds = 59 minutes -= 1 } // 如果倒计时结束，停止计时器 if minutes <= 0 && seconds <= 0 { countdownTimer?.invalidate() countdownTimer = nil return } countdown = (minutes, seconds, 0) } } // 已由 ViewModel 承担加载与轮询逻辑 // 已迁移至 ViewModel // 已迁移至 ViewModel // 已迁移至 ViewModel private func loadImage() { guard !viewModel.imageURL.isEmpty, let url = URL(string: viewModel.imageURL) else { print("⚠️ 图片URL无效或为空") return } URLSession.shared.dataTask(with: url) { data, _, _ in if let data = data, let image = UIImage(data: data) { DispatchQueue.main.async { self.displayImage = image self.aspectRatio = image.size.width / image.size.height self.isPortrait = image.size.height > image.size.width self.showScalingOverlay = true // 确保显示媒体内容 } } }.resume() } private func loadVideo() { guard !viewModel.videoURL.isEmpty, let url = URL(string: viewModel.videoURL) else { print("⚠️ 视频URL无效或为空") return } let asset = AVAsset(url: url) let playerItem = AVPlayerItem(asset: asset) let player = AVPlayer(playerItem: playerItem) let videoTracks = asset.tracks(withMediaType: .video) if let videoTrack = videoTracks.first { let size = videoTrack.naturalSize.applying(videoTrack.preferredTransform) let width = abs(size.width) let height = abs(size.height) aspectRatio = width / height isPortrait = height > width } // 更新视频播放器 videoPlayer = player videoPlayer?.play() showScalingOverlay = true // 确保显示媒体内容 } private func prepareVideo() { guard !viewModel.videoURL.isEmpty, let url = URL(string: viewModel.videoURL) else { print("⚠️ 视频URL无效或为空") return } let asset = AVAsset(url: url) let playerItem = AVPlayerItem(asset: asset) let player = AVPlayer(playerItem: playerItem) let videoTracks = asset.tracks(withMediaType: .video) if let videoTrack = videoTracks.first { let size = videoTrack.naturalSize.applying(videoTrack.preferredTransform) let width = abs(size.width) let height = abs(size.height) aspectRatio = width / height isPortrait = height > width } // 更新视频播放器 videoPlayer = player } private func prepareImage() { guard !viewModel.imageURL.isEmpty, let url = URL(string: viewModel.imageURL) else { print("⚠️ 图片URL无效或为空") return } URLSession.shared.dataTask(with: url) { data, _, _ in if let data = data, let image = UIImage(data: data) { DispatchQueue.main.async { self.displayImage = image self.aspectRatio = image.size.width / image.size.height self.isPortrait = image.size.height > image.size.width } } }.resume() } private func startScalingAnimation() { self.scale = 0.1 self.showScalingOverlay = true withAnimation(.spring(response: 2.0, dampingFraction: 0.5, blendDuration: 0.8)) { self.scale = 1.0 } } // MARK: - Computed Properties private var scaledWidth: CGFloat { if isPortrait { return UIScreen.main.bounds.height * scale * 1/aspectRatio } else { return UIScreen.main.bounds.width * scale } } private var scaledHeight: CGFloat { if isPortrait { return UIScreen.main.bounds.height * scale } else { return UIScreen.main.bounds.width * scale * 1/aspectRatio } } var body: some View { ZStack { Color.themeTextWhiteSecondary.ignoresSafeArea() .onAppear { print("🎯 BlindBoxView appeared with mediaType: \(mediaType)") print("🎯 Current thread: \(Thread.current)") // 初始化显示数据 // if mediaType == .all, let firstItem = blindList.first { // displayData = BlindBoxData(from: firstItem) // } else { // displayData = blindGenerate // } // 添加盲盒状态变化监听 // NotificationCenter.default.addObserver( // forName: .blindBoxStatusChanged, // object: nil, // queue: .main // ) { notification in // if let status = notification.userInfo?["status"] as? String { // switch status { // case "Preparing": // withAnimation { // self.animationPhase = .loading // } // case "Unopened": // withAnimation { // self.animationPhase = .ready // } // default: // // 其他状态不处理 // withAnimation { // self.animationPhase = .ready // } // break // } // } // } // 调用接口 Task { await viewModel.load() } } .onDisappear { viewModel.stopPolling() countdownTimer?.invalidate() countdownTimer = nil // Clean up video player videoPlayer?.pause() videoPlayer?.replaceCurrentItem(with: nil) videoPlayer = nil NotificationCenter.default.removeObserver( self, name: .blindBoxStatusChanged, object: nil ) } .onChange(of: viewModel.blindGenerate?.status) { status in guard let status = status?.lowercased() else { return } if status == "unopened" { withAnimation { self.animationPhase = .ready } } else if status == "preparing" { withAnimation { self.animationPhase = .loading } } } .onChange(of: animationPhase) { phase in if phase != .loading { countdownTimer?.invalidate() countdownTimer = nil } } .onChange(of: viewModel.videoURL) { url in if !url.isEmpty { withAnimation { self.animationPhase = .ready } countdownTimer?.invalidate() countdownTimer = nil } } .onChange(of: viewModel.imageURL) { url in if !url.isEmpty { withAnimation { self.animationPhase = .ready } countdownTimer?.invalidate() countdownTimer = nil } } .onChange(of: viewModel.didBootstrap) { done in guard done else { return } // 根据首帧状态决定初始动画态，避免先显示 loading 再跳到 ready 的割裂感 if viewModel.blindGenerate?.status.lowercased() == "unopened" { withAnimation { self.animationPhase = .ready } } else if viewModel.blindGenerate?.status.lowercased() == "preparing" { withAnimation { self.animationPhase = .loading } } else { // 若未知状态，保持 none；后续 onChange 会驱动到正确态 self.animationPhase = .none } } if showScalingOverlay { ZStack { VisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterialLight)) .opacity(0.3) .edgesIgnoringSafeArea(.all) Group { if mediaType == .all, let player = videoPlayer { // Video Player AVPlayerController(player: $videoPlayer) .frame(width: scaledWidth, height: scaledHeight) .opacity(scale == 1 ? 1 : 0.7) .onAppear { player.play() } } else if mediaType == .image, let image = displayImage { // Image View Image(uiImage: image) .resizable() .scaledToFit() .frame(width: scaledWidth, height: scaledHeight) .opacity(scale == 1 ? 1 : 0.7) } } .onTapGesture { withAnimation(.easeInOut(duration: 0.1)) { showControls.toggle() } } // 返回按钮 if showControls { VStack { HStack { Button(action: { // 导航到BlindOutcomeView if mediaType == .all, !viewModel.videoURL.isEmpty, let url = URL(string: viewModel.videoURL) { Router.shared.navigate(to: .blindOutcome(media: .video(url, nil), time: viewModel.blindGenerate?.name ?? "Your box", description:viewModel.blindGenerate?.description ?? "", isMember: viewModel.isMember)) } else if mediaType == .image, let image = displayImage { Router.shared.navigate(to: .blindOutcome(media: .image(image), time: viewModel.blindGenerate?.name ?? "Your box", description:viewModel.blindGenerate?.description ?? "", isMember: viewModel.isMember)) } }) { Image(systemName: "chevron.left") .font(.system(size: 24)) .foregroundColor(.black) } Spacer() } Spacer() } .frame(maxWidth: .infinity, maxHeight: .infinity) .padding(.top, 50) .padding(.leading, 20) .zIndex(1000) .transition(.opacity) .onAppear { // 2秒后显示按钮 DispatchQueue.main.asyncAfter(deadline: .now() + 2) { withAnimation(.easeInOut(duration: 0.3)) { showControls = true } } } } } .frame(maxWidth: .infinity, maxHeight: .infinity) .animation(.easeInOut(duration: 1.0), value: scale) .ignoresSafeArea() .onAppear { DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) { withAnimation(.spring(response: 2.5, dampingFraction: 0.6, blendDuration: 1.0)) { self.scale = 1.0 } } } } else { // Original content VStack { VStack(spacing: 20) { if mediaType == .all { // 顶部导航栏 HStack { // 设置按钮 Button(action: showUserProfile) { SVGImage(svgName: "User") .frame(width: 24, height: 24) .padding(13) // Increases tap area while keeping visual size .contentShape(Rectangle()) // Makes the padded area tappable } .buttonStyle(PlainButtonStyle()) // Prevents the button from affecting the layout Spacer() // // 测试质感页面入口 // NavigationLink(destination: TestView()) { // Text("TestView") // .font(.subheadline) // .padding(.horizontal, 12) // .padding(.vertical, 6) // .background(Color.brown) // .foregroundColor(.white) // .cornerRadius(8) // } // // 订阅测试按钮 // NavigationLink(destination: SubscribeView()) { // Text("Subscribe") // .font(.subheadline) // .padding(.horizontal, 12) // .padding(.vertical, 6) // .background(Color.orange) // .foregroundColor(.white) // .cornerRadius(8) // } // .padding(.trailing) // .fullScreenCover(isPresented: $showLogin) { // LoginView() // } NavigationLink(destination: SubscribeView()) { Text("\(viewModel.memberProfile?.remainPoints ?? 0)") .font(Typography.font(for: .subtitle)) .fontWeight(.bold) .padding(.horizontal, 12) .padding(.vertical, 6) .background(Color.black) .foregroundColor(.white) .cornerRadius(16) } .padding(.trailing) .fullScreenCover(isPresented: $showLogin) { LoginView() } } .padding(.horizontal) .padding(.top, 20) } // 标题 VStack(alignment: .leading, spacing: 4) { Text("Hi! Click And") Text("Open Your Box~") } .font(Typography.font(for: .smallLargeTitle)) .fontWeight(.bold) .foregroundColor(Color.themeTextMessageMain) .frame(maxWidth: .infinity, alignment: .leading) .padding(.horizontal) .opacity(showScalingOverlay ? 0 : 1) .offset(y: showScalingOverlay ? -UIScreen.main.bounds.height * 0.2 : 0) .animation(.easeInOut(duration: 0.5), value: showScalingOverlay) // 盲盒 ZStack { // 1. 背景SVG if !showScalingOverlay { SVGImage(svgName: "BlindBg", contentMode: .fit) // .position(x: UIScreen.main.bounds.width / 2, // y: UIScreen.main.bounds.height * 0.325) .opacity(showScalingOverlay ? 0 : 1) .animation(.easeOut(duration: 1.5), value: showScalingOverlay) } if mediaType == .all && !showScalingOverlay { ZStack { SVGImage(svgName: "BlindCount") .frame(width: 100, height: 60) Text("\(viewModel.blindCount?.availableQuantity ?? 0) Boxes") .font(Typography.font(for: .body, family: .quicksandBold)) .foregroundColor(.white) .offset(x: 6, y: -18) } .position(x: UIScreen.main.bounds.width * 0.7, y: UIScreen.main.bounds.height * 0.18) .opacity(showScalingOverlay ? 0 : 1) .animation(.easeOut(duration: 1.5), value: showScalingOverlay) } if !showScalingOverlay { VStack(spacing: 20) { switch animationPhase { case .loading: GIFView(name: "BlindLoading") .frame(width: 300, height: 300) // .onAppear { // DispatchQueue.main.asyncAfter(deadline: .now() + 6) { // withAnimation { // animationPhase = .ready // } // } // } case .ready: ZStack { GIFView(name: "BlindReady") .frame(width: 300, height: 300) // Add a transparent overlay to capture taps Color.clear .contentShape(Rectangle()) // Make the entire area tappable .frame(width: 300, height: 300) .onTapGesture { print("点击了盲盒") // 标记盲盒开启 if let boxId = self.currentBoxId { Task { do { try await BlindBoxApi.shared.openBlindBox(boxId: boxId) print("✅ 盲盒开启成功") } catch { print("❌ 开启盲盒失败: \(error)") } } } if let boxId = self.viewModel.blindGenerate?.id { Task { do { try await BlindBoxApi.shared.openBlindBox(boxId: boxId) print("✅ 盲盒开启成功") } catch { print("❌ 开启盲盒失败: \(error)") } } } withAnimation { animationPhase = .opening } } } .frame(width: 300, height: 300) case .opening: ZStack { GIFView(name: "BlindOpen") .frame(width: 300, height: 300) .scaleEffect(scale) .opacity(showMedia ? 0 : 1) // 当显示媒体时隐藏GIF .onAppear { print("开始播放开启动画") // 初始缩放为1（原始大小） self.scale = 1.0 // 1秒后开始全屏动画 DispatchQueue.main.asyncAfter(deadline: .now() + 1) { withAnimation(.spring(response: 1.0, dampingFraction: 0.7)) { // 缩放到全屏 self.scale = max( UIScreen.main.bounds.width / 300, UIScreen.main.bounds.height / 300 ) * 1.2 // 全屏后稍作停留，然后缩小回原始大小 DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { withAnimation(.spring(response: 0.8, dampingFraction: 0.7)) { self.scale = 1.0 // 显示媒体内容 self.showScalingOverlay = true if mediaType == .all { loadVideo() } else if mediaType == .image { loadImage() } // 标记显示媒体，隐藏GIF self.showMedia = true } } } } } } .frame(width: 300, height: 300) case .none: // 首帧占位，避免加载时闪烁 Color.clear .frame(width: 300, height: 300) // SVGImage(svgName: "BlindNone") // .frame(width: 300, height: 300) } } .offset(y: -50) .compositingGroup() .padding() } // 只在未显示媒体且未播放动画时显示文字 if !showScalingOverlay && !showMedia { VStack(alignment: .leading, spacing: 8) { // 从变量blindGenerate中获取description Text(viewModel.blindGenerate?.name ?? "Some box") .font(Typography.font(for: .body, family: .quicksandBold)) .foregroundColor(Color.themeTextMessageMain) Text(viewModel.blindGenerate?.description ?? "") .font(.system(size: 14)) .foregroundColor(Color.themeTextMessageMain) } .frame(width: UIScreen.main.bounds.width * 0.70, alignment: .leading) .padding() .offset(x: -10, y: UIScreen.main.bounds.height * 0.2) } } .padding() .frame( maxWidth: .infinity, maxHeight: UIScreen.main.bounds.height * 0.65 ) .opacity(showScalingOverlay ? 0 : 1) .animation(.easeOut(duration: 1.5), value: showScalingOverlay) .offset(y: showScalingOverlay ? -100 : 0) .animation(.easeInOut(duration: 1.5), value: showScalingOverlay) // 打开 TODO 引导时，也要有按钮 if mediaType == .all, viewModel.didBootstrap { Button(action: { if animationPhase == .ready { // 准备就绪点击，开启盲盒 // 标记盲盒开启 if let boxId = self.currentBoxId { Task { do { try await BlindBoxApi.shared.openBlindBox(boxId: boxId) print("✅ 盲盒开启成功") } catch { print("❌ 开启盲盒失败: \(error)") } } } if let boxId = self.viewModel.blindGenerate?.id { Task { do { try await BlindBoxApi.shared.openBlindBox(boxId: boxId) print("✅ 盲盒开启成功") } catch { print("❌ 开启盲盒失败: \(error)") } } } withAnimation { animationPhase = .opening } } else if animationPhase == .none { Router.shared.navigate(to: .mediaUpload) } }) { if animationPhase == .loading { Text("Next: \(countdown.minutes):\(String(format: "%02d", countdown.seconds))") .font(Typography.font(for: .body)) .fontWeight(.bold) .frame(maxWidth: .infinity) .padding() .background(Color.white) .foregroundColor(.black) .cornerRadius(32) .onAppear { startCountdown() } } else if animationPhase == .ready { Text("Ready") .font(Typography.font(for: .body)) .fontWeight(.bold) .frame(maxWidth: .infinity) .padding() .background(Color.themePrimary) .foregroundColor(Color.themeTextMessageMain) .cornerRadius(32) } else { Text("Go to Buy") .font(Typography.font(for: .body)) .fontWeight(.bold) .frame(maxWidth: .infinity) .padding() .background(Color.themePrimary) .foregroundColor(Color.themeTextMessageMain) .cornerRadius(32) } } .padding(.horizontal) } } .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.themeTextWhiteSecondary) .offset(x: showModal ? UIScreen.main.bounds.width * 0.8 : 0) .animation(.spring(response: 0.6, dampingFraction: 0.8), value: showModal) .edgesIgnoringSafeArea(.all) } // 用户资料弹窗 SlideInModal( isPresented: $showModal, onDismiss: hideUserProfile ) { UserProfileModal( showModal: $showModal, showSettings: $showSettings, isMember: .init(get: { viewModel.isMember }, set: { viewModel.isMember = $0 }), memberDate: .init(get: { viewModel.memberDate }, set: { viewModel.memberDate = $0 }) ) } .offset(x: showSettings ? UIScreen.main.bounds.width : 0) .animation(.spring(response: 0.6, dampingFraction: 0.8), value: showSettings) // 设置页面遮罩层 ZStack { if showSettings { Color.black.opacity(0.3) .edgesIgnoringSafeArea(.all) .onTapGesture(perform: hideSettings) .transition(.opacity) } if showSettings { SettingsView(isPresented: $showSettings) .transition(.move(edge: .leading)) .zIndex(1) } } .animation(.spring(response: 0.6, dampingFraction: 0.8), value: showSettings) } } .navigationBarBackButtonHidden(true) } /// 显示用户资料弹窗 private func showUserProfile() { withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) { // print("登录记录数量: \(login.count)") // for (index, item) in login.enumerated() { // print("记录 \(index + 1): 邮箱=\(item.email), 姓名=\(item.name)") // } print("当前登录记录：") for (index, item) in login.enumerated() { print("记录 \(index + 1): 邮箱=\(item.email), 姓名=\(item.name)") } showModal.toggle() } } /// 隐藏用户资料弹窗 private func hideUserProfile() { withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) { showModal = false } } /// 隐藏设置页面 private func hideSettings() { withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) { showSettings = false } } } // MARK: - 预览 #Preview { BlindBoxView(mediaType: .all) .onAppear { // 仅在Preview中设置模拟令牌（不要在生产代码中使用） #if DEBUG if ProcessInfo.processInfo.environment["XCODE_RUNNING_FOR_PREVIEWS"] == "1" { // 设置模拟令牌用于Preview let previewToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJFZERTQSJ9.eyJqdGkiOjczNzAwMTY5NzMzODE1NzA1NjAsImlkZW50aXR5IjoiNzM1MDQzOTY2MzExNjYxOTc3NyIsImV4cCI6MTc1Nzc1Mzc3NH0.tZ8p5sW4KX6HFoJpJN0e4VmJOAGhTrYD2yTwQwilKpufzqOAfXX4vpGYBurgBIcHj2KmXKX2PQMOeeAtvAypDA" let _ = KeychainHelper.saveAccessToken(previewToken) print("🔑 Preview token set for testing") } #endif } } // 预览第一个盲盒 #Preview("First Blind Box") { BlindBoxView(mediaType: .image, blindBoxId: "7370140297747107840") .onAppear { // 仅在Preview中设置模拟令牌（不要在生产代码中使用） #if DEBUG if ProcessInfo.processInfo.environment["XCODE_RUNNING_FOR_PREVIEWS"] == "1" { // 设置模拟令牌用于Preview let previewToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJFZERTQSJ9.eyJqdGkiOjczNzAwMTY5NzMzODE1NzA1NjAsImlkZW50aXR5IjoiNzM1MDQzOTY2MzExNjYxOTc3NyIsImV4cCI6MTc1Nzc1Mzc3NH0.tZ8p5sW4KX6HFoJpJN0e4VmJOAGhTrYD2yTwQwilKpufzqOAfXX4vpGYBurgBIcHj2KmXKX2PQMOeeAtvAypDA" let _ = KeychainHelper.saveAccessToken(previewToken) print("🔑 Preview token set for testing") } #endif } } // struct TransparentVideoPlayer: UIViewRepresentable { // func makeUIView(context: Context) -> UIView { // let view = UIView() // view.backgroundColor = .clear // view.isOpaque = false // return view // } // func updateUIView(_ uiView: UIView, context: Context) {} // }