forked from gxwebsoft/mp-10550
赵忠林
bcaf8203e4
- 添加优惠券选择功能 - 增加商品数量选择 - 完善订单信息展示 - 优化支付流程 - 添加错误状态和加载状态处理 - 新增 OrderConfirmSkeleton 组件用于加载骨架屏
81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
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
|