From 5290a1147fc6d5f5ccb16e78eb3c417e7cf4d233 Mon Sep 17 00:00:00 2001
From: nuyue <nuyue@users.noreply.github.com>
Date: Fri, 17 Jul 2026 05:36:36 +0800
Subject: [PATCH] feat: add image upload for supplier shipping photos

---
 frontend/src/views/supplier/Orders.vue | 50 +++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/supplier/Orders.vue b/frontend/src/views/supplier/Orders.vue
index f1cf239..82e8d3b 100644
--- a/frontend/src/views/supplier/Orders.vue
+++ b/frontend/src/views/supplier/Orders.vue
@@ -23,9 +23,42 @@
     <el-dialog v-model="showShip" :title="$t('supplier.shipOrder')" width="500px">
       <el-form :model="shipForm" label-width="140px">
         <el-form-item :label="$t('order.trackingNumber')"><el-input v-model="shipForm.tracking_number" /></el-form-item>
-        <el-form-item :label="$t('supplier.shippingPhoto')"><el-input v-model="shipForm.shipping_photo" placeholder="URL" /></el-form-item>
-        <el-form-item :label="$t('supplier.expressPhoto')"><el-input v-model="shipForm.express_photo" placeholder="URL" /></el-form-item>
-        <el-form-item :label="$t('supplier.customsPhoto')"><el-input v-model="shipForm.customs_photo" placeholder="URL" /></el-form-item>
+        <el-form-item :label="$t('supplier.shippingPhoto')">
+          <el-upload
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            :show-file-list="false"
+            :on-success="(res: any) => shipForm.shipping_photo = res.url"
+            accept="image/*"
+          >
+            <el-image v-if="shipForm.shipping_photo" :src="shipForm.shipping_photo" style="width: 100px; height: 100px" fit="cover" />
+            <el-button v-else size="small" type="primary">上传图片</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="$t('supplier.expressPhoto')">
+          <el-upload
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            :show-file-list="false"
+            :on-success="(res: any) => shipForm.express_photo = res.url"
+            accept="image/*"
+          >
+            <el-image v-if="shipForm.express_photo" :src="shipForm.express_photo" style="width: 100px; height: 100px" fit="cover" />
+            <el-button v-else size="small" type="primary">上传图片</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="$t('supplier.customsPhoto')">
+          <el-upload
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            :show-file-list="false"
+            :on-success="(res: any) => shipForm.customs_photo = res.url"
+            accept="image/*"
+          >
+            <el-image v-if="shipForm.customs_photo" :src="shipForm.customs_photo" style="width: 100px; height: 100px" fit="cover" />
+            <el-button v-else size="small" type="primary">上传图片</el-button>
+          </el-upload>
+        </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="showShip = false">{{ $t('common.cancel') }}</el-button>
@@ -36,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { supplierApi } from '../../api'
 
@@ -45,6 +78,15 @@ const showShip = ref(false)
 const shipOrderId = ref(0)
 const shipForm = reactive({ tracking_number: '', shipping_photo: '', express_photo: '', customs_photo: '' })
 
+const uploadUrl = computed(() => {
+  const baseUrl = import.meta.env.VITE_API_URL || ''
+  return `${baseUrl}/upload`
+})
+const uploadHeaders = computed(() => {
+  const token = localStorage.getItem('token')
+  return { Authorization: `Bearer ${token}` }
+})
+
 const statusMap: Record<string, string> = {
   pending_payment: '待支付', pending_confirm: '待确认', pending_ship: '待发货',
   shipped: '已发货', completed: '已完成', refunding: '退款中', refunded: '已退款', cancelled: '已取消',