+ ${h5Urls.map((item, index) => `
+
+ ○
+ ${item.apiname}
+ 等待中
`).join('')}
-
- ${urlEntries.length > 1 ? `
-
- ${urlEntries.map(([name, url], index) => `
-
- `).join('')}
-
- ` : ''}
+
- `}
-
-
`;
- // 插入到页面顶部
const mainContainer = document.querySelector('.container') || document.body;
- mainContainer.insertBefore(successContainer, mainContainer.firstChild);
+ mainContainer.insertBefore(authContainer, mainContainer.firstChild);
- // 绑定 Tab 切换事件
- if (urlEntries.length > 1) {
- const tabs = successContainer.querySelectorAll('.product-tab');
- const iframes = successContainer.querySelectorAll('.iframe-wrapper');
+ // 启动授权流程
+ this.runAuthFlow(formdataid, h5Urls, redirectUrl);
+ }
- tabs.forEach(tab => {
- tab.addEventListener('click', () => {
- const index = parseInt(tab.dataset.index);
+ /**
+ * 执行授权流程
+ * @param {number} formdataid - 表单数据ID
+ * @param {Array} h5Urls - H5 URL 列表
+ * @param {string} redirectUrl - 最终跳转 URL
+ */
+ async runAuthFlow(formdataid, h5Urls, redirectUrl) {
+ const iframe = document.getElementById('authIframe');
+ const currentIndexEl = document.getElementById('currentIndex');
+ const currentProductNameEl = document.getElementById('currentProductName');
- // 更新 Tab 状态
- tabs.forEach(t => t.classList.remove('active'));
- tab.classList.add('active');
+ await AuthFlowService.startAuthFlow(formdataid, h5Urls, {
+ // 开始处理某个产品
+ onStart: (item, index) => {
+ console.log('[BasicInfoPage] 开始处理:', item.apiname);
+
+ // 更新进度显示
+ if (currentIndexEl) {
+ currentIndexEl.textContent = index + 1;
+ }
+ if (currentProductNameEl) {
+ currentProductNameEl.textContent = item.apiname;
+ }
- // 更新 iframe 显示
- iframes.forEach(iframe => iframe.classList.remove('active'));
- iframes[index].classList.add('active');
+ // 更新进度列表状态
+ const iconEl = document.getElementById(`icon-${item.apicode}`);
+ const statusEl = document.getElementById(`status-${item.apicode}`);
+ if (iconEl) iconEl.textContent = '●';
+ if (statusEl) statusEl.textContent = '授权中...';
+
+ // 高亮当前项
+ document.querySelectorAll('.auth-progress-item').forEach(el => {
+ el.classList.remove('active');
});
+ const currentItem = document.querySelector(`.auth-progress-item[data-apicode="${item.apicode}"]`);
+ if (currentItem) {
+ currentItem.classList.add('active');
+ }
+ },
+
+ // iframe 切换
+ onIframeChange: (url) => {
+ console.log('[BasicInfoPage] iframe 切换到:', url);
+ if (iframe && url) {
+ iframe.src = url;
+ }
+ },
+
+ // 状态更新
+ onProgress: (item, index, status) => {
+ console.log('[BasicInfoPage] 状态更新:', item.apiname, status);
+ },
+
+ // 单个完成
+ onComplete: (item, index, result) => {
+ console.log('[BasicInfoPage] 完成:', item.apiname, result);
+
+ const iconEl = document.getElementById(`icon-${item.apicode}`);
+ const statusEl = document.getElementById(`status-${item.apicode}`);
+ const progressItem = document.querySelector(`.auth-progress-item[data-apicode="${item.apicode}"]`);
+
+ if (result.timeout) {
+ // 超时
+ if (iconEl) iconEl.textContent = '○';
+ if (statusEl) statusEl.textContent = '已超时';
+ if (progressItem) progressItem.classList.add('timeout');
+ } else if (result.status === AUTH_STATUS.APPLY_FAIL) {
+ // 失败
+ if (iconEl) iconEl.textContent = '✗';
+ if (statusEl) statusEl.textContent = '失败';
+ if (progressItem) progressItem.classList.add('failed');
+ } else {
+ // 成功
+ if (iconEl) iconEl.textContent = '✓';
+ if (statusEl) statusEl.textContent = '已完成';
+ if (progressItem) progressItem.classList.add('completed');
+ }
+ },
+
+ // 全部完成
+ onAllComplete: () => {
+ console.log('[BasicInfoPage] 全部授权完成');
+ this.showAuthComplete(redirectUrl);
+ }
+ });
+ }
+
+ /**
+ * 显示授权完成界面
+ * @param {string} redirectUrl - 跳转 URL
+ */
+ showAuthComplete(redirectUrl) {
+ const container = document.getElementById('authFlowContainer');
+ if (!container) return;
+
+ // 隐藏 iframe 区域，显示完成提示
+ const iframeSection = container.querySelector('.auth-iframe-section');
+ if (iframeSection) {
+ iframeSection.style.display = 'none';
+ }
+
+ // 创建完成提示
+ const completeSection = document.createElement('div');
+ completeSection.className = 'auth-complete-section';
+ completeSection.innerHTML = `
+
✓
+
全部授权完成
+
您的申请已全部提交成功！
+ ${redirectUrl ? `
+
+ 5 秒后自动跳转...
+
+
+ ` : `
+
+ `}
+ `;
+
+ container.appendChild(completeSection);
+
+ // 启动倒计时
+ if (redirectUrl) {
+ this.startFinalCountdown(redirectUrl);
+ }
+ }
+
+ /**
+ * 启动最终倒计时
+ * @param {string} redirectUrl - 跳转 URL
+ */
+ startFinalCountdown(redirectUrl) {
+ const countdownEl = document.getElementById('countdownSeconds');
+ const redirectBtn = document.getElementById('redirectNowBtn');
+
+ // 立即跳转按钮
+ if (redirectBtn) {
+ redirectBtn.addEventListener('click', () => {
+ AuthFlowService.redirect(redirectUrl);
});
}
+
+ // 启动倒计时
+ AuthFlowService.startCountdown(
+ AuthFlowService.COUNTDOWN_SECONDS,
+ (remaining) => {
+ if (countdownEl) {
+ countdownEl.textContent = remaining;
+ }
+ },
+ () => {
+ AuthFlowService.redirect(redirectUrl);
+ }
+ );
}
/**
diff --git a/src/js/services/auth-flow.service.js b/src/js/services/auth-flow.service.js
new file mode 100644
index 0000000..656a949
--- /dev/null
+++ b/src/js/services/auth-flow.service.js
@@ -0,0 +1,220 @@
+/**
+ * 授权流程服务
+ * 处理多个 H5 授权页面的逐个加载、轮询检测、超时控制和最终跳转
+ */
+
+import { ApiClient } from '../core/api.js';
+import { API_CONFIG } from '../config/index.js';
+
+// 授权状态常量
+const AUTH_STATUS = {
+ WAITING: 1, // 等待授权
+ CALLBACK: 2, // 已回调
+ APPLY_OK: 3, // 进件成功
+ APPLY_FAIL: 4 // 进件失败
+};
+
+export class AuthFlowService {
+ // 配置常量
+ static POLL_INTERVAL = 3000; // 轮询间隔：3秒
+ static POLL_TIMEOUT = 10 * 60 * 1000; // 超时时间：10分钟
+ static COUNTDOWN_SECONDS = 5; // 倒计时：5秒
+
+ /**
+ * 检查单个 API 的授权状态
+ * @param {number} formdataid - 表单数据ID
+ * @param {string} apicode - API编码
+ * @returns {Promise