提现功能

src/pages/UserCenter/components/UserInfo/components/WalletDialog.vue

@@ -64,7 +64,7 @@
               class="group relative flex h-[46px] items-center overflow-hidden rounded-[32px] bg-[#ADFF5B] p-[3px]"
             >
               <div class="flex h-full items-center px-6 text-xl font-bold text-black">
-                {{ values.type === 'USDT(TRC20)' ? '₮' : '¥' }}
+                {{ values.type === 'USDT(TRC20)' ? '₮' : '$' }}
               </div>
 
               <FormControl>
@@ -101,12 +101,12 @@
                     }
                   "
                   class="h-full flex-1 rounded-[28px]! border-none bg-[#222222] px-4 text-center text-sm font-bold text-white placeholder:text-white/20 focus:ring-0! focus-visible:ring-0!"
-                  :placeholder="values.type === 'USDT(TRC20)' ? '不小于30USDT' : '不小于200RMB'"
+                  :placeholder="values.type === 'USDT(TRC20)' ? '不小于30USDT' : '不小于30$'"
                 />
               </FormControl>
 
               <div class="flex h-full items-center px-6 text-sm font-bold text-black">
-                {{ values.type === 'USDT(TRC20)' ? 'USDT' : 'RMB' }}
+                {{ values.type === 'USDT(TRC20)' ? 'USDT' : '$' }}
               </div>
             </div>
             <FormMessage class="ml-4 text-red-400" />
@@ -116,11 +116,30 @@
         <FormField v-if="values.type !== 'USDT(TRC20)'" name="avatar">
           <FormItem>
             <FormLabel class="mb-4 block text-sm font-bold text-white">收款码</FormLabel>
+            <input
+              ref="fileInputRef"
+              type="file"
+              accept="image/*"
+              class="hidden"
+              @change="onFileChange"
+            />
             <div
-              class="flex cursor-pointer flex-col items-center justify-center rounded-[32px] border-2 border-dashed border-white/10 bg-[#222222] p-10 transition-all hover:border-[#ADFF5B]/50 hover:bg-[#2a2a2a]"
+              class="group relative flex cursor-pointer flex-col items-center justify-center overflow-hidden rounded-[32px] border-2 border-dashed border-white/10 bg-[#222222] transition-all hover:border-[#ADFF5B]/50 hover:bg-[#2a2a2a]"
+              :class="[values.avatar ? 'h-auto min-h-[160px] p-2' : 'p-10']"
+              @click="fileInputRef?.click()"
             >
-              <Upload class="mb-3 h-12 w-12 text-white/20" />
-              <span class="text-base font-medium text-white/30">点击上传高清收款二维码</span>
+              <template v-if="values.avatar">
+                <img :src="values.avatar" class="max-h-[300px] w-full rounded-2xl object-contain" />
+                <div
+                  class="absolute inset-0 flex items-center justify-center bg-black/60 opacity-0 transition-opacity group-hover:opacity-100"
+                >
+                  <span class="text-sm font-bold text-white">点击更换图片</span>
+                </div>
+              </template>
+              <template v-else>
+                <Upload class="mb-3 h-12 w-12 text-white/20" />
+                <span class="text-base font-medium text-white/30">点击上传高清收款二维码</span>
+              </template>
             </div>
             <FormMessage class="ml-4 text-red-400" />
           </FormItem>
@@ -170,8 +189,71 @@ const emit = defineEmits(['confirm'])
 
 const open = ref(false)
 const isPending = ref(false) // 手动管理加载状态
+const fileInputRef = ref<HTMLInputElement | null>(null)
 const ACCOUNT_TYPE = ['USDT(TRC20)', '微信', '支付宝'] as const
 
+const compressImage = (file: File, quality = 0.7, maxWidth = 1024): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = (e) => {
+      const img = new Image()
+      img.src = e.target?.result as string
+      img.onload = () => {
+        const canvas = document.createElement('canvas')
+        let width = img.width
+        let height = img.height
+
+        if (width > maxWidth) {
+          height = (maxWidth / width) * height
+          width = maxWidth
+        }
+
+        canvas.width = width
+        canvas.height = height
+
+        const ctx = canvas.getContext('2d')
+        ctx?.drawImage(img, 0, 0, width, height)
+
+        const compressedBase64 = canvas.toDataURL('image/jpeg', quality)
+        resolve(compressedBase64)
+      }
+      img.onerror = reject
+    }
+    reader.onerror = reject
+  })
+}
+
+const onFileChange = async (e: Event) => {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  if (!file) return
+
+  try {
+    // 压缩图片
+    const compressedBase64 = await compressImage(file)
+
+    // 计算压缩后的大小
+    const base64Length = compressedBase64.split(',')[1].length
+    const sizeInBytes = base64Length * (3 / 4)
+
+    if (sizeInBytes > 2 * 1024 * 1024) {
+      // 限制 2MB
+      toast.error('图片过大，压缩后仍超过 2MB')
+      return
+    }
+
+    setFieldValue('avatar', compressedBase64)
+  } catch (err) {
+    console.error('图片处理失败:', err)
+    toast.error('图片处理失败，请重试')
+  } finally {
+    // 重置 input，允许重新选择同一张图
+    if (e.target) {
+      ;(e.target as HTMLInputElement).value = ''
+    }
+  }
+}
+
 // --- 表单验证 Schema ---
 const formSchema = toTypedSchema(
   z
@@ -210,15 +292,22 @@ const onSubmit = handleSubmit(async (val) => {
   const amount = parseFloat(val.money)
 
   // 1. 基础校验
-  // if (amount > props.commission / 100) return toast.error('佣金不足')
-  const minAmount = val.type === 'USDT(TRC20)' ? 30 : 200
+  const minAmount = 30
   if (amount < minAmount)
-    return toast.error(`金额不能小于${minAmount}${val.type === 'USDT(TRC20)' ? 'USDT' : 'RMB'}`)
+    return toast.error(`金额不能小于${minAmount}${val.type === 'USDT(TRC20)' ? 'USDT' : '$'}`)
 
   try {
     isPending.value = true
 
-    // 2. 检查是否有未完成工单
+    // 2. 获取最新佣金进行校验
+    const userInfo = await request.get<any>('/api/v1/public/user/info')
+    const latestCommission = userInfo?.commission || 0
+    if (Math.round(amount * 100) > latestCommission) {
+      toast.error('佣金不足')
+      return
+    }
+
+    // 3. 检查是否有未完成工单
     const data = await request.get<any>('/api/v1/public/ticket/list', {
       page: 1,
       size: 1,