订单管理

admin/src/views/appointments/index.vue

@@ -631,6 +631,22 @@
             value-format="YYYY-MM-DD HH:mm:ss"
           />
         </el-form-item>
+        <el-form-item label="支付凭证" prop="paymentProof" required>
+          <el-upload
+            class="payment-proof-uploader"
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            :show-file-list="false"
+            :on-success="handlePaymentProofSuccess"
+            :on-error="handlePaymentProofError"
+            :before-upload="beforePaymentProofUpload"
+            accept="image/*"
+          >
+            <img v-if="paymentForm.paymentProof" :src="getImageUrl(paymentForm.paymentProof)" class="payment-proof-image" />
+            <el-icon v-else class="payment-proof-uploader-icon"><Plus /></el-icon>
+          </el-upload>
+          <div class="upload-tip">点击上传支付凭证截图（必填）</div>
+        </el-form-item>
         <el-form-item label="备注">
           <el-input 
             v-model="paymentForm.notes" 
@@ -652,8 +668,9 @@
 
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
 import api from '@/utils/api'
 
 // State
@@ -715,6 +732,7 @@ const paymentForm = reactive({
   amountPeso: null,
   amountRmb: null,
   paymentTime: '',
+  paymentProof: '',
   notes: ''
 })
 const paymentRules = {
@@ -723,9 +741,60 @@ const paymentRules = {
   ],
   paymentTime: [
     { required: true, message: '请选择支付时间', trigger: 'change' }
+  ],
+  paymentProof: [
+    { required: true, message: '请上传支付凭证', trigger: 'change' }
   ]
 }
 
+// Upload config
+const uploadUrl = computed(() => {
+  const baseUrl = import.meta.env.VITE_API_BASE_URL || ''
+  return `${baseUrl}/api/v1/admin/upload/image`
+})
+
+const uploadHeaders = computed(() => {
+  const token = localStorage.getItem('admin_token')
+  return {
+    Authorization: token ? `Bearer ${token}` : ''
+  }
+})
+
+function getImageUrl(path) {
+  if (!path) return ''
+  if (path.startsWith('http')) return path
+  const baseUrl = import.meta.env.VITE_API_BASE_URL || ''
+  return `${baseUrl}${path}`
+}
+
+function handlePaymentProofSuccess(response) {
+  if (response.code === 0 && response.data?.url) {
+    paymentForm.paymentProof = response.data.url
+    ElMessage.success('上传成功')
+  } else {
+    ElMessage.error(response.error?.message || '上传失败')
+  }
+}
+
+function handlePaymentProofError(error) {
+  console.error('Upload error:', error)
+  ElMessage.error('上传失败，请重试')
+}
+
+function beforePaymentProofUpload(file) {
+  const isImage = file.type.startsWith('image/')
+  const isLt5M = file.size / 1024 / 1024 < 5
+  if (!isImage) {
+    ElMessage.error('只能上传图片文件')
+    return false
+  }
+  if (!isLt5M) {
+    ElMessage.error('图片大小不能超过 5MB')
+    return false
+  }
+  return true
+}
+
 // Fetch categories for filter
 async function fetchCategories() {
   try {
@@ -920,6 +989,7 @@ function handleCreatePaymentOrder(row) {
   const seconds = String(now.getSeconds()).padStart(2, '0')
   paymentForm.paymentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
   paymentForm.notes = ''
+  paymentForm.paymentProof = ''
   paymentDialogVisible.value = true
 }
 
@@ -935,6 +1005,11 @@ async function confirmCreatePaymentOrder() {
     ElMessage.warning('请至少填写一种货币金额（比索或人民币）')
     return
   }
+
+  if (!paymentForm.paymentProof) {
+    ElMessage.warning('请上传支付凭证图片')
+    return
+  }
   
   await paymentFormRef.value.validate(async (valid) => {
     if (!valid) return
@@ -948,6 +1023,7 @@ async function confirmCreatePaymentOrder() {
         amountRmb: hasRmb ? paymentForm.amountRmb : undefined,
         serviceContent: paymentForm.serviceContent,
         paymentTime: paymentForm.paymentTime,
+        paymentProof: paymentForm.paymentProof,
         notes: paymentForm.notes
       })
 
@@ -1206,6 +1282,43 @@ onMounted(() => {
     color: #909399;
   }
 
+  .payment-proof-uploader {
+    :deep(.el-upload) {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transition: border-color 0.3s;
+      width: 148px;
+      height: 148px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        border-color: #409eff;
+      }
+    }
+  }
+
+  .payment-proof-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+  }
+
+  .payment-proof-image {
+    width: 146px;
+    height: 146px;
+    object-fit: contain;
+  }
+
+  .upload-tip {
+    font-size: 12px;
+    color: #909399;
+    margin-top: 8px;
+  }
+
   .appointment-details {
     .mt-20 {
       margin-top: 20px;