From c865a8783a861a4fbfeee485a3c75fde3675f9f6 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 12 Nov 2025 16:46:32 +0800
Subject: [PATCH] =?UTF-8?q?test(KYC=E9=A1=B5):=20=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/uploadFiles.js         | 121 +++++++++++++++++++++++++++++++
 src/views/Wallet/CashOut/KYC.vue | 102 ++++++++++++++++++++------
 2 files changed, 202 insertions(+), 21 deletions(-)
 create mode 100644 src/utils/uploadFiles.js

diff --git a/src/utils/uploadFiles.js b/src/utils/uploadFiles.js
new file mode 100644
index 0000000..53abe8d
--- /dev/null
+++ b/src/utils/uploadFiles.js
@@ -0,0 +1,121 @@
+/**
+ * 上传图片
+ * @param {Function} renderFun 回调函数，接收APP传递的access参数
+ */
+export function uploadImgFile(renderFun) {
+  window.renderData = renderFun
+  // 兼容历史版本
+  window.getIosAccessOriginParam = renderFun
+
+  try {
+    if (android()) {
+      console.debug('Flutter Android WebView 检测')
+      console.debug('window.app 对象:', window.app)
+
+      // 检查Flutter注入的接口
+      if (window.app) {
+        console.debug('window.app 的所有方法:')
+        console.debug(Object.keys(window.app))
+
+        // 检查具体的方法
+        console.debug('uploadImgFile 方法存在?', typeof window.app.uploadImgFile)
+        console.debug('uploadImgFile 是函数?', typeof window.app.uploadImgFile === 'function')
+      }
+
+      // 等待Flutter注入完成
+      const waitForFlutterInterface = () => {
+        let attempts = 0
+        const maxAttempts = 50 // 最多等待5秒
+
+        // 循环检测Flutter接口
+        const checkInterface = () => {
+          attempts++
+          console.debug(`尝试第 ${attempts} 次检查Flutter接口...`)
+
+          if (
+            window.app &&
+            window.app.uploadImgFile &&
+            typeof window.app.uploadImgFile === 'function'
+          ) {
+            console.debug('Flutter接口检测成功，调用 uploadImgFile')
+            try {
+              const result = window.app.uploadImgFile()
+              console.debug('uploadImgFile 返回结果:', result)
+              renderFun(result)
+            } catch (error) {
+              console.error('调用 uploadImgFile 出错:', error)
+            }
+          } else if (attempts < maxAttempts) {
+            // 继续等待
+            setTimeout(checkInterface, 100)
+          } else {
+            console.error('Flutter接口注入超时，使用默认数据')
+            // 使用默认的开发数据
+            const mockAccess = JSON.stringify('')
+            renderFun(mockAccess)
+          }
+        }
+
+        checkInterface()
+      }
+
+      // 如果window.app已存在，直接检查，否则等待
+      if (window.app) {
+        waitForFlutterInterface()
+      } else {
+        console.debug('等待Flutter注入window.app...')
+        // 监听window.app的创建
+        let checkCount = 0
+        const checkApp = () => {
+          checkCount++
+          if (window.app) {
+            console.debug('检测到window.app，开始连接')
+            waitForFlutterInterface()
+          } else if (checkCount < 50) {
+            setTimeout(checkApp, 100)
+          } else {
+            console.error('等待window.app超时')
+            // 手动通知Flutter注入接口
+            if (window.FlutterApp && window.FlutterApp.postMessage) {
+              window.FlutterApp.postMessage('uploadImgFile')
+            }
+          }
+        }
+        checkApp()
+      }
+    } else {
+      console.debug('非移动设备环境')
+      // 非APP环境，可能是浏览器调试
+      console.warn('Not in APP environment, using mock data for development')
+      // 开发环境可以提供模拟数据
+      if (process.env.NODE_ENV === 'development') {
+        const mockAccess = ''
+        setTimeout(() => renderFun(mockAccess), 100)
+      }
+    }
+  } catch (error) {
+    console.error('Failed to connect to APP:', error)
+  }
+}
+
+/**
+ * 解析APP传递的访问参数
+ * @param {string} access JSON字符串格式的访问参数
+ * @returns {Object} 解析后的参数对象
+ */
+export function parseAccessOrigin(access) {
+  try {
+    const accessParam = JSON.parse(access)
+    return {
+      success: true,
+      data: accessParam,
+    }
+  } catch (error) {
+    console.error('Failed to parse access origin:', error)
+    return {
+      success: false,
+      error: 'accessOrigin Error.',
+      data: null,
+    }
+  }
+}
diff --git a/src/views/Wallet/CashOut/KYC.vue b/src/views/Wallet/CashOut/KYC.vue
index 85b3d4b..45f86b2 100644
--- a/src/views/Wallet/CashOut/KYC.vue
+++ b/src/views/Wallet/CashOut/KYC.vue
@@ -61,7 +61,22 @@
             alt=""
             style="display: block; width: 15vw; aspect-ratio: 1/1; object-fit: cover"
           />
