feat: 盲盒首页

wake/Assets/Svg/BlindCount.svg

@@ -0,0 +1,4 @@
+<svg width="106" height="66" viewBox="0 0 106 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666667 60C0.666667 62.9455 3.05448 65.3333 6 65.3333C8.94552 65.3333 11.3333 62.9455 11.3333 60C11.3333 57.0545 8.94552 54.6667 6 54.6667C3.05448 54.6667 0.666667 57.0545 0.666667 60ZM22.2802 31.0204L23.152 31.5102L22.2802 31.0204ZM97.5663 30V29H24.0239V30V31H97.5663V30ZM22.2802 31.0204L21.4083 30.5306L5.12816 59.5102L6 60L6.87184 60.4898L23.152 31.5102L22.2802 31.0204ZM24.0239 30V29C22.9395 29 21.9395 29.5852 21.4083 30.5306L22.2802 31.0204L23.152 31.5102C23.3291 31.1951 23.6624 31 24.0239 31V30Z" fill="black"/>
+<rect x="16.8433" width="89.1566" height="30" rx="15" fill="black"/>
+</svg>

wake/ContentView.swift

@@ -76,6 +76,9 @@ struct BlindBoxView: View {
     }
     
     let mediaType: BlindBoxMediaType
+    @State private var showModal = false      // 控制用户资料弹窗显示
+    @State private var showSettings = false   // 控制设置页面显示
+    @State private var showLogin = false
     @State private var showLottieAnimation = true
     @State private var showScalingOverlay = false
     @State private var animationPhase: BlindBoxAnimationPhase = .loading
@@ -87,6 +90,9 @@ struct BlindBoxView: View {
     @State private var isPortrait: Bool = false
     @State private var displayImage: UIImage?
     
+     // 查询数据 - 简单查询
+    @Query private var login: [Login]
+
     init(mediaType: BlindBoxMediaType) {
         self.mediaType = mediaType
     }
@@ -258,6 +264,57 @@ struct BlindBoxView: View {
                 // Original content
                 VStack {
                     VStack(spacing: 20) {
+                        // 顶部导航栏
+                        HStack {
+                            // 设置按钮
+                            Button(action: showUserProfile) {
+                                SVGImage(svgName: "User")
+                                    .frame(width: 24, height: 24)
+                            }
+                            
+                            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("3290")
+                                    .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")
@@ -276,7 +333,7 @@ struct BlindBoxView: View {
                         ZStack {
                             // 1. 背景SVG
                             if !showScalingOverlay {
-                                SVGImage(svgName: "BlindBoxBg")
+                                SVGImage(svgName: "BlindBg")
                                     .frame(
                                         width: UIScreen.main.bounds.width * 1.8,
                                         height: UIScreen.main.bounds.height * 0.85
@@ -330,9 +387,38 @@ struct BlindBoxView: View {
                                             }
                                     }
                                 }
+                                .offset(y: -50) 
                                 .compositingGroup()
                                 .padding()
                             }
+                            if !showScalingOverlay {
+                                ZStack {
+                                    SVGImage(svgName: "BlindCount")
+                                        .frame(width: 100, height: 60)
+                                    
+                                    Text("2 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(alignment: .leading, spacing: 8) {
+                                    Text("hhsdshjsjdhn")
+                                        .font(Typography.font(for: .body, family: .quicksandBold))
+                                        .foregroundColor(Color.themeTextMessageMain)
+                                    Text("informationinformationinformationinformationinformationinformation")
+                                        .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)
+                            }
                         }
                         .frame(
                             maxWidth: .infinity,
@@ -342,15 +428,86 @@ struct BlindBoxView: View {
                         .animation(.easeOut(duration: 1.5), value: showScalingOverlay)
                         .offset(y: showScalingOverlay ? -100 : 0)
                         .animation(.easeInOut(duration: 1.5), value: showScalingOverlay)
+                        // 打开
+                        Button(action: showUserProfile) {
+                            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
+                    )
+                }
+                .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: - 预览