feat(orderConfirm): 优化订单确认页面功能和样式

- 添加优惠券选择功能
- 增加商品数量选择
- 完善订单信息展示
- 优化支付流程
- 添加错误状态和加载状态处理
- 新增 OrderConfirmSkeleton 组件用于加载骨架屏
This commit is contained in:
2025-08-11 17:27:00 +08:00
parent c6fcf9c2e5
commit bcaf8203e4
10 changed files with 1314 additions and 86 deletions

View File

@@ -1,6 +1,21 @@
.order-confirm-page {
padding-bottom: 100px; // 留出底部固定按钮的空间
.error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
.error-text {
color: #999;
margin-bottom: 20px;
font-size: 14px;
}
}
.fixed-bottom {
position: fixed;
bottom: 0;
@@ -42,3 +57,51 @@
content: "";
}
}
// 优惠券弹窗样式
.coupon-popup {
height: 100%;
display: flex;
flex-direction: column;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid #f0f0f0;
}
&__title {
font-size: 16px;
font-weight: 600;
color: #333;
}
&__content {
flex: 1;
overflow-y: auto;
}
&__current {
padding: 16px;
background: #f8f9fa;
border-bottom: 1px solid #f0f0f0;
&-title {
font-size: 14px;
color: #666;
margin-bottom: 8px;
}
&-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: #fff;
border-radius: 6px;
font-size: 14px;
}
}
}