feat: 订阅状态栏完成
This commit is contained in:
parent
35e7454695
commit
5e7bdb64c5
BIN
wake/Assets/.DS_Store
vendored
BIN
wake/Assets/.DS_Store
vendored
Binary file not shown.
@ -159,7 +159,7 @@ struct UserProfileModal: View {
|
||||
HStack(spacing: 16) {
|
||||
Image(systemName: "tray.and.arrow.up")
|
||||
.font(.system(size: 20, weight: .regular))
|
||||
.foregroundColor(.orange)
|
||||
// .foregroundColor(.orange)
|
||||
|
||||
Text("Upload Resources")
|
||||
.font(Typography.font(for: .body))
|
||||
@ -181,7 +181,7 @@ struct UserProfileModal: View {
|
||||
HStack(spacing: 16) {
|
||||
Image(systemName: "photo.on.rectangle")
|
||||
.font(.system(size: 20, weight: .regular))
|
||||
.foregroundColor(.orange)
|
||||
// .foregroundColor(.orange)
|
||||
|
||||
Text("My Memories")
|
||||
.font(Typography.font(for: .body))
|
||||
@ -226,10 +226,10 @@ struct UserProfileModal: View {
|
||||
}) {
|
||||
HStack(spacing: 16) {
|
||||
Image(systemName: "gearshape")
|
||||
.font(.system(size: 20, weight: .regular))
|
||||
.foregroundColor(.orange)
|
||||
.font(.system(size: 22, weight: .regular))
|
||||
// .foregroundColor(.orange)
|
||||
|
||||
Text("Setting")
|
||||
Text("Settings")
|
||||
.font(Typography.font(for: .body))
|
||||
.fontWeight(.bold)
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
@ -284,7 +284,8 @@ struct UserProfileModal: View {
|
||||
onSubscribeTap: {
|
||||
// 跳转到订阅页面
|
||||
Router.shared.navigate(to: .subscribe)
|
||||
}
|
||||
},
|
||||
size: "sm"
|
||||
)
|
||||
.padding(.horizontal, Theme.Spacing.xl)
|
||||
}
|
||||
@ -313,6 +314,17 @@ struct UserProfileModal: View {
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
UserProfileModal(showModal: .constant(true), showSettings: .constant(false), isMember: .constant(true), memberDate: .constant(""))
|
||||
#if DEBUG
|
||||
struct UserProfileModal_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
Group {
|
||||
UserProfileModal(showModal: .constant(true), showSettings: .constant(false), isMember: .constant(true), memberDate: .constant(""))
|
||||
.previewDisplayName("Pioneer")
|
||||
|
||||
UserProfileModal(showModal: .constant(true), showSettings: .constant(false), isMember: .constant(false), memberDate: .constant(""))
|
||||
.previewDisplayName("Free")
|
||||
}
|
||||
.previewLayout(.sizeThatFits)
|
||||
}
|
||||
}
|
||||
#endif
|
||||
@ -1,111 +0,0 @@
|
||||
import SwiftUI
|
||||
|
||||
struct ModalContentView: View {
|
||||
let goBack: () -> Void
|
||||
@Environment(\.dismiss) private var dismissModal
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 20) {
|
||||
// 用户信息
|
||||
HStack(alignment: .center, spacing: 16) {
|
||||
Image(systemName: "person.circle.fill")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fill)
|
||||
.frame(width: 60, height: 60)
|
||||
.foregroundColor(.blue)
|
||||
.clipShape(Circle())
|
||||
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text("用户名")
|
||||
.font(.headline)
|
||||
Text("ID: 12345678")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.top, 16)
|
||||
|
||||
// 会员区域
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
Text("会员等级").font(.headline)
|
||||
Text("会员时间").font(.subheadline).foregroundColor(.secondary)
|
||||
Text("会员中心").font(.subheadline).foregroundColor(.secondary)
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding(16)
|
||||
.background(Color(red: 0.92, green: 0.92, blue: 0.92))
|
||||
.cornerRadius(10)
|
||||
.padding(.horizontal, 16)
|
||||
|
||||
// 功能按钮
|
||||
VStack(spacing: 12) {
|
||||
ModalButton(icon: "crown.fill", color: .orange, text: "My Memories")
|
||||
ModalButton(icon: "clock.fill", color: .blue, text: "My Bind Box")
|
||||
|
||||
// 跳转设置页
|
||||
Button(action: {
|
||||
goBack()
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
|
||||
// 模拟从左边滑入的效果
|
||||
}
|
||||
}) {
|
||||
HStack(spacing: 16) {
|
||||
Image(systemName: "person.circle.fill")
|
||||
.foregroundColor(.purple)
|
||||
.frame(width: 24, height: 24)
|
||||
Text("Setting")
|
||||
.font(.headline)
|
||||
.foregroundColor(.primary)
|
||||
Spacer()
|
||||
Image(systemName: "chevron.right")
|
||||
.foregroundColor(.gray)
|
||||
}
|
||||
.padding()
|
||||
.background(Color(.systemBackground))
|
||||
.cornerRadius(10)
|
||||
}
|
||||
.buttonStyle(PlainButtonStyle())
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.padding(.vertical, 8)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 按钮组件
|
||||
struct ModalButton: View {
|
||||
let icon: String
|
||||
let color: Color
|
||||
let text: String
|
||||
let action: () -> Void
|
||||
|
||||
init(icon: String, color: Color, text: String, action: @escaping () -> Void = {}) {
|
||||
self.icon = icon
|
||||
self.color = color
|
||||
self.text = text
|
||||
self.action = action
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
Button(action: action) {
|
||||
HStack(spacing: 16) {
|
||||
Image(systemName: icon)
|
||||
.foregroundColor(color)
|
||||
.frame(width: 24, height: 24)
|
||||
Text(text)
|
||||
.font(.headline)
|
||||
.foregroundColor(.primary)
|
||||
Spacer()
|
||||
}
|
||||
.padding()
|
||||
.background(Color(.systemBackground))
|
||||
.cornerRadius(10)
|
||||
}
|
||||
.buttonStyle(PlainButtonStyle())
|
||||
}
|
||||
}
|
||||
@ -15,7 +15,7 @@ enum SubscriptionStatus {
|
||||
var title: String {
|
||||
switch self {
|
||||
case .free:
|
||||
return ""
|
||||
return "Free"
|
||||
case .pioneer:
|
||||
return "Pioneer"
|
||||
}
|
||||
@ -53,20 +53,22 @@ enum SubscriptionStatus {
|
||||
struct SubscriptionStatusBar: View {
|
||||
let status: SubscriptionStatus
|
||||
let onSubscribeTap: (() -> Void)?
|
||||
let size: String
|
||||
private let height: CGFloat
|
||||
private let backgroundColor: Color?
|
||||
|
||||
init(status: SubscriptionStatus, height: CGFloat? = nil, backgroundColor: Color? = nil, onSubscribeTap: (() -> Void)? = nil) {
|
||||
init(status: SubscriptionStatus, height: CGFloat? = nil, backgroundColor: Color? = nil, onSubscribeTap: (() -> Void)? = nil, size: String? = "md") {
|
||||
self.status = status
|
||||
self.height = height ?? 155 // 默认高度为155
|
||||
self.backgroundColor = backgroundColor
|
||||
self.onSubscribeTap = onSubscribeTap
|
||||
self.size = size ?? "md"
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
var body: some View {
|
||||
ZStack(alignment: .leading) {
|
||||
// SwiftUI 绘制的背景
|
||||
SubscriptionBackground(status: status, customBackground: backgroundColor)
|
||||
SubscriptionBackground(status: status, customBackground: backgroundColor, size: size)
|
||||
.frame(maxWidth: .infinity, minHeight: 120)
|
||||
.clipped()
|
||||
|
||||
@ -74,7 +76,7 @@ struct SubscriptionStatusBar: View {
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
// Title - Centered vertically
|
||||
Text(status.title)
|
||||
.font(.system(size: 28, weight: .bold, design: .rounded))
|
||||
.font(.system(size: size == "sm" ? 24 : 28, weight: .bold, design: .rounded))
|
||||
.foregroundColor(status.textColor)
|
||||
.frame(maxHeight: .infinity, alignment: .center) // Center vertically
|
||||
.padding(.leading, 12)
|
||||
@ -113,16 +115,28 @@ struct SubscriptionStatusBar: View {
|
||||
private struct SubscriptionBackground: View {
|
||||
let status: SubscriptionStatus
|
||||
let customBackground: Color?
|
||||
let size: String
|
||||
|
||||
private let parallelogramHeight: CGFloat
|
||||
private let parallelogramWidth: CGFloat
|
||||
|
||||
init(status: SubscriptionStatus, customBackground: Color? = nil, size: String? = "md") {
|
||||
self.status = status
|
||||
self.customBackground = customBackground
|
||||
self.size = size ?? "md"
|
||||
self.parallelogramHeight = size == "sm" ? 14 : 18
|
||||
self.parallelogramWidth = size == "sm" ? 12 : 16
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// 背景底板：自定义颜色优先，否则根据状态给出渐变
|
||||
if let color = customBackground {
|
||||
RoundedRectangle(cornerRadius: 20)
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.fill(color)
|
||||
.shadow(color: Color.black.opacity(0.06), radius: 10, x: 0, y: 6)
|
||||
} else {
|
||||
RoundedRectangle(cornerRadius: 20)
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.fill(defaultBackground)
|
||||
.shadow(color: Color.black.opacity(0.06), radius: 10, x: 0, y: 6)
|
||||
}
|
||||
@ -132,7 +146,7 @@ private struct SubscriptionBackground: View {
|
||||
HStack {
|
||||
ParallelogramRow(
|
||||
count: 6,
|
||||
itemSize: CGSize(width: 16, height: 18),
|
||||
itemSize: CGSize(width: parallelogramWidth, height: parallelogramHeight),
|
||||
shear: -0.35,
|
||||
cornerRadius: 2,
|
||||
color: .black.opacity(0.85),
|
||||
@ -152,7 +166,7 @@ private struct SubscriptionBackground: View {
|
||||
Spacer()
|
||||
ParallelogramRow(
|
||||
count: 3,
|
||||
itemSize: CGSize(width: 16, height: 18),
|
||||
itemSize: CGSize(width: parallelogramWidth, height: parallelogramHeight),
|
||||
shear: -0.35,
|
||||
cornerRadius: 2,
|
||||
color: .black.opacity(0.85),
|
||||
@ -168,27 +182,27 @@ private struct SubscriptionBackground: View {
|
||||
HStack {
|
||||
Spacer()
|
||||
ZStack {
|
||||
CircleView(diameter: 100, color: .black)
|
||||
CircleView(diameter: size == "sm" ? 70 : 100, color: .black)
|
||||
TriangleView(
|
||||
width: 24,
|
||||
height: 24,
|
||||
width: size == "sm" ? 20 : 24,
|
||||
height: size == "sm" ? 20 : 24,
|
||||
direction: .right,
|
||||
color: Color(white: 0.9),
|
||||
rotation: .degrees(157)
|
||||
)
|
||||
}
|
||||
.offset(x: 12, y: -12)
|
||||
.offset(x: size == "sm" ? 8 : 12, y: size == "sm" ? -8 : -12)
|
||||
}
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
.clipShape(RoundedRectangle(cornerRadius: 20))
|
||||
.clipShape(RoundedRectangle(cornerRadius: 16))
|
||||
}
|
||||
|
||||
private var defaultBackground: LinearGradient {
|
||||
switch status {
|
||||
case .free:
|
||||
return LinearGradient(colors: [Color.white, Color.white.opacity(0.96)], startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
return LinearGradient(colors: [Color(hex: "FFF8DE")], startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
case .pioneer:
|
||||
return LinearGradient(colors: [Color.themePrimary.opacity(0.85), Color.orange.opacity(0.6)], startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user