微信小程序页面迁移校验之前 P5任务处理之前

docs/h5_ui/pages/apply.html

@@ -64,9 +64,9 @@
 
     <!-- 主体内容 -->
     <div class="flex-1 p-4">
-        <!-- 欢迎卡片 -->
+        <!-- 欢迎卡片 + 审核流程整合 -->
         <div class="bg-gradient-to-br from-primary to-blue-400 rounded-2xl p-5 mb-4 text-white shadow-lg shadow-primary/20">
-            <div class="flex items-center gap-4 mb-3">
+            <div class="flex items-center gap-4 mb-4">
                 <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                     <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
                         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
@@ -77,66 +77,83 @@
                     <p class="text-white/80 text-sm">请填写申请信息，等待管理员审核</p>
                 </div>
             </div>
-        </div>
-
-        <!-- 说明文字 -->
-        <div class="bg-primary/5 border border-primary/10 rounded-xl p-4 mb-4">
-            <div class="flex items-start gap-3">
-                <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-                </svg>
-                <div>
-                    <p class="text-sm text-primary font-medium mb-1">申请说明</p>
-                    <p class="text-xs text-gray-7 leading-relaxed">
-                        请填写您的真实信息，包括姓名、岗位和所属门店等，以便管理员快速审核您的申请。
-                    </p>
+            <!-- 审核流程 -->
+            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
+                <div class="flex items-center justify-between">
+                    <div class="flex flex-col items-center">
+                        <div class="w-7 h-7 bg-white rounded-full flex items-center justify-center text-primary text-xs font-semibold mb-1.5">1</div>
+                        <span class="text-xs text-white/90">提交申请</span>
+                    </div>
+                    <div class="flex-1 h-0.5 bg-white/30 mx-2"></div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-7 h-7 bg-white/20 rounded-full flex items-center justify-center text-white/70 text-xs font-medium mb-1.5">2</div>
+                        <span class="text-xs text-white/60">等待审核</span>
+                    </div>
+                    <div class="flex-1 h-0.5 bg-white/30 mx-2"></div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-7 h-7 bg-white/20 rounded-full flex items-center justify-center text-white/70 text-xs font-medium mb-1.5">3</div>
+                        <span class="text-xs text-white/60">审核通过</span>
+                    </div>
+                    <div class="flex-1 h-0.5 bg-white/30 mx-2"></div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-7 h-7 bg-white/20 rounded-full flex items-center justify-center text-white/70 text-xs font-medium mb-1.5">4</div>
+                        <span class="text-xs text-white/60">开始使用</span>
+                    </div>
                 </div>
             </div>
         </div>
 
         <!-- 表单区域 -->
-        <div class="bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
-            <div class="mb-3 flex items-center gap-1">
-                <span class="text-error text-sm">*</span>
-                <span class="text-sm font-medium text-gray-13">申请说明</span>
+        <div class="bg-white rounded-2xl shadow-lg shadow-gray-200/50 overflow-hidden">
+            <!-- 球房ID -->
+            <div class="px-5 py-4 border-b border-gray-100">
+                <div class="flex items-center mb-2">
+                    <span class="text-error text-sm mr-1">*</span>
+                    <span class="text-sm font-medium text-gray-13">球房ID</span>
+                </div>
+                <input type="text" id="siteId" placeholder="请输入球房ID"
+                    class="w-full px-4 py-3 bg-gray-50 rounded-xl border border-gray-100 text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" />
             </div>
-            <textarea 
-                id="applyReason"
-                class="w-full h-36 p-4 bg-gray-50 rounded-xl border border-gray-100 resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all"
-                placeholder="点击填写申请信息：&#10;1. 您的姓名&#10;2. 您的岗位（如：助教、店长等）&#10;3. 所属门店&#10;4. 其他说明（可选）"
-            ></textarea>
-            <p id="errorTip" class="text-error text-xs mt-2 hidden">申请说明不能为空</p>
-            <div class="flex items-center justify-between mt-3">
-                <span class="text-xs text-gray-5">请认真填写，信息不完整可能导致审核不通过</span>
-                <span class="text-xs text-gray-6"><span id="charCount">0</span>/200</span>
+            <!-- 申请身份 -->
+            <div class="px-5 py-4 border-b border-gray-100">
+                <div class="flex items-center mb-2">
+                    <span class="text-error text-sm mr-1">*</span>
+                    <span class="text-sm font-medium text-gray-13">申请身份</span>
+                </div>
+                <input type="text" id="role" placeholder="请输入申请身份（如：助教、店长等）"
+                    class="w-full px-4 py-3 bg-gray-50 rounded-xl border border-gray-100 text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" />
+            </div>
+            <!-- 手机号 -->
+            <div class="px-5 py-4 border-b border-gray-100">
+                <div class="flex items-center mb-2">
+                    <span class="text-error text-sm mr-1">*</span>
+                    <span class="text-sm font-medium text-gray-13">手机号</span>
+                </div>
+                <input type="text" id="phone" placeholder="请输入手机号"
+                    class="w-full px-4 py-3 bg-gray-50 rounded-xl border border-gray-100 text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" />
+            </div>
+            <!-- 编号（选填） -->
+            <div class="px-5 py-4 border-b border-gray-100">
+                <div class="flex items-center mb-2">
+                    <span class="text-sm font-medium text-gray-13">编号</span>
+                    <span class="text-xs text-gray-6 ml-2">选填</span>
+                </div>
+                <input type="text" id="staffNo" placeholder="请输入编号"
+                    class="w-full px-4 py-3 bg-gray-50 rounded-xl border border-gray-100 text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" />
+            </div>
+            <!-- 昵称 -->
+            <div class="px-5 py-4">
+                <div class="flex items-center mb-2">
+                    <span class="text-error text-sm mr-1">*</span>
+                    <span class="text-sm font-medium text-gray-13">昵称</span>
+                </div>
+                <input type="text" id="nickname" placeholder="请输入昵称"
+                    class="w-full px-4 py-3 bg-gray-50 rounded-xl border border-gray-100 text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" />
             </div>
         </div>
 