+          <button
+            v-if="isInAppEnvironment"
+            @click="callNativeImagePicker"
+            style="
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              opacity: 0;
+              cursor: pointer;
+              border: none;
+            "
+          ></button>
           <input
+            v-else
             type="file"
             accept="image/*"
             @click="onFileInputClick"
@@ -78,25 +93,6 @@
           />
         </div>
 
-        <!-- 可见的备用文件选择按钮 -->
-        <label
-          style="
-            display: inline-flex;
-            align-items: center;
-            padding: 8px 16px;
-            background: linear-gradient(135deg, #8b45ff, #bb92ff);
-            color: white;
-            border-radius: 6px;
-            cursor: pointer;
-            font-weight: 500;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-          "
-        >
-          <span>📁</span>
-          <span style="margin-left: 8px">{{ t('select_image') }}</span>
-          <input type="file" accept="image/*" @change="handleFileChange" style="display: none" />
-        </label>
-
         <img
           src="/src/assets/icon/direction.png"
           alt=""
@@ -195,6 +191,7 @@
 </template>
 
 <script setup>
+import { isInApp } from '@/utils/appBridge.js'
 import { useI18n } from 'vue-i18n'
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import { ref, onMounted, computed } from 'vue'
@@ -203,6 +200,7 @@ import { useRouter } from 'vue-router'
 import { uploadImg } from '@/api/upload.js'
 import { setDocumentDirection } from '@/locales/i18n'
 import { getWithdrawInfoList, addWithdrawInfo, updateWithdrawInfo } from '@/api/wallet'
+import { uploadImgFile, parseAccessOrigin } from '@/utils/uploadFiles.js'
 
 const { t, locale } = useI18n()
 const router = useRouter()
@@ -217,6 +215,7 @@ const previewUrls = ref([]) //预览图片数组
 const resImgUrls = ref([]) //用于提交申请的图片数组
 
 const updateStatus = ref(false) //是否为修改
+const isInAppEnvironment = ref(false)
 
 const applyInfo = ref({
   id: '', //提现信息ID
@@ -232,10 +231,70 @@ const checkStatus = computed(() => {
   return applyInfo.value.contactNumber != '' && previewUrls.value.length > 0
 })
 
+// 调用原生图片选择器
+const callNativeImagePicker = () => {
+  console.log('调用原生图片选择器')
+
+  // 最多3张图片
+  if (previewUrls.value.length >= 3) {
+    showWarning(t('max_images_warning'))
+    return Promise.resolve() // 或者返回 rejected Promise
+  }
+
+  return new Promise((resolve, reject) => {
+    try {
+      uploadImgFile((access) => {
+        try {
+          // 处理空数据情况
+          if (!access || access === '""' || access === '') {
+            console.warn('接收到空的图片数据')
+            showWarning(t('no_image_selected'))
+            reject(new Error('No image selected'))
+            return
+          }
+
+          const result = parseAccessOrigin(access)
+
+          if (result.success && result.data) {
+            const file = result.data
+            console.log('接收到原生图片数据:', file)
+
+            // 生成预览图（需要根据实际数据格式调整）
+            if (typeof file === 'string' && (file.startsWith('http') || file.startsWith('data:'))) {
+              // 如果是URL或base64数据
+              previewUrls.value.push(file)
+              tempFiles.value.push(file) // 保存原始数据用于上传
+            } else {
+              // 如果是文件对象或其他格式，需要相应处理
+              previewUrls.value.push(file)
+              tempFiles.value.push(file)
+            }
+
+            showSuccess(t('image_selected_success'))
+            resolve()
+          } else {
+            const errorMsg = result.error || t('file_selection_failed')
+            console.error('图片选择失败:', errorMsg)
+            showError(errorMsg)
+            reject(new Error(errorMsg))
+          }
+        } catch (error) {
+          console.error('处理原生图片选择结果失败:', error)
+          showError(t('file_processing_failed'))
+          reject(error)
+        }
+      })
+    } catch (error) {
+      console.error('调用原生图片选择器失败:', error)
+      showError(t('native_image_picker_failed'))
+      reject(error)
+    }
+  })
+}
+
 //点击文件选择按钮
-const onFileInputClick = (event) => {
+const onFileInputClick = () => {
   console.log('=== 点击文件选择按钮 ===')
-  showInfo('Please select a file')
 }
 
 // 处理文件选择(每次选一张)
@@ -383,6 +442,7 @@ const updateWithdrawInfoData = async () => {
 }
 
 onMounted(() => {
+  isInAppEnvironment.value = isInApp()
   getWithdrawInfoListData() // 获取个人申请信息
 })
 </script>