<!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">
<style>
:root {
--primary-red: #d32f2f;
--primary-red-light: #f44336;
--primary-red-dark: #b71c1c;
--primary-red-transparent: rgba(211, 47, 47, 0.08);
--secondary-gold: #ffd700;
--text-dark: #222222;
--text-light: #666666;
--text-lightest: #999999;
--border-color: #eaeaea;
--background-light: #fafafa;
--background-white: #ffffff;
--success-color: #2e7d32;
--warning-color: #ff9800;
--warning-bg: #fff3e0;
--info-bg: #e3f2fd;
--shadow-light: 0 2px 12px rgba(0, 0, 0, 0.04);
--shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.12);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
background-color: #f8f9fa;
color: var(--text-dark);
line-height: 1.6;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}
.refund-container {
background-color: var(--background-white);
border-radius: 20px;
box-shadow: var(--shadow-heavy);
max-width: 900px;
width: 100%;
overflow: hidden;
border: 1px solid #f0f0f0;
}
.refund-header {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
color: white;
padding: 28px 32px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
overflow: hidden;
}
.refund-header::before {
content: '';
position: absolute;
top: -60%;
right: -60%;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
}
.refund-header::after {
content: '';
position: absolute;
top: -40%;
right: 15%;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.03);
border-radius: 50%;
}
.header-title {
display: flex;
align-items: center;
gap: 18px;
}
.header-icon {
background-color: rgba(255, 255, 255, 0.15);
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
backdrop-filter: blur(10px);
}
.header-text h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 6px;
letter-spacing: -0.3px;
}
.header-text p {
font-size: 15px;
opacity: 0.9;
font-weight: 400;
}
.close-btn {
background: rgba(255, 255, 255, 0.15);
border: none;
width: 48px;
height: 48px;
border-radius: 50%;
color: white;
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
position: relative;
backdrop-filter: blur(10px);
}
.close-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: rotate(90deg);
}
.warning-section {
padding: 0;
}
.warning-card {
background: linear-gradient(135deg, #fff9f9 0%, #fff5f5 100%);
border: 1px solid rgba(255, 182, 182, 0.3);
border-radius: 16px;
padding: 28px 32px;
margin: 24px 32px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 16px rgba(211, 47, 47, 0.05);
}
.warning-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: linear-gradient(to bottom, var(--primary-red), var(--primary-red-dark));
}
.warning-header {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.warning-icon {
background-color: var(--primary-red);
color: white;
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-right: 16px;
flex-shrink: 0;
box-shadow: 0 4px 8px rgba(211, 47, 47, 0.2);
}
.warning-title {
font-size: 18px;
font-weight: 700;
color: var(--primary-red);
margin-bottom: 4px;
}
.warning-subtitle {
font-size: 14px;
color: var(--text-light);
font-weight: 500;
}
.warning-content {
font-size: 15px;
line-height: 1.7;
color: var(--text-dark);
padding-left: 60px;
}
.warning-content p {
margin-bottom: 12px;
}
.warning-content p:last-child {
margin-bottom: 0;
}
.main-content {
display: flex;
flex-direction: column;
padding: 0 32px;
}
.refund-form-section {
margin-bottom: 40px;
}
.section-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 24px;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 12px;
border-bottom: 2px solid var(--primary-red-transparent);
}
.section-title i {
font-size: 22px;
color: var(--primary-red);
}
.form-card {
background-color: var(--background-white);
border-radius: 16px;
padding: 28px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-light);
}
.form-group {
margin-bottom: 28px;
}
.form-label {
display: block;
font-size: 16px;
font-weight: 700;
margin-bottom: 12px;
color: var(--text-dark);
display: flex;
align-items: center;
}
.form-label i {
margin-right: 10px;
color: var(--primary-red);
font-size: 18px;
}
.select-wrapper {
position: relative;
}
.custom-select {
width: 100%;
padding: 16px 20px;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 16px;
background-color: var(--background-white);
cursor: pointer;
appearance: none;
transition: all 0.3s ease;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23d32f2f' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
background-size: 16px;
font-weight: 500;
}
.custom-select:focus {
border-color: var(--primary-red);
outline: none;
box-shadow: 0 0 0 4px var(--primary-red-transparent);
}
/* 动态显示的区域 */
.dynamic-content {
margin-top: 24px;
padding: 24px;
background-color: var(--background-light);
border-radius: 12px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.fee-options {
display: flex;
flex-direction: column;
gap: 16px;
}
.fee-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
background-color: white;
border-radius: 10px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
cursor: pointer;
}
.fee-option:hover {
border-color: var(--primary-red);
box-shadow: 0 4px 12px rgba(211, 47, 47, 0.1);
}
.fee-option.selected {
border-color: var(--primary-red);
background-color: var(--primary-red-transparent);
}
.fee-checkbox {
width: 24px;
height: 24px;
border-radius: 6px;
border: 2px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}
.fee-option.selected .fee-checkbox {
background-color: var(--primary-red);
border-color: var(--primary-red);
}
.fee-checkbox i {
color: white;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
}
.fee-option.selected .fee-checkbox i {
opacity: 1;
}
.fee-details {
flex: 1;
margin-left: 16px;
}
.fee-name {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 4px;
}
.fee-description {
font-size: 14px;
color: var(--text-light);
}
.fee-amount {
font-size: 18px;
font-weight: 700;
color: var(--primary-red);
margin-left: 16px;
}
/* 退款金额汇总 */
.refund-summary {
margin-top: 24px;
padding: 24px;
background-color: white;
border-radius: 12px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-light);
}
.summary-title {
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.summary-title i {
color: var(--primary-red);
}
.summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
}
.summary-item:last-child {
border-bottom: none;
}
.summary-label {
font-size: 15px;
color: var(--text-dark);
font-weight: 500;
}
.summary-value {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
}
.summary-total {
font-size: 20px;
font-weight: 800;
color: var(--primary-red);
}
.price-reduction-info {
display: flex;
flex-direction: column;
gap: 16px;
}
.price-info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background-color: white;
border-radius: 10px;
border: 1px solid var(--border-color);
}
.price-info-label {
font-size: 15px;
color: var(--text-dark);
font-weight: 500;
}
.price-info-value {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
}
.price-info-total {
font-size: 18px;
font-weight: 800;
color: var(--primary-red);
}
/* 备注区域 - 包含上传按钮 */
.textarea-wrapper {
border: 2px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
position: relative;
}
.textarea-wrapper:focus-within {
border-color: var(--primary-red);
box-shadow: 0 0 0 4px var(--primary-red-transparent);
}
.custom-textarea {
width: 100%;
padding: 18px 20px;
border: none;
font-size: 15px;
font-family: inherit;
resize: vertical;
min-height: 140px;
line-height: 1.6;
background-color: transparent;
}
.custom-textarea:focus {
outline: none;
}
.textarea-footer {
padding: 12px 20px;
background-color: var(--background-light);
font-size: 14px;
color: var(--text-light);
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.textarea-note {
display: flex;
align-items: flex-start;
}
.textarea-note i {
color: var(--primary-red);
margin-right: 10px;
font-size: 16px;
margin-top: 2px;
}
/* 上传按钮区域 */
.upload-attachments {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 6px 12px;
border-radius: 8px;
transition: all 0.2s ease;
}
.upload-attachments:hover {
background-color: var(--primary-red-transparent);
color: var(--primary-red);
}
.upload-attachments i {
font-size: 16px;
}
.upload-attachments span {
font-size: 14px;
font-weight: 600;
}
/* 上传模态框 */
.upload-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.upload-modal.active {
opacity: 1;
visibility: visible;
}
.upload-modal-content {
background-color: white;
border-radius: 20px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
box-shadow: var(--shadow-heavy);
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
transform: translateY(-30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.upload-modal-header {
padding: 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.upload-modal-title {
font-size: 20px;
font-weight: 700;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 10px;
}
.upload-modal-title i {
color: var(--primary-red);
}
.close-upload-modal {
background: none;
border: none;
font-size: 24px;
color: var(--text-light);
cursor: pointer;
transition: color 0.2s ease;
}
.close-upload-modal:hover {
color: var(--primary-red);
}
.upload-modal-body {
padding: 24px;
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 16px;
padding: 40px 24px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background-color: var(--background-light);
margin-bottom: 24px;
}
.upload-area:hover {
border-color: var(--primary-red);
background-color: var(--primary-red-transparent);
}
.upload-area.dragging {
border-color: var(--primary-red);
background-color: var(--primary-red-transparent);
transform: scale(1.02);
}
.upload-area i {
font-size: 48px;
color: var(--primary-red);
margin-bottom: 16px;
opacity: 0.8;
}
.upload-text {
font-size: 18px;
color: var(--text-dark);
margin-bottom: 10px;
font-weight: 600;
}
.upload-hint {
font-size: 14px;
color: var(--text-light);
}
.upload-preview {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 20px;
}
.upload-preview-item {
width: 120px;
height: 120px;
border-radius: 12px;
overflow: hidden;
position: relative;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-light);
}
.upload-preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.remove-upload {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.remove-upload:hover {
background-color: var(--primary-red);
transform: scale(1.1);
}
.upload-modal-footer {
padding: 20px 24px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: flex-end;
gap: 12px;
}
.modal-btn {
padding: 12px 24px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.3s ease;
}
.modal-btn-cancel {
background-color: transparent;
color: var(--text-dark);
border: 2px solid var(--border-color);
}
.modal-btn-cancel:hover {
background-color: #f5f5f5;
}
.modal-btn-confirm {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-light) 100%);
color: white;
}
.modal-btn-confirm:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(211, 47, 47, 0.25);
}
/* 已上传图片预览缩略图 */
.attachments-preview {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.attachment-thumbnail {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
position: relative;
border: 1px solid var(--border-color);
cursor: pointer;
transition: transform 0.2s ease;
}
.attachment-thumbnail:hover {
transform: scale(1.05);
}
.attachment-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.attachment-thumbnail.pdf {
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
.attachment-thumbnail.pdf i {
font-size: 24px;
color: var(--primary-red);
}
.attachment-count {
position: absolute;
bottom: 2px;
right: 2px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
}
/* 联系邮箱区域 */
.contact-email-group {
margin-top: 28px;
}
.email-input-wrapper {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background-color: var(--background-light);
border-radius: 12px;
border: 2px solid var(--border-color);
transition: all 0.3s ease;
}
.email-input-wrapper:focus-within {
border-color: var(--primary-red);
box-shadow: 0 0 0 4px var(--primary-red-transparent);
}
.email-icon {
color: var(--primary-red);
font-size: 20px;
flex-shrink: 0;
}
.email-input {
flex: 1;
border: none;
background-color: transparent;
font-size: 16px;
color: var(--text-dark);
font-weight: 500;
}
.email-input:focus {
outline: none;
}
.email-edit-btn {
background-color: var(--primary-red-transparent);
color: var(--primary-red);
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
.email-edit-btn:hover {
background-color: var(--primary-red);
color: white;
}
.form-actions {
display: flex;
gap: 18px;
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--border-color);
}
.btn {
padding: 16px 36px;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 160px;
}
.btn-cancel {
background-color: transparent;
color: var(--text-dark);
border: 2px solid var(--border-color);
}
.btn-cancel:hover {
background-color: #f5f5f5;
border-color: var(--text-lightest);
}
.btn-confirm {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-light) 100%);
color: white;
box-shadow: 0 6px 16px rgba(211, 47, 47, 0.25);
}
.btn-confirm:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(211, 47, 47, 0.35);
}
.btn-confirm:active {
transform: translateY(0);
}
/* 产品信息部分 - 优化版 */
.products-section {
margin-top: 20px;
margin-bottom: 40px;
}
.products-count {
display: inline-block;
background-color: var(--primary-red);
color: white;
font-size: 14px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
margin-left: 12px;
vertical-align: middle;
}
/* 新产品卡片样式 */
.product-card-optimized {
background-color: var(--background-white);
border-radius: 16px;
padding: 20px;
border: 2px solid var(--border-color);
box-shadow: var(--shadow-light);
transition: all 0.3s ease;
position: relative;
margin-bottom: 16px;
}
.product-card-optimized:hover {
border-color: var(--primary-red);
box-shadow: var(--shadow-medium);
}
.product-card-optimized.selected {
border-color: var(--primary-red);
background-color: var(--primary-red-transparent);
}
.product-content {
display: flex;
align-items: center;
gap: 20px;
}
.product-select-checkbox {
width: 24px;
height: 24px;
border-radius: 6px;
border: 2px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.3s ease;
}
.product-card-optimized.selected .product-select-checkbox {
background-color: var(--primary-red);
border-color: var(--primary-red);
}
.product-select-checkbox i {
color: white;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
}
.product-card-optimized.selected .product-select-checkbox i {
opacity: 1;
}
.product-image-container {
width: 100px;
height: 100px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--border-color);
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-details {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
align-items: center;
}
.detail-item {
display: flex;
flex-direction: column;
}
.detail-label {
font-size: 12px;
color: var(--text-lightest);
margin-bottom: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-value {
font-size: 15px;
font-weight: 600;
color: var(--text-dark);
}
.product-name {
font-size: 16px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 4px;
grid-column: span 2;
}
.product-price {
font-size: 18px;
font-weight: 800;
color: var(--primary-red);
}
.quantity-selector {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.quantity-btn {
width: 32px;
height: 32px;
border-radius: 8px;
background-color: var(--background-light);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
color: var(--text-dark);
transition: all 0.2s ease;
}
.quantity-btn:hover {
background-color: var(--primary-red-transparent);
border-color: var(--primary-red);
color: var(--primary-red);
}
.quantity-input {
width: 50px;
text-align: center;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
background-color: white;
}
.quantity-input:focus {
outline: none;
border-color: var(--primary-red);
}
.product-status-badge {
position: absolute;
top: 12px;
right: 12px;
background-color: var(--primary-red);
color: white;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.refund-total-section {
background-color: var(--background-white);
border-radius: 16px;
padding: 24px;
border: 2px solid var(--primary-red);
margin-top: 24px;
box-shadow: var(--shadow-medium);
}
.refund-total-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.refund-total-title {
font-size: 20px;
font-weight: 700;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 10px;
}
.refund-total-title i {
color: var(--primary-red);
}
.selected-products-count {
font-size: 14px;
font-weight: 600;
color: var(--text-light);
background-color: var(--background-light);
padding: 6px 12px;
border-radius: 20px;
}
.refund-total-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.total-item {
display: flex;
flex-direction: column;
padding: 16px;
background-color: var(--background-light);
border-radius: 12px;
}
.total-label {
font-size: 14px;
color: var(--text-light);
margin-bottom: 8px;
font-weight: 500;
}
.total-value {
font-size: 22px;
font-weight: 800;
color: var(--primary-red);
}
.total-item.main-total {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-light) 100%);
}
.total-item.main-total .total-label {
color: rgba(255, 255, 255, 0.9);
}
.total-item.main-total .total-value {
color: white;
}
/* 隐藏表单字段 */
.hidden-fields {
display: none;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.product-details {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.product-name {
grid-column: span 2;
}
}
@media (max-width: 768px) {
body {
padding: 10px;
}
.refund-container {
margin: 0;
border-radius: 16px;
}
.refund-header {
padding: 24px 20px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.header-text h1 {
font-size: 24px;
}
.close-btn {
position: absolute;
top: 24px;
right: 20px;
}
.warning-card {
margin: 16px 20px;
padding: 24px;
}
.warning-content {
padding-left: 0;
}
.main-content {
padding: 0 20px;
}
.product-content {
flex-direction: column;
align-items: flex-start;
}
.product-image-container {
width: 100%;
height: 160px;
}
.product-details {
grid-template-columns: 1fr;
width: 100%;
}
.product-name {
grid-column: span 1;
}
.refund-total-details {
grid-template-columns: 1fr;
}
.quantity-selector {
justify-content: flex-start;
}
.form-actions {
flex-direction: column;
}
.btn {
width: 100%;
}
.email-input-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.email-edit-btn {
width: 100%;
padding: 12px;
}
.upload-modal-content {
width: 95%;
}
.upload-preview-item {
width: 100px;
height: 100px;
}
}
/* 动画效果 */
.fade-in {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in {
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
.pulse-animation {
animation: pulse 0.5s ease-in-out;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</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>Refund Request</h1>
<p>Select products and quantities for refund</p>
</div>
</div>
<button class="close-btn" id="closeRefundPopup">
<i class="fas fa-times"></i>
</button>
</div>
<!-- 警告信息 -->
<div class="warning-section">
<div class="warning-card">
<div class="warning-header">
<div class="warning-icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div>
<h3 class="warning-title">Important Notice</h3>
<p class="warning-subtitle">Please read carefully before proceeding</p>
</div>
</div>
<div class="warning-content">
<p>For Made-to-Order Personalized Products, changes or cancellations may not be possible once production has started.</p>
<p>This includes the specialized design, molding, and shaping tailored to your specifications in the order.</p>
<p>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.</p>
</div>
</div>
</div>
<div class="main-content">
<!-- 产品信息部分 -->
<div class="products-section">
<div class="section-title">
<i class="fas fa-box-open"></i>
<span>Select Products for Refund</span>
<span class="products-count">3 Items</span>
</div>
<!-- 产品1 -->
<div class="product-card-optimized fade-in" data-product-id="1" data-price="42.08" data-customization-fee="8.42" data-max-quantity="1">
<div class="product-status-badge">In Production</div>
<div class="product-content">
<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</div>
<div class="detail-item">
<span class="detail-label">Product Code</span>
<span class="detail-value">PROD-902601061</span>
</div>
<div class="detail-item">
<span class="detail-label">Unique Code</span>
<span class="detail-value">X251226113310144</span>
</div>
<div class="detail-item">
<span class="detail-label">Unit Price</span>
<span class="detail-value product-price">$42.08</span>
</div>
<div class="detail-item quantity-selector">
<span class="detail-label">Refund Qty</span>
<div style="display: flex; align-items: center; gap: 8px;">
<button class="quantity-btn decrease-btn">-</button>
<input type="number" class="quantity-input" value="1" min="0" max="1">
<button class="quantity-btn increase-btn">+</button>
</div>
</div>
</div>
</div>
</div>
<!-- 产品2 -->
<div class="product-card-optimized fade-in" data-product-id="2" data-price="28.50" data-customization-fee="5.70" data-max-quantity="2">
<div class="product-status-badge">Preparing</div>
<div class="product-content">
<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</div>
<div class="detail-item">
<span class="detail-label">Product Code</span>
<span class="detail-value">PROD-902601062</span>
</div>
<div class="detail-item">
<span class="detail-label">Unique Code</span>
<span class="detail-value">X251226113310145</span>
</div>
<div class="detail-item">
<span class="detail-label">Unit Price</span>
<span class="detail-value product-price">$28.50</span>
</div>
<div class="detail-item quantity-selector">
<span class="detail-label">Refund Qty</span>
<div style="display: flex; align-items: center; gap: 8px;">
<button class="quantity-btn decrease-btn">-</button>
<input type="number" class="quantity-input" value="1" min="0" max="2">
<button class="quantity-btn increase-btn">+</button>
</div>
</div>
</div>
</div>
</div>
<!-- 产品3 -->
<div class="product-card-optimized fade-in" data-product-id="3" data-price="35.99" data-customization-fee="7.20" data-max-quantity="1">
<div class="product-status-badge">Design Stage</div>
<div class="product-content">
<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</div>
<div class="detail-item">
<span class="detail-label">Product Code</span>
<span class="detail-value">PROD-902601063</span>
</div>
<div class="detail-item">
<span class="detail-label">Unique Code</span>
<span class="detail-value">X251226113310146</span>
</div>
<div class="detail-item">
<span class="detail-label">Unit Price</span>
<span class="detail-value product-price">$35.99</span>
</div>
<div class="detail-item quantity-selector">
<span class="detail-label">Refund Qty</span>
<div style="display: flex; align-items: center; gap: 8px;">
<button class="quantity-btn decrease-btn">-</button>
<input type="number" class="quantity-input" value="1" min="0" max="1">
<button class="quantity-btn increase-btn">+</button>
</div>
</div>
</div>
</div>
</div>
<!-- 退款总金额汇总 -->
<div class="refund-total-section">
<div class="refund-total-header">
<h3 class="refund-total-title">
<i class="fas fa-calculator"></i> Refund Summary
</h3>
<div class="selected-products-count">
<span id="selectedCount">0</span> of <span id="totalCount">3</span> products selected
</div>
</div>
<div class="refund-total-details">
<div class="total-item">
<span class="total-label">Products Amount</span>
<span class="total-value" id="totalProductsAmount">$0.00</span>
</div>
<div class="total-item">
<span class="total-label">Customization Fees</span>
<span class="total-value" id="totalCustomizationFees">$0.00</span>
</div>
<div class="total-item main-total">
<span class="total-label">Total Refund Amount</span>
<span class="total-value" id="totalRefundAmount">$0.00</span>
</div>
<div class="total-item">
<span class="total-label">Estimated Processing</span>
<span class="total-value" style="font-size: 16px; color: var(--text-dark);">5-7 Business Days</span>
</div>
</div>
</div>
</div>
<!-- 退款表单部分 -->
<div class="refund-form-section">
<div class="section-title">
<i class="fas fa-clipboard-list"></i>
<span>Refund Details</span>
</div>
<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="No longer wanted">No longer wanted</option>
<option value="Incorrect product selection/over-ordered">Incorrect product selection/over-ordered</option>
<option value="Address/phone information error">Address/phone information error</option>
<option value="Delivery exceeded deadline">Delivery exceeded deadline</option>
<option value="Out of stock/cannot be produced">Out of stock/cannot be produced</option>
<option value="Engraving/image design does not match">Engraving/image design does not match</option>
<option value="Price reduction after purchase">Price reduction after purchase</option>
<option value="Not shipped on scheduled time">Not shipped on scheduled time</option>
<option value="Better price available elsewhere">Better price available elsewhere</option>
<option value="Discount not applied">Discount not applied</option>
<option value="Cancel VIP/Shipping insurance">Cancel VIP/Shipping insurance</option>
<option value="Refund shipping fee">Refund shipping fee</option>
<option value="Other">Other</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>
</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="form-actions">
<button type="button" class="btn btn-cancel" id="cancelBtn">
<i class="fas fa-times"></i> Cancel
</button>
<button type="submit" class="btn btn-confirm" id="submitBtn">
<i class="fas fa-check"></i> Submit Request
</button>
</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>
<!-- 上传文件模态框 -->
<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>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 页面元素
const closeBtn = document.getElementById('closeRefundPopup');
const cancelBtn = document.getElementById('cancelBtn');
const submitBtn = document.getElementById('submitBtn');
const refundForm = document.getElementById('refundForm');
const refundReason = document.getElementById('refundReason');
const dynamicContent = document.getElementById('dynamicContent');
const openUploadModalBtn = document.getElementById('openUploadModal');
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 attachmentsPreview = document.getElementById('attachmentsPreview');
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 selectedCountEl = document.getElementById('selectedCount');
const totalCountEl = document.getElementById('totalCount');
// 产品卡片
const productCards = document.querySelectorAll('.product-card-optimized');
totalCountEl.textContent = productCards.length;
// 数据存储
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;
selectedProductsCount = 0;
productCards.forEach(card => {
if (card.classList.contains('selected')) {
const price = parseFloat(card.dataset.price);
const customizationFee = parseFloat(card.dataset.customizationFee);
const quantityInput = card.querySelector('.quantity-input');
const quantity = parseInt(quantityInput.value);
totalProductsAmount += price * quantity;
totalCustomizationFees += customizationFee * quantity;
selectedProductsCount++;
}
});
const totalRefundAmount = totalProductsAmount + totalCustomizationFees;
// 更新显示
totalProductsAmountEl.textContent = `$${totalProductsAmount.toFixed(2)}`;
totalCustomizationFeesEl.textContent = `$${totalCustomizationFees.toFixed(2)}`;
totalRefundAmountEl.textContent = `$${totalRefundAmount.toFixed(2)}`;
selectedCountEl.textContent = selectedProductsCount;
// 添加脉冲动画
totalRefundAmountEl.parentElement.classList.add('pulse-animation');
setTimeout(() => {
totalRefundAmountEl.parentElement.classList.remove('pulse-animation');
}, 500);
}
// 产品选择事件
productCards.forEach(card => {
const checkbox = card.querySelector('.product-select-checkbox');
const maxQuantity = parseInt(card.dataset.maxQuantity);
const quantityInput = card.querySelector('.quantity-input');
// 设置最大数量
quantityInput.max = maxQuantity;
// 点击卡片任何地方都可以选中/取消选中
card.addEventListener('click', function(e) {
// 防止点击数量按钮时触发卡片选择
if (e.target.closest('.quantity-btn') || e.target.classList.contains('quantity-input')) {
return;
}
card.classList.toggle('selected');
// 如果选中且数量为0，则设置为1
if (card.classList.contains('selected') && parseInt(quantityInput.value) === 0) {
quantityInput.value = 1;
}
calculateRefundTotal();
});
// 数量增减按钮
const decreaseBtn = card.querySelector('.decrease-btn');
const increaseBtn = card.querySelector('.increase-btn');
decreaseBtn.addEventListener('click', function(e) {
e.stopPropagation(); // 防止触发卡片选择
let currentValue = parseInt(quantityInput.value);
if (currentValue > 0) {
quantityInput.value = currentValue - 1;
// 如果数量为0，自动取消选中
if (quantityInput.value === '0' && card.classList.contains('selected')) {
card.classList.remove('selected');
}
calculateRefundTotal();
}
});
increaseBtn.addEventListener('click', function(e) {
e.stopPropagation(); // 防止触发卡片选择
let currentValue = parseInt(quantityInput.value);
if (currentValue < maxQuantity) {
quantityInput.value = currentValue + 1;
calculateRefundTotal();
}
});
// 数量输入变化
quantityInput.addEventListener('change', function(e) {
e.stopPropagation(); // 防止触发卡片选择
let value = parseInt(this.value);
if (isNaN(value) || value < 0) {
this.value = 0;
} else if (value > maxQuantity) {
this.value = maxQuantity;
}
// 如果数量为0，自动取消选中
if (value === 0 && card.classList.contains('selected')) {
card.classList.remove('selected');
}
calculateRefundTotal();
});
// 数量输入点击事件，防止触发卡片选择
quantityInput.addEventListener('click', function(e) {
e.stopPropagation();
});
});
// 初始计算
calculateRefundTotal();
// 退款原因变化处理
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 {
showDefaultRefundInfo();
}
// 添加动画
dynamicContent.classList.add('slide-in');
setTimeout(() => {
dynamicContent.classList.remove('slide-in');
}, 300);
});
// 显示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);
}
}
});
});
}
// 显示价格降价信息
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() {
uploadModal.classList.add('active');
}
function closeUploadModal() {
uploadModal.classList.remove('active');
}
openUploadModalBtn.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' : ''}`;
}
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() {
attachmentsPreview.innerHTML = '';
if (uploadedFiles.length === 0) {
return;
}
// 显示最多4个缩略图，第5个显示数量
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();
});
attachmentsPreview.appendChild(thumbnail);
});
// 如果文件超过4个，显示剩余数量
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);
attachmentsPreview.appendChild(moreThumbnail);
}
// 更新附件数量显示
openUploadModalBtn.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 = '';
attachmentsPreview.innerHTML = '';
selectedAdditionalFees = [];
// 重置产品选择
productCards.forEach(card => {
card.classList.remove('selected');
const quantityInput = card.querySelector('.quantity-input');
quantityInput.value = 1;
});
// 重置上传区域
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';
openUploadModalBtn.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
md
项目介绍.md
index.html