-        <!-- 审核流程说明 -->
-        <div class="mt-4 bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
-            <h3 class="text-sm font-medium text-gray-13 mb-4">审核流程</h3>
-            <div class="flex items-center justify-between">
-                <div class="flex flex-col items-center">
-                    <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white text-xs font-medium mb-2">1</div>
-                    <span class="text-xs text-gray-7">提交申请</span>
-                </div>
-                <div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
-                <div class="flex flex-col items-center">
-                    <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">2</div>
-                    <span class="text-xs text-gray-6">等待审核</span>
-                </div>
-                <div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
-                <div class="flex flex-col items-center">
-                    <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">3</div>
-                    <span class="text-xs text-gray-6">审核通过</span>
-                </div>
-                <div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
-                <div class="flex flex-col items-center">
-                    <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">4</div>
-                    <span class="text-xs text-gray-6">开始使用</span>
-                </div>
-            </div>
-        </div>
+        <!-- 提示 -->
+        <p class="text-xs text-gray-6 text-center mt-3">请认真填写，信息不完整可能导致审核不通过</p>
     </div>
 
     <!-- 底部按钮 -->
@@ -150,31 +167,49 @@
     </div>
 
     <script>
-        const textarea = document.getElementById('applyReason');
-        const charCount = document.getElementById('charCount');
-        const errorTip = document.getElementById('errorTip');
         const submitBtn = document.getElementById('submitBtn');
-
-        textarea.addEventListener('input', function() {
-            const len = this.value.length;
-            charCount.textContent = len;
-            if (len > 200) {
-                this.value = this.value.slice(0, 200);
-                charCount.textContent = 200;
-            }
-            if (this.value.trim()) {
-                errorTip.classList.add('hidden');
-            }
-        });
+        // 必填字段
+        const requiredFields = [
+            { id: 'siteId', label: '球房ID' },
+            { id: 'role', label: '申请身份' },
+            { id: 'phone', label: '手机号' },
+            { id: 'nickname', label: '昵称' },
+        ];
 
         submitBtn.addEventListener('click', function() {
-            if (!textarea.value.trim()) {
-                errorTip.classList.remove('hidden');
+            let firstEmpty = null;
+            // 清除之前的错误样式
+            document.querySelectorAll('.field-error').forEach(el => el.remove());
+            requiredFields.forEach(f => {
+                const input = document.getElementById(f.id);
+                input.classList.remove('ring-2', 'ring-error/30', 'border-error/40');
+                if (!input.value.trim()) {
+                    input.classList.add('ring-2', 'ring-error/30', 'border-error/40');
+                    const tip = document.createElement('p');
+                    tip.className = 'field-error text-error text-xs mt-1';
+                    tip.textContent = `请输入${f.label}`;
+                    input.parentElement.appendChild(tip);
+                    if (!firstEmpty) firstEmpty = input;
+                }
+            });
+            if (firstEmpty) {
+                firstEmpty.scrollIntoView({ behavior: 'smooth', block: 'center' });
                 return;
             }
             alert('申请已提交，请等待审核');
             window.location.href = 'reviewing.html';
         });
+
+        // 输入时清除错误状态
+        requiredFields.forEach(f => {
+            document.getElementById(f.id).addEventListener('input', function() {
+                if (this.value.trim()) {
+                    this.classList.remove('ring-2', 'ring-error/30', 'border-error/40');
+                    const err = this.parentElement.querySelector('.field-error');
+                    if (err) err.remove();
+                }
+            });
+        });
     </script>
 </body>
 </html>