forked from gxwebsoft/mp-10550
feat(orderConfirm): 优化订单确认页面功能和样式
- 添加优惠券选择功能 - 增加商品数量选择 - 完善订单信息展示 - 优化支付流程 - 添加错误状态和加载状态处理 - 新增 OrderConfirmSkeleton 组件用于加载骨架屏
This commit is contained in:
@@ -124,6 +124,8 @@ export interface ShopGoods {
|
||||
canUseDate?: string;
|
||||
ensureTag?: string;
|
||||
expiredDay?: number;
|
||||
// 可购买数量
|
||||
canBuyNumber?: number;
|
||||
}
|
||||
|
||||
export interface BathSet {
|
||||
|
||||
253
src/components/CouponCard.scss
Normal file
253
src/components/CouponCard.scss
Normal file
@@ -0,0 +1,253 @@
|
||||
.coupon-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
background: #fff;
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
// 主题颜色
|
||||
&--red {
|
||||
.coupon-card__left {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff5252);
|
||||
}
|
||||
.coupon-card__btn--receive,
|
||||
.coupon-card__btn--use {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ff5252);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&--orange {
|
||||
.coupon-card__left {
|
||||
background: linear-gradient(135deg, #ffa726, #ff9800);
|
||||
}
|
||||
.coupon-card__btn--receive,
|
||||
.coupon-card__btn--use {
|
||||
background: linear-gradient(135deg, #ffa726, #ff9800);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&--blue {
|
||||
.coupon-card__left {
|
||||
background: linear-gradient(135deg, #42a5f5, #2196f3);
|
||||
}
|
||||
.coupon-card__btn--receive,
|
||||
.coupon-card__btn--use {
|
||||
background: linear-gradient(135deg, #42a5f5, #2196f3);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&--purple {
|
||||
.coupon-card__left {
|
||||
background: linear-gradient(135deg, #ab47bc, #9c27b0);
|
||||
}
|
||||
.coupon-card__btn--receive,
|
||||
.coupon-card__btn--use {
|
||||
background: linear-gradient(135deg, #ab47bc, #9c27b0);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&--green {
|
||||
.coupon-card__left {
|
||||
background: linear-gradient(135deg, #66bb6a, #4caf50);
|
||||
}
|
||||
.coupon-card__btn--receive,
|
||||
.coupon-card__btn--use {
|
||||
background: linear-gradient(135deg, #66bb6a, #4caf50);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 左侧金额区域
|
||||
&__left {
|
||||
flex: 0 0 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__amount {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__currency {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__condition {
|
||||
font-size: 11px;
|
||||
opacity: 0.9;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
// 分割线区域
|
||||
&__divider {
|
||||
flex: 0 0 2px;
|
||||
position: relative;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
&__divider-line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 4px,
|
||||
#ddd 4px,
|
||||
#ddd 8px
|
||||
);
|
||||
}
|
||||
|
||||
&__circle {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
&--top {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
bottom: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧信息区域
|
||||
&__right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__validity {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&__action {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
min-width: 50px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
border: none;
|
||||
|
||||
&--receive,
|
||||
&--use {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&__status {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
// 状态遮罩
|
||||
&__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__mask-text {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 优惠券列表容器
|
||||
.coupon-list {
|
||||
padding: 16px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 优惠券横向滚动容器
|
||||
.coupon-scroll {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
flex: 0 0 240px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
168
src/components/CouponCard.tsx
Normal file
168
src/components/CouponCard.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import React from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Button } from '@nutui/nutui-react-taro'
|
||||
import './CouponCard.scss'
|
||||
|
||||
export interface CouponCardProps {
|
||||
/** 优惠券金额 */
|
||||
amount: number
|
||||
/** 最低消费金额 */
|
||||
minAmount?: number
|
||||
/** 优惠券类型：1-满减券 2-折扣券 3-免费券 */
|
||||
type?: 1 | 2 | 3
|
||||
/** 优惠券状态：0-未使用 1-已使用 2-已过期 */
|
||||
status?: 0 | 1 | 2
|
||||
/** 优惠券标题 */
|
||||
title?: string
|
||||
/** 有效期开始时间 */
|
||||
startTime?: string
|
||||
/** 有效期结束时间 */
|
||||
endTime?: string
|
||||
/** 是否显示领取按钮 */
|
||||
showReceiveBtn?: boolean
|
||||
/** 是否显示使用按钮 */
|
||||
showUseBtn?: boolean
|
||||
/** 领取按钮点击事件 */
|
||||
onReceive?: () => void
|
||||
/** 使用按钮点击事件 */
|
||||
onUse?: () => void
|
||||
/** 优惠券样式主题：red | orange | blue | purple | green */
|
||||
theme?: 'red' | 'orange' | 'blue' | 'purple' | 'green'
|
||||
}
|
||||
|
||||
const CouponCard: React.FC<CouponCardProps> = ({
|
||||
amount,
|
||||
minAmount,
|
||||
type = 1,
|
||||
status = 0,
|
||||
title,
|
||||
startTime,
|
||||
endTime,
|
||||
showReceiveBtn = false,
|
||||
showUseBtn = false,
|
||||
onReceive,
|
||||
onUse,
|
||||
theme = 'red'
|
||||
}) => {
|
||||
// 格式化优惠券金额显示
|
||||
const formatAmount = () => {
|
||||
switch (type) {
|
||||
case 1: // 满减券
|
||||
return `¥${amount}`
|
||||
case 2: // 折扣券
|
||||
return `${amount}折`
|
||||
case 3: // 免费券
|
||||
return '免费'
|
||||
default:
|
||||
return `¥${amount}`
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券状态文本
|
||||
const getStatusText = () => {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return '未使用'
|
||||
case 1:
|
||||
return '已使用'
|
||||
case 2:
|
||||
return '已过期'
|
||||
default:
|
||||
return '未使用'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取使用条件文本
|
||||
const getConditionText = () => {
|
||||
if (type === 3) return '无门槛'
|
||||
if (minAmount && minAmount > 0) {
|
||||
return `满${minAmount}可用`
|
||||
}
|
||||
return '无门槛'
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateStr?: string) => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
return `${date.getMonth() + 1}.${date.getDate()}`
|
||||
}
|
||||
|
||||
// 获取有效期文本
|
||||
const getValidityText = () => {
|
||||
if (startTime && endTime) {
|
||||
return `${formatDate(startTime)}-${formatDate(endTime)}`
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={`coupon-card coupon-card--${theme} ${status !== 0 ? 'coupon-card--disabled' : ''}`}>
|
||||
{/* 左侧金额区域 */}
|
||||
<View className="coupon-card__left">
|
||||
<View className="coupon-card__amount">
|
||||
<Text className="coupon-card__currency">¥</Text>
|
||||
<Text className="coupon-card__value">{amount}</Text>
|
||||
</View>
|
||||
<View className="coupon-card__condition">
|
||||
{getConditionText()}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 中间分割线 */}
|
||||
<View className="coupon-card__divider">
|
||||
<View className="coupon-card__divider-line"></View>
|
||||
<View className="coupon-card__circle coupon-card__circle--top"></View>
|
||||
<View className="coupon-card__circle coupon-card__circle--bottom"></View>
|
||||
</View>
|
||||
|
||||
{/* 右侧信息区域 */}
|
||||
<View className="coupon-card__right">
|
||||
<View className="coupon-card__info">
|
||||
<View className="coupon-card__title">
|
||||
{title || (type === 1 ? '满减券' : type === 2 ? '折扣券' : '免费券')}
|
||||
</View>
|
||||
<View className="coupon-card__validity">
|
||||
有效期：{getValidityText()}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 按钮区域 */}
|
||||
<View className="coupon-card__action">
|
||||
{showReceiveBtn && status === 0 && (
|
||||
<Button
|
||||
className="coupon-card__btn coupon-card__btn--receive"
|
||||
size="small"
|
||||
onClick={onReceive}
|
||||
>
|
||||
领取
|
||||
</Button>
|
||||
)}
|
||||
{showUseBtn && status === 0 && (
|
||||
<Button
|
||||
className="coupon-card__btn coupon-card__btn--use"
|
||||
size="small"
|
||||
onClick={onUse}
|
||||
>
|
||||
使用
|
||||
</Button>
|
||||
)}
|
||||
{status !== 0 && (
|
||||
<View className="coupon-card__status">
|
||||
{getStatusText()}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 状态遮罩 */}
|
||||
{status !== 0 && (
|
||||
<View className="coupon-card__mask">
|
||||
<Text className="coupon-card__mask-text">{getStatusText()}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default CouponCard
|
||||
96
src/components/CouponList.tsx
Normal file
96
src/components/CouponList.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import React from 'react'
|
||||
import { View, ScrollView } from '@tarojs/components'
|
||||
import CouponCard, { CouponCardProps } from './CouponCard'
|
||||
import './CouponCard.scss'
|
||||
|
||||
export interface CouponListProps {
|
||||
/** 优惠券列表数据 */
|
||||
coupons: CouponCardProps[]
|
||||
/** 列表标题 */
|
||||
title?: string
|
||||
/** 布局方式：vertical-垂直布局 horizontal-水平滚动 */
|
||||
layout?: 'vertical' | 'horizontal'
|
||||
/** 是否显示空状态 */
|
||||
showEmpty?: boolean
|
||||
/** 空状态文案 */
|
||||
emptyText?: string
|
||||
/** 优惠券点击事件 */
|
||||
onCouponClick?: (coupon: CouponCardProps, index: number) => void
|
||||
}
|
||||
|
||||
const CouponList: React.FC<CouponListProps> = ({
|
||||
coupons = [],
|
||||
title,
|
||||
layout = 'vertical',
|
||||
showEmpty = true,
|
||||
emptyText = '暂无优惠券',
|
||||
onCouponClick
|
||||
}) => {
|
||||
const handleCouponClick = (coupon: CouponCardProps, index: number) => {
|
||||
onCouponClick?.(coupon, index)
|
||||
}
|
||||
|
||||
// 垂直布局
|
||||
if (layout === 'vertical') {
|
||||
return (
|
||||
<View className="coupon-list">
|
||||
{title && (
|
||||
<View className="coupon-list__title">{title}</View>
|
||||
)}
|
||||
|
||||
{coupons.length === 0 ? (
|
||||
showEmpty && (
|
||||
<View className="coupon-list__empty">
|
||||
{emptyText}
|
||||
</View>
|
||||
)
|
||||
) : (
|
||||
coupons.map((coupon, index) => (
|
||||
<View
|
||||
key={index}
|
||||
onClick={() => handleCouponClick(coupon, index)}
|
||||
>
|
||||
<CouponCard {...coupon} />
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// 水平滚动布局
|
||||
return (
|
||||
<View>
|
||||
{title && (
|
||||
<View className="coupon-list__title" style={{ paddingLeft: '16px' }}>
|
||||
{title}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{coupons.length === 0 ? (
|
||||
showEmpty && (
|
||||
<View className="coupon-list__empty">
|
||||
{emptyText}
|
||||
</View>
|
||||
)
|
||||
) : (
|
||||
<ScrollView
|
||||
scrollX
|
||||
className="coupon-scroll"
|
||||
showScrollbar={false}
|
||||
>
|
||||
{coupons.map((coupon, index) => (
|
||||
<View
|
||||
key={index}
|
||||
onClick={() => handleCouponClick(coupon, index)}
|
||||
>
|
||||
<CouponCard {...coupon} />
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default CouponList
|
||||
78
src/components/OrderConfirmSkeleton.scss
Normal file
78
src/components/OrderConfirmSkeleton.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
.order-confirm-skeleton {
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
|
||||
.skeleton-section {
|
||||
background: #fff;
|
||||
margin-bottom: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.skeleton-address {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
&-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-goods {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
&-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-payment {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skeleton-price-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-remark {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skeleton-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
80
src/components/OrderConfirmSkeleton.tsx
Normal file
80
src/components/OrderConfirmSkeleton.tsx
Normal 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
|
||||
121
src/components/QuantitySelector.scss
Normal file
121
src/components/QuantitySelector.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
.quantity-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background: #f8f8f8;
|
||||
color: #666;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
background: #f5f5f5 !important;
|
||||
color: #ccc !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
border-left: 1px solid #e5e5e5;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__stock {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&__stock-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// 尺寸变体
|
||||
&--small {
|
||||
.quantity-selector__controls {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.quantity-selector__btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.quantity-selector__input {
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.quantity-selector__value {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&--medium {
|
||||
.quantity-selector__controls {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.quantity-selector__btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.quantity-selector__input {
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.quantity-selector__value {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&--large {
|
||||
.quantity-selector__controls {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.quantity-selector__btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.quantity-selector__input {
|
||||
width: 48px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.quantity-selector__value {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
88
src/components/QuantitySelector.tsx
Normal file
88
src/components/QuantitySelector.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import React from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Button } from '@nutui/nutui-react-taro'
|
||||
import { Minus, Plus } from '@nutui/icons-react-taro'
|
||||
import './QuantitySelector.scss'
|
||||
|
||||
export interface QuantitySelectorProps {
|
||||
/** 当前数量 */
|
||||
value: number
|
||||
/** 最小数量 */
|
||||
min?: number
|
||||
/** 最大数量（库存） */
|
||||
max?: number
|
||||
/** 是否禁用 */
|
||||
disabled?: boolean
|
||||
/** 数量变化回调 */
|
||||
onChange?: (value: number) => void
|
||||
/** 尺寸 */
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
/** 是否显示库存提示 */
|
||||
showStock?: boolean
|
||||
/** 库存数量 */
|
||||
stock?: number
|
||||
}
|
||||
|
||||
const QuantitySelector: React.FC<QuantitySelectorProps> = ({
|
||||
value,
|
||||
min = 1,
|
||||
max = 999,
|
||||
disabled = false,
|
||||
onChange,
|
||||
size = 'medium',
|
||||
showStock = false,
|
||||
stock
|
||||
}) => {
|
||||
const handleDecrease = () => {
|
||||
if (disabled || value <= min) return
|
||||
const newValue = value - 1
|
||||
onChange?.(newValue)
|
||||
}
|
||||
|
||||
const handleIncrease = () => {
|
||||
if (disabled || value >= max) return
|
||||
const newValue = value + 1
|
||||
onChange?.(newValue)
|
||||
}
|
||||
|
||||
const canDecrease = !disabled && value > min
|
||||
const canIncrease = !disabled && value < max
|
||||
|
||||
return (
|
||||
<View className={`quantity-selector quantity-selector--${size}`}>
|
||||
<View className="quantity-selector__controls">
|
||||
<Button
|
||||
className={`quantity-selector__btn quantity-selector__btn--minus ${!canDecrease ? 'quantity-selector__btn--disabled' : ''}`}
|
||||
size="small"
|
||||
onClick={handleDecrease}
|
||||
disabled={!canDecrease}
|
||||
>
|
||||
<Minus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} />
|
||||
</Button>
|
||||
|
||||
<View className="quantity-selector__input">
|
||||
<Text className="quantity-selector__value">{value}</Text>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
className={`quantity-selector__btn quantity-selector__btn--plus ${!canIncrease ? 'quantity-selector__btn--disabled' : ''}`}
|
||||
size="small"
|
||||
onClick={handleIncrease}
|
||||
disabled={!canIncrease}
|
||||
>
|
||||
<Plus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} />
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
{showStock && stock !== undefined && (
|
||||
<View className="quantity-selector__stock">
|
||||
<Text className="quantity-selector__stock-text">
|
||||
库存 {stock} 件
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default QuantitySelector
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {Image, Button, Cell, CellGroup, Input, Space, ActionSheet} from '@nutui/nutui-react-taro'
|
||||
import {
|
||||
Image,
|
||||
Button,
|
||||
Cell,
|
||||
CellGroup,
|
||||
Input,
|
||||
Space,
|
||||
ActionSheet,
|
||||
Popup,
|
||||
Toast,
|
||||
InputNumber,
|
||||
ConfigProvider
|
||||
} from '@nutui/nutui-react-taro'
|
||||
import {Location, ArrowRight} from '@nutui/icons-react-taro'
|
||||
import Taro, {useDidShow} from '@tarojs/taro'
|
||||
import {ShopGoods} from "@/api/shop/shopGoods/model";
|
||||
@@ -12,6 +24,10 @@ import Gap from "@/components/Gap";
|
||||
import {selectPayment} from "@/api/system/payment";
|
||||
import {Payment} from "@/api/system/payment/model";
|
||||
import {PaymentHandler, PaymentType, buildSingleGoodsOrder} from "@/utils/payment";
|
||||
import OrderConfirmSkeleton from "@/components/OrderConfirmSkeleton";
|
||||
import CouponList from "@/components/CouponList";
|
||||
import {CouponCardProps} from "@/components/CouponCard";
|
||||
|
||||
|
||||
const OrderConfirm = () => {
|
||||
const [goods, setGoods] = useState<ShopGoods | null>(null);
|
||||
@@ -19,64 +35,164 @@ const OrderConfirm = () => {
|
||||
const [payments, setPayments] = useState<any[]>([])
|
||||
const [payment, setPayment] = useState<Payment>()
|
||||
const [isVisible, setIsVisible] = useState<boolean>(false)
|
||||
const [quantity, setQuantity] = useState<number>(1)
|
||||
const [orderRemark, setOrderRemark] = useState<string>('')
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [error, setError] = useState<string>('')
|
||||
const [payLoading, setPayLoading] = useState<boolean>(false)
|
||||
|
||||
// InputNumber 主题配置
|
||||
const customTheme = {
|
||||
nutuiInputnumberButtonWidth: '28px',
|
||||
nutuiInputnumberButtonHeight: '28px',
|
||||
nutuiInputnumberInputWidth: '40px',
|
||||
nutuiInputnumberInputHeight: '28px',
|
||||
nutuiInputnumberInputBorderRadius: '4px',
|
||||
nutuiInputnumberButtonBorderRadius: '4px',
|
||||
}
|
||||
|
||||
// 优惠券相关状态
|
||||
const [selectedCoupon, setSelectedCoupon] = useState<CouponCardProps | null>(null)
|
||||
const [couponVisible, setCouponVisible] = useState<boolean>(false)
|
||||
const [availableCoupons] = useState<CouponCardProps[]>([
|
||||
{
|
||||
amount: 5,
|
||||
minAmount: 20,
|
||||
type: 1,
|
||||
status: 0,
|
||||
title: '满20减5',
|
||||
startTime: '2024-01-01',
|
||||
endTime: '2024-12-31',
|
||||
theme: 'red'
|
||||
},
|
||||
{
|
||||
amount: 10,
|
||||
minAmount: 50,
|
||||
type: 1,
|
||||
status: 0,
|
||||
title: '满50减10',
|
||||
startTime: '2024-01-01',
|
||||
endTime: '2024-12-31',
|
||||
theme: 'orange'
|
||||
},
|
||||
{
|
||||
amount: 20,
|
||||
minAmount: 100,
|
||||
type: 1,
|
||||
status: 0,
|
||||
title: '满100减20',
|
||||
startTime: '2024-01-01',
|
||||
endTime: '2024-12-31',
|
||||
theme: 'blue'
|
||||
}
|
||||
])
|
||||
|
||||
const router = Taro.getCurrentInstance().router;
|
||||
const goodsId = router?.params?.goodsId;
|
||||
|
||||
const reload = async () => {
|
||||
// 默认收货地址
|
||||
const address = await listShopUserAddress({isDefault: true});
|
||||
if (address.length > 0) {
|
||||
setAddress(address[0])
|
||||
// 计算商品总价
|
||||
const getGoodsTotal = () => {
|
||||
if (!goods) return 0
|
||||
return parseFloat(goods.price || '0') * quantity
|
||||
}
|
||||
// 支付方式
|
||||
const paymentList = await selectPayment({});
|
||||
if (paymentList && paymentList.length > 0) {
|
||||
setPayments(paymentList?.map((d, _) => {
|
||||
return {
|
||||
type: d.type,
|
||||
name: d.name
|
||||
|
||||
// 计算优惠券折扣
|
||||
const getCouponDiscount = () => {
|
||||
if (!selectedCoupon || !goods) return 0
|
||||
const total = getGoodsTotal()
|
||||
|
||||
// 检查是否满足使用条件
|
||||
if (selectedCoupon.minAmount && total < selectedCoupon.minAmount) {
|
||||
return 0
|
||||
}
|
||||
}))
|
||||
setPayment(paymentList[0])
|
||||
|
||||
switch (selectedCoupon.type) {
|
||||
case 1: // 满减券
|
||||
return selectedCoupon.amount
|
||||
case 2: // 折扣券
|
||||
return total * (1 - selectedCoupon.amount / 10)
|
||||
case 3: // 免费券
|
||||
return total
|
||||
default:
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
// 计算实付金额
|
||||
const getFinalPrice = () => {
|
||||
const total = getGoodsTotal()
|
||||
const discount = getCouponDiscount()
|
||||
return Math.max(0, total - discount)
|
||||
}
|
||||
|
||||
|
||||
const handleSelect = (item: any) => {
|
||||
setPayment(payments.find(payment => payment.name === item.name))
|
||||
setIsVisible(false)
|
||||
}
|
||||
|
||||
// 处理数量变化
|
||||
const handleQuantityChange = (value: string | number) => {
|
||||
const newQuantity = typeof value === 'string' ? parseInt(value) || 1 : value
|
||||
setQuantity(Math.max(1, Math.min(newQuantity, goods?.stock || 999)))
|
||||
}
|
||||
|
||||
// 处理优惠券选择
|
||||
const handleCouponSelect = (coupon: CouponCardProps) => {
|
||||
const total = getGoodsTotal()
|
||||
|
||||
// 检查是否满足使用条件
|
||||
if (coupon.minAmount && total < coupon.minAmount) {
|
||||
Toast.show(`需满${coupon.minAmount}元才能使用此优惠券`)
|
||||
return
|
||||
}
|
||||
|
||||
setSelectedCoupon(coupon)
|
||||
setCouponVisible(false)
|
||||
Toast.show('优惠券选择成功')
|
||||
}
|
||||
|
||||
// 取消选择优惠券
|
||||
const handleCouponCancel = () => {
|
||||
setSelectedCoupon(null)
|
||||
Toast.show('已取消使用优惠券')
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一支付入口
|
||||
*/
|
||||
const onPay = async (goods: ShopGoods) => {
|
||||
try {
|
||||
setPayLoading(true)
|
||||
|
||||
// 基础校验
|
||||
if (!address) {
|
||||
Taro.showToast({
|
||||
title: '请选择收货地址',
|
||||
icon: 'error'
|
||||
});
|
||||
Toast.show('请选择收货地址')
|
||||
return;
|
||||
}
|
||||
|
||||
if (!payment) {
|
||||
Taro.showToast({
|
||||
title: '请选择支付方式',
|
||||
icon: 'error'
|
||||
});
|
||||
Toast.show('请选择支付方式')
|
||||
return;
|
||||
}
|
||||
|
||||
// 库存校验
|
||||
if (goods.stock !== undefined && quantity > goods.stock) {
|
||||
Toast.show('商品库存不足')
|
||||
return;
|
||||
}
|
||||
|
||||
// 构建订单数据
|
||||
const orderData = buildSingleGoodsOrder(
|
||||
goods.goodsId!,
|
||||
1,
|
||||
quantity,
|
||||
address.id,
|
||||
{
|
||||
comments: goods.name,
|
||||
deliveryType: 0,
|
||||
buyerRemarks: '',
|
||||
buyerRemarks: orderRemark,
|
||||
couponId: selectedCoupon ? selectedCoupon.amount : undefined,
|
||||
couponDiscount: getCouponDiscount()
|
||||
}
|
||||
);
|
||||
|
||||
@@ -85,25 +201,88 @@ const OrderConfirm = () => {
|
||||
|
||||
// 执行支付
|
||||
await PaymentHandler.pay(orderData, paymentType);
|
||||
|
||||
Toast.show('支付成功')
|
||||
} catch (error) {
|
||||
console.error('支付失败:', error)
|
||||
Toast.show('支付失败，请重试')
|
||||
} finally {
|
||||
setPayLoading(false)
|
||||
}
|
||||
};
|
||||
|
||||
// 统一的数据加载函数
|
||||
const loadAllData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
// 并行加载商品信息和其他数据
|
||||
const promises = []
|
||||
|
||||
if (goodsId) {
|
||||
promises.push(getShopGoods(Number(goodsId)))
|
||||
}
|
||||
|
||||
promises.push(listShopUserAddress({isDefault: true}))
|
||||
promises.push(selectPayment({}))
|
||||
|
||||
const [goodsRes, addressRes, paymentRes] = await Promise.all(promises)
|
||||
|
||||
// 设置商品信息
|
||||
if (goodsRes) {
|
||||
setGoods(goodsRes)
|
||||
}
|
||||
|
||||
// 设置默认收货地址
|
||||
if (addressRes && addressRes.length > 0) {
|
||||
setAddress(addressRes[0])
|
||||
}
|
||||
|
||||
// 设置支付方式
|
||||
if (paymentRes && paymentRes.length > 0) {
|
||||
setPayments(paymentRes.map((d) => ({
|
||||
type: d.type,
|
||||
name: d.name
|
||||
})))
|
||||
setPayment(paymentRes[0])
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载数据失败:', err)
|
||||
setError('加载数据失败，请重试')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useDidShow(() => {
|
||||
reload().then()
|
||||
loadAllData()
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (goodsId) {
|
||||
getShopGoods(Number(goodsId)).then(res => {
|
||||
setGoods(res);
|
||||
}).catch(error => {
|
||||
console.error("Failed to fetch goods detail:", error);
|
||||
});
|
||||
}
|
||||
reload().then()
|
||||
loadAllData()
|
||||
}, [goodsId]);
|
||||
|
||||
if (!goods) {
|
||||
return <div>加载中...</div>;
|
||||
// 重新加载数据
|
||||
const handleRetry = () => {
|
||||
loadAllData()
|
||||
}
|
||||
|
||||
// 错误状态
|
||||
if (error) {
|
||||
return (
|
||||
<View className="order-confirm-page">
|
||||
<View className="error-state">
|
||||
<Text className="error-text">{error}</Text>
|
||||
<Button onClick={handleRetry}>重新加载</Button>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
if (loading || !goods) {
|
||||
return <OrderConfirmSkeleton/>
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -120,7 +299,7 @@ const OrderConfirm = () => {
|
||||
<View className={'font-medium text-sm flex items-center w-full'}>
|
||||
<View
|
||||
style={{width: '64%'}}>{address.province} {address.city} {address.region} {address.address}</View>
|
||||
<ArrowRight className={'text-gray-500'} size={14}/>
|
||||
<ArrowRight className={'text-gray-400'} size={14}/>
|
||||
</View>
|
||||
</Space>
|
||||
<View className={'pt-1 pb-3 text-gray-500'}>{address.name} {address.phone}</View>
|
||||
@@ -141,20 +320,37 @@ const OrderConfirm = () => {
|
||||
|
||||
<CellGroup>
|
||||
<Cell key={goods.goodsId}>
|
||||
<Space>
|
||||
<View className={'flex w-full justify-between gap-3'}>
|
||||
<View>
|
||||
<Image src={goods.image} mode={'aspectFill'} style={{
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
}} lazyLoad={false}/>
|
||||
<View className={'flex flex-col'}>
|
||||
<View className={'font-medium w-full'}>{goods.name}</View>
|
||||
<View className={'number text-gray-400 text-sm py-2'}>80g/袋</View>
|
||||
<Space className={'flex justify-start items-center'}>
|
||||
<View className={'text-red-500'}>￥{goods.price}</View>
|
||||
<View className={'text-gray-500 text-sm'}>x 1</View>
|
||||
</Space>
|
||||
</View>
|
||||
</Space>
|
||||
<View className={'flex flex-col w-full'} style={{width: '100%'}}>
|
||||
<Text className={'font-medium w-full'}>{goods.name}</Text>
|
||||
<Text className={'number text-gray-400 text-sm py-2'}>80g/袋</Text>
|
||||
<View className={'flex justify-between items-center'}>
|
||||
<Text className={'text-red-500'}>￥{goods.price}</Text>
|
||||
<View className={'flex flex-col items-end gap-1'}>
|
||||
<ConfigProvider theme={customTheme}>
|
||||
<InputNumber
|
||||
value={quantity}
|
||||
min={1}
|
||||
max={goods.stock || 999}
|
||||
disabled={goods.canBuyNumber != 0}
|
||||
onChange={handleQuantityChange}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
{goods.stock !== undefined && (
|
||||
<Text className={'text-xs text-gray-400'}>
|
||||
库存 {goods.stock} 件
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Cell>
|
||||
</CellGroup>
|
||||
|
||||
@@ -172,30 +368,46 @@ const OrderConfirm = () => {
|
||||
</CellGroup>
|
||||
|
||||
<CellGroup>
|
||||
<Cell title={`商品总价（共1件）`} extra={<View className={'font-medium'}>{'￥' + goods.price}</View>}/>
|
||||
<Cell title={'优惠券'} extra={(
|
||||
<Cell
|
||||
title={`商品总价（共${quantity}件）`}
|
||||
extra={<View className={'font-medium'}>￥{getGoodsTotal().toFixed(2)}</View>}
|
||||
/>
|
||||
<Cell
|
||||
title={'优惠券'}
|
||||
extra={(
|
||||
<View className={'flex justify-between items-center'}>
|
||||
<View className={'text-red-500 text-sm mr-1'}>-￥0.00</View>
|
||||
<View className={'text-red-500 text-sm mr-1'}>
|
||||
{selectedCoupon ? `-￥${getCouponDiscount().toFixed(2)}` : '暂未使用'}
|
||||
</View>
|
||||
<ArrowRight className={'text-gray-400'} size={14}/>
|
||||
</View>
|
||||
)}/>
|
||||
)}
|
||||
onClick={() => setCouponVisible(true)}
|
||||
/>
|
||||
<Cell title={'配送费'} extra={'￥0.00'}/>
|
||||
<Cell extra={(
|
||||
<View className={'flex items-end gap-2'}>
|
||||
<Text>已优惠</Text>
|
||||
<Text className={'text-red-500 text-sm'}>￥0.0</Text>
|
||||
<Text className={'ml-2'}>小计</Text>
|
||||
<Text className={'text-gray-700 font-bold'}>￥{goods.price}</Text>
|
||||
<Text className={'text-red-500 text-sm'}>￥{getCouponDiscount().toFixed(2)}</Text>
|
||||
<Text className={'ml-2'}>实付</Text>
|
||||
<Text className={'text-gray-700 font-bold'} style={{fontSize: '18px'}}>￥{getFinalPrice().toFixed(2)}</Text>
|
||||
</View>
|
||||
)}/>
|
||||
</CellGroup>
|
||||
|
||||
<CellGroup>
|
||||
<Cell title={'订单备注'} extra={(
|
||||
<Input placeholder={'选填，请先和商家协商一致'} style={{padding: '0'}}/>
|
||||
<Input
|
||||
placeholder={'选填，请先和商家协商一致'}
|
||||
style={{padding: '0'}}
|
||||
value={orderRemark}
|
||||
onChange={(value) => setOrderRemark(value)}
|
||||
maxLength={100}
|
||||
/>
|
||||
)}/>
|
||||
</CellGroup>
|
||||
|
||||
{/* 支付方式选择 */}
|
||||
<ActionSheet
|
||||
visible={isVisible}
|
||||
options={payments}
|
||||
@@ -203,18 +415,85 @@ const OrderConfirm = () => {
|
||||
onCancel={() => setIsVisible(false)}
|
||||
/>
|
||||
|
||||
{/* 优惠券选择弹窗 */}
|
||||
<Popup
|
||||
visible={couponVisible}
|
||||
position="bottom"
|
||||
onClose={() => setCouponVisible(false)}
|
||||
style={{height: '60vh'}}
|
||||
>
|
||||
<View className="coupon-popup">
|
||||
<View className="coupon-popup__header">
|
||||
<Text className="coupon-popup__title">选择优惠券</Text>
|
||||
<Button
|
||||
size="small"
|
||||
fill="none"
|
||||
onClick={() => setCouponVisible(false)}
|
||||
>
|
||||
关闭
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
<View className="coupon-popup__content">
|
||||
{selectedCoupon && (
|
||||
<View className="coupon-popup__current">
|
||||
<Text className="coupon-popup__current-title">当前使用</Text>
|
||||
<View className="coupon-popup__current-item">
|
||||
<Text>{selectedCoupon.title} -￥{selectedCoupon.amount}</Text>
|
||||
<Button size="small" onClick={handleCouponCancel}>取消使用</Button>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<CouponList
|
||||
title="可用优惠券"
|
||||
coupons={availableCoupons.filter(coupon => {
|
||||
const total = getGoodsTotal()
|
||||
return !coupon.minAmount || total >= coupon.minAmount
|
||||
})}
|
||||
layout="vertical"
|
||||
onCouponClick={handleCouponSelect}
|
||||
/>
|
||||
|
||||
<CouponList
|
||||
title="不可用优惠券"
|
||||
coupons={availableCoupons.filter(coupon => {
|
||||
const total = getGoodsTotal()
|
||||
return coupon.minAmount && total < coupon.minAmount
|
||||
}).map(coupon => ({...coupon, status: 2}))}
|
||||
layout="vertical"
|
||||
showEmpty={false}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
|
||||
<Gap height={50}/>
|
||||
|
||||
<div className={'fixed z-50 bg-white w-full bottom-0 left-0 pt-4 pb-10'} style={{
|
||||
boxShadow: '0 -2px 4px 0 rgba(0,0,0,0.10)'
|
||||
}}>
|
||||
<View className={'btn-bar flex justify-between items-center'}>
|
||||
<div className={'flex justify-center items-center mx-4'}>
|
||||
<div className={'flex flex-col justify-center items-start mx-4'}>
|
||||
<View className={'flex items-center gap-2'}>
|
||||
<span className={'total-price text-sm text-gray-500'}>实付金额：</span>
|
||||
<span className={'text-red-500 text-xl font-bold'}>￥{goods.price}</span>
|
||||
<span className={'text-red-500 text-xl font-bold'}>￥{getFinalPrice().toFixed(2)}</span>
|
||||
</View>
|
||||
{selectedCoupon && (
|
||||
<View className={'text-xs text-gray-400'}>
|
||||
已优惠 ￥{getCouponDiscount().toFixed(2)}
|
||||
</View>
|
||||
)}
|
||||
</div>
|
||||
<div className={'buy-btn mx-4'}>
|
||||
<Button type="success" size="large" onClick={() => onPay(goods)}>立即付款</Button>
|
||||
<Button
|
||||
type="success"
|
||||
size="large"
|
||||
loading={payLoading}
|
||||
onClick={() => onPay(goods)}
|
||||
>
|
||||
{payLoading ? '支付中...' : '立即付款'}
|
||||
</Button>
|
||||
</div>
|
||||
</View>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user