<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Refund Request</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="refund-container">
<div class="refund-header">
<div class="header-title">
<div class="header-icon">
<i class="fas fa-exchange-alt"></i>
</div>
<div class="header-text">
<h1>Partial Refund</h1>
</div>
</div>
<button class="close-btn" id="closeRefundPopup">
<i class="fas fa-times"></i>
</button>
</div>
<div class="top-toggle">
<div class="segmented" role="tablist" aria-label="Refund Toggle">
<button class="toggle-btn active" id="btnItems" role="tab" aria-selected="true" tabindex="0">
<i class="fas fa-box-open phone_hide"></i><span>Refund for Item(s)</span>
</button>
<button class="toggle-btn" id="btnFees" role="tab" aria-selected="false" tabindex="0">
<i class="fas fa-receipt phone_hide"></i><span>Refund Fees & Shipping</span>
</button>
</div>
</div>
<div class="main-content">
<!-- 操作指引 -->
<div class="operation-tip fade-in select-product-tip" style="margin: 20px 0px;">
<i class="fas fa-info-circle phone_hide"></i>
<div class="operation-tip-content">
To delete a product, select it and click <span class="action-name">"Delete"</span>. To delete multiple products, select them and click <span class="action-name">"Batch Delete"</span>.
</div>
</div>
<!-- 固定顶部标题和按钮 -->
<div class="sticky-header">
<div class="section-title">
<!-- <div class="section-title-left">
<i class="fas fa-box-open"></i>
<span>Select Products for Refund</span>
</div> -->
<!-- 桌面端按钮容器 -->
<div class="section-title-actions">
<div class="select-all-container">
<div class="select-all-checkbox" id="selectAllCheckbox">
<i class="fas fa-check"></i>
</div>
<span class="select-all-text">Select All</span>
</div>
<button class="batch-delete-btn" id="batchDeleteBtn" disabled>
<i class="fas fa-trash"></i>
<span>Batch Delete</span>
</button>
</div>
</div>
</div>
<!-- 可滚动产品列表 -->
<div class="scrollable-products-container" id="productsScroll">
<div class="products-section">
<!-- 产品1 -->
<div class="product-card-optimized fade-in" data-product-id="1" data-price="42.08" data-customization-fee="8.42">
<div class="product-content">
<div class="product-main">
<div class="product-select-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="product-image-container">
<img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt="Customized Product" class="product-image">
</div>
<div class="product-details">
<div class="product-name">
Custom Engraved Crystal Heart with LED Base
<span class="product-status-badge">Producing</span>
<span class="product-qty-inline">×1</span>
</div>
<div class="product-info-grid">
<div class="info-item col-left row-1">
<span class="info-label">Item No.:</span>
<span class="info-value">PROD-902601061</span>
</div>
<div class="info-item col-center row-1 qty-span">
<span class="info-value product-qty">×1</span>
</div>
<div class="info-item col-left row-2">
<span class="info-label">Unique Code:</span>
<span class="info-value">X251226113310144</span>
</div>
<div class="info-item col-right row-1">
<span class="info-label">Unit Price</span>
<span class="info-value product-price">$42.08</span>
</div>
<div class="info-item col-right row-2">
<span class="info-label">Customization Fee</span>
<span class="info-value">-$8.42</span>
</div>
</div>
</div>
</div>
<div class="bundle-row">
<button class="bundle-toggle" type="button" data-collapsed-text="View Included Items" data-expanded-text="Hide Included Items">
<span class="label">View Included Items</span>
<span class="badge">2</span>
<span class="caret"><i class="fas fa-chevron-down"></i></span>
</button>
</div>
<div class="sub-products">
<div class="sub-product-item">
<div class="sub-product-left">
<div class="sub-product-thumb">
<img src="https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Bundle item">
</div>
<div class="sub-product-info">
<div class="sub-product-title">Product <span class="product-qty-inline">×1</span><span class="product-status-badge">Producing</span></div>
<div class="product-info-grid">
<div class="info-item col-left row-1">
<span class="info-label">Item No.:</span>
<span class="info-value">ADD-LED-01</span>
</div>
<div class="info-item col-right row-3 qty-span">
<span class="info-value product-qty">×1</span>
</div>
<div class="info-item col-left row-2">
<span class="info-label">Unique Code:</span>
<span class="info-value">SUB-LED-001</span>
</div>
<!-- <div class="info-item col-right row-1">
<span class="info-label">Unit Price</span>
<span class="info-value">$12.00</span>
</div>
<div class="info-item col-right row-2">
<span class="info-label">Customization Fee</span>
<span class="info-value">-$2.40</span>
</div> -->
</div>
</div>
</div>
</div>
<div class="sub-product-item">
<div class="sub-product-left">
<div class="sub-product-thumb">
<img src="https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Bundle item">
</div>
<div class="sub-product-info">
<div class="sub-product-title">Product <span class="product-qty-inline">×1</span><span class="product-status-badge">Producing</span></div>
<div class="product-info-grid">
<div class="info-item col-left row-1">
<span class="info-label">Item No.:</span>
<span class="info-value">PKG-GIFT-02</span>
</div>
<div class="info-item col-right row-3 qty-span">
<span class="info-value product-qty">×1</span>
</div>
<div class="info-item col-left row-2">
<span class="info-label">Unique Code:</span>
<span class="info-value">SUB-PKG-002</span>
</div>
<!-- <div class="info-item col-right row-1">
<span class="info-label">Unit Price</span>
<span class="info-value">$6.50</span>
</div>
<div class="info-item col-right row-2">
<span class="info-label">Customization Fee</span>
<span class="info-value">-$1.30</span>
</div> -->
</div>
</div>
</div>
</div>
</div>
<div class="product-actions">
<div class="product-refund-amount">
<span class="label">Refund Amount</span>
<span class="value refund-amount-value">$0.00</span>
</div>
<button class="delete-btn"><i class="fas fa-trash"></i><span>Delete</span></button>
</div>
</div>
</div>
<!-- 产品2 -->
<div class="product-card-optimized fade-in" data-product-id="2" data-price="28.50" data-customization-fee="5.70">
<div class="product-content">
<div class="product-main">
<div class="product-select-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="product-image-container">
<img src="https://images.unsplash.com/photo-1535585209827-a15fcdbc4c2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt="Personalized Jewelry" class="product-image">
</div>
<div class="product-details">
<div class="product-name">
Personalized Silver Necklace with Name Engraving
<span class="product-status-badge">Producing</span>
<span class="product-qty-inline">×1</span>
</div>
<div class="product-info-grid">
<div class="info-item col-left row-1">
<span class="info-label">Item No.:</span>
<span class="info-value">PROD-902601062</span>
</div>
<div class="info-item col-center row-1 qty-span">
<span class="info-value product-qty">×1</span>
</div>
<div class="info-item col-left row-2">
<span class="info-label">Unique Code:</span>
<span class="info-value">X251226113310145</span>
</div>
<div class="info-item col-right row-1">
<span class="info-label">Unit Price</span>
<span class="info-value product-price">$28.50</span>
</div>
<div class="info-item col-right row-2">
<span class="info-label">Customization Fee</span>
<span class="info-value">-$5.70</span>
</div>
</div>
</div>
</div>
<!-- <div class="bundle-row">
<button class="bundle-toggle" type="button" data-collapsed-text="View Included Items" data-expanded-text="Hide Included Items">
<span class="label">View Included Items</span>
<span class="badge">2</span>
<span class="caret"><i class="fas fa-chevron-down"></i></span>
</button>
</div> -->
<div class="sub-products">
<div class="sub-product-item">
<div class="sub-product-left">
<div class="sub-product-thumb">
<img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Bundle item">
</div>
<div class="sub-product-info">
<div class="sub-product-title">Engraved Pendant Charm <span class="product-qty-inline">×1</span><span class="product-status-badge">Producing</span></div>
<div class="product-info-grid">
<div class="info-item col-left row-1">
<span class="info-label">Item No.:</span>
<span class="info-value">CHM-PND-09</span>
</div>
<div class="info-item col-right row-3 qty-span">
<span class="info-value product-qty">×1</span>
</div>
<div class="info-item col-left row-2">
<span class="info-label">Unique Code:</span>
<span class="info-value">SUB-CHM-009</span>
</div>
<!-- <div class="info-item col-right row-1">
<span class="info-label">Unit Price</span>
<span class="info-value">$9.90</span>
</div>
<div class="info-item col-right row-2">
<span class="info-label">Customization Fee</span>
<span class="info-value">-$1.98</span>
</div> -->
</div>
</div>
</div>
</div>
<div class="sub-product-item">
<div class="sub-product-left">
<div class="sub-product-thumb">
<img src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Bundle item">
</div>
<div class="sub-product-info">
<div class="sub-product-title">Polishing Service <span class="product-qty-inline">×1</span><span class="product-status-badge">Producing</span></div>
<div class="product-info-grid">
<div class="info-item col-left row-1">
<span class="info-label">Item No.:</span>
<span class="info-value">SRV-PLS-03</span>
</div>
<div class="info-item col-right row-3 qty-span">
<span class="info-value product-qty">×1</span>
</div>
<div class="info-item col-left row-2">
<span class="info-label">Unique Code:</span>
<span class="info-value">SUB-PLS-003</span>
</div>
<!-- <div class="info-item col-right row-1">
<span class="info-label">Unit Price</span>
<span class="info-value">$4.60</span>
</div>
<div class="info-item col-right row-2">
<span class="info-label">Customization Fee</span>
<span class="info-value">-$0.92</span>
</div> -->
</div>
</div>
</div>
</div>
</div>
<div class="product-actions">
<div class="product-refund-amount">
<span class="label">Refund Amount</span>
<span class="value refund-amount-value">$0.00</span>
</div>
<button class="delete-btn"><i class="fas fa-trash"></i><span>Delete</span></button>
</div>
</div>
</div>
<!-- 产品3 -->
<div class="product-card-optimized fade-in" data-product-id="3" data-price="35.99" data-customization-fee="7.20">
<div class="product-content">
<div class="product-main">
<div class="product-select-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="product-image-container">
<img src="https://images.unsplash.com/photo-1545235617-9465d2a55698?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt="Custom Photo Frame" class="product-image">
</div>
<div class="product-details">
<div class="product-name">
Custom Wooden Photo Frame with Laser Engraving
<span class="product-status-badge">Producing</span>
<span class="product-qty-inline">×1</span>
</div>
<div class="product-info-grid">
<div class="info-item col-left row-1">
<span class="info-label">Item No.:</span>
<span class="info-value">PROD-902601063</span>
</div>
<div class="info-item col-center row-1 qty-span">
<span class="info-value product-qty">×1</span>
</div>
<div class="info-item col-left row-2">
<span class="info-label">Unique Code:</span>
<span class="info-value">X251226113310146</span>
</div>
<div class="info-item col-right row-1">
<span class="info-label">Unit Price</span>
<span class="info-value product-price">$35.99</span>
</div>
<div class="info-item col-right row-2">
<span class="info-label">Customization Fee</span>
<span class="info-value">-$7.20</span>
</div>
</div>
</div>
</div>
<div class="product-actions">
<div class="product-refund-amount">
<span class="label">Refund Amount</span>
<span class="value refund-amount-value">$0.00</span>
</div>
<button class="delete-btn"><i class="fas fa-trash"></i><span>Delete</span></button>
</div>
</div>
</div>
</div>
</div>
<!-- 退款表单部分 -->
<div class="refund-form-section">
<!-- <div class="sticky-header">
<div class="section-title">
<div class="section-title-left">
<i class="fas fa-clipboard-list"></i>
<span>Refund Details</span>
</div>
</div>
</div> -->
<!-- 删除产品提示 -->
<div class="operation-tip fade-in delete-product-tip" style="display: none; margin: 20px 0px;">
<i class="fas fa-info-circle phone_hide"></i>
<div class="operation-tip-content">
Made-to-Order Personalized Products, changes or cancellations may not be possible once production has started. This includes the specialized design, molding, and shaping tailored to your specifications in the order. If you need to cancel or modify your order during production, a customization fee (also known as a restocking fee) of the item's price will be applied to offset the costs already incurred. </div>
</div>
<!-- 可滚动表单内容 -->
<div class="scrollable-products-container" id="feesScroll">
<div class="form-card fade-in">
<form id="refundForm">
<!-- 退款原因选择 -->
<div class="form-group">
<label class="form-label" for="refundReason">
<i class="fas fa-question-circle"></i> Refund Reason
</label>
<div class="select-wrapper">
<select class="custom-select" id="refundReason" name="refundReason" required>
<option value="">Please choose a reason</option>
<option value="Cancel VIP/Shipping insurance">Cancel VIP/Shipping insurance</option>
<option value="Refund shipping fee">Refund shipping fee</option>
</select>
</div>
</div>
<!-- 动态内容区域 -->
<div id="dynamicContent" class="dynamic-content" style="display: none;">
<!-- 这里会根据选择的退款原因动态显示内容 -->
</div>
<!-- 取消说明 - 包含上传按钮 -->
<div class="form-group">
<label class="form-label" for="cancelInstructions">
<i class="fas fa-edit"></i> Cancel Instructions
</label>
<div class="textarea-wrapper">
<textarea class="custom-textarea" id="cancelInstructions" name="cancelInstructions"
placeholder="Please provide detailed instructions for your cancellation request..."></textarea>
<div class="textarea-footer">
<!-- <div class="textarea-note">
<i class="fas fa-info-circle"></i> Please provide as much detail as possible to help us process your request faster.
</div>
<div class="upload-attachments" id="openUploadModal">
<i class="fas fa-paperclip"></i>
<span>Attach files</span>
</div> -->
<div style="display: flex;"> <div style="margin-bottom: 1rem;width: 50px; margin-left: 1rem;display:flex;align-items: center;cursor:pointer;flex-direction:column;height:50px;border:1px dashed rgba(204, 204, 204, 1);" data-upload-exts="png|jpg|ico|jpeg|zip|rar" data-upload-number="more" data-code="1" data-delete-icon="delete_phone.png" data-customer-upload="change_produce_pic"> <div style="width: 87%;font-size: 0.6rem;line-height: 0.8rem;color: rgba(0, 0, 0, 1);text-align: center;"><img style="margin-top: 15px;width: 15px;" src="https://ordertrack.info/static/web/image/updateimage.png"></div> <input type="hidden" name="change_produce_pic" value=""> </div> </div>
</div>
</div>
<!-- 已上传文件预览缩略图 -->
<div class="attachments-preview" id="attachmentsPreview">
<!-- 已上传文件缩略图会显示在这里 -->
</div>
</div>
<!-- 联系邮箱 -->
<div class="form-group contact-email-group">
<label class="form-label">
<i class="fas fa-envelope"></i> Contact Email
</label>
<div class="email-input-wrapper">
<i class="fas fa-at email-icon"></i>
<input type="email" class="email-input" id="contactEmail" value="[email protected]" readonly>
<button type="button" class="email-edit-btn" id="editEmailBtn">
<i class="fas fa-edit"></i> Edit
</button>
</div>
</div>
<!-- 隐藏表单字段 -->
<div class="hidden-fields">
<input type="hidden" name="delivery_bn" value="902601061004318">
<input type="hidden" name="order_bn" value="577252405279429269">
<input type="hidden" name="original_order_amount" value="42.08">
<input type="hidden" name="the_restocking_fee" value="0">
<input type="hidden" name="amount_total" value="42.08">
<input type="hidden" name="delivery_status" value="LA去信">
<input type="hidden" name="is_vip_fee" value="false">
<input type="hidden" name="order_refund_type" value="发起【暂缓发货-取消协商】">
<input type="hidden" name="is_produce_complete" value="0">
<input type="hidden" name="attachments_data" id="attachmentsData">
</div>
</form>
</div>
</div>
</div>
<!-- 固定底部区域 -->
<div class="sticky-footer">
<!-- 简洁版退款汇总 -->
<div class="refund-summary-simple">
<div class="summary-header">
<h3 class="summary-title">
<i class="fas fa-calculator"></i> Refund Summary
</h3>
<div class="summary-count">
<span id="selectedCount">0</span>/<span id="totalCount">3</span> deleted
</div>
</div>
<div class="summary-details">
<div class="detail-row">
<span class="detail-label">Products</span>
<span class="detail-value" id="totalProductsAmount">$0.00</span>
</div>
<div class="detail-row">
<span class="detail-label">Fees</span>
<span class="detail-value" id="totalCustomizationFees">$0.00</span>
</div>
<div class="detail-row">
<span class="detail-label shipping-fee-label">
Shipping Fee
<span class="info-tooltip" tabindex="0" aria-label="剩余订单金额少于$55，需扣除$7.99运费">
?
<span class="tooltip-content">剩余订单金额少于$55，需扣除$7.99运费</span>
</span>
</span>
<span class="detail-value" id="shippingFeeAmount">$7.99</span>
</div>
<div class="detail-row total">
<span class="detail-label">Total</span>
<span class="detail-value" id="totalRefundAmount">$0.00</span>
</div>
</div>
</div>
<!-- 合并按钮布局 -->
<div class="action-buttons">
<button type="button" class="btn btn-cancel" id="productsCancelBtn">
<i class="fas fa-times"></i> Cancel
</button>
<button type="button" class="btn btn-confirm" id="productsSubmitBtn">
<i class="fas fa-check"></i>Confirm Order
</button>
</div>
</div>
</div>
</div>
<!-- 上传文件模态框 -->
<div class="upload-modal" id="uploadModal">
<div class="upload-modal-content">
<div class="upload-modal-header">
<h3 class="upload-modal-title">
<i class="fas fa-paperclip"></i> Attach Supporting Documents
</h3>
<button class="close-upload-modal" id="closeUploadModal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="upload-modal-body">
<div class="upload-area" id="fileUploadArea">
<i class="fas fa-cloud-upload-alt"></i>
<div class="upload-text">Click to upload or drag and drop</div>
<div class="upload-hint">PNG, JPG, PDF up to 10MB each. Max 5 files.</div>
<input type="file" id="fileUpload" name="fileUpload" style="display: none;" multiple accept="image/*,.pdf">
</div>
<div class="upload-preview" id="uploadPreview">
<!-- 上传的图片预览会显示在这里 -->
</div>
</div>
<div class="upload-modal-footer">
<button type="button" class="modal-btn modal-btn-cancel" id="cancelUploadBtn">
Cancel
</button>
<button type="button" class="modal-btn modal-btn-confirm" id="confirmUploadBtn">
Add Files
</button>
</div>
</div>
</div>
<div class="item-delete-modal" id="itemDeleteModal">
<div class="item-delete-modal-content">
<div class="item-delete-modal-header">
<div class="item-delete-modal-title"><i class="fas fa-trash"></i> Delete Product</div>
<button class="item-delete-close" id="closeItemDeleteModal"><i class="fas fa-times"></i></button>
</div>
<div class="item-delete-modal-body">
<div class="item-delete-premium-note">
<!-- <div class="note-icon"><i class="fas fa-info"></i></div> -->
<div class="note-content">For Made-to-Order Personalized Products, changes or cancellations may not be possible once production has started. This includes the specialized design, molding, and shaping tailored to your specifications in the order. If you need to cancel or modify your order during production, a customization fee (also known as a restocking fee) of the item's price will be applied to offset the costs already incurred.</div>
</div>
<div class="form-group">
<label class="form-label" for="deleteReason"><i class="fas fa-question-circle"></i> Delete Reason</label>
<div class="select-wrapper">
<select class="custom-select" id="deleteReason" required>
<option value="">Please choose a reason</option>
<option value="No longer wanted">No longer wanted</option>
<option value="Incorrect selection">Incorrect product selection</option>
<option value="Address error">Address/phone information error</option>
<option value="Delivery delay">Delivery exceeded deadline</option>
<option value="Out of stock">Out of stock/cannot be produced</option>
<option value="Design mismatch">Engraving/image design does not match</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="deleteInstructions"><i class="fas fa-edit"></i> Delete Instructions</label>
<div class="textarea-wrapper">
<textarea class="custom-textarea" id="deleteInstructions" placeholder="Please provide details for deleting this product..."></textarea>
<div class="textarea-footer">
<!-- <div class="textarea-note">
<i class="fas fa-info-circle"></i> Please provide as much detail as possible to help us process your request faster.
</div>
<div class="upload-attachments">
<i class="fas fa-paperclip"></i>
<span>Attach files</span>
</div> -->
<div style="display: flex;"> <div style="margin-bottom: 1rem;width: 50px; margin-left: 1rem;display:flex;align-items: center;cursor:pointer;flex-direction:column;height:50px;border:1px dashed rgba(204, 204, 204, 1);" data-upload-exts="png|jpg|ico|jpeg|zip|rar" data-upload-number="more" data-code="1" data-delete-icon="delete_phone.png" data-customer-upload="change_produce_pic"> <div style="width: 87%;font-size: 0.6rem;line-height: 0.8rem;color: rgba(0, 0, 0, 1);text-align: center;"><img style="margin-top: 15px;width: 15px;" src="https://ordertrack.info/static/web/image/updateimage.png"></div> <input type="hidden" name="change_produce_pic" value=""> </div> </div>
</div>
</div>
<div class="attachments-preview">
<!-- 已上传文件缩略图会显示在这里 -->
</div>
</div>
</div>
<div class="item-delete-modal-footer">
<button type="button" class="modal-btn" id="cancelDeleteItemBtn">Cancel</button>
<button type="button" class="modal-btn modal-btn-confirm" id="confirmDeleteItemBtn">Confirm Delete</button>
</div>
</div>
</div>
<!-- 批量删除弹窗 -->
<div class="item-delete-modal" id="batchDeleteModal">
<div class="item-delete-modal-content">
<div class="item-delete-modal-header">
<div class="item-delete-modal-title"><i class="fas fa-trash"></i> Delete Selected Products</div>
<button class="item-delete-close" id="closeBatchDeleteModal"><i class="fas fa-times"></i></button>
</div>
<div class="item-delete-modal-body">
<div class="item-delete-premium-note">
<!-- <div class="note-icon"><i class="fas fa-info"></i></div> -->
<div class="note-content">For Made-to-Order Personalized Products, changes or cancellations may not be possible once production has started. This includes the specialized design, molding, and shaping tailored to your specifications in the order. If you need to cancel or modify your order during production, a customization fee (also known as a restocking fee) of the item's price will be applied to offset the costs already incurred.</div>
</div>
<div class="form-group">
<label class="form-label" for="batchDeleteReason"><i class="fas fa-question-circle"></i> Delete Reason</label>
<div class="select-wrapper">
<select class="custom-select" id="batchDeleteReason" required>
<option value="">Please choose a reason</option>
<option value="No longer wanted">No longer wanted</option>
<option value="Incorrect selection">Incorrect product selection</option>
<option value="Address error">Address/phone information error</option>
<option value="Delivery delay">Delivery exceeded deadline</option>
<option value="Out of stock">Out of stock/cannot be produced</option>
<option value="Design mismatch">Engraving/image design does not match</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="batchDeleteInstructions"><i class="fas fa-edit"></i> Delete Instructions</label>
<div class="textarea-wrapper">
<textarea class="custom-textarea" id="batchDeleteInstructions" placeholder="Please provide details for deleting these products..."></textarea>
<div class="textarea-footer">
<!-- <div class="textarea-note">
<i class="fas fa-info-circle"></i> Please provide as much detail as possible to help us process your request faster.
</div>
<div class="upload-attachments">
<i class="fas fa-paperclip"></i>
<span>Attach files</span>
</div> -->
<div style="display: flex;"> <div style="margin-bottom: 1rem;width: 50px; margin-left: 1rem;display:flex;align-items: center;cursor:pointer;flex-direction:column;height:50px;border:1px dashed rgba(204, 204, 204, 1);" data-upload-exts="png|jpg|ico|jpeg|zip|rar" data-upload-number="more" data-code="1" data-delete-icon="delete_phone.png" data-customer-upload="change_produce_pic"> <div style="width: 87%;font-size: 0.6rem;line-height: 0.8rem;color: rgba(0, 0, 0, 1);text-align: center;"><img style="margin-top: 15px;width: 15px;" src="https://ordertrack.info/static/web/image/updateimage.png"></div> <input type="hidden" name="change_produce_pic" value=""> </div> </div>
</div>
</div>
<div class="attachments-preview">
<!-- 已上传文件缩略图会显示在这里 -->
</div>
</div>
</div>
<div class="item-delete-modal-footer">
<button type="button" class="modal-btn" id="cancelBatchDeleteBtn">Cancel</button>
<button type="button" class="modal-btn modal-btn-confirm" id="confirmBatchDeleteBtn">Confirm Delete</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 页面元素
const closeBtn = document.getElementById('closeRefundPopup');
const cancelBtn = document.getElementById('productsCancelBtn');
const submitBtn = document.getElementById('submitBtn');
const refundForm = document.getElementById('refundForm');
const refundReason = document.getElementById('refundReason');
const dynamicContent = document.getElementById('dynamicContent');
const openUploadModalBtns = document.querySelectorAll('.upload-attachments');
const uploadModal = document.getElementById('uploadModal');
const closeUploadModalBtn = document.getElementById('closeUploadModal');
const cancelUploadBtn = document.getElementById('cancelUploadBtn');
const confirmUploadBtn = document.getElementById('confirmUploadBtn');
const fileUploadArea = document.getElementById('fileUploadArea');
const fileUploadInput = document.getElementById('fileUpload');
const uploadPreview = document.getElementById('uploadPreview');
const attachmentsPreviews = document.querySelectorAll('.attachments-preview');
const attachmentsDataInput = document.getElementById('attachmentsData');
const editEmailBtn = document.getElementById('editEmailBtn');
const contactEmail = document.getElementById('contactEmail');
// 产品金额汇总显示元素
const totalProductsAmountEl = document.getElementById('totalProductsAmount');
const totalCustomizationFeesEl = document.getElementById('totalCustomizationFees');
const totalRefundAmountEl = document.getElementById('totalRefundAmount');
const shippingFeeAmountEl = document.getElementById('shippingFeeAmount');
const selectedCountEl = document.getElementById('selectedCount');
const totalCountEl = document.getElementById('totalCount');
const refundSummarySimple = document.querySelector('.refund-summary-simple');
// 产品卡片
const productCards = document.querySelectorAll('.product-card-optimized');
totalCountEl.textContent = productCards.length;
selectedCountEl.textContent = document.querySelectorAll('.product-card-optimized.deleted').length;
const btnItems = document.getElementById('btnItems');
const btnFees = document.getElementById('btnFees');
const segmented = document.querySelector('.segmented');
const productsSection = document.querySelector('.products-section');
const refundFormSection = document.querySelector('.refund-form-section');
const productsScroll = document.getElementById('productsScroll');
const feesScroll = document.getElementById('feesScroll');
// 新增功能元素
const selectAllCheckbox = document.getElementById('selectAllCheckbox');
const batchDeleteBtn = document.getElementById('batchDeleteBtn');
function renderShippingFeeLabel() {
const shippingLabel = document.querySelector('.shipping-fee-label');
if (shippingLabel) {
shippingLabel.innerHTML = `Shipping Fee
<span class="info-tooltip" tabindex="0" aria-label="剩余订单金额少于$55，需扣除$7.99运费">
?
<span class="tooltip-content">剩余订单金额少于$55，需扣除$7.99运费</span>
</span>`;
const shippingRow = shippingLabel.closest('.detail-row');
if (shippingRow) {
shippingRow.style.display = '';
}
}
}
function showItems() {
productsSection.style.display = '';
refundFormSection.style.display = 'none';
document.querySelector('.sticky-header').style.display = '';
if (productsScroll) { productsScroll.style.display = ''; }
if (feesScroll) { feesScroll.style.display = 'none'; }
document.querySelector('.sticky-footer').style.display = '';
btnItems.classList.add('active');
btnFees.classList.remove('active');
btnItems.setAttribute('aria-selected', 'true');
btnFees.setAttribute('aria-selected', 'false');
if (refundSummarySimple) { refundSummarySimple.style.display = ''; }
const productsRow = totalProductsAmountEl ? totalProductsAmountEl.closest('.detail-row') : null;
if (productsRow) { productsRow.style.display = ''; }
// 恢复选择计数显示
document.querySelector('.summary-count').style.display = '';
// 恢复标签文本
const detailLabels = document.querySelectorAll('.detail-label');
if (detailLabels.length >= 4) {
detailLabels[0].textContent = 'Products';
detailLabels[1].textContent = 'Fees';
detailLabels[3].textContent = 'Total';
} else {
// 兼容旧结构
detailLabels[0].textContent = 'Products';
detailLabels[1].textContent = 'Fees';
detailLabels[2].textContent = 'Total';
}
renderShippingFeeLabel();
// 重新计算退款总额
calculateRefundTotal();
// 重新初始化产品卡片事件监听器
initProductCardEvents();
updateDeletedCount();
// 隐藏删除产品提示，显示选择产品提示
document.querySelector('.delete-product-tip').style.display = 'none';
document.querySelector('.select-product-tip').style.display = 'flex';
}
function showFees() {
productsSection.style.display = 'none';
refundFormSection.style.display = '';
document.querySelector('.sticky-header').style.display = 'none';
if (productsScroll) { productsScroll.style.display = 'none'; }
if (feesScroll) { feesScroll.style.display = ''; }
document.querySelector('.sticky-footer').style.display = '';
btnItems.classList.remove('active');
btnFees.classList.add('active');
btnItems.setAttribute('aria-selected', 'false');
btnFees.setAttribute('aria-selected', 'true');
// 显示删除产品提示，隐藏选择产品提示
document.querySelector('.delete-product-tip').style.display = 'flex';
document.querySelector('.select-product-tip').style.display = 'none';
if (refundSummarySimple) { refundSummarySimple.style.display = 'none'; }
}
btnItems.addEventListener('click', showItems);
btnFees.addEventListener('click', showFees);
segmented.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight') { showFees(); }
if (e.key === 'ArrowLeft') { showItems(); }
});
showItems();
// 全选功能
selectAllCheckbox.addEventListener('click', function() {
const isChecked = this.classList.toggle('checked');
const cards = document.querySelectorAll('.product-card-optimized');
cards.forEach(card => {
const checkbox = card.querySelector('.product-select-checkbox');
if (isChecked) {
if (!card.classList.contains('deleted')) {
card.classList.add('selected');
if (checkbox) { checkbox.classList.add('checked'); }
}
} else {
card.classList.remove('selected');
if (checkbox) { checkbox.classList.remove('checked'); }
}
});
calculateRefundTotal();
updateBatchDeleteButton();
updateSelectAllState();
});
// 批量删除功能
batchDeleteBtn.addEventListener('click', function() {
const selectedCards = document.querySelectorAll('.product-card-optimized.selected');
if (selectedCards.length === 0) {
alert('Please select at least one product to delete.');
return;
}
// 批量删除时，记录所有选中的产品ID
const selectedProductIds = Array.from(selectedCards).map(card => card.dataset.productId);
// 打开删除弹窗，显示批量删除信息
openBatchDeleteModal(selectedProductIds);
});
// 更新批量删除按钮状态
function updateBatchDeleteButton() {
const selectedCount = document.querySelectorAll('.product-card-optimized.selected').length;
batchDeleteBtn.disabled = selectedCount === 0;
if (selectedCount > 0) {
batchDeleteBtn.querySelector('span').textContent = `Delete Selected (${selectedCount})`;
} else {
batchDeleteBtn.querySelector('span').textContent = 'Delete Selected';
}
}
// 更新全选状态
function updateSelectAllState() {
const selectedCount = document.querySelectorAll('.product-card-optimized.selected').length;
const totalCount = document.querySelectorAll('.product-card-optimized').length;
if (selectedCount === totalCount && totalCount > 0) {
selectAllCheckbox.classList.add('checked');
} else {
selectAllCheckbox.classList.remove('checked');
}
}
// 更新产品数量显示
function updateProductCount() {
const remainingCount = document.querySelectorAll('.product-card-optimized').length;
document.querySelector('.products-count').textContent = `${remainingCount} Items`;
totalCountEl.textContent = remainingCount;
}
// 数据存储
let uploadedFiles = []; // 存储上传的文件信息
let selectedProductsCount = 0;
let isEmailEditable = false;
// 产品数据（用于动态内容）
const additionalFeesData = {
'vip': { amount: 9.99, name: 'VIP Membership Fee', description: 'Annual VIP membership fee' },
'shippingInsurance': { amount: 4.99, name: 'Shipping Insurance', description: 'Insurance for shipping protection' },
'warranty': { amount: 12.99, name: 'Extended Warranty', description: 'Extended warranty for 2 years' },
'serviceFee': { amount: 2.99, name: 'Service Fee', description: 'Processing and handling fee' }
};
// 价格降价信息
const priceReductionData = {
originalAmount: 42.91,
customizationFee: 8.99,
refundAmount: 33.92
};
// 选中的附加费用
let selectedAdditionalFees = [];
// 关闭页面
function closePage() {
document.querySelector('.refund-container').style.transform = 'translateY(20px)';
document.querySelector('.refund-container').style.opacity = '0';
document.querySelector('.refund-container').style.transition = 'all 0.3s ease';
setTimeout(() => {
alert('Refund request cancelled.');
document.querySelector('.refund-container').style.display = 'none';
}, 300);
}
// 关闭按钮事件
closeBtn.addEventListener('click', closePage);
cancelBtn.addEventListener('click', closePage);
// 计算退款总金额
function calculateRefundTotal() {
let totalProductsAmount = 0;
let totalCustomizationFees = 0;
let selectedProductsCount = 0;
const deletedCount = document.querySelectorAll('.product-card-optimized.deleted').length;
const shippingFee = deletedCount > 0 ? 7.99 : 0;
const cards = document.querySelectorAll('.product-card-optimized');
cards.forEach(card => {
if (card.classList.contains('deleted')) {
const price = parseFloat(card.dataset.price);
const customizationFee = parseFloat(card.dataset.customizationFee);
totalProductsAmount += price;
totalCustomizationFees += customizationFee;
selectedProductsCount++;
}
});
const totalRefundAmount = totalProductsAmount - totalCustomizationFees - shippingFee;
totalProductsAmountEl.textContent = `$${totalProductsAmount.toFixed(2)}`;
totalCustomizationFeesEl.textContent = `$${totalCustomizationFees.toFixed(2)}`;
if (shippingFeeAmountEl) {
shippingFeeAmountEl.textContent = `$${shippingFee.toFixed(2)}`;
const shippingRow = shippingFeeAmountEl.closest('.detail-row');
if (shippingRow) {
shippingRow.style.display = deletedCount > 0 ? '' : 'none';
}
}
totalRefundAmountEl.textContent = `$${totalRefundAmount.toFixed(2)}`;
updateDeletedCount();
totalRefundAmountEl.parentElement.classList.add('pulse-animation');
setTimeout(() => {
totalRefundAmountEl.parentElement.classList.remove('pulse-animation');
}, 500);
}
function updateDeletedCount() {
const deletedCount = document.querySelectorAll('.product-card-optimized.deleted').length;
const totalCount = document.querySelectorAll('.product-card-optimized').length;
selectedCountEl.textContent = deletedCount;
totalCountEl.textContent = totalCount;
}
// 更新Refund Fees & Shipping页面的退款汇总
function updateFeesRefundSummary() {
const originalOrderAmount = 55.32;
const shippingFee = 7.00;
const totalRefundAmount = shippingFee;
// 隐藏选择计数
document.querySelector('.summary-count').style.display = 'none';
// 更新金额显示
totalProductsAmountEl.textContent = `$${originalOrderAmount.toFixed(2)}`;
totalCustomizationFeesEl.textContent = `$${shippingFee.toFixed(2)}`;
const productsRow = totalProductsAmountEl ? totalProductsAmountEl.closest('.detail-row') : null;
if (productsRow) { productsRow.style.display = 'none'; }
if (shippingFeeAmountEl) {
shippingFeeAmountEl.textContent = '';
const shippingRow = shippingFeeAmountEl.closest('.detail-row');
if (shippingRow) {
shippingRow.style.display = 'none';
}
}
totalRefundAmountEl.textContent = `$${totalRefundAmount.toFixed(2)}`;
// 更新标签文本
const detailLabels = document.querySelectorAll('.detail-label');
detailLabels[0].textContent = '';
detailLabels[1].textContent = 'Shipping Fee:';
detailLabels[2].textContent = '';
detailLabels[3].textContent = 'Total Refund Amount:';
// 添加定制产品退款说明
// 已移除定制产品退款说明文本
}
function updatePriceReductionSummary() {
const originalOrderAmount = priceReductionData.originalAmount;
const totalRefundAmount = priceReductionData.refundAmount;
document.querySelector('.summary-count').style.display = 'none';
totalProductsAmountEl.textContent = `$${originalOrderAmount.toFixed(2)}`;
totalCustomizationFeesEl.textContent = `$${priceReductionData.customizationFee.toFixed(2)}`;
const productsRow = totalProductsAmountEl ? totalProductsAmountEl.closest('.detail-row') : null;
if (productsRow) { productsRow.style.display = ''; }
if (shippingFeeAmountEl) {
shippingFeeAmountEl.textContent = '';
const shippingRow = shippingFeeAmountEl.closest('.detail-row');
if (shippingRow) {
shippingRow.style.display = 'none';
}
}
totalRefundAmountEl.textContent = `$${totalRefundAmount.toFixed(2)}`;
const detailLabels = document.querySelectorAll('.detail-label');
detailLabels[0].textContent = 'Original Order Amount:';
detailLabels[1].textContent = 'Customization Fee:';
detailLabels[2].textContent = '';
detailLabels[3].textContent = 'Total Refund Amount:';
}
// 更新VIP/保险取消页面的退款汇总
function updateVIPInsuranceRefundSummary() {
let totalSelectedFees = 0;
let feeNames = [];
// 计算选中的费用总额
selectedAdditionalFees.forEach(feeId => {
totalSelectedFees += additionalFeesData[feeId].amount;
feeNames.push(additionalFeesData[feeId].name);
});
// 隐藏选择计数
document.querySelector('.summary-count').style.display = 'none';
// 更新金额显示
totalProductsAmountEl.textContent = `$${totalSelectedFees.toFixed(2)}`;
totalCustomizationFeesEl.textContent = ``;
if (shippingFeeAmountEl) {
shippingFeeAmountEl.textContent = '';
const shippingRow = shippingFeeAmountEl.closest('.detail-row');
if (shippingRow) {
shippingRow.style.display = 'none';
}
}
totalRefundAmountEl.textContent = `$${totalSelectedFees.toFixed(2)}`;
// 更新标签文本
const detailLabels = document.querySelectorAll('.detail-label');
detailLabels[0].textContent = feeNames.length > 0 ? feeNames.join(' + ') : 'Selected Fees:';
detailLabels[1].textContent = '';
detailLabels[2].textContent = '';
detailLabels[3].textContent = 'Total Refund Amount:';
}
function updateRefundAmountForCard(card) {
if (!card) return;
const price = parseFloat(card.dataset.price);
const customizationFee = parseFloat(card.dataset.customizationFee);
const refundAmountEl = card.querySelector('.refund-amount-value');
if (!refundAmountEl) return;
if (Number.isNaN(price) || Number.isNaN(customizationFee)) {
refundAmountEl.textContent = '$0.00';
return;
}
const refundAmount = price - customizationFee;
refundAmountEl.textContent = `$${refundAmount.toFixed(2)}`;
}
// 初始化产品卡片事件监听器
function initProductCardEvents() {
const productCards = document.querySelectorAll('.product-card-optimized');
productCards.forEach(card => {
// 移除旧的监听器（如果存在）
const newCard = card.cloneNode(true);
card.parentNode.replaceChild(newCard, card);
updateRefundAmountForCard(newCard);
const checkbox = newCard.querySelector('.product-select-checkbox');
newCard.addEventListener('click', function(e) {
if (newCard.classList.contains('deleted')) return;
newCard.classList.toggle('selected');
calculateRefundTotal();
updateBatchDeleteButton();
updateSelectAllState();
});
if (checkbox) {
checkbox.addEventListener('click', function(e) {
e.stopPropagation();
if (newCard.classList.contains('deleted')) return;
newCard.classList.toggle('selected');
calculateRefundTotal();
updateBatchDeleteButton();
updateSelectAllState();
});
}
// 重新绑定DELETE按钮事件
const deleteBtn = newCard.querySelector('.delete-btn');
if (deleteBtn) {
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation();
const card = this.closest('.product-card-optimized');
const pid = card ? card.dataset.productId : null;
openItemDeleteModal(pid);
});
}
const bundleToggle = newCard.querySelector('.bundle-toggle');
const subProducts = newCard.querySelector('.sub-products');
if (subProducts) {
const mainBadge = newCard.querySelector('.product-name .product-status-badge');
if (mainBadge) { mainBadge.style.display = 'none'; }
}
if (bundleToggle && subProducts) {
bundleToggle.addEventListener('click', function(e) {
e.stopPropagation();
newCard.classList.toggle('bundle-expanded');
const expanded = newCard.classList.contains('bundle-expanded');
bundleToggle.setAttribute('aria-expanded', expanded ? 'true' : 'false');
const textEl = bundleToggle.querySelector('span');
if (textEl) {
textEl.textContent = expanded ? bundleToggle.dataset.expandedText : bundleToggle.dataset.collapsedText;
}
});
subProducts.addEventListener('click', function(e) {
e.stopPropagation();
});
}
});
}
// 初始产品卡片事件监听
initProductCardEvents();
// 初始计算
calculateRefundTotal();
const itemDeleteModal = document.getElementById('itemDeleteModal');
const closeItemDeleteModalBtn = document.getElementById('closeItemDeleteModal');
const deleteReasonSelect = document.getElementById('deleteReason');
const deleteInstructionsInput = document.getElementById('deleteInstructions');
const cancelDeleteItemBtn = document.getElementById('cancelDeleteItemBtn');
const confirmDeleteItemBtn = document.getElementById('confirmDeleteItemBtn');
let currentDeleteProductId = null;
function openItemDeleteModal(pid) {
currentDeleteProductId = pid;
deleteReasonSelect.value = '';
deleteInstructionsInput.value = '';
itemDeleteModal.classList.add('active');
}
function closeItemDeleteModal() {
itemDeleteModal.classList.remove('active');
}
document.querySelectorAll('.product-card-optimized .delete-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const card = this.closest('.product-card-optimized');
const pid = card ? card.dataset.productId : null;
openItemDeleteModal(pid);
});
});
closeItemDeleteModalBtn.addEventListener('click', closeItemDeleteModal);
cancelDeleteItemBtn.addEventListener('click', closeItemDeleteModal);
confirmDeleteItemBtn.addEventListener('click', function() {
if (!deleteReasonSelect.value) {
alert('Please choose a reason.');
return;
}
const card = document.querySelector(`.product-card-optimized[data-product-id="${currentDeleteProductId}"]`);
if (card) {
// 添加删除状态样式而不是立即删除
card.classList.add('deleted');
// 禁用选择和删除按钮
const checkbox = card.querySelector('.product-select-checkbox');
const deleteBtn = card.querySelector('.delete-btn');
if (checkbox) checkbox.style.pointerEvents = 'none';
if (deleteBtn) deleteBtn.style.pointerEvents = 'none';
// 添加撤销删除按钮
const undoBtn = document.createElement('button');
undoBtn.className = 'undo-delete-btn';
undoBtn.innerHTML = '<i class="fas fa-undo"></i> Undo';
undoBtn.onclick = function(e) {
e.stopPropagation();
// 移除删除状态
card.classList.remove('deleted');
// 恢复交互
if (checkbox) checkbox.style.pointerEvents = 'auto';
if (deleteBtn) deleteBtn.style.pointerEvents = 'auto';
// 移除撤销按钮
undoBtn.remove();
// 更新选中状态
updateSelectAllState();
updateBatchDeleteButton();
updateDeletedCount();
calculateRefundTotal();
};
card.appendChild(undoBtn);
// 存储删除原因信息
card.dataset.deleteReason = deleteReasonSelect.value;
card.dataset.deleteInstructions = deleteInstructionsInput.value;
// 更新选中状态
updateSelectAllState();
updateBatchDeleteButton();
updateDeletedCount();
calculateRefundTotal();
}
itemDeleteModal.classList.remove('active');
});
// 批量删除弹窗功能
const batchDeleteModal = document.getElementById('batchDeleteModal');
const closeBatchDeleteModalBtn = document.getElementById('closeBatchDeleteModal');
const batchDeleteReasonSelect = document.getElementById('batchDeleteReason');
const batchDeleteInstructionsInput = document.getElementById('batchDeleteInstructions');
const batchDeleteUploadArea = document.getElementById('batchDeleteUploadArea');
const batchDeleteUploadInput = document.getElementById('batchDeleteUploadInput');
const batchDeleteUploadPreview = document.getElementById('batchDeleteUploadPreview');
const batchDeleteCountEl = document.getElementById('batchDeleteCount');
const cancelBatchDeleteBtn = document.getElementById('cancelBatchDeleteBtn');
const confirmBatchDeleteBtn = document.getElementById('confirmBatchDeleteBtn');
let batchDeleteAttachments = [];
let currentBatchDeleteProductIds = [];
function openBatchDeleteModal(productIds) {
currentBatchDeleteProductIds = productIds;
batchDeleteReasonSelect.value = '';
batchDeleteInstructionsInput.value = '';
if (batchDeleteUploadPreview) {
batchDeleteUploadPreview.innerHTML = '';
}
batchDeleteAttachments = [];
// 更新删除数量显示
// batchDeleteCountEl.textContent = productIds.length;
batchDeleteModal.classList.add('active');
}
function closeBatchDeleteModal() {
batchDeleteModal.classList.remove('active');
}
if (closeBatchDeleteModalBtn) {
closeBatchDeleteModalBtn.addEventListener('click', closeBatchDeleteModal);
}
if (cancelBatchDeleteBtn) {
cancelBatchDeleteBtn.addEventListener('click', closeBatchDeleteModal);
}
if (batchDeleteUploadArea && batchDeleteUploadInput && batchDeleteUploadPreview) {
batchDeleteUploadArea.addEventListener('click', function() { batchDeleteUploadInput.click(); });
batchDeleteUploadInput.addEventListener('change', function() {
const files = Array.from(this.files);
files.forEach(file => {
if (!file.type.match('image.*')) return;
if (file.size > 10 * 1024 * 1024) return;
const id = Date.now() + '_' + Math.random().toString(36).slice(2,9);
batchDeleteAttachments.push({ id, file });
const reader = new FileReader();
reader.onload = function(e) {
const item = document.createElement('div');
item.className = 'delete-preview-item';
item.dataset.fileId = id;
item.innerHTML = `<img src="${e.target.result}" alt="image"><button class="delete-remove" data-file-id="${id}"><i class="fas fa-times"></i></button>`;
batchDeleteUploadPreview.appendChild(item);
item.querySelector('.delete-remove').addEventListener('click', function(ev) {
ev.stopPropagation();
const toId = this.dataset.fileId;
batchDeleteAttachments = batchDeleteAttachments.filter(x => x.id !== toId);
item.remove();
});
};
reader.readAsDataURL(file);
});
});
}
confirmBatchDeleteBtn.addEventListener('click', function() {
if (!batchDeleteReasonSelect.value) {
alert('Please choose a reason.');
return;
}
// 为所有选中的产品添加删除状态而不是立即删除
currentBatchDeleteProductIds.forEach(productId => {
const card = document.querySelector(`.product-card-optimized[data-product-id="${productId}"]`);
if (card) {
// 添加删除状态样式
card.classList.add('deleted');
// 禁用选择和删除按钮
const checkbox = card.querySelector('.product-select-checkbox');
const deleteBtn = card.querySelector('.delete-btn');
if (checkbox) checkbox.style.pointerEvents = 'none';
if (deleteBtn) deleteBtn.style.pointerEvents = 'none';
// 添加撤销删除按钮
const undoBtn = document.createElement('button');
undoBtn.className = 'undo-delete-btn';
undoBtn.innerHTML = '<i class="fas fa-undo"></i> Undo';
undoBtn.onclick = function(e) {
e.stopPropagation();
// 移除删除状态
card.classList.remove('deleted');
// 恢复交互
if (checkbox) checkbox.style.pointerEvents = 'auto';
if (deleteBtn) deleteBtn.style.pointerEvents = 'auto';
// 移除撤销按钮
undoBtn.remove();
// 更新选中状态
updateSelectAllState();
updateBatchDeleteButton();
updateDeletedCount();
calculateRefundTotal();
};
card.appendChild(undoBtn);
// 存储删除原因信息
card.dataset.deleteReason = batchDeleteReasonSelect.value;
card.dataset.deleteInstructions = batchDeleteInstructionsInput.value;
}
});
// 更新选中状态
updateSelectAllState();
updateBatchDeleteButton();
updateDeletedCount();
calculateRefundTotal();
closeBatchDeleteModal();
});
// 退款原因变化处理
refundReason.addEventListener('change', function() {
const selectedReason = this.value;
dynamicContent.style.display = 'block';
// 清空动态内容
dynamicContent.innerHTML = '';
// 根据选择的原因显示不同的内容
if (selectedReason === 'Cancel VIP/Shipping insurance') {
showVIPInsuranceOptions();
} else if (selectedReason === 'Price reduction after purchase') {
showPriceReductionInfo();
} else if (selectedReason == 'Refund shipping fee') {
dynamicContent.style.display = 'none';
}else{
showDefaultRefundInfo();
}
// 添加动画
dynamicContent.classList.add('slide-in');
setTimeout(() => {
dynamicContent.classList.remove('slide-in');
}, 300);
if (refundSummarySimple) {
if (selectedReason) {
refundSummarySimple.style.display = '';
if (selectedReason === 'Cancel VIP/Shipping insurance') {
updateVIPInsuranceRefundSummary();
} else if (selectedReason === 'Price reduction after purchase') {
updatePriceReductionSummary();
} else {
updateFeesRefundSummary();
}
} else {
refundSummarySimple.style.display = 'none';
}
}
});
// 显示VIP/保险取消选项
function showVIPInsuranceOptions() {
const content = `
<div class="fee-options">
<div class="fee-option" data-fee-id="vip">
<div class="fee-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="fee-details">
<div class="fee-name">VIP Membership Fee</div>
<div class="fee-description">Annual VIP membership fee</div>
</div>
<div class="fee-amount">$${additionalFeesData.vip.amount.toFixed(2)}</div>
</div>
<div class="fee-option" data-fee-id="shippingInsurance">
<div class="fee-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="fee-details">
<div class="fee-name">Shipping Insurance</div>
<div class="fee-description">Insurance for shipping protection</div>
</div>
<div class="fee-amount">$${additionalFeesData.shippingInsurance.amount.toFixed(2)}</div>
</div>
<div class="fee-option" data-fee-id="warranty">
<div class="fee-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="fee-details">
<div class="fee-name">Extended Warranty</div>
<div class="fee-description">Extended warranty for 2 years</div>
</div>
<div class="fee-amount">$${additionalFeesData.warranty.amount.toFixed(2)}</div>
</div>
<div class="fee-option" data-fee-id="serviceFee">
<div class="fee-checkbox">
<i class="fas fa-check"></i>
</div>
<div class="fee-details">
<div class="fee-name">Service Fee</div>
<div class="fee-description">Processing and handling fee</div>
</div>
<div class="fee-amount">$${additionalFeesData.serviceFee.amount.toFixed(2)}</div>
</div>
</div>
`;
dynamicContent.innerHTML = content;
// 添加费用选项点击事件
const feeOptions = dynamicContent.querySelectorAll('.fee-option');
feeOptions.forEach(option => {
option.addEventListener('click', function() {
const feeId = this.dataset.feeId;
// 切换选中状态
this.classList.toggle('selected');
// 更新选中费用列表
if (this.classList.contains('selected')) {
if (!selectedAdditionalFees.includes(feeId)) {
selectedAdditionalFees.push(feeId);
}
} else {
const index = selectedAdditionalFees.indexOf(feeId);
if (index > -1) {
selectedAdditionalFees.splice(index, 1);
}
}
// 更新退款汇总显示
updateVIPInsuranceRefundSummary();
});
});
}
// 显示价格降价信息
function showPriceReductionInfo() {
const content = `
<div class="price-reduction-info">
<div class="price-info-item">
<span class="price-info-label">Original Order Amount</span>
<span class="price-info-value">$${priceReductionData.originalAmount.toFixed(2)}</span>
</div>
<div class="price-info-item">
<span class="price-info-label">Customization Fee</span>
<span class="price-info-value">$${priceReductionData.customizationFee.toFixed(2)}</span>
</div>
<div class="price-info-item" style="background-color: rgba(211, 47, 47, 0.05); border-color: var(--primary-red);">
<span class="price-info-label" style="font-weight: 700;">Refund Amount</span>
<span class="price-info-value price-info-total">$${priceReductionData.refundAmount.toFixed(2)}</span>
</div>
</div>
`;
dynamicContent.innerHTML = content;
}
// 显示默认退款信息
function showDefaultRefundInfo() {
const content = `
<div class="default-refund-info">
<p style="font-size: 15px; color: var(--text-dark); line-height: 1.6; margin-bottom: 16px;">
Please note that refunds may take 5-10 business days to process after approval. Customization fees may apply for personalized products.
</p>
<div style="display: flex; align-items: center; gap: 10px; padding: 12px; background-color: rgba(0, 0, 0, 0.03); border-radius: 8px;">
<i class="fas fa-info-circle" style="color: var(--primary-red);"></i>
<span style="font-size: 14px; color: var(--text-light);">You can select specific products for refund above.</span>
</div>
</div>
`;
dynamicContent.innerHTML = content;
}
// 上传模态框功能
function openUploadModal() {
fileUploadInput.click();
}
function closeUploadModal() {
uploadModal.classList.remove('active');
}
openUploadModalBtns.forEach(button => {
button.addEventListener('click', openUploadModal);
});
closeUploadModalBtn.addEventListener('click', closeUploadModal);
cancelUploadBtn.addEventListener('click', closeUploadModal);
// 确认上传按钮
confirmUploadBtn.addEventListener('click', function() {
closeUploadModal();
updateAttachmentsPreview();
});
// 文件上传功能
fileUploadArea.addEventListener('click', function() {
fileUploadInput.click();
});
fileUploadArea.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('dragging');
});
fileUploadArea.addEventListener('dragleave', function(e) {
e.preventDefault();
this.classList.remove('dragging');
});
fileUploadArea.addEventListener('drop', function(e) {
e.preventDefault();
this.classList.remove('dragging');
const files = e.dataTransfer.files;
if (files.length > 0) {
handleFileUpload(files);
}
});
fileUploadInput.addEventListener('change', function(e) {
if (this.files.length > 0) {
handleFileUpload(this.files);
}
});
function handleFileUpload(files) {
// 检查总文件数
if (uploadedFiles.length + files.length > 5) {
alert('Maximum 5 files allowed. You already have ' + uploadedFiles.length + ' files.');
return;
}
Array.from(files).forEach((file, index) => {
// 检查文件类型
if (!file.type.match('image.*') && file.type !== 'application/pdf') {
alert(`File ${file.name} is not an image or PDF. Please upload only images or PDF files.`);
return;
}
// 检查文件大小 (最大10MB)
if (file.size > 10 * 1024 * 1024) {
alert(`File ${file.name} is too large. Maximum file size is 10MB.`);
return;
}
// 添加文件到已上传列表
const fileId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
uploadedFiles.push({
id: fileId,
file: file,
name: file.name,
type: file.type,
size: file.size
});
// 创建预览
createFilePreview(file, fileId);
});
// 更新上传区域显示
fileUploadArea.innerHTML = `
<i class="fas fa-check-circle" style="color: var(--success-color); font-size: 42px;"></i>
<div class="upload-text">${uploadedFiles.length} file${uploadedFiles.length > 1 ? 's' : ''} selected</div>
<div class="upload-hint">Click to add more files or drag and drop</div>
`;
// 更新确认按钮文本
confirmUploadBtn.textContent = `Add ${uploadedFiles.length} File${uploadedFiles.length > 1 ? 's' : ''}`;
updateAttachmentsPreview();
}
function createFilePreview(file, fileId) {
const reader = new FileReader();
reader.onload = function(e) {
const previewItem = document.createElement('div');
previewItem.className = 'upload-preview-item fade-in';
previewItem.dataset.fileId = fileId;
if (file.type.match('image.*')) {
previewItem.innerHTML = `
<img src="${e.target.result}" alt="Uploaded image">
<div class="remove-upload" data-file-id="${fileId}">
<i class="fas fa-times"></i>
</div>
`;
} else {
previewItem.innerHTML = `
<div style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f0f0f0;">
<i class="fas fa-file-pdf" style="font-size: 36px; color: var(--primary-red);"></i>
<div style="font-size: 12px; margin-top: 8px; padding: 0 4px; text-align: center; word-break: break-all;">${file.name.length > 15 ? file.name.substring(0, 12) + '...' : file.name}</div>
</div>
<div class="remove-upload" data-file-id="${fileId}">
<i class="fas fa-times"></i>
</div>
`;
}
uploadPreview.appendChild(previewItem);
// 添加删除按钮事件
const removeBtn = previewItem.querySelector('.remove-upload');
removeBtn.addEventListener('click', function(e) {
e.stopPropagation();
const idToRemove = this.dataset.fileId;
removeFile(idToRemove);
});
};
reader.readAsDataURL(file);
}
function removeFile(fileId) {
// 从数组中移除
uploadedFiles = uploadedFiles.filter(file => file.id !== fileId);
// 从预览中移除
const previewItem = document.querySelector(`.upload-preview-item[data-file-id="${fileId}"]`);
if (previewItem) {
previewItem.remove();
}
// 更新上传区域显示
if (uploadedFiles.length === 0) {
fileUploadArea.innerHTML = `
<i class="fas fa-cloud-upload-alt"></i>
<div class="upload-text">Click to upload or drag and drop</div>
<div class="upload-hint">PNG, JPG, PDF up to 10MB each. Max 5 files.</div>
`;
confirmUploadBtn.textContent = 'Add Files';
} else {
fileUploadArea.innerHTML = `
<i class="fas fa-check-circle" style="color: var(--success-color); font-size: 42px;"></i>
<div class="upload-text">${uploadedFiles.length} file${uploadedFiles.length > 1 ? 's' : ''} selected</div>
<div class="upload-hint">Click to add more files or drag and drop</div>
`;
confirmUploadBtn.textContent = `Add ${uploadedFiles.length} File${uploadedFiles.length > 1 ? 's' : ''}`;
}
// 更新附件预览
updateAttachmentsPreview();
}
function updateAttachmentsPreview() {
attachmentsPreviews.forEach(previewContainer => {
previewContainer.innerHTML = '';
if (uploadedFiles.length === 0) {
return;
}
const maxThumbnails = 4;
const filesToShow = uploadedFiles.slice(0, maxThumbnails);
filesToShow.forEach((file, index) => {
const thumbnail = document.createElement('div');
thumbnail.className = file.type === 'application/pdf' ? 'attachment-thumbnail pdf' : 'attachment-thumbnail';
thumbnail.dataset.fileId = file.id;
if (file.type === 'application/pdf') {
thumbnail.innerHTML = `
<i class="fas fa-file-pdf"></i>
`;
} else {
const reader = new FileReader();
reader.onload = function(e) {
thumbnail.innerHTML = `<img src="${e.target.result}" alt="Attachment">`;
};
reader.readAsDataURL(file.file);
}
thumbnail.addEventListener('click', function() {
openUploadModal();
});
previewContainer.appendChild(thumbnail);
});
if (uploadedFiles.length > maxThumbnails) {
const moreCount = uploadedFiles.length - maxThumbnails;
const moreThumbnail = document.createElement('div');
moreThumbnail.className = 'attachment-thumbnail';
moreThumbnail.style.backgroundColor = 'var(--primary-red)';
moreThumbnail.style.display = 'flex';
moreThumbnail.style.alignItems = 'center';
moreThumbnail.style.justifyContent = 'center';
moreThumbnail.style.color = 'white';
moreThumbnail.style.fontWeight = 'bold';
moreThumbnail.textContent = `+${moreCount}`;
moreThumbnail.addEventListener('click', openUploadModal);
previewContainer.appendChild(moreThumbnail);
}
});
openUploadModalBtns.forEach(button => {
button.innerHTML = `<i class="fas fa-paperclip"></i><span>Attachments (${uploadedFiles.length})</span>`;
});
}
// 邮箱编辑功能
editEmailBtn.addEventListener('click', function() {
if (!isEmailEditable) {
contactEmail.removeAttribute('readonly');
contactEmail.focus();
contactEmail.select();
editEmailBtn.innerHTML = '<i class="fas fa-save"></i> Save';
isEmailEditable = true;
} else {
// 验证邮箱格式
const email = contactEmail.value;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert('Please enter a valid email address.');
return;
}
contactEmail.setAttribute('readonly', true);
editEmailBtn.innerHTML = '<i class="fas fa-edit"></i> Edit';
isEmailEditable = false;
// 显示保存成功提示
editEmailBtn.innerHTML = '<i class="fas fa-check"></i> Saved';
editEmailBtn.style.backgroundColor = 'var(--success-color)';
editEmailBtn.style.color = 'white';
setTimeout(() => {
editEmailBtn.innerHTML = '<i class="fas fa-edit"></i> Edit';
editEmailBtn.style.backgroundColor = '';
editEmailBtn.style.color = '';
}, 2000);
}
});
// 表单提交
refundForm.addEventListener('submit', function(e) {
e.preventDefault();
// 验证必填字段
const refundReasonValue = refundReason.value;
if (!refundReasonValue) {
alert('Please select a refund reason.');
refundReason.focus();
return;
}
// 验证是否选择了产品
if (selectedProductsCount === 0) {
alert('Please select at least one product for refund.');
return;
}
// 显示加载状态
const originalText = submitBtn.innerHTML;
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
submitBtn.disabled = true;
submitBtn.style.opacity = '0.8';
// 模拟表单提交
setTimeout(() => {
// 显示成功消息
alert(`Your refund request for ${selectedProductsCount} product(s) has been submitted successfully! Total refund amount: ${totalRefundAmountEl.textContent}. We will contact you within 24-48 hours.`);
// 重置按钮
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
submitBtn.style.opacity = '1';
// 重置表单
refundForm.reset();
dynamicContent.style.display = 'none';
uploadedFiles = [];
uploadPreview.innerHTML = '';
attachmentsPreviews.forEach(previewContainer => {
previewContainer.innerHTML = '';
});
selectedAdditionalFees = [];
// 重置产品选择
productCards.forEach(card => {
card.classList.remove('selected');
});
// 重置上传区域
fileUploadArea.innerHTML = `
<i class="fas fa-cloud-upload-alt"></i>
<div class="upload-text">Click to upload or drag and drop</div>
<div class="upload-hint">PNG, JPG, PDF up to 10MB each. Max 5 files.</div>
`;
confirmUploadBtn.textContent = 'Add Files';
openUploadModalBtns.forEach(button => {
button.innerHTML = `<i class="fas fa-paperclip"></i><span>Attach files</span>`;
});
// 重新计算总金额
calculateRefundTotal();
}, 2000);
});
// 添加悬停效果到产品卡片
productCards.forEach(card => {
card.addEventListener('mouseenter', function() {
if (!this.classList.contains('selected')) {
this.style.transform = 'translateY(-4px)';
}
});
card.addEventListener('mouseleave', function() {
if (!this.classList.contains('selected')) {
this.style.transform = 'translateY(0)';
}
});
});
});
</script>
</body>
</html>
index.html
style.css
index.js
md
README.md
index.html