fix:将填写弹窗修改为选择弹窗

src/views/product/ProductList.vue

@@ -163,8 +163,28 @@
           <el-input v-model="productForm.content" type="textarea" :rows="4" placeholder="请输入内容" />
         </el-form-item>
         <el-form-item label="封面ID" prop="cover_id">
-          <el-input-number v-model="productForm.cover_id" :min="0" placeholder="请输入封面ID" style="width: 100%" />
+          <div class="cover-selector">
+            <div class="cover-preview" v-if="productForm.cover_id && coverPreviewUrl">
+              <el-image :src="coverPreviewUrl" fit="cover" style="width: 80px; height: 80px; border-radius: 4px;" />
+            </div>
+            <div class="cover-actions">
+              <el-button type="primary" @click="openCoverSelector">
+                <el-icon><Picture /></el-icon>
+                {{ productForm.cover_id ? '更换封面' : '选择封面' }}
+              </el-button>
+              <el-button v-if="productForm.cover_id" @click="clearCover">清除</el-button>
+              <span v-if="productForm.cover_id" class="cover-id-text">ID: {{ productForm.cover_id }}</span>
+            </div>
+          </div>
         </el-form-item>
+        
+        <!-- 封面选择器弹窗 -->
+        <AvatarSelector
+          v-model="coverSelectorVisible"
+          :user-id="1"
+          :current-cover-id="productForm.cover_id"
+          @confirm="handleCoverSelect"
+        />
         <el-form-item label="库存控制" prop="inventory_control">
           <el-switch v-model="productForm.inventory_control" active-text="启用" inactive-text="禁用" />
         </el-form-item>
@@ -395,7 +415,8 @@
 import { ref, reactive, onMounted, nextTick } from 'vue'
 import { getFileDetail } from '@/api/admin/file'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Delete, Search, Refresh } from '@element-plus/icons-vue'
+import { Plus, Delete, Search, Refresh, Picture } from '@element-plus/icons-vue'
+import AvatarSelector from '@/components/admin/AvatarSelector.vue'
 import { getProductList, createProduct, updateProduct, deleteProduct, getProductGroupList,
   getProductTagList,
   getProductParameterList,
@@ -463,6 +484,10 @@ const dialogVisible = ref(false)
 const dialogType = ref('add')
 const productFormRef = ref(null)
 
+// 封面选择器相关
+const coverSelectorVisible = ref(false)
+const coverPreviewUrl = ref('')
+
 // 获取商品列表
 const fetchProductList = async () => {
   loading.value = true
@@ -559,6 +584,7 @@ const handleAdd = () => {
   
   dialogType.value = 'add'
   dialogVisible.value = true
+  coverPreviewUrl.value = '' // 清除封面预览
   Object.assign(productForm, {
     id: undefined,
     name: '',
@@ -599,6 +625,8 @@ const handleEdit = (row) => {
     recommend: row.recommend,
     recommend_rebate: row.recommendRebate
   })
+  // 加载封面预览
+  loadCoverPreview(row.coverId)
 }
 
 // 规格管理
@@ -713,6 +741,40 @@ const submitForm = () => {
   })
 }
 
+// 打开封面选择器
+const openCoverSelector = () => {
+  coverSelectorVisible.value = true
+}
+
+// 处理封面选择
+const handleCoverSelect = async (data) => {
+  productForm.cover_id = data.cover_id
+  coverPreviewUrl.value = data.url
+}
+
+// 清除封面
+const clearCover = () => {
+  productForm.cover_id = undefined
+  coverPreviewUrl.value = ''
+}
+
+// 加载封面预览
+const loadCoverPreview = async (coverId) => {
+  if (!coverId) {
+    coverPreviewUrl.value = ''
+    return
+  }
+  try {
+    const res = await getFileDetail({ file_id: coverId })
+    if (res.data.code === 200) {
+      coverPreviewUrl.value = res.data.data.url
+    }
+  } catch (error) {
+    console.error('加载封面预览失败:', error)
+    coverPreviewUrl.value = ''
+  }
+}
+
 // 初始化
 onMounted(() => {
   fetchProductList()
@@ -1170,5 +1232,28 @@ const submitParamValueForm = () => {
 .text-muted {
   color: #c0c4cc;
 }
+
+/* 封面选择器样式 */
+.cover-selector {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.cover-preview {
+  flex-shrink: 0;
+}
+
+.cover-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.cover-id-text {
+  color: #909399;
+  font-size: 13px;
+}
 </style>