update
This commit is contained in:
@@ -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()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user