This commit is contained in:
2024-01-25 17:50:40 +08:00
parent 2d7d3dc836
commit 6f7f8deda1
19 changed files with 530 additions and 201 deletions

View File

@@ -13,27 +13,32 @@ struct GoodsCard: View {
}
var body: some View {
VStack {
Image("Images/LaunchScreen")
.resizable()
.frame(maxWidth: .infinity)
.frame(maxHeight: getHeight())
VStack(spacing: 4) {
Text("苏东坡专辑,谁谁会注解的内容哦")
.font(.subheadline)
.lineLimit(1)
HStack(alignment: .bottom) {
CamelPrice(amount: 125.9229, size: 16)
Spacer()
Text("100+付款")
.foregroundColor(Color.gray)
.font(.caption)
.baselineOffset(2)
NavigationLink {
GoodsDetailView()
} label: {
VStack {
Image("Images/LaunchScreen")
.resizable()
.frame(maxWidth: .infinity)
.frame(maxHeight: getHeight())
VStack(spacing: 4) {
Text("苏东坡专辑,谁谁会注解的内容哦")
.font(.subheadline)
.lineLimit(1)
.foregroundColor(Color.black)
HStack(alignment: .bottom) {
CamelPrice(amount: 125.9229, size: 16)
Spacer()
Text("100+付款")
.foregroundColor(Color.gray)
.font(.caption)
.baselineOffset(2)
}
}
.padding(4)
}
.padding(4)
.background(Color.white)
.cornerRadius(8)
}
.background(Color.white)
.cornerRadius(8)
}
}

View File

@@ -10,13 +10,19 @@ import SwiftUI
struct UserAccountCard: View {
var model: UserAccountCardModel
var body: some View {
VStack {
HStack {
VStack(alignment: .leading, spacing: 12) {
HStack(spacing: 4) {
Image(systemName: model.icon)
.resizable()
.frame(width: 15, height: 15)
.foregroundColor(Color.black)
Text(model.title)
.font(.system(size: 16))
.foregroundColor(Color.black)
}
Text(model.info)
.font(.caption)
.font(.system(size: 12))
.foregroundColor(Color.gray)
}
.padding(12)
.background(Color.white)

View File

@@ -11,29 +11,66 @@ struct HomeView: View {
@State private var selectedTab = 0
var body: some View {
ScrollView {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 12) {
// Search
// Banner
// Navigation
Search
Banner
Navigation
TodayKill
// Living
// Bestselling
// PartyReading
// NewBooks
// Categories
Living
Bestselling
PartyReading
NewBooks
Categories
Spacer()
}
}
.frame(maxWidth: .infinity)
.padding(.horizontal, 12)
.padding(.bottom, 48)
.background(Color.gray.opacity(0.2))
}
var Search: some View {
HStack(alignment: .center, spacing: 16) {
HStack {
Image(systemName: "magnifyingglass")
.resizable()
.frame(width: 18, height: 18)
.foregroundColor(Color.gray)
Text("搜索书籍")
.foregroundColor(Color.gray)
.font(.system(size: 16))
Spacer()
}
.frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/)
.padding(12)
.background(Color.white)
.cornerRadius(32)
Image(systemName: "bell")
.resizable()
.frame(width: 24, height: 24)
.overlay(alignment: .topTrailing) {
Circle()
.fill(Color.red.opacity(0.8))
.frame(width: 20, height: 20)
.overlay {
Text("20")
.foregroundColor(Color.white)
.font(.system(size: 12))
}
.offset(x: 8, y: -10)
}
Spacer()
}
}
let columns = [GridItem(.flexible()), GridItem(.flexible())]
var Categories: some View {
VStack {
ScrollView(.horizontal) {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
Text("推荐")
Text("竞品书单")
@@ -55,6 +92,27 @@ struct HomeView: View {
}
}
var Banner: some View {
TabView {
ForEach(1 ..< 4) { index in
GeometryReader { proxy in
let minX = proxy.frame(in: .global).minX
Image("Images/banner" + String(index))
.resizable()
.aspectRatio(contentMode: .fill)
.cornerRadius(12)
.rotation3DEffect(
.degrees(minX / -10),
axis: (x: 0.0, y: 1, z: 0.0)
)
}
}
}
.tabViewStyle(.page(indexDisplayMode: .always))
.frame(height: 220)
.cornerRadius(12)
}
var NewBooks: some View {
VStack(alignment: .leading) {
HStack {
@@ -178,6 +236,7 @@ struct HomeView: View {
HStack {
Text("今日秒杀")
.foregroundColor(Color.white)
.font(.system(size: 16))
KillCountDown()
}
.padding(8)
@@ -197,7 +256,7 @@ struct HomeView: View {
.cornerRadius(8)
VStack {
Text("石床垫:阿特伍德黑暗就故事(有的人说啥就是啥呢有的人说啥就是啥呢有的人说啥就是啥呢)")
.font(.title2)
.font(.system(size: 20))
.multilineTextAlignment(/*@START_MENU_TOKEN@*/ .leading/*@END_MENU_TOKEN@*/)
.lineLimit(/*@START_MENU_TOKEN@*/2/*@END_MENU_TOKEN@*/)
.foregroundColor(Color.white)
@@ -208,6 +267,7 @@ struct HomeView: View {
.background(Color.white)
HStack {
Text("抢购")
.font(.system(size: 14))
Image(systemName: "chevron.forward")
}
.foregroundColor(Color.white)
@@ -257,63 +317,13 @@ struct HomeView: View {
.cornerRadius(64)
Text("图书")
.font(.system(size: 14))
}
}
}
}
var Banner: some View {
HStack {
Image("Images/banner1")
.resizable(resizingMode: .stretch)
.aspectRatio(contentMode: .fit)
Image("Images/banner2")
.resizable(resizingMode: .stretch)
.aspectRatio(contentMode: .fit)
Image("Images/banner3")
.resizable(resizingMode: .stretch)
.aspectRatio(contentMode: .fit)
}
.frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/)
}
var Search: some View {
HStack(alignment: .center, spacing: 16) {
HStack {
Image(systemName: "magnifyingglass")
.resizable()
.frame(width: 18, height: 18)
.foregroundColor(Color.gray)
Text("搜索书籍")
.foregroundColor(Color.gray)
Spacer()
}
.frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/)
.padding(12)
.background(Color.white)
.cornerRadius(32)
Image(systemName: "bell")
.resizable()
.frame(width: 24, height: 24)
.overlay(alignment: .topTrailing) {
Circle()
.fill(Color.red)
.frame(width: 20, height: 20)
.offset(x: 4, y: -8)
}
.overlay(alignment: .topTrailing) {
Text("20")
.foregroundColor(Color.white)
.font(.system(size: 12))
.offset(x: 2, y: -5)
}
Spacer()
}
}
}
//
// #Preview {
// HomeView()
// }
#Preview {
HomeView()
}

View File

@@ -0,0 +1,34 @@
//
// NavigationPageView.swift
// demo
//
// Created by Jason on 2024/1/25.
//
import SwiftUI
struct NavigationPageView: View {
@Environment(\.dismiss) private var dismiss
var title: String = ""
var content: any View
var body: some View {
ScrollView {
AnyView(content)
}
.navigationBarTitleDisplayMode(.inline)
.navigationTitle(title)
.navigationBarBackButtonHidden(true)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {
dismiss()
} label: {
HStack {
Image(systemName: "chevron.backward")
}
}
}
}
}
}

View File

@@ -11,51 +11,54 @@ struct TabBarView: View {
@AppStorage("selectedTab") var selectedTab: Tab = .home
var body: some View {
ZStack(alignment: .leading) {
Group {
switch selectedTab {
case .home:
HomeView()
case .explore:
MallView()
case .message:
MessageView()
case .account:
UserView()
NavigationView {
ZStack(alignment: .leading) {
Group {
switch selectedTab {
case .home:
HomeView()
case .explore:
MallView()
case .message:
MessageView()
case .account:
UserView()
}
}
}
// .offset(y: -64)
// .safeAreaInset(edge: .top) {
// Color.clear.frame(height: 32)
// }
// .offset(y: -64)
// .safeAreaInset(edge: .top) {
// Color.clear.frame(height: 32)
// }
HStack {
ForEach(tabItems) { item in
Button(action: {
selectedTab = item.tab
}, label: {
VStack(spacing: 6) {
Image(systemName: item.icon).resizable().frame(width: 18, height: 18)
Text(item.text)
.font(.caption)
.fontWeight(.regular)
.multilineTextAlignment(.center)
.lineLimit(1)
}
.frame(maxWidth: .infinity)
})
.foregroundColor(selectedTab == item.tab ? Color("MainText") : Color.secondary)
.shadow(color: selectedTab == item.tab ? Color.orange : Color.blue, radius: 15)
HStack {
ForEach(tabItems) { item in
Button(action: {
selectedTab = item.tab
}, label: {
VStack(spacing: 6) {
Image(systemName: item.icon).resizable().frame(width: 18, height: 18)
Text(item.text)
.font(.caption)
.fontWeight(.regular)
.multilineTextAlignment(.center)
.lineLimit(1)
}
.frame(maxWidth: .infinity)
})
.foregroundColor(selectedTab == item.tab ? Color("MainText") : Color.secondary)
.shadow(color: selectedTab == item.tab ? Color.orange : Color.blue, radius: 15)
}
}
.padding(.top, 12.0)
.padding(.bottom, 32)
.background(Color("TabBarColor"))
.frame(maxHeight: .infinity, alignment: .bottom)
.shadow(color: Color.gray.opacity(0.5), radius: 6, x: 0, y: 6)
.ignoresSafeArea()
}
.padding(.top, 12.0)
.padding(.bottom, 32)
.background(Color("TabBarColor"))
.frame(maxHeight: .infinity, alignment: .bottom)
.shadow(color: Color.gray.opacity(0.5), radius: 6, x: 0, y: 6)
.ignoresSafeArea()
.statusBarHidden(false)
}
.statusBarHidden(false)
.navigationViewStyle(.columns)
}
}

View File

@@ -9,7 +9,11 @@ import SwiftUI
struct GoodsDetailView: View {
var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
NavigationPageView(title: "商品详情", content: content)
}
var content: some View {
Image("Images/banner1")
}
}

View File

@@ -0,0 +1,22 @@
//
// MessageDetailView.swift
// demo
//
// Created by Jason on 2024/1/25.
//
import SwiftUI
struct MessageDetailView: View {
var body: some View {
NavigationPageView(title: "消息详情", content: content)
}
var content: some View {
Text("asdf")
}
}
#Preview {
MessageDetailView()
}

View File

@@ -9,7 +9,17 @@ import SwiftUI
struct MessageView: View {
var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
NavigationPageView(title: "资讯列表", content: content)
}
var content: some View {
VStack {
NavigationLink {
MessageDetailView()
} label: {
Text("xiaoxo")
}
}
}
}

View File

@@ -9,7 +9,7 @@ import SwiftUI
struct AccountView: View {
var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
NavigationPageView(title: "我的积分", content: Text("Account View"))
}
}

View File

@@ -0,0 +1,54 @@
//
// UserAvatarView.swift
// demo
//
// Created by Jason on 2024/1/25.
//
import SwiftUI
struct UserAvatarView: View {
@Environment(\.dismiss) private var dismiss
@State private var showSheet = false
var body: some View {
VStack {
Image("Images/banner1")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.width)
}
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {
dismiss()
} label: {
Image(systemName: "chevron.backward")
}
}
ToolbarItem(placement: .navigationBarTrailing) {
Button {
showSheet = true
} label: {
Image(systemName: "ellipsis")
}
.actionSheet(isPresented: $showSheet, content: {
ActionSheet(title: Text("更换头像"), message: nil, buttons: [
.default(Text("从相册选择"), action: {}),
.default(Text("拍一张"), action: {}),
.cancel(Text("取消"))
])
})
}
}
.navigationBarBackButtonHidden(true)
.navigationBarTitleDisplayMode(.inline)
.navigationTitle("头像")
}
}
#Preview {
UserAvatarView()
}

View File

@@ -0,0 +1,24 @@
//
// UserInfoView.swift
// demo
//
// Created by Jason on 2024/1/25.
//
import SwiftUI
struct UserInfoView: View {
var body: some View {
NavigationPageView(title: "用户设置", content: VStack {
NavigationLink {
UserNicknameView()
} label: {
Text("用户昵称")
}
})
}
}
#Preview {
UserInfoView()
}

