From dfbcbcf61543c459fd832f34df874cdeb4a21179 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Tue, 14 Jul 2026 22:15:31 +0800 Subject: [PATCH] =?UTF-8?q?feat(payment):=20=E6=96=B0=E5=A2=9E=E7=BA=BF?= =?UTF-8?q?=E4=B8=8B=E4=BB=98=E6=AC=BE=E6=96=B9=E5=BC=8F=E5=8F=8A=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E8=AE=A2=E5=8D=95=E7=8A=B6=E6=80=81=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 支付页面新增线下付款选项，支持微信转账付款方式 - 订单流程新增线下付款待确认（offline_pending）阶段 - 订单详情与订单卡片显示线下付款状态及提示信息 - 支付接口和模型增加线下付款支付方式（payType=9）支持 - 订单列表页区分线下付款待确认与待收款状态 - 地址编辑页修复智能识别按钮无法点击问题，调整布局避免被Textarea遮挡 --- .workbuddy/memory/2026-07-14.md | 11 ++++ src/api/shop/shopOrder/model/index.ts | 4 +- src/components/common/OrderCard/index.tsx | 3 + src/pages/order/detail.tsx | 34 +++++++++++- src/pages/shop/checkout.tsx | 67 ++++++++++++++++------- src/pages/store/orders/index.tsx | 8 ++- src/pages/user/address-edit.tsx | 29 +++++----- 7 files changed, 116 insertions(+), 40 deletions(-) diff --git a/.workbuddy/memory/2026-07-14.md b/.workbuddy/memory/2026-07-14.md index 9d3902b..aef5500 100644 --- a/.workbuddy/memory/2026-07-14.md +++ b/.workbuddy/memory/2026-07-14.md @@ -292,3 +292,14 @@ adapter `/list` 接口忽略分页，一次返回全部收藏；前端 `listShop - 删除了 `handleContactService` 函数和跳转到 `/pages/user/customer-service/index` 的逻辑 - **注意：`open-type="contact"` 必须真机预览测试，开发者工具中点击无反应** - `pages/user/customer-service/index` 页面保留但不再从商品详情页跳转 + +## 地址编辑页识别按钮点不中修复（2026-07-14） + +### 问题 +`pages/user/address-edit` 智能识别区的「识别」按钮点击无反应。 + +### 根因 +按钮使用 `absolute right-2 bottom-2` 定位叠在 `Textarea` 上方。微信小程序中 `Textarea` 是原生组件，层级高于普通 `View`，会遮挡 `absolute` 叠加的按钮，`z-index` 也无效，导致按钮点击事件被 Textarea 拦截。 + +### 修改 +- **`src/pages/user/address-edit.tsx`**：识别区布局从 `relative` + `absolute` 叠加改为 flex 纵向布局——Textarea 在上，识别按钮 `flex justify-end mt-2` 在下方右对齐。去掉 `relative` class，按钮不再叠加在 Textarea 上。 diff --git a/src/api/shop/shopOrder/model/index.ts b/src/api/shop/shopOrder/model/index.ts index 2866955..06d10a8 100644 --- a/src/api/shop/shopOrder/model/index.ts +++ b/src/api/shop/shopOrder/model/index.ts @@ -97,7 +97,7 @@ export interface ShopOrder { formId?: number; // 支付的用户id payUserId?: number; - // 支付方式：0余额支付, 1微信支付, 2支付宝, 3银联, 4现金, 5POS机, 6免费, 7积分支付, 8货到付款 + // 支付方式：0余额支付, 1微信支付, 2支付宝, 3银联, 4现金, 5POS机, 6免费, 7积分支付, 8货到付款, 9线下付款 payType?: number; // 代付支付方式 friendPayType?: number; @@ -187,7 +187,7 @@ export interface OrderCreateRequest { warehouseId?: number; // 收货地址ID addressId?: number; - // 支付方式：0余额支付, 1微信支付, 2支付宝, 3银联, 4现金, 5POS机, 6免费, 7积分支付, 8货到付款 + // 支付方式：0余额支付, 1微信支付, 2支付宝, 3银联, 4现金, 5POS机, 6免费, 7积分支付, 8货到付款, 9线下付款 payType: number; // 支付状态（货到付款由后端自动设置，前端无需传递） payStatus?: boolean; diff --git a/src/components/common/OrderCard/index.tsx b/src/components/common/OrderCard/index.tsx index 1dd0c8f..e9a1565 100644 --- a/src/components/common/OrderCard/index.tsx +++ b/src/components/common/OrderCard/index.tsx @@ -14,6 +14,7 @@ interface OrderCardProps { const getCardStatus = (order: ShopOrder): { text: string; color: string } => { const { payStatus, deliveryStatus, orderStatus, payType } = order const isCod = payType === 8 // 货到付款 + const isOffline = payType === 9 // 线下付款 if (orderStatus === 2) return { text: '已取消', color: '#999' } if (orderStatus === 3) return { text: '取消中', color: '#ff7d00' } @@ -24,6 +25,8 @@ const getCardStatus = (order: ShopOrder): { text: string; color: string } => { // 终态：orderStatus=1 必须最先判断，盖过 deliveryStatus/payStatus if (orderStatus === 1) return { text: '已完成', color: '#0e932e' } + // 线下付款·待确认：下单后等待商家确认收款 + if (isOffline && !payStatus) return { text: '线下付款·待确认', color: '#ff7d00' } // 货到付款：payStatus=true 直接进入待发货 if (!payStatus && !isCod) return { text: '待付款', color: '#ee0a24' } if (isCod && deliveryStatus === 10) return { text: '货到付款·待发货', color: '#4b9cf5' } diff --git a/src/pages/order/detail.tsx b/src/pages/order/detail.tsx index d2eb6c0..11b3786 100644 --- a/src/pages/order/detail.tsx +++ b/src/pages/order/detail.tsx @@ -24,6 +24,7 @@ const PAY_TYPE_MAP: Record = { 6: '免费', 7: '积分支付', 8: '货到付款', + 9: '线下付款', } // 发票状态映射 @@ -44,6 +45,7 @@ const DELIVERY_STATUS_MAP: Record = { const getOrderDisplayStatus = (order: ShopOrder): { title: string; bgColor: string; subtitle: string } => { const { payStatus, deliveryStatus, orderStatus, payType } = order const isCod = payType === 8 // 货到付款 + const isOffline = payType === 9 // 线下付款 // 退款/取消相关状态 if (orderStatus === OrderStatus.Cancelled) { @@ -63,9 +65,12 @@ const getOrderDisplayStatus = (order: ShopOrder): { title: string; bgColor: stri } // 正常订单流程 - if (!payStatus && !isCod) { + if (!payStatus && !isCod && !isOffline) { return { bgColor: '#ff7d00', title: '待付款', subtitle: '请尽快完成支付' } } + if (isOffline && !payStatus) { + return { bgColor: '#ff7d00', title: '线下付款·待确认', subtitle: '请通过微信转账完成付款，商家确认后发货' } + } if (isCod && !payStatus) { return { bgColor: '#4b9cf5', title: '货到付款·待发货', subtitle: '送达时支付' } } @@ -87,17 +92,20 @@ const getOrderDisplayStatus = (order: ShopOrder): { title: string; bgColor: stri } /** 根据订单状态判断当前操作阶段 */ -type OrderPhase = 'unpaid' | 'unshipped' | 'shipped' | 'completed' | 'cancelled' | 'refund' +type OrderPhase = 'unpaid' | 'offline_pending' | 'unshipped' | 'shipped' | 'completed' | 'cancelled' | 'refund' const getOrderPhase = (order: ShopOrder): OrderPhase => { const { payStatus, deliveryStatus, orderStatus, payType } = order const isCod = payType === 8 // 货到付款 + const isOffline = payType === 9 // 线下付款 // 退款/取消 if ([OrderStatus.Cancelled, OrderStatus.Cancelling, OrderStatus.RefundSuccess, OrderStatus.RefundApply, OrderStatus.ClientRefundApply, OrderStatus.RefundRejected].includes(orderStatus as OrderStatus)) { return orderStatus === OrderStatus.Cancelled || orderStatus === OrderStatus.RefundSuccess ? 'cancelled' : 'refund' } + // 线下付款且未确认收款：等待商家确认，不显示"立即支付"按钮 + if (isOffline && !payStatus) return 'offline_pending' // 货到付款订单：payStatus=true 但还未实际付款，直接进入 unshipped 阶段（不需要"立即支付"按钮） if (!payStatus && !isCod) return 'unpaid' if (deliveryStatus === 10) return 'unshipped' @@ -445,6 +453,28 @@ const OrderDetailPage: React.FC = () => { )} + {/* 线下付款·待确认: 取消 + 联系客服 */} + {phase === 'offline_pending' && ( + <> + + + + )} + {/* 待发货: 退款 + 联系客服 */} {phase === 'unshipped' && ( <> diff --git a/src/pages/shop/checkout.tsx b/src/pages/shop/checkout.tsx index c9a69b9..02d7743 100644 --- a/src/pages/shop/checkout.tsx +++ b/src/pages/shop/checkout.tsx @@ -125,7 +125,13 @@ const CheckoutPage: React.FC = () => { const [rushBuyProducts, setRushBuyProducts] = useState([]) // 支付方式相关状态 - const [payType, setPayType] = useState(8) // 8: 货到付款 + const [payType, setPayType] = useState(8) // 8: 货到付款（默认），9: 线下付款 + + // 支付方式选项 + const PAYMENT_OPTIONS = [ + { id: 8, name: '货到付款', desc: '送达时支付', icon: '货', bgColor: '#f0fdf4', iconBg: '#dbeafe', iconColor: '#2563eb', borderColor: '#22c55e' }, + { id: 9, name: '线下付款', desc: '微信转账，商家确认后发货', icon: '线', bgColor: '#fffbeb', iconBg: '#fef3c7', iconColor: '#d97706', borderColor: '#f59e0b' }, + ] // 从本地存储获取立即购买的数据 const buyNowItems = useMemo(() => { @@ -263,7 +269,8 @@ const CheckoutPage: React.FC = () => { specInfo: item.skuSpec || item.sku?.sku || item.product?.specName, })) - // 货到付款：后端会自动设置 payStatus=true，无需前端传递 payStatus/payTime + // 货到付款(8)：后端会自动设置 payStatus=true，无需前端传递 payStatus/payTime + // 线下付款(9)：后端会设置 payStatus=false，等待商家确认收款后才设为 true const orderParams: OrderCreateRequest = { goodsItems, addressId: defaultAddress.id, @@ -441,25 +448,45 @@ const CheckoutPage: React.FC = () => { 支付方式 - {/* 货到付款 */} - - - 货 + {PAYMENT_OPTIONS.map((option) => { + const selected = payType === option.id + return ( + setPayType(option.id)} + > + + {option.icon} + + + {option.name} + {option.desc} + + + {selected && ( + + )} + + + ) + })} + + {/* 线下付款选中时显示提示 */} + {payType === 9 && ( + + + 请下单后通过微信转账付款，商家确认收款后发货。 + - - 货到付款 - 送达时支付 - - - - - + )} {/* 凑单推荐 */} diff --git a/src/pages/store/orders/index.tsx b/src/pages/store/orders/index.tsx index 43b0b6b..51744d4 100644 --- a/src/pages/store/orders/index.tsx +++ b/src/pages/store/orders/index.tsx @@ -92,7 +92,11 @@ function parseSendEndImg(raw: string): string[] { function getStatusText(order: ShopOrder): string { if (order.orderStatus === 1) return '已完成' if (order.orderStatus === 2) return '已关闭' - if (order.payStatus === false || order.payStatus === null) return '待收款' + if (order.payStatus === false || order.payStatus === null) { + // 线下付款待确认收款 + if (order.payType === 9) return '待确认收款' + return '待收款' + } if (order.payStatus && order.deliveryStatus === 10) return '待发货' if (order.payStatus && order.deliveryStatus === 20) return '待收货' return '进行中' @@ -413,7 +417,7 @@ export default function StoreOrdersPage() { {/* 金额 + 支付方式 */} - {order.payType === 0 ? '货到付款' : order.payType === 4 ? '现金支付' : '货到付款'} + {order.payType === 8 ? '货到付款' : order.payType === 9 ? '线下付款' : order.payType === 4 ? '现金支付' : order.payType === 1 ? '微信支付' : '其他'} 实付：¥{order.payPrice || order.totalPrice} diff --git a/src/pages/user/address-edit.tsx b/src/pages/user/address-edit.tsx index e06ccbe..51c47cf 100644 --- a/src/pages/user/address-edit.tsx +++ b/src/pages/user/address-edit.tsx @@ -465,7 +465,7 @@ const AddressEditPage: React.FC = () => { {/* 地址智能识别区 */}