feat: 商品详情

src/views/goods/commodity/detail-dialog/category-config.vue

@@ -1,25 +1,21 @@
 <template>
-  <div class="max-w-1/2">
+  <div class="max-w-1/2 sku-config">
     <dl v-for="item in list" :key="item.typeId" class="flex mb-1 items-center">
-      <dt>
+      <dt class="flex items-center">
         <el-upload
           ref="uploadRef"
           :auto-upload="false"
           :limit="1"
-          :on-change="handleFileChange"
+          :on-change="(file: any, fileList: any[]) => handleFileChange(file, fileList, item)"
           :on-exceed="handleExceed"
           accept="image/*"
-          list-type="picture-card"
+          :show-file-list="false"
-          class="w-10 h-10"
+          class="w-10 h-10 el-upload-img"
         >
-          <el-icon><Plus /></el-icon>
+          <el-icon v-if="!item.imageUrl" size="12"><Plus /></el-icon>
-          <template #file="{ file }">
+          <img v-else :src="item.imageUrl" class="w-10 h-10" alt="" />
-            <div class="relative w-10 h-10">
-              <img class="w-10 h-10" :src="file.url" alt="" />
-            </div>
-          </template>
         </el-upload>
-        <el-button type="primary" plain size="small" class="mr-2">{{ item.name }}</el-button>
+        <el-button type="primary" plain size="small" class="mr-2 ml-2">{{ item.name }}</el-button>
       </dt>
       <dd class="flex">
         <p>
@@ -58,51 +54,44 @@ const props = defineProps<Props>()
 const uploadRef = ref()
 
 // 处理文件选择
-const handleFileChange = (file: any, fileList: any[]) => {
+const handleFileChange = async (file: any, fileList: any[], item: any) => {
-  // 限制只能选择一张图片
+  console.warn('----- my data is 22: ', file, fileList)
-  if (fileList.length > 1) {
+  const form = new FormData()
-    fileList.splice(0, 1)
+  // 关键：一次性把所有文件塞到同一个键 'files'
-  }
+  fileList.forEach((f) => {
+    form.append('files', f.raw as File)
+  })
+  const res = await api.resource.uploadFile.post!<any>(form)
+  item.imageUrl = res.data[0].url
 }
 
 // 超出限制时的处理
 const handleExceed = () => {
   ElMessage.warning('只能选择一张图片')
 }
+</script>
 
-// 上传图片
+<style scoped lang="scss">
-const uploadImage = async (item: any) => {
+.sku-config {
-  if (!uploadRef.value) return
+  :deep(.el-upload-img) {
-
+    .el-upload {
-  const uploadInstance = uploadRef.value
+      border: 1px dashed var(--el-border-color);
-  const fileList = uploadInstance.fileList
+      border-radius: 6px;
-
+      cursor: pointer;
-  if (fileList.length === 0) {
+      width: 100%;
-    ElMessage.warning('请选择要上传的图片')
+      height: 100%;
-    return
+    }
-  }
+    .el-upload-list--picture-card {
-
+      width: 100%;
-  try {
+      height: 100%;
-    // 创建FormData
+      .el-upload-list__item {
-    const form = new FormData()
+        height: 100%;
-    form.append('files', fileList[0].raw)
+      }
-
+      .el-upload--picture-card {
-    // 调用上传API
+        width: 100%;
-    const res = await (globalThis as any).api.resource.uploadFile.post!(form)
+        height: 100%;
-
+      }
-    if (res.data && res.data.length > 0) {
-      // 更新图片URL
-      item.imageUrl = res.data[0].url
-      ElMessage.success('图片上传成功')
-
-      // 清空上传列表
-      uploadInstance.clearFiles()
-    } else {
-      ElMessage.error('图片上传失败')
     }
-  } catch (error) {
-    console.error('上传失败:', error)
-    ElMessage.error('图片上传失败')
   }
 }
-</script>
+</style>

src/views/goods/commodity/detail-dialog/index.vue

@@ -74,7 +74,7 @@
           </el-tree-select>
         </el-form-item>
         <el-form-item label="测试商品">
-          <el-switch v-model="isTest" active-value="1" inactive-value="0" />
+          <el-switch v-model="$dialog.data.isTest" active-value="1" inactive-value="0" />
         </el-form-item>
       </el-form>
       <div ref="dragRef">
@@ -125,7 +125,7 @@
       <h4 class="font-bold mb-2">内容编辑:</h4>
       <wan-editor v-model="htmlContent"></wan-editor>
     </el-card>
-    <el-button type="primary" @click="onSubmit()">提交</el-button>
+    <el-button class="mt-2 !text-white" type="primary" @click="onSubmit()">提交</el-button>
     <FileExplorerDialog
       v-model="showFileExplorer"
       v-model:initPathArray="currentPathArray"
@@ -171,8 +171,6 @@ const {
   onClickChooseResourceBtn
 } = useImportFile()
 
-const isTest = ref(0)
-
 const categoryData = ref(categoryDataMock)
 const {
   inputValue,