feat: 新增设备切卡模式

src/views/finance/agent-recharge/index.vue

@@ -75,14 +75,7 @@
                 placeholder="请选择支付方式"
                 style="width: 100%"
               >
-                <!-- 所有用户都显示微信在线支付 -->
-                <ElOption label="微信在线支付" value="wechat" />
-                <!-- 平台用户额外显示线下转账 -->
-                <ElOption
-                  v-if="userStore.info.user_type === 1 || userStore.info.user_type === 2"
-                  label="线下转账"
-                  value="offline"
-                />
+                <ElOption label="线下转账" value="offline" />
               </ElSelect>
             </ElFormItem>
             <ElFormItem label="店铺" prop="shop_id">
@@ -97,6 +90,26 @@
                 @change="handleShopChange"
               />
             </ElFormItem>
+            <ElFormItem
+              v-if="createForm.payment_method === 'offline'"
+              label="支付凭证"
+              prop="payment_voucher_key"
+            >
+              <ElUpload
+                ref="uploadRef"
+                :auto-upload="false"
+                :on-change="handleVoucherFileChange"
+                :on-remove="handleRemoveVoucher"
+                accept="image/*"
+                list-type="picture-card"
+                :limit="1"
+              >
+                <el-icon><Plus /></el-icon>
+                <template #tip>
+                  <div class="el-upload__tip">支持 jpg、png 格式，文件大小不超过 5MB</div>
+                </template>
+              </ElUpload>
+            </ElFormItem>
           </ElForm>
           <template #footer>
             <div class="dialog-footer">
@@ -131,7 +144,7 @@
               <ElInput
                 v-model="confirmPayForm.operation_password"
                 type="password"
-                placeholder="请输入操作密码"
+                placeholder="请输入超级管理员统一设置的操作密码"
                 show-password
               />
             </ElFormItem>
@@ -153,8 +166,19 @@
 <script setup lang="ts">
   import { h } from 'vue'
   import { useRouter } from 'vue-router'
-  import { AgentRechargeService, ShopService } from '@/api/modules'
-  import { ElMessage, ElTag, ElTreeSelect, ElButton, ElCascader } from 'element-plus'
+  import { AgentRechargeService, ShopService, StorageService } from '@/api/modules'
+  import {
+    ElMessage,
+    ElTag,
+    ElTreeSelect,
+    ElButton,
+    ElCascader,
+    ElInputNumber,
+    ElSelect,
+    ElOption,
+    ElUpload
+  } from 'element-plus'
+  import { Plus } from '@element-plus/icons-vue'
   import type { FormInstance, FormRules } from 'element-plus'
   import type {
     AgentRecharge,
@@ -298,21 +322,36 @@
 
   const createFormRef = ref<FormInstance>()
   const confirmPayFormRef = ref<FormInstance>()
+  const uploadRef = ref()
 
-  const createRules = reactive<FormRules>({
-    amount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }],
-    payment_method: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
-    shop_id: [{ required: true, message: '请选择目标店铺', trigger: 'change' }]
+  const createRules = computed<FormRules>(() => {
+    const rules: FormRules = {
+      amount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }],
+      payment_method: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
+      shop_id: [{ required: true, message: '请选择目标店铺', trigger: 'change' }]
+    }
+    if (createForm.payment_method === 'offline') {
+      rules.payment_voucher_key = [{ required: true, message: '请上传支付凭证', trigger: 'change' }]
+    }
+    return rules
   })
 
   const confirmPayRules = reactive<FormRules>({
-    operation_password: [{ required: true, message: '请输入操作密码', trigger: 'blur' }]
+    operation_password: [
+      { required: true, message: '请输入超级管理员统一设置的操作密码', trigger: 'blur' }
+    ]
   })
 
-  const createForm = reactive<{ amount: number; payment_method: string; shop_id: number | null }>({
+  const createForm = reactive<{
+    amount: number
+    payment_method: string
+    shop_id: number | null
+    payment_voucher_key?: string
+  }>({
     amount: 100,
     payment_method: '',
-    shop_id: null
+    shop_id: null,
+    payment_voucher_key: undefined
   })
 
   const confirmPayForm = reactive<ConfirmOfflinePaymentRequest>({
@@ -564,8 +603,7 @@
   const showCreateDialog = async () => {
     // 重新加载店铺列表，确保获取最新数据
     await loadShops()
-    // 所有用户默认微信支付
-    createForm.payment_method = 'wechat'
+    createForm.payment_method = ''
     createDialogVisible.value = true
   }
 
@@ -575,6 +613,55 @@
     createForm.amount = 100
     createForm.payment_method = ''
     createForm.shop_id = null
+    createForm.payment_voucher_key = undefined
+    uploadRef.value?.clearFiles()
+  }
+
+  // 支付凭证文件变化
+  const handleVoucherFileChange = async (file: any) => {
+    const isImage = file.raw.type.startsWith('image/')
+    const isLt5M = file.raw.size / 1024 / 1024 < 5
+
+    if (!isImage) {
+      ElMessage.error('只能上传图片文件')
+      uploadRef.value?.clearFiles()
+      return
+    }
+    if (!isLt5M) {
+      ElMessage.error('图片大小不能超过 5MB')
+      uploadRef.value?.clearFiles()
+      return
+    }
+
+    try {
+      const uploadUrlRes = await StorageService.getUploadUrl({
+        file_name: file.name,
+        content_type: file.raw.type,
+        purpose: 'attachment'
+      })
+
+      if (uploadUrlRes.code !== 0) {
+        ElMessage.error(uploadUrlRes.msg || '获取上传地址失败')
+        uploadRef.value?.clearFiles()
+        return
+      }
+
+      const { upload_url, file_key } = uploadUrlRes.data
+
+      await StorageService.uploadFile(upload_url, file.raw, file.raw.type)
+
+      createForm.payment_voucher_key = file_key
+      ElMessage.success('上传成功')
+    } catch (error: any) {
+      console.error('上传失败:', error)
+      createForm.payment_voucher_key = undefined
+      uploadRef.value?.clearFiles()
+    }
+  }
+
+  // 删除支付凭证
+  const handleRemoveVoucher = () => {
+    createForm.payment_voucher_key = undefined
   }
 
   // 创建充值订单
@@ -591,6 +678,10 @@
             shop_id: createForm.shop_id!
           }
 
+          if (createForm.payment_method === 'offline' && createForm.payment_voucher_key) {
+            data.payment_voucher_key = createForm.payment_voucher_key
+          }
+
           await AgentRechargeService.createAgentRecharge(data)
           ElMessage.success('充值订单创建成功')
           createDialogVisible.value = false