View File

@@ -0,0 +1,18 @@
//
// UserNicknameView.swift
// demo
//
// Created by Jason on 2024/1/25.
//
import SwiftUI
struct UserNicknameView: View {
var body: some View {
NavigationPageView(title: "用户昵称", content: Text("nickname"))
}
}
#Preview {
UserNicknameView()
}

View File

@@ -9,7 +9,11 @@ import SwiftUI
struct OrdersView: View {
var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
NavigationPageView(title: "全部订单", content: content)
}
var content: some View {
Text("q全部订单, World!")
}
}

View File

@@ -9,35 +9,38 @@ import SwiftUI
struct UserView: View {
@State private var showDetail = false
@State private var showUserInfo = false
var body: some View {
ScrollView {
Header
ToVip
VStack(spacing: 16) {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 0) {
Header
ToVip
InfoList
Notice
OrderShow
Coupons
tj
Recommend
}
.padding(16)
.background(Color.gray.opacity(0.2))
.cornerRadius(12)
}
.padding(.bottom, 48)
.animation(.spring, value: showDetail)
}
var Header: some View {
HStack {
Image("Images/logo")
.resizable()
.frame(width: 64, height: 64)
.cornerRadius(32)
.overlay(
RoundedRectangle(cornerRadius: 32, style: .continuous)
.stroke(Color.red, lineWidth: 2)
)
NavigationLink {
UserAvatarView()
} label: {
Image("Images/logo")
.resizable()
.frame(width: 64, height: 64)
.cornerRadius(32)
.overlay(
RoundedRectangle(cornerRadius: 32, style: .continuous)
.stroke(Color.red, lineWidth: 2)
)
}
VStack(alignment: .leading, spacing: 12, content: {
Text("用户名称")
@@ -48,15 +51,18 @@ struct UserView: View {
.foregroundColor(Color.gray)
.lineLimit(1)
})
Image(systemName: "gearshape")
.foregroundColor(Color.gray)
NavigationLink {
UserInfoView()
} label: {
Image(systemName: "gearshape")
.foregroundColor(Color.gray)
}
}
.padding(.horizontal, 24)
}
var ToVip: some View {
HStack(spacing: /*@START_MENU_TOKEN@*/nil/*@END_MENU_TOKEN@*/, content: {
HStack(alignment: .top, spacing: /*@START_MENU_TOKEN@*/nil/*@END_MENU_TOKEN@*/, content: {
Text("VIP de yixie 简介部分")
Button(action: {
self.showDetail.toggle()
@@ -72,111 +78,194 @@ struct UserView: View {
.background(Color.gray)
.cornerRadius(32)
})
.padding(16)
.padding(.bottom, 64)
.frame(maxWidth: .infinity)
.frame(height: showDetail ? 100 : 200)
.animation(.default, value: showDetail)
.background(
Image("Images/banner3").resizable(resizingMode: .tile)
// .overlay(
// UnevenRoundedRectangle(cornerRadii: RectangleCornerRadii(topLeading: 12, topTrailing: 12))
// )
.padding(12)
.padding(.top, 12)
.frame(height: showDetail ? 64 : 150, alignment: .topLeading)
.background(Color.red.opacity(0.3))
.clipShape(
RoundedRectangle(cornerRadius: 12)
.offset(y: 12)
)
.cornerRadius(12)
.padding(.horizontal, 16)
.padding(.horizontal, 12)
}
var InfoList: some View {
ScrollView(.horizontal) {
HStack(spacing: 16) {
ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
UserAccountCard(model: UserAccountCardModel(title: "我的积分", icon: "star", info: "共30001分"))
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 12) {
ForEach(0 ..< 8) { _ in
NavigationLink {
AccountView()
} label: {
UserAccountCard(model: UserAccountCardModel(title: "我的积分", icon: "star", info: "共30001分"))
}
}
}
}
.padding(12)
.background(Color.gray.opacity(0.2))
}
var Notice: some View {
HStack {
HStack(spacing: 4) {
Text("资讯")
.padding(4)
.background(Color.red)
.foregroundColor(Color.white)
Text("平台与2024年1余额开始更新敬请期待@@@")
.foregroundColor(Color.gray)
.frame(maxWidth: .infinity)
.multilineTextAlignment(/*@START_MENU_TOKEN@*/ .leading/*@END_MENU_TOKEN@*/)
.lineLimit(1)
Text("更多")
.foregroundColor(Color.secondary)
.font(.system(size: 16))
NavigationLink {
MessageDetailView()
} label: {
Text("平台与2024年1余额开始更新敬请期待@@@")
.foregroundColor(Color.gray)
.frame(maxWidth: .infinity)
.multilineTextAlignment(/*@START_MENU_TOKEN@*/ .leading/*@END_MENU_TOKEN@*/)
.font(.system(size: 14))
.lineLimit(1)
}
NavigationLink {
MessageView()
} label: {
HStack(spacing: 2, content: {
Text("更多")
.font(.system(size: 14))
.foregroundColor(Color.secondary)
Image(systemName: "chevron.forward.2")
.resizable()
.frame(width: 10, height: 10)
.foregroundColor(Color.secondary)
})
}
}
.frame(maxWidth: .infinity)
.padding(8)
.background(Color.white)
.cornerRadius(8)
.padding(.horizontal, 12)
.padding(.bottom, 12)
.background(Color.gray.opacity(0.2))
}
var OrderShow: some View {
VStack(spacing: 16) {
VStack(spacing: 0) {
HStack {
Text("订单中心")
.font(.system(size: 16))
Spacer()
ShowMore()
NavigationLink {
OrdersView()
} label: {
ShowMore()
}
}
.padding(8)
HStack {
.padding(.horizontal, 12)
Spacer(minLength: 22)
HStack(alignment: .center) {
Spacer()
ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
VStack {
Image(systemName: "wallet.pass")
Text("待付款")
.font(.system(size: 12))
NavigationLink {
OrdersView()
} label: {
VStack {
Image(systemName: "wallet.pass")
.resizable()
.frame(width: 24, height: 24)
.foregroundColor(Color.gray)
.overlay(alignment: .topTrailing) {
Circle()
.fill(Color.red.opacity(0.9))
.frame(width: 20, height: 20)
.overlay {
Text("5")
.foregroundColor(Color.white)
.font(.system(size: 12))
}
.offset(x: 12, y: -10)
}
Text("待付款")
.font(.system(size: 12))
.foregroundColor(Color.gray)
}
}
Spacer()
}
}
}
.padding(.vertical, 12)
.background(Color.white)
.cornerRadius(6)
.padding(.horizontal, 12)
.padding(.bottom, 12)
.background(Color.gray.opacity(0.2))
}
var Coupons: some View {
VStack(spacing: 16) {
VStack(spacing: 0) {
HStack {
Spacer()
ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
VStack {
Image(systemName: "wallet.pass")
Text("优惠券")
.resizable()
.frame(width: 24, height: 24)
.foregroundColor(Color.gray)
.overlay(alignment: .topTrailing) {
Circle()
.fill(Color.red.opacity(0.9))
.frame(width: 20, height: 20)
.overlay {
Text("5")
.foregroundColor(Color.white)
.font(.system(size: 12))
}
.offset(x: 12, y: -10)
}
Text("待付款")
.font(.system(size: 12))
.foregroundColor(Color.gray)
}
Spacer()
}
}
}
.padding(12)
.padding(.top, 22)
.padding(.bottom, 12)
.background(Color.white)
.cornerRadius(6)
.padding(.horizontal, 12)
.padding(.bottom, 12)
.background(Color.gray.opacity(0.2))
}
let columns = [GridItem(.flexible()), GridItem(.flexible())]
let columns = [GridItem(.flexible(), spacing: 12), GridItem(.flexible(), spacing: 12)]
var tj: some View {
LazyVGrid(columns: columns, alignment: .center) {
var Recommend: some View {
LazyVGrid(columns: columns, alignment: .center, spacing: 12, pinnedViews: .sectionHeaders) {
Section {
ForEach(0 ..< 20, id: \.self) { _ in
GoodsCard()
}
}
header: {
Text("推荐广场")
HStack {
Rectangle()
.fill(LinearGradient(colors: [Color.gray.opacity(0), Color.gray.opacity(0.8)], startPoint: .leading, endPoint: UnitPoint.trailing))
.frame(width: 48, height: 4.0)
Text("推荐广场")
.font(.system(size: 16))
Rectangle()
.fill(LinearGradient(colors: [Color.gray.opacity(0.8), Color.gray.opacity(0)], startPoint: .leading, endPoint: UnitPoint.trailing))
.frame(width: 48, height: 4.0)
}
}
}
.padding(.horizontal, 12)
.padding(.bottom, 12)
.background(Color.gray.opacity(0.2))
}
}
//
// #Preview {
// UserView()
// }
#Preview {
UserView()
}

View File

@@ -5,8 +5,8 @@
// Created by Jason on 2024/1/23.
//
import SwiftUI
import SwiftData
import SwiftUI
@main
struct demoApp: App {