fix: 套餐

src/views/order-management/order-list/index.vue

@@ -49,10 +49,10 @@
         <ElDialog
           v-model="createDialogVisible"
           :title="'创建订单'"
-          width="600px"
+          width="30%"
           @closed="handleCreateDialogClosed"
         >
-          <ElForm ref="createFormRef" :model="createForm" :rules="createRules" label-width="120px">
+          <ElForm ref="createFormRef" :model="createForm" :rules="createRules" label-width="80px">
             <ElFormItem :label="'订单类型'" prop="order_type">
               <ElSelect
                 v-model="createForm.order_type"
@@ -146,9 +146,7 @@
                       <template v-if="pkg.is_gift">
                         <el-tag type="warning" size="small">赠送</el-tag>
                       </template>
-                      <template v-else>
-                        ¥{{ ((pkg.cost_price || 0) / 100).toFixed(2) }}
-                      </template>
+                      <template v-else> ¥{{ ((pkg.cost_price || 0) / 100).toFixed(2) }} </template>
                     </span>
                   </div>
                 </ElOption>
@@ -176,11 +174,7 @@
                 style="width: 100%"
                 :disabled="selectedPackageIsGift"
               >
-                <ElOption
-                  v-if="!selectedPackageIsGift"
-                  label="钱包支付"
-                  value="wallet"
-                />
+                <ElOption v-if="!selectedPackageIsGift" label="钱包支付" value="wallet" />
                 <!-- 只有平台用户(user_type 1:超级管理员, 2:平台用户)才显示线下支付选项 -->
                 <ElOption
                   v-if="userStore.info.user_type === 1 || userStore.info.user_type === 2"
@@ -224,9 +218,10 @@
               <ElButton
                 type="primary"
                 @click="handleCreateOrder(createFormRef)"
-                :loading="createLoading"
+                :loading="createLoading || voucherUploading"
+                :disabled="voucherUploading"
               >
-                {{ '提交' }}
+                {{ voucherUploading ? '图片上传中...' : '提交' }}
               </ElButton>
             </div>
           </template>
@@ -369,11 +364,13 @@
 
   const loading = ref(false)
   const createLoading = ref(false)
+  const voucherUploading = ref(false)
   const tableRef = ref()
   const createDialogVisible = ref(false)
   const detailDialogVisible = ref(false)
   const currentOrder = ref<Order | null>(null)
   const paymentVoucherFileKey = ref('')
+  let activeVoucherUploadId = 0
 
   // 搜索表单初始值
   const initialSearchState: OrderQueryParams = {
@@ -590,6 +587,14 @@
   const createFormRef = ref<FormInstance>()
   const uploadRef = ref<UploadInstance>()
 
+  const invalidateVoucherUploadState = (clearFileKey = false) => {
+    activeVoucherUploadId += 1
+    voucherUploading.value = false
+    if (clearFileKey) {
+      createForm.payment_voucher_key = undefined
+    }
+  }
+
   // 处理支付凭证文件选择
   const handleVoucherFileChange = async (uploadFile: UploadFile) => {
     const file = uploadFile.raw
@@ -611,6 +616,10 @@
       return
     }
 
+    const requestId = ++activeVoucherUploadId
+    voucherUploading.value = true
+    createForm.payment_voucher_key = undefined
+
     // 开始上传
     try {
       ElMessage.info('正在上传支付凭证...')
@@ -633,6 +642,8 @@
       // 2. 上传文件到对象存储
       await StorageService.uploadFile(upload_url, file, file.type)
 
+      if (requestId !== activeVoucherUploadId) return
+
       // 3. 保存 file_key
       createForm.payment_voucher_key = file_key
       ElMessage.success('上传成功')
@@ -641,16 +652,22 @@
         createFormRef.value?.validateField('payment_voucher_key')
       })
     } catch (error: any) {
+      if (requestId !== activeVoucherUploadId) return
+
       console.error('上传失败:', error)
-      console.log(error.message || '上传失败，请重试')
+      ElMessage.error(error.message || '上传失败，请重试')
       createForm.payment_voucher_key = undefined
       uploadRef.value?.clearFiles()
+    } finally {
+      if (requestId === activeVoucherUploadId) {
+        voucherUploading.value = false
+      }
     }
   }
 
   // 删除支付凭证
   const handleRemoveVoucher = () => {
-    createForm.payment_voucher_key = undefined
+    invalidateVoucherUploadState(true)
   }
 
   const createRules = computed<FormRules>(() => {
@@ -1153,7 +1170,7 @@
     createForm.iot_card_id = null
     createForm.device_id = null
     createForm.payment_method = 'wallet'
-    createForm.payment_voucher_key = undefined
+    invalidateVoucherUploadState(true)
 
     // 清空上传文件列表
     uploadRef.value?.clearFiles()
@@ -1167,6 +1184,10 @@
   // 创建订单
   const handleCreateOrder = async (formEl: FormInstance | undefined) => {
     if (!formEl) return
+    if (voucherUploading.value) {
+      ElMessage.warning('支付凭证上传中，请稍候')
+      return
+    }
 
     await formEl.validate(async (valid) => {
       if (valid) {