developer/template-10584
1
0
Fork 0
forked from gxwebsoft/mp-10550
Code Pull Requests Activity

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

Browse Source 
- 添加优惠券选择功能
- 增加商品数量选择
- 完善订单信息展示
- 优化支付流程
- 添加错误状态和加载状态处理
- 新增 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
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/OrderConfirmSkeleton.tsx Normal file
View File

@@ -0,0 +1,80 @@
import React from 'react'
import { View } from '@tarojs/components'
import { Skeleton } from '@nutui/nutui-react-taro'
import './OrderConfirmSkeleton.scss'
const OrderConfirmSkeleton: React.FC = () => {
return (
<View className="order-confirm-skeleton">
{/* 收货地址骨架 */}
<View className="skeleton-section">
<View className="skeleton-address">
<Skeleton width="20px" height="20px" animated />
<View className="skeleton-address-content">
<Skeleton width="200px" height="16px" animated />
<Skeleton width="120px" height="14px" animated />
</View>
</View>
</View>
{/* 商品信息骨架 */}
<View className="skeleton-section">
<View className="skeleton-goods">
<Skeleton width="80px" height="80px" animated />
<View className="skeleton-goods-content">
<Skeleton width="180px" height="16px" animated />
<Skeleton width="60px" height="14px" animated />
<View className="skeleton-goods-price">
<Skeleton width="80px" height="16px" animated />
<Skeleton width="40px" height="14px" animated />
</View>
</View>
</View>
</View>
{/* 支付方式骨架 */}
<View className="skeleton-section">
<View className="skeleton-payment">
<Skeleton width="60px" height="16px" animated />
<Skeleton width="80px" height="16px" animated />
</View>
</View>
{/* 价格明细骨架 */}
<View className="skeleton-section">
<View className="skeleton-price-item">
<Skeleton width="100px" height="16px" animated />
<Skeleton width="60px" height="16px" animated />
</View>
<View className="skeleton-price-item">
<Skeleton width="60px" height="16px" animated />
<Skeleton width="80px" height="16px" animated />
</View>
<View className="skeleton-price-item">
<Skeleton width="60px" height="16px" animated />
<Skeleton width="60px" height="16px" animated />
</View>
<View className="skeleton-price-item">
<Skeleton width="120px" height="18px" animated />
<Skeleton width="80px" height="18px" animated />
</View>
</View>
{/* 订单备注骨架 */}
<View className="skeleton-section">
<View className="skeleton-remark">
<Skeleton width="60px" height="16px" animated />
<Skeleton width="200px" height="32px" animated />
</View>
</View>
{/* 底部按钮骨架 */}
<View className="skeleton-bottom">
<Skeleton width="120px" height="20px" animated />
<Skeleton width="100px" height="40px" animated />
</View>
</View>
)
}
export default OrderConfirmSkeleton