diff --git a/大妈集市.rp b/大妈集市.rp
index 6297bc8..fd22348 100644
Binary files a/大妈集市.rp and b/大妈集市.rp differ
diff --git a/用户端APP/我的订单/order-refund.html b/用户端APP/我的订单/order-refund.html
deleted file mode 100644
index b18082b..0000000
--- a/用户端APP/我的订单/order-refund.html
+++ /dev/null
@@ -1,559 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>退款申请</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-            background-color: #f5f5f5;
-            padding-bottom: 80px;
-        }
-
-        .header {
-            background-color: #013820;
-            color: white;
-            padding: 15px 20px;
-            font-size: 18px;
-            font-weight: bold;
-            text-align: center;
-        }
-
-        .feed-all {
-            min-height: 100vh;
-        }
-
-        .group {
-            background-color: white;
-            margin: 10px;
-            border-radius: 8px;
-            overflow: hidden;
-            border: 1px solid #e5e5e5;
-        }
-
-        .form-item {
-            padding: 15px;
-            border-bottom: 1px solid #f0f0f0;
-        }
-
-        .form-item:last-child {
-            border-bottom: none;
-        }
-
-        .form-label {
-            display: block;
-            color: #333;
-            font-size: 15px;
-            margin-bottom: 10px;
-            font-weight: 500;
-        }
-
-        .form-label.required::before {
-            content: '*';
-            color: #ff0000;
-            margin-right: 4px;
-        }
-
-        .textarea-wrapper {
-            position: relative;
-        }
-
-        .textarea-field {
-            width: 100%;
-            min-height: 120px;
-            padding: 10px;
-            border: 1px solid #dcdcdc;
-            border-radius: 4px;
-            font-size: 14px;
-            resize: vertical;
-            font-family: inherit;
-            line-height: 1.5;
-        }
-
-        .textarea-field:focus {
-            outline: none;
-            border-color: #013820;
-        }
-
-        .textarea-field::placeholder {
-            color: #999;
-        }
-
-        .word-limit {
-            text-align: right;
-            color: #999;
-            font-size: 12px;
-            margin-top: 5px;
-        }
-
-        .upload-section {
-            margin-top: 10px;
-        }
-
-        .upload-wrapper {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 10px;
-        }
-
-        .upload-item {
-            position: relative;
-            width: 80px;
-            height: 80px;
-            border: 1px dashed #dcdcdc;
-            border-radius: 4px;
-            overflow: hidden;
-        }
-
-        .upload-item img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
-        }
-
-        .upload-preview {
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 36px;
-        }
-
-        .upload-item .remove-btn {
-            position: absolute;
-            top: -8px;
-            right: -8px;
-            width: 20px;
-            height: 20px;
-            background-color: #ff0000;
-            color: white;
-            border: none;
-            border-radius: 50%;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            line-height: 1;
-        }
-
-        .upload-btn {
-            width: 80px;
-            height: 80px;
-            border: 1px dashed #dcdcdc;
-            border-radius: 4px;
-            background-color: #fafafa;
-            cursor: pointer;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            color: #999;
-            font-size: 12px;
-            transition: all 0.3s;
-        }
-
-        .upload-btn:hover {
-            border-color: #013820;
-            color: #013820;
-        }
-
-        .upload-btn .icon {
-            font-size: 24px;
-            margin-bottom: 5px;
-        }
-
-        .upload-input {
-            display: none;
-        }
-
-        .footer {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 15px 25px;
-            background-color: white;
-            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-        }
-
-        .submit-btn {
-            width: 100%;
-            padding: 15px;
-            background-color: #013820;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            font-size: 16px;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-
-        .submit-btn:hover {
-            background-color: #025530;
-        }
-
-        .submit-btn:active {
-            transform: scale(0.98);
-        }
-
-        .error-message {
-            color: #ff0000;
-            font-size: 12px;
-            margin-top: 5px;
-        }
-
-        .toast {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background-color: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 15px 25px;
-            border-radius: 4px;
-            z-index: 1000;
-            display: none;
-        }
-
-        .toast.show {
-            display: block;
-            animation: fadeIn 0.3s;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-
-        .loading {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(0, 0, 0, 0.5);
-            display: none;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-        }
-
-        .loading.show {
-            display: flex;
-        }
-
-        .loading-content {
-            background-color: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 20px 30px;
-            border-radius: 8px;
-            text-align: center;
-        }
-
-        .spinner {
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-top: 3px solid white;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 10px;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-    </style>
-</head>
-<body>
-    <div class="header">退款申请</div>
-
-    <div class="feed-all">
-        <form id="refundForm">
-            <div class="group">
-                <div class="form-item">
-                    <label class="form-label required">申请理由</label>
-                    <div class="textarea-wrapper">
-                        <textarea
-                            id="reason"
-                            class="textarea-field"
-                            placeholder="请输入申请理由"
-                            maxlength="300"
-                        ></textarea>
-                        <div class="word-limit">
-                            <span id="wordCount">0</span>/300
-                        </div>
-                    </div>
-                    <div id="reasonError" class="error-message" style="display: none;">请输入申请理由</div>
-                </div>
-
-                <div class="form-item">
-                    <label class="form-label required">上传凭证</label>
-                    <div class="upload-section">
-                        <div class="upload-wrapper" id="uploadWrapper">
-                            <div class="upload-btn" id="uploadBtn">
-                                <div class="icon">+</div>
-                                <div>上传图片</div>
-                            </div>
-                        </div>
-                        <input
-                            type="file"
-                            id="fileInput"
-                            class="upload-input"
-                            accept="image/*"
-                            multiple
-                        >
-                    </div>
-                    <div id="uploadError" class="error-message" style="display: none;">请上传凭证</div>
-                </div>
-            </div>
-        </form>
-    </div>
-
-    <div class="footer">
-        <button class="submit-btn" id="submitBtn">提交</button>
-    </div>
-
-    <div id="toast" class="toast"></div>
-    <div id="loading" class="loading">
-        <div class="loading-content">
-            <div class="spinner"></div>
-            <div>申请中...</div>
-        </div>
-    </div>
-
-    <script>
-        // 获取URL参数
-        function getQueryParam(name) {
-            const urlParams = new URLSearchParams(window.location.search);
-            return urlParams.get(name);
-        }
-
-        // 订单编号（从URL参数获取）
-        const unitOrderNo = getQueryParam('unitOrderNo') || '';
-
-        // 文件列表
-        let fileList = [];
-        const MAX_FILES = 5;
-
-        // DOM元素
-        const reasonTextarea = document.getElementById('reason');
-        const wordCountSpan = document.getElementById('wordCount');
-        const uploadBtn = document.getElementById('uploadBtn');
-        const fileInput = document.getElementById('fileInput');
-        const uploadWrapper = document.getElementById('uploadWrapper');
-        const submitBtn = document.getElementById('submitBtn');
-        const reasonError = document.getElementById('reasonError');
-        const uploadError = document.getElementById('uploadError');
-        const toast = document.getElementById('toast');
-        const loading = document.getElementById('loading');
-
-        // 字数统计
-        reasonTextarea.addEventListener('input', function() {
-            const length = this.value.length;
-            wordCountSpan.textContent = length;
-            if (length > 0) {
-                reasonError.style.display = 'none';
-            }
-        });
-
-        // 点击上传按钮
-        uploadBtn.addEventListener('click', function() {
-            if (fileList.length < MAX_FILES) {
-                fileInput.click();
-            } else {
-                showToast('最多只能上传5张图片');
-            }
-        });
-
-        // 文件选择
-        fileInput.addEventListener('change', function(e) {
-            const files = Array.from(e.target.files);
-
-            if (fileList.length + files.length > MAX_FILES) {
-                showToast(`最多只能上传${MAX_FILES}张图片`);
-                return;
-            }
-
-            files.forEach(file => {
-                if (file.type.startsWith('image/')) {
-                    const reader = new FileReader();
-                    reader.onload = function(event) {
-                        fileList.push({
-                            file: file,
-                            url: event.target.result
-                        });
-                        renderFiles();
-                        uploadError.style.display = 'none';
-                    };
-                    reader.readAsDataURL(file);
-                }
-            });
-
-            // 清空input，以便可以重复选择同一文件
-            fileInput.value = '';
-        });
-
-        // 渲染文件列表
-        function renderFiles() {
-            // 清空现有内容
-            uploadWrapper.innerHTML = '';
-
-            // 渲染已上传的图片
-            fileList.forEach((item, index) => {
-                const div = document.createElement('div');
-                div.className = 'upload-item';
-                // 使用表情符号作为占位符
-                const emojis = ['📷', '🖼️', '🎨', '📸', '🌅'];
-                const emoji = emojis[index % emojis.length];
-                div.innerHTML = `
-                    <div class="upload-preview">${emoji}</div>
-                    <button class="remove-btn" onclick="removeFile(${index})">×</button>
-                `;
-                uploadWrapper.appendChild(div);
-            });
-
-            // 如果未达到上限，显示上传按钮
-            if (fileList.length < MAX_FILES) {
-                const uploadBtnClone = document.createElement('div');
-                uploadBtnClone.className = 'upload-btn';
-                uploadBtnClone.id = 'uploadBtn';
-                uploadBtnClone.innerHTML = `
-                    <div class="icon">+</div>
-                    <div>上传图片</div>
-                `;
-                uploadBtnClone.addEventListener('click', function() {
-                    fileInput.click();
-                });
-                uploadWrapper.appendChild(uploadBtnClone);
-            }
-        }
-
-        // 删除文件
-        window.removeFile = function(index) {
-            fileList.splice(index, 1);
-            renderFiles();
-        };
-
-        // 显示提示
-        function showToast(message, duration = 2000) {
-            toast.textContent = message;
-            toast.classList.add('show');
-            setTimeout(() => {
-                toast.classList.remove('show');
-            }, duration);
-        }
-
-        // 显示加载中
-        function showLoading() {
-            loading.classList.add('show');
-        }
-
-        // 隐藏加载中
-        function hideLoading() {
-            loading.classList.remove('show');
-        }
-
-        // 表单验证
-        function validateForm() {
-            let isValid = true;
-
-            // 验证申请理由
-            if (!reasonTextarea.value.trim()) {
-                reasonError.style.display = 'block';
-                isValid = false;
-            } else {
-                reasonError.style.display = 'none';
-            }
-
-            // 验证上传凭证
-            if (fileList.length === 0) {
-                uploadError.style.display = 'block';
-                showToast('请上传凭证');
-                isValid = false;
-            } else {
-                uploadError.style.display = 'none';
-            }
-
-            return isValid;
-        }
-
-        // 模拟文件上传到服务器
-        async function uploadFilesToServer(files) {
-            // 这里应该是实际的上传逻辑，返回文件URL列表
-            // 现在使用模拟数据
-            const urls = files.map((item, index) => {
-                return `https://example.com/uploads/refund_${Date.now()}_${index}.jpg`;
-            });
-            return urls;
-        }
-
-        // 提交表单
-        submitBtn.addEventListener('click', async function() {
-            if (!validateForm()) {
-                return;
-            }
-
-            showLoading();
-
-            try {
-                // 模拟上传文件并获取URL
-                const imageUrls = await uploadFilesToServer(fileList);
-
-                // 准备提交数据
-                const submitData = {
-                    unitOrderNo: unitOrderNo,
-                    reason: reasonTextarea.value.trim(),
-                    img: imageUrls.join(',')
-                };
-
-                console.log('提交数据:', submitData);
-
-                // 模拟API请求
-                // 实际项目中应该调用真实的API接口
-                await new Promise((resolve, reject) => {
-                    setTimeout(() => {
-                        // 模拟成功
-                        resolve();
-                        // 模拟失败，取消下面的注释
-                        // reject(new Error('提交失败'));
-                    }, 1500);
-                });
-
-                hideLoading();
-                showToast('申请成功，等待审核中');
-
-                // 延迟后返回上一页
-                setTimeout(() => {
-                    window.history.back();
-                    console.log('返回上一页并刷新订单列表');
-                }, 1500);
-
-            } catch (error) {
-                hideLoading();
-                showToast('申请失败，请联系商家');
-                console.error('提交失败:', error);
-            }
-        });
-
-        // 页面加载完成
-        document.addEventListener('DOMContentLoaded', function() {
-            console.log('页面加载完成，订单编号:', unitOrderNo);
-        });
-    </script>
-</body>
-</html>
diff --git a/用户端APP/我的订单/refund-standalone.html b/用户端APP/我的订单/refund-standalone.html
new file mode 100644
index 0000000..345c922
--- /dev/null
+++ b/用户端APP/我的订单/refund-standalone.html
@@ -0,0 +1,1057 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>退款申请</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+            background-color: #f5f5f5;
+            overflow-y: auto;
+        }
+
+        .header {
+            background-color: #013820;
+            color: white;
+            padding: 15px 20px;
+            font-size: 18px;
+            font-weight: bold;
+            text-align: center;
+            position: relative;
+            z-index: 100;
+        }
+
+        .feed-all {
+            min-height: auto;
+        }
+
+        .group {
+            background-color: white;
+            margin: 10px;
+            border-radius: 8px;
+            overflow: hidden;
+            border: 1px solid #e5e5e5;
+        }
+
+        .form-item {
+            padding: 15px;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .form-item:last-child {
+            border-bottom: none;
+        }
+
+        .form-label {
+            display: block;
+            color: #333;
+            font-size: 15px;
+            margin-bottom: 10px;
+            font-weight: 500;
+        }
+
+        .form-label.required::before {
+            content: '*';
+            color: #ff0000;
+            margin-right: 4px;
+        }
+
+        .textarea-wrapper {
+            position: relative;
+        }
+
+        .textarea-field {
+            width: 100%;
+            min-height: 120px;
+            padding: 10px;
+            border: 1px solid #dcdcdc;
+            border-radius: 4px;
+            font-size: 14px;
+            resize: vertical;
+            font-family: inherit;
+            line-height: 1.5;
+        }
+
+        .textarea-field:focus {
+            outline: none;
+            border-color: #013820;
+        }
+
+        .textarea-field::placeholder {
+            color: #999;
+        }
+
+        .word-limit {
+            text-align: right;
+            color: #999;
+            font-size: 12px;
+            margin-top: 5px;
+        }
+
+        .upload-section {
+            margin-top: 10px;
+        }
+
+        .upload-wrapper {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 10px;
+        }
+
+        .upload-item {
+            position: relative;
+            width: 80px;
+            height: 80px;
+            border: 1px dashed #dcdcdc;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .upload-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .upload-item .remove-btn {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            width: 20px;
+            height: 20px;
+            background-color: #ff0000;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            line-height: 1;
+        }
+
+        .upload-btn {
+            width: 80px;
+            height: 80px;
+            border: 1px dashed #dcdcdc;
+            border-radius: 4px;
+            background-color: #fafafa;
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: #999;
+            font-size: 12px;
+            transition: all 0.3s;
+        }
+
+        .upload-btn:hover {
+            border-color: #013820;
+            color: #013820;
+        }
+
+        .upload-btn .icon {
+            font-size: 24px;
+            margin-bottom: 5px;
+        }
+
+        .upload-input {
+            display: none;
+        }
+
+        .footer {
+            padding: 15px 25px;
+            background-color: white;
+            margin: 10px;
+            border-radius: 8px;
+        }
+
+        .submit-btn {
+            width: 100%;
+            padding: 15px;
+            background-color: #013820;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .submit-btn:hover {
+            background-color: #025530;
+        }
+
+        .submit-btn:active {
+            transform: scale(0.98);
+        }
+
+        .error-message {
+            color: #ff0000;
+            font-size: 12px;
+            margin-top: 5px;
+        }
+
+        .toast {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 15px 25px;
+            border-radius: 4px;
+            z-index: 1000;
+            display: none;
+        }
+
+        .toast.show {
+            display: block;
+            animation: fadeIn 0.3s;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .loading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+
+        .loading.show {
+            display: flex;
+        }
+
+        .loading-content {
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 20px 30px;
+            border-radius: 8px;
+            text-align: center;
+        }
+
+        .spinner {
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-top: 3px solid white;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 10px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* 订单信息样式 */
+        .order-info {
+            background-color: #f9f9f9;
+            padding: 15px;
+            border-radius: 4px;
+        }
+
+        .order-info-row {
+            display: flex;
+            justify-content: space-between;
+            padding: 8px 0;
+            font-size: 14px;
+        }
+
+        .order-info-row .label {
+            color: #666;
+        }
+
+        .order-info-row .value {
+            color: #333;
+            font-weight: 500;
+        }
+
+        .order-info-row .price {
+            color: #013820;
+            font-weight: bold;
+        }
+
+        /* 选择框样式 */
+        .select-header {
+            display: flex;
+            align-items: center;
+            padding: 5px 0;
+        }
+
+        .checkbox-wrapper {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+        }
+
+        .checkbox {
+            width: 18px;
+            height: 18px;
+            margin-right: 8px;
+            cursor: pointer;
+        }
+
+        .checkbox-label {
+            font-size: 15px;
+            color: #333;
+            font-weight: 500;
+        }
+
+        /* 商品列表样式 */
+        .goods-list {
+            border-top: 1px solid #f0f0f0;
+        }
+
+        .shop-group {
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .shop-group:last-child {
+            border-bottom: none;
+        }
+
+        .shop-header {
+            display: flex;
+            align-items: center;
+            padding: 12px 15px;
+            background-color: #fafafa;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .shop-name {
+            margin-left: 8px;
+            font-size: 14px;
+            color: #333;
+            font-weight: 500;
+        }
+
+        .goods-item {
+            display: flex;
+            padding: 12px 15px;
+            border-bottom: 1px solid #f5f5f5;
+        }
+
+        .goods-item:last-child {
+            border-bottom: none;
+        }
+
+        .goods-checkbox {
+            display: flex;
+            align-items: center;
+            margin-right: 10px;
+        }
+
+        .goods-content {
+            flex: 1;
+            display: flex;
+            gap: 10px;
+        }
+
+        .goods-image {
+            width: 60px;
+            height: 60px;
+            border-radius: 4px;
+            overflow: hidden;
+            flex-shrink: 0;
+            background-color: #f0f0f0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #999;
+            font-size: 12px;
+            text-align: center;
+            border: 1px solid #e5e5e5;
+        }
+
+        .goods-image img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: none;
+        }
+
+        .goods-image .placeholder {
+            font-size: 24px;
+            color: #ccc;
+        }
+
+        .goods-info {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .goods-name {
+            font-size: 14px;
+            color: #333;
+            line-height: 1.4;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .goods-spec {
+            font-size: 12px;
+            color: #999;
+            margin-top: 4px;
+        }
+
+        .goods-bottom {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 8px;
+        }
+
+        .goods-price {
+            font-size: 15px;
+            color: #013820;
+            font-weight: bold;
+        }
+
+        .goods-quantity {
+            font-size: 13px;
+            color: #666;
+        }
+
+        /* 退款金额样式 */
+        .refund-amount {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 15px;
+            background-color: #f9f9f9;
+            border-radius: 4px;
+        }
+
+        .refund-amount .label {
+            font-size: 15px;
+            color: #333;
+            font-weight: 500;
+        }
+
+        .refund-amount .amount {
+            font-size: 18px;
+            color: #ff0000;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">退款申请</div>
+
+    <div class="feed-all">
+        <form id="refundForm">
+            <!-- 订单基础信息 -->
+            <div class="group">
+                <div class="form-item">
+                    <div class="order-info">
+                        <div class="order-info-row">
+                            <span class="label">订单编号：</span>
+                            <span class="value" id="orderNo">-</span>
+                        </div>
+                        <div class="order-info-row">
+                            <span class="label">下单时间：</span>
+                            <span class="value" id="orderTime">-</span>
+                        </div>
+                        <div class="order-info-row">
+                            <span class="label">商品总金额：</span>
+                            <span class="value price" id="goodsAmount">¥0.00</span>
+                        </div>
+                        <div class="order-info-row">
+                            <span class="label">配送费：</span>
+                            <span class="value price" id="deliveryFee">¥0.00</span>
+                        </div>
+                        <div class="order-info-row">
+                            <span class="label">包装费：</span>
+                            <span class="value price" id="packingFee">¥0.00</span>
+                        </div>
+                        <div class="order-info-row">
+                            <span class="label">调度费：</span>
+                            <span class="value price" id="dispatchFee">¥0.00</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 商品明细列表 -->
+            <div class="group">
+                <div class="form-item">
+                    <div class="select-header">
+                        <label class="checkbox-wrapper">
+                            <input type="checkbox" id="selectAll" class="checkbox">
+                            <span class="checkbox-label">全选</span>
+                        </label>
+                    </div>
+                </div>
+                <div id="goodsList" class="goods-list">
+                    <!-- 商品列表将通过JS动态生成 -->
+                </div>
+            </div>
+
+            <!-- 退款金额 -->
+            <div class="group">
+                <div class="form-item">
+                    <div class="refund-amount">
+                        <span class="label">当前退款金额：</span>
+                        <span class="amount" id="refundAmount">¥0.00</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 申请理由 -->
+            <div class="group">
+                <div class="form-item">
+                    <label class="form-label required">申请理由</label>
+                    <div class="textarea-wrapper">
+                        <textarea
+                            id="reason"
+                            class="textarea-field"
+                            placeholder="请输入申请理由"
+                            maxlength="300"
+                        ></textarea>
+                        <div class="word-limit">
+                            <span id="wordCount">0</span>/300
+                        </div>
+                    </div>
+                    <div id="reasonError" class="error-message" style="display: none;">请输入申请理由</div>
+                </div>
+
+                <div class="form-item">
+                    <label class="form-label required">上传凭证</label>
+                    <div class="upload-section">
+                        <div class="upload-wrapper" id="uploadWrapper">
+                            <div class="upload-btn" id="uploadBtn">
+                                <div class="icon">+</div>
+                                <div>上传图片</div>
+                            </div>
+                        </div>
+                        <input
+                            type="file"
+                            id="fileInput"
+                            class="upload-input"
+                            accept="image/*"
+                            multiple
+                        >
+                    </div>
+                    <div id="uploadError" class="error-message" style="display: none;">请上传凭证</div>
+                </div>
+            </div>
+        </form>
+    </div>
+
+    <div class="footer">
+        <button class="submit-btn" id="submitBtn">提交</button>
+    </div>
+
+    <div id="toast" class="toast"></div>
+    <div id="loading" class="loading">
+        <div class="loading-content">
+            <div class="spinner"></div>
+            <div>申请中...</div>
+        </div>
+    </div>
+
+    <script>
+        // 获取URL参数
+        function getQueryParam(name) {
+            const urlParams = new URLSearchParams(window.location.search);
+            return urlParams.get(name);
+        }
+
+        // 订单编号（从URL参数获取）
+        const unitOrderNo = getQueryParam('unitOrderNo') || 'ORD202501160001';
+
+        // 文件列表
+        let fileList = [];
+        const MAX_FILES = 5;
+
+        // 模拟订单数据
+        const orderData = {
+            orderNo: unitOrderNo,
+            orderTime: '2025-01-16 09:23:15',
+            goodsAmount: 68.50,
+            deliveryFee: 6.00,
+            packingFee: 2.00,
+            dispatchFee: 1.50,
+            shops: [
+                {
+                    shopId: '1',
+                    shopName: '张记蔬菜店',
+                    goods: [
+                        {
+                            goodsId: '101',
+                            goodsName: '新鲜上海青',
+                            goodsSpec: '500g/份',
+                            goodsImage: '',
+                            placeholder: '🥬',
+                            price: 6.50,
+                            quantity: 2
+                        },
+                        {
+                            goodsId: '102',
+                            goodsName: '有机西红柿',
+                            goodsSpec: '1斤/份',
+                            goodsImage: '',
+                            placeholder: '🍅',
+                            price: 8.00,
+                            quantity: 1
+                        },
+                        {
+                            goodsId: '103',
+                            goodsName: '土豆',
+                            goodsSpec: '1kg/份',
+                            goodsImage: '',
+                            placeholder: '🥔',
+                            price: 5.50,
+                            quantity: 1
+                        }
+                    ]
+                },
+                {
+                    shopId: '2',
+                    shopName: '王家鲜肉铺',
+                    goods: [
+                        {
+                            goodsId: '201',
+                            goodsName: '五花肉',
+                            goodsSpec: '1斤/份',
+                            goodsImage: '',
+                            placeholder: '🥓',
+                            price: 18.00,
+                            quantity: 2
+                        },
+                        {
+                            goodsId: '202',
+                            goodsName: '鸡腿',
+                            goodsSpec: '500g/份',
+                            goodsImage: '',
+                            placeholder: '🍗',
+                            price: 12.00,
+                            quantity: 1
+                        }
+                    ]
+                },
+                {
+                    shopId: '3',
+                    shopName: '李大妈水产',
+                    goods: [
+                        {
+                            goodsId: '301',
+                            goodsName: '草鱼',
+                            goodsSpec: '2斤/条',
+                            goodsImage: '',
+                            placeholder: '🐟',
+                            price: 16.00,
+                            quantity: 1
+                        }
+                    ]
+                }
+            ]
+        };
+
+        // 已选商品列表
+        let selectedGoods = [];
+
+        // DOM元素
+        const reasonTextarea = document.getElementById('reason');
+        const wordCountSpan = document.getElementById('wordCount');
+        const uploadBtn = document.getElementById('uploadBtn');
+        const fileInput = document.getElementById('fileInput');
+        const uploadWrapper = document.getElementById('uploadWrapper');
+        const submitBtn = document.getElementById('submitBtn');
+        const reasonError = document.getElementById('reasonError');
+        const uploadError = document.getElementById('uploadError');
+        const toast = document.getElementById('toast');
+        const loading = document.getElementById('loading');
+
+        // 字数统计
+        reasonTextarea.addEventListener('input', function() {
+            const length = this.value.length;
+            wordCountSpan.textContent = length;
+            if (length > 0) {
+                reasonError.style.display = 'none';
+            }
+        });
+
+        // 点击上传按钮
+        uploadBtn.addEventListener('click', function() {
+            if (fileList.length < MAX_FILES) {
+                fileInput.click();
+            } else {
+                showToast('最多只能上传5张图片');
+            }
+        });
+
+        // 文件选择
+        fileInput.addEventListener('change', function(e) {
+            const files = Array.from(e.target.files);
+
+            if (fileList.length + files.length > MAX_FILES) {
+                showToast(`最多只能上传${MAX_FILES}张图片`);
+                return;
+            }
+
+            files.forEach(file => {
+                if (file.type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = function(event) {
+                        fileList.push({
+                            file: file,
+                            url: event.target.result
+                        });
+                        renderFiles();
+                        uploadError.style.display = 'none';
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+
+            // 清空input，以便可以重复选择同一文件
+            fileInput.value = '';
+        });
+
+        // 渲染文件列表
+        function renderFiles() {
+            // 清空现有内容
+            uploadWrapper.innerHTML = '';
+
+            // 渲染已上传的图片
+            fileList.forEach((item, index) => {
+                const div = document.createElement('div');
+                div.className = 'upload-item';
+                div.innerHTML = `
+                    <img src="${item.url}" alt="图片${index + 1}">
+                    <button class="remove-btn" onclick="removeFile(${index})">×</button>
+                `;
+                uploadWrapper.appendChild(div);
+            });
+
+            // 如果未达到上限，显示上传按钮
+            if (fileList.length < MAX_FILES) {
+                const uploadBtnClone = document.createElement('div');
+                uploadBtnClone.className = 'upload-btn';
+                uploadBtnClone.id = 'uploadBtn';
+                uploadBtnClone.innerHTML = `
+                    <div class="icon">+</div>
+                    <div>上传图片</div>
+                `;
+                uploadBtnClone.addEventListener('click', function() {
+                    fileInput.click();
+                });
+                uploadWrapper.appendChild(uploadBtnClone);
+            }
+        }
+
+        // 删除文件
+        window.removeFile = function(index) {
+            fileList.splice(index, 1);
+            renderFiles();
+        };
+
+        // 显示提示
+        function showToast(message, duration = 2000) {
+            toast.textContent = message;
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, duration);
+        }
+
+        // 显示加载中
+        function showLoading() {
+            loading.classList.add('show');
+        }
+
+        // 隐藏加载中
+        function hideLoading() {
+            loading.classList.remove('show');
+        }
+
+        // 表单验证
+        function validateForm() {
+            let isValid = true;
+
+            // 验证是否选择了商品
+            if (selectedGoods.length === 0) {
+                showToast('请至少选择一个商品');
+                isValid = false;
+                return isValid;
+            }
+
+            // 验证申请理由
+            if (!reasonTextarea.value.trim()) {
+                reasonError.style.display = 'block';
+                showToast('请输入申请理由');
+                isValid = false;
+            } else {
+                reasonError.style.display = 'none';
+            }
+
+            // 验证上传凭证
+            if (fileList.length === 0) {
+                uploadError.style.display = 'block';
+                showToast('请上传凭证');
+                isValid = false;
+            } else {
+                uploadError.style.display = 'none';
+            }
+
+            return isValid;
+        }
+
+        // 模拟文件上传到服务器
+        async function uploadFilesToServer(files) {
+            // 这里应该是实际的上传逻辑，返回文件URL列表
+            // 现在使用模拟数据
+            const urls = files.map((item, index) => {
+                return `https://example.com/uploads/refund_${Date.now()}_${index}.jpg`;
+            });
+            return urls;
+        }
+
+        // 提交表单
+        submitBtn.addEventListener('click', async function() {
+            if (!validateForm()) {
+                return;
+            }
+
+            showLoading();
+
+            try {
+                // 模拟上传文件并获取URL
+                const imageUrls = await uploadFilesToServer(fileList);
+
+                // 准备提交数据
+                const submitData = {
+                    unitOrderNo: unitOrderNo,
+                    reason: reasonTextarea.value.trim(),
+                    img: imageUrls.join(','),
+                    selectedGoods: selectedGoods,
+                    refundAmount: document.getElementById('refundAmount').textContent.replace('¥', '')
+                };
+
+                console.log('提交数据:', submitData);
+
+                // 模拟API请求
+                // 实际项目中应该调用真实的API接口
+                await new Promise((resolve, reject) => {
+                    setTimeout(() => {
+                        // 模拟成功
+                        resolve();
+                        // 模拟失败，取消下面的注释
+                        // reject(new Error('提交失败'));
+                    }, 1500);
+                });
+
+                hideLoading();
+                showToast('申请成功，等待审核中');
+
+                // 延迟后返回上一页
+                setTimeout(() => {
+                    // 在实际项目中，这里应该返回到订单列表页面
+                    // window.history.back();
+                    console.log('返回上一页并刷新订单列表');
+                }, 1500);
+
+            } catch (error) {
+                hideLoading();
+                showToast('申请失败，请联系商家');
+                console.error('提交失败:', error);
+            }
+        });
+
+        // 初始化订单信息
+        function initOrderInfo() {
+            document.getElementById('orderNo').textContent = orderData.orderNo;
+            document.getElementById('orderTime').textContent = orderData.orderTime;
+            document.getElementById('goodsAmount').textContent = `¥${orderData.goodsAmount.toFixed(2)}`;
+            document.getElementById('deliveryFee').textContent = `¥${orderData.deliveryFee.toFixed(2)}`;
+            document.getElementById('packingFee').textContent = `¥${orderData.packingFee.toFixed(2)}`;
+            document.getElementById('dispatchFee').textContent = `¥${orderData.dispatchFee.toFixed(2)}`;
+        }
+
+        // 渲染商品列表
+        function renderGoodsList() {
+            const goodsList = document.getElementById('goodsList');
+            goodsList.innerHTML = '';
+
+            orderData.shops.forEach(shop => {
+                const shopGroup = document.createElement('div');
+                shopGroup.className = 'shop-group';
+                shopGroup.dataset.shopId = shop.shopId;
+
+                // 店铺头部
+                const shopHeader = document.createElement('div');
+                shopHeader.className = 'shop-header';
+                shopHeader.innerHTML = `
+                    <label class="checkbox-wrapper">
+                        <input type="checkbox" class="checkbox shop-checkbox" data-shop-id="${shop.shopId}">
+                        <span class="shop-name">${shop.shopName}</span>
+                    </label>
+                `;
+                shopGroup.appendChild(shopHeader);
+
+                // 商品列表
+                shop.goods.forEach(goods => {
+                    const goodsItem = document.createElement('div');
+                    goodsItem.className = 'goods-item';
+                    goodsItem.dataset.goodsId = goods.goodsId;
+                    goodsItem.dataset.shopId = shop.shopId;
+                    goodsItem.innerHTML = `
+                        <div class="goods-checkbox">
+                            <input type="checkbox" class="checkbox goods-checkbox-input"
+                                data-goods-id="${goods.goodsId}"
+                                data-shop-id="${shop.shopId}"
+                                data-price="${goods.price}"
+                                data-quantity="${goods.quantity}">
+                        </div>
+                        <div class="goods-content">
+                            <div class="goods-image">
+                                <div class="placeholder">${goods.placeholder || '📦'}</div>
+                            </div>
+                            <div class="goods-info">
+                                <div class="goods-name">${goods.goodsName}</div>
+                                <div class="goods-spec">${goods.goodsSpec}</div>
+                                <div class="goods-bottom">
+                                    <span class="goods-price">¥${goods.price.toFixed(2)}</span>
+                                    <span class="goods-quantity">x${goods.quantity}</span>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    shopGroup.appendChild(goodsItem);
+                });
+
+                goodsList.appendChild(shopGroup);
+            });
+
+            // 绑定事件
+            bindCheckboxEvents();
+        }
+
+        // 绑定复选框事件
+        function bindCheckboxEvents() {
+            // 全选按钮
+            const selectAll = document.getElementById('selectAll');
+            selectAll.addEventListener('change', function() {
+                const checkboxes = document.querySelectorAll('.goods-checkbox-input');
+                checkboxes.forEach(checkbox => {
+                    checkbox.checked = this.checked;
+                });
+                const shopCheckboxes = document.querySelectorAll('.shop-checkbox');
+                shopCheckboxes.forEach(checkbox => {
+                    checkbox.checked = this.checked;
+                });
+                updateSelectedGoods();
+            });
+
+            // 店铺复选框
+            const shopCheckboxes = document.querySelectorAll('.shop-checkbox');
+            shopCheckboxes.forEach(shopCheckbox => {
+                shopCheckbox.addEventListener('change', function() {
+                    const shopId = this.dataset.shopId;
+                    const goodsCheckboxes = document.querySelectorAll(`.goods-checkbox-input[data-shop-id="${shopId}"]`);
+                    goodsCheckboxes.forEach(checkbox => {
+                        checkbox.checked = this.checked;
+                    });
+                    updateSelectAllStatus();
+                    updateSelectedGoods();
+                });
+            });
+
+            // 商品复选框
+            const goodsCheckboxes = document.querySelectorAll('.goods-checkbox-input');
+            goodsCheckboxes.forEach(goodsCheckbox => {
+                goodsCheckbox.addEventListener('change', function() {
+                    const shopId = this.dataset.shopId;
+                    updateShopCheckboxStatus(shopId);
+                    updateSelectAllStatus();
+                    updateSelectedGoods();
+                });
+            });
+        }
+
+        // 更新店铺复选框状态
+        function updateShopCheckboxStatus(shopId) {
+            const goodsCheckboxes = document.querySelectorAll(`.goods-checkbox-input[data-shop-id="${shopId}"]`);
+            const shopCheckbox = document.querySelector(`.shop-checkbox[data-shop-id="${shopId}"]`);
+
+            const allChecked = Array.from(goodsCheckboxes).every(checkbox => checkbox.checked);
+            shopCheckbox.checked = allChecked;
+        }
+
+        // 更新全选按钮状态
+        function updateSelectAllStatus() {
+            const selectAll = document.getElementById('selectAll');
+            const allGoodsCheckboxes = document.querySelectorAll('.goods-checkbox-input');
+            const allChecked = Array.from(allGoodsCheckboxes).every(checkbox => checkbox.checked);
+            selectAll.checked = allChecked;
+        }
+
+        // 更新已选商品和退款金额
+        function updateSelectedGoods() {
+            selectedGoods = [];
+            let totalAmount = 0;
+
+            const checkedBoxes = document.querySelectorAll('.goods-checkbox-input:checked');
+            checkedBoxes.forEach(checkbox => {
+                const goodsId = checkbox.dataset.goodsId;
+                const price = parseFloat(checkbox.dataset.price);
+                const quantity = parseInt(checkbox.dataset.quantity);
+
+                selectedGoods.push({
+                    goodsId: goodsId,
+                    price: price,
+                    quantity: quantity
+                });
+
+                totalAmount += price * quantity;
+            });
+
+            // 如果全部商品都选中，加上配送费、包装费、调度费
+            const allGoodsCheckboxes = document.querySelectorAll('.goods-checkbox-input');
+            const allChecked = Array.from(allGoodsCheckboxes).every(checkbox => checkbox.checked);
+
+            if (allChecked && selectedGoods.length > 0) {
+                totalAmount += orderData.deliveryFee + orderData.packingFee + orderData.dispatchFee;
+            }
+
+            // 更新显示
+            document.getElementById('refundAmount').textContent = `¥${totalAmount.toFixed(2)}`;
+        }
+
+        // 页面加载完成
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('页面加载完成，订单编号:', unitOrderNo);
+            initOrderInfo();
+            renderGoodsList();
+        });
+    </script>
+</body>
+</html>
