300 lines
10 KiB
Swift
300 lines
10 KiB
Swift
//
|
||
// UserView.swift
|
||
// demo
|
||
//
|
||
// Created by Jason on 2024/1/23.
|
||
//
|
||
|
||
import SwiftUI
|
||
|
||
struct UserView: View {
|
||
@State private var showDetail = false
|
||
@State private var showUserInfo = false
|
||
|
||
var grayBackground = Color.gray.opacity(0.2)
|
||
|
||
init() {
|
||
print(UIScreen.main.bounds.width)
|
||
}
|
||
|
||
var body: some View {
|
||
ScrollView(.vertical, showsIndicators: false) {
|
||
VStack(spacing: 0) {
|
||
Header
|
||
ToVip
|
||
InfoList
|
||
Notice
|
||
OrderShow
|
||
Coupons
|
||
Recommend
|
||
}
|
||
}
|
||
.animation(.spring, value: showDetail)
|
||
}
|
||
|
||
var Header: some View {
|
||
HStack {
|
||
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("用户名称")
|
||
.font(.title2)
|
||
.fontWeight(.regular)
|
||
Text("我的用户简介，超出部分需要隐藏，隐藏需要自动设置，这个文字长度也要有约束")
|
||
.font(.caption)
|
||
.foregroundColor(Color.gray)
|
||
.lineLimit(1)
|
||
})
|
||
NavigationLink {
|
||
UserInfoView()
|
||
} label: {
|
||
Image(systemName: "gearshape")
|
||
.foregroundColor(Color.gray)
|
||
}
|
||
}
|
||
.padding(.horizontal, 24)
|
||
}
|
||
|
||
var ToVip: some View {
|
||
HStack(alignment: .top, spacing: /*@START_MENU_TOKEN@*/nil/*@END_MENU_TOKEN@*/, content: {
|
||
Text("VIP de yixie 简介部分")
|
||
Button(action: {
|
||
self.showDetail.toggle()
|
||
}, label: {
|
||
Text("详情")
|
||
})
|
||
Spacer()
|
||
Button("立即开通") {}
|
||
.foregroundColor(Color.red)
|
||
.font(.subheadline)
|
||
.padding(.vertical, 8)
|
||
.padding(.horizontal, 16)
|
||
.background(Color.gray)
|
||
.cornerRadius(32)
|
||
})
|
||
.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)
|
||
)
|
||
.padding(.horizontal, 12)
|
||
}
|
||
|
||
var InfoList: some View {
|
||
ScrollView(.horizontal, showsIndicators: false) {
|
||
HStack(spacing: 12) {
|
||
ForEach(0 ..< 8) { _ in
|
||
NavigationLink {
|
||
AccountView()
|
||
} label: {
|
||
UserAccountCard(model: UserAccountCardModel(title: "我的积分", icon: "star", info: "共30001分"))
|
||
}
|
||
}
|
||
}
|
||
.padding(.horizontal, 12)
|
||
}
|
||
.padding(.top, 12)
|
||
.background(
|
||
Color.white
|
||
.overlay(alignment: .top) {
|
||
RoundedRectangle(cornerRadius: 12)
|
||
.fill(LinearGradient(colors: [Color.orange.opacity(0.3), grayBackground], startPoint: .top, endPoint: .bottom))
|
||
.frame(height: 92)
|
||
}
|
||
)
|
||
.clipped()
|
||
|
||
// Rectangle()
|
||
// .fill(Color.white)
|
||
// .frame(height: 12)
|
||
// .overlay {
|
||
// RoundedRectangle(cornerRadius: 12)
|
||
// .fill(grayBackground)
|
||
// .frame(height: 24)
|
||
// .offset(y: 6)
|
||
// }
|
||
// .clipped()
|
||
}
|
||
|
||
var Notice: some View {
|
||
HStack(spacing: 4) {
|
||
Text("资讯")
|
||
.padding(4)
|
||
.background(Color.red)
|
||
.foregroundColor(Color.white)
|
||
.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(.vertical, 12)
|
||
.background(grayBackground)
|
||
}
|
||
|
||
var OrderShow: some View {
|
||
VStack(spacing: 0) {
|
||
HStack {
|
||
Text("订单中心")
|
||
.font(.system(size: 16))
|
||
Spacer()
|
||
NavigationLink {
|
||
OrdersView()
|
||
} label: {
|
||
ShowMore()
|
||
}
|
||
}
|
||
.padding(.horizontal, 12)
|
||
Spacer(minLength: 22)
|
||
HStack(alignment: .center) {
|
||
Spacer()
|
||
ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
|
||
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(grayBackground)
|
||
}
|
||
|
||
var Coupons: some View {
|
||
VStack(spacing: 0) {
|
||
HStack {
|
||
Spacer()
|
||
ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
|
||
NavigationLink {
|
||
CouponView()
|
||
} 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(.top, 22)
|
||
.padding(.bottom, 12)
|
||
.background(Color.white)
|
||
.cornerRadius(6)
|
||
.padding(.horizontal, 12)
|
||
.padding(.bottom, 12)
|
||
.background(grayBackground)
|
||
}
|
||
|
||
let columns = [GridItem(.flexible(), spacing: 12), GridItem(.flexible(), spacing: 12)]
|
||
|
||
var Recommend: some View {
|
||
LazyVGrid(columns: columns, alignment: .center, spacing: 12, pinnedViews: .sectionHeaders) {
|
||
Section {
|
||
ForEach(0 ..< 20, id: \.self) { _ in
|
||
GoodsCard(title: "我是商品标题")
|
||
}
|
||
}
|
||
header: {
|
||
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(grayBackground)
|
||
}
|
||
}
|
||
|
||
#Preview {
|
||
UserView()
|
||
}
|