EIEI/wechat_wc
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全站视觉焕新与悬浮玻璃 TabBar 迁移

Browse Source
This commit is contained in:
broccoli
2026-08-07 23:29:19 +08:00
parent 19408e5a8c
commit 61f1217384
97 changed files with 4007 additions and 2024 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/checkout/index.scss
+167 -65
View File
@@ -1,27 +1,80 @@
/* ============================================================
Checkout Page — 确认下单
============================================================ */
.checkout-page {
padding: 0 24px 24px;
padding: 0 32rpx;
padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
}
/* --- Page Header --- */
.page-header {
margin-bottom: 24rpx;
padding: 0;
}
.page-header-inner {
display: flex;
align-items: center;
gap: 16rpx;
min-height: 88rpx;
}
.back-btn {
font-size: 40px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 88rpx;
height: 88rpx;
flex: 0 0 auto;
border-radius: 50%;
background: var(--bg-card);
border: 1rpx solid var(--border-strong);
box-shadow: var(--shadow-card);
}
/* 画布展示区 */
.back-btn:active {
transform: scale(0.96);
}
.back-arrow {
font-size: 36rpx;
line-height: 1;
color: var(--text-primary);
}
.nav-title {
flex: 1;
text-align: center;
font-size: 34rpx;
font-weight: 700;
color: var(--text-primary);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nav-placeholder {
width: 88rpx;
flex: 0 0 auto;
}
/* --- 设计预览 --- */
.checkout-canvas {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
margin-bottom: 24rpx;
padding: 32rpx;
}
.canvas-area {
position: relative;
overflow: hidden;
background: rgba(0,0,0,0.03);
border: 1rpx solid var(--border-strong);
max-width: 100%;
box-sizing: border-box;
background: var(--bg-input);
border: 1rpx solid var(--border-strong);
}
.checkout-image {
@@ -32,125 +85,153 @@
max-height: 100%;
}
/* 商品信息 */
.checkout-info {
padding: 24px;
/* --- 商品信息 --- */
.checkout-info,
.checkout-address-card {
margin-bottom: 24rpx;
padding: 32rpx;
}
.card-title {
display: block;
margin-bottom: 24rpx;
font-size: 32rpx;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0;
}
.info-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
gap: 24rpx;
padding: 24rpx 0;
border-bottom: 1rpx solid var(--border);
}
.info-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.info-label {
font-size: 28px;
flex: 0 0 auto;
font-size: 28rpx;
color: var(--text-secondary);
}
.info-value {
font-size: 28px;
color: var(--text-primary);
flex: 1;
text-align: right;
font-size: 28rpx;
font-weight: 500;
color: var(--text-primary);
word-break: break-all;
}
.total-row {
padding-top: 24px;
margin-top: 8px;
padding-top: 24rpx;
margin-top: 8rpx;
}
.info-total {
font-size: 40px;
font-size: 40rpx;
font-weight: 800;
color: var(--accent-primary);
font-variant-numeric: tabular-nums;
}
/* 地址卡片 */
.checkout-address-card {
padding: 24px;
}
/* --- 收货地址 --- */
.checkout-address-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
gap: 24rpx;
margin-bottom: 16rpx;
}
.checkout-address-header .card-title {
margin-bottom: 0;
}
.address-change {
padding: 6px 16px;
border-radius: 8px;
display: flex;
align-items: center;
height: 56rpx;
padding: 0 24rpx;
border-radius: 999rpx;
background: var(--accent-secondary-soft);
}
.change-text {
font-size: 24px;
font-size: 24rpx;
font-weight: 500;
color: var(--accent-secondary);
}
.checkout-address-body {
padding-top: 8px;
padding-top: 8rpx;
}
.addr-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
gap: 16rpx;
margin-bottom: 8rpx;
}
.addr-name {
font-size: 28px;
font-size: 32rpx;
font-weight: 700;
color: var(--text-primary);
}
.addr-phone {
font-size: 26px;
font-size: 24rpx;
color: var(--text-secondary);
}
.addr-detail {
font-size: 26px;
font-size: 26rpx;
color: var(--text-secondary);
line-height: 1.5;
line-height: 1.6;
}
.checkout-address-empty {
padding: 32px 0;
padding: 32rpx 0;
text-align: center;
}
.empty-text {
font-size: 26px;
font-size: 28rpx;
color: var(--text-secondary);
}
/* 底部弹窗 — 地址选择（样式复用 app.scss 全局定义，移除非必要覆写） */
/* --- 地址选择弹层 --- */
.addr-picker-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-bottom: 24rpx;
}
.addr-picker-title {
font-size: 32px;
font-size: 36rpx;
font-weight: 700;
color: var(--text-primary);
}
.addr-picker-close {
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: var(--bg-muted);
color: var(--text-secondary);
padding: 8px;
font-size: 28rpx;
}
.addr-picker-list {
@@ -159,69 +240,90 @@
}
.addr-picker-item {
padding: 20px 16px;
border-bottom: 1rpx solid var(--border);
padding: 24rpx;
border: 1rpx solid transparent;
border-radius: 16rpx;
transition: background 160ms ease, border-color 160ms ease;
}
.addr-picker-item + .addr-picker-item {
margin-top: 16rpx;
}
.addr-picker-item.active {
background: var(--accent-secondary-soft);
border-radius: 12px;
background: var(--accent-primary-soft);
border-color: var(--accent-primary);
}
.addr-picker-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
gap: 16rpx;
margin-bottom: 8rpx;
}
.addr-picker-name {
font-size: 28px;
font-size: 30rpx;
font-weight: 700;
color: var(--text-primary);
}
.addr-picker-phone {
font-size: 26px;
font-size: 24rpx;
color: var(--text-secondary);
}
.addr-picker-default {
font-size: 22px;
display: inline-flex;
align-items: center;
height: 40rpx;
padding: 0 16rpx;
border-radius: 999rpx;
font-size: 20rpx;
font-weight: 600;
color: var(--accent-primary);
border: 1px solid var(--accent-primary);
padding: 2px 8px;
border-radius: 6px;
background: var(--accent-primary-soft);
}
.addr-picker-detail {
font-size: 26px;
font-size: 26rpx;
color: var(--text-secondary);
line-height: 1.6;
}
.addr-picker-empty {
padding: 40px;
padding: 48rpx 32rpx;
text-align: center;
font-size: 28rpx;
color: var(--text-secondary);
font-size: 28px;
}
.addr-picker-add {
margin-top: 16px;
padding: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 96rpx;
margin-top: 24rpx;
border: 1rpx solid var(--border-strong);
border-radius: 12px;
border-radius: 999rpx;
background: var(--bg-card);
}
.addr-picker-add-text {
font-size: 28px;
font-size: 28rpx;
font-weight: 600;
color: var(--accent-secondary);
}
/* 底部操作 — 毛玻璃规则由全局 .action-bar 提供 */
.action-bar .btn-secondary,
.action-bar .btn-primary {
/* --- 底部操作栏 --- */
.bottom-action-bar .btn-secondary,
.bottom-action-bar .btn-primary {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
min-height: 96rpx;
padding: 0;
font-size: 30rpx;
font-weight: 600;
}
src/pages/checkout/index.tsx
+26 -16
View File
@@ -7,6 +7,7 @@ import { useThemeContext } from '../../context/ThemeContext'
import { useSafeArea } from '../../hooks/useSafeArea'
import { useStatusBar } from '../../hooks/useStatusBar'
import ThemedPageMeta from '../../components/ThemedPageMeta'
import BottomActionBar from '../../components/BottomActionBar'
export default function CheckoutPage() {
const { theme, resolvedTheme } = useThemeContext()
@@ -67,8 +68,14 @@ export default function CheckoutPage() {
<View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta />
<View className='checkout-page'>
<View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<Text className='page-title'>设计不存在</Text>
<View className='page-header' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
<View className='page-header-inner'>
<View className='back-btn' onTap={() => Taro.navigateBack()}>
<Text className='back-arrow'>←</Text>
</View>
<Text className='nav-title'>设计不存在</Text>
<View className='nav-placeholder' />
</View>
</View>
</View>
</View>
@@ -85,20 +92,22 @@ export default function CheckoutPage() {
}
return (
<View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta />
<View className='checkout-page'>
<View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta />
<View className='checkout-page'>
<View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='flex-between' style={{ width: '100%' }}>
<Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
<Text className='page-title'>设计效果确认</Text>
<View style={{ width: '60px' }} />
<View className='page-header' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
<View className='page-header-inner'>
<View className='back-btn' onTap={() => Taro.navigateBack()}>
<Text className='back-arrow'>←</Text>
</View>
<Text className='nav-title'>设计效果确认</Text>
<View className='nav-placeholder' />
</View>
</View>
{/* 效果展示区 */}
<View className='checkout-canvas surface-card mt-20'>
<View className='checkout-canvas surface-card'>
<View className='canvas-area' style={maskStyle}>
{hasStickers ? (
design.designData.stickers.map((s: any) => (
@@ -128,7 +137,8 @@ export default function CheckoutPage() {
</View>
{/* 商品信息 */}
<View className='checkout-info surface-card mt-20'>
<View className='checkout-info surface-card'>
<Text className='card-title'>确认商品</Text>
<View className='info-row'>
<Text className='info-label'>商品</Text>
<Text className='info-value'>{design.productName}</Text>
@@ -148,9 +158,9 @@ export default function CheckoutPage() {
</View>
{/* 收货地址 */}
<View className='checkout-address-card surface-card mt-20'>
<View className='checkout-address-card surface-card'>
<View className='checkout-address-header'>
<Text className='info-label'>收货地址</Text>
<Text className='card-title'>收货地址</Text>
<View className='address-change' onTap={() => setShowAddrPicker(true)}>
<Text className='change-text'>更改收货地址</Text>
</View>
@@ -173,14 +183,14 @@ export default function CheckoutPage() {
</View>
{/* 底部操作 */}
<View className='action-bar'>
<BottomActionBar>
<View className='btn-secondary' onTap={() => Taro.navigateBack()}>
<Text>返回修改</Text>
</View>
<View className='btn-primary' onTap={handleConfirm}>
<Text>确认下单</Text>
</View>
</View>
</BottomActionBar>
<View className='safe-bottom-placeholder' />