短信验证调试成功

apps/h5-user/src/pages/OrderDetailPage.tsx

@@ -4,6 +4,7 @@ import AppImage from '@dukang/shared-ui/AppImage';
 import { request } from '../lib/api';
 import { buildOrderAddressSelectUrl } from '../lib/navigation';
 import { STITCH_ORDER_PRODUCT_IMAGE } from '../lib/order-images';
+import ContactCustomerSheet from '../components/ContactCustomerSheet';
 
 type OrderItem = {
   productName: string;
@@ -145,7 +146,11 @@ export default function OrderDetailPage() {
   const productImage = item?.productImage || STITCH_ORDER_PRODUCT_IMAGE;
   const canEditAddress = order ? EDITABLE_STATUSES.has(order.status) : false;
   const canConfirmReceive = order?.status === 'PENDING_RECEIVE' && !isReship;
-  const canRefund = order && ['PENDING_SHIP', 'PENDING_RECEIVE', 'COMPLETED', 'OUT_WAREHOUSE', 'SHIPPING'].includes(order.status);
+  const canPay = order?.status === 'PENDING_PAY' && !isReship;
+  const canRefund =
+    order &&
+    !canPay &&
+    ['PENDING_SHIP', 'PENDING_RECEIVE', 'COMPLETED', 'OUT_WAREHOUSE', 'SHIPPING'].includes(order.status);
   const productTotal = Number(order?.productAmount ?? order?.payAmount ?? 0);
   const freightTotal = Number(order?.freightAmount ?? 0);
 
@@ -402,6 +407,16 @@ export default function OrderDetailPage() {
             申请退款
           </button>
         )}
+        {canPay && (
+          <button
+            type="button"
+            className="order-detail-action-primary"
+            onClick={() => navigate(`/pay?orderId=${order.id}`)}
+          >
+            <span className="material-symbols-outlined">payments</span>
+            去付款 ¥{formatMoney(Number(order.payAmount))}
+          </button>
+        )}
         {canConfirmReceive && (
           <button
             type="button"
@@ -416,18 +431,11 @@ export default function OrderDetailPage() {
       </footer>
 
       {showCs && (
-        <div className="modal-overlay" onClick={() => setShowCs(false)}>
-          <div className="modal-sheet" onClick={(e) => e.stopPropagation()}>
-            <div className="modal-grabber" />
-            <h3 className="headline-md" style={{ marginBottom: 12 }}>联系客服</h3>
-            <p className="text-variant body-md" style={{ marginBottom: 16 }}>
-              preV1 Mock：客服工作时间 9:00-18:00，请描述订单号 {order.orderNo}
-            </p>
-            <button type="button" className="btn btn-primary btn-block" onClick={() => setShowCs(false)}>
-              知道了
-            </button>
-          </div>
-        </div>
+        <ContactCustomerSheet
+          orderId={order.id}
+          orderNo={order.orderNo}
+          onClose={() => setShowCs(false)}
+        />
       )}
     </div>
   );