From 085070f3314476ea1bdc5d7bbe1a7fb93dea3858 Mon Sep 17 00:00:00 2001
From: "2090205686@qq.com" <guoyongchao666>
Date: Thu, 5 Jun 2025 18:29:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E4=B8=AD=E5=BF=83=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E5=BC=80=E5=8F=91=EF=BC=88=E6=96=B0=E5=A2=9E=E5=95=86?=
 =?UTF-8?q?=E5=93=81=EF=BC=8C=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8=EF=BC=89?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8A=E4=BC=A0=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                      |   2 +-
 .env.production                       |   2 +-
 package.json                          |   2 +-
 src/api/goods/info.js                 |  13 +-
 src/assets/styles/custom.scss         |  85 +++-
 src/components/myUploadImage.vue      | 387 ++++++++++++++++++
 src/components/myUploadVideo.vue      | 286 +++++++++++++
 src/components/tableComponent.vue     |  10 +
 src/views/customer/customerManage.vue | 166 ++------
 src/views/goods/addGoods.vue          | 564 ++++++++++++++++++++++----
 src/views/goods/goodsCategory.vue     |   1 +
 src/views/goods/goodsManage.vue       | 213 ++++------
 vite.config.js                        |   4 +-
 13 files changed, 1359 insertions(+), 376 deletions(-)
 create mode 100644 src/components/myUploadImage.vue
 create mode 100644 src/components/myUploadVideo.vue

diff --git a/.env.development b/.env.development
index 6f56968..84a632c 100644
--- a/.env.development
+++ b/.env.development
@@ -5,5 +5,5 @@ VITE_APP_TITLE = 运营云后台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.18.99:8080/'
+VITE_APP_BASE_API = 'http://192.168.18.151:8080'
 VITE_APP_PLATFORM = 'http://localhost:9000/platform'
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 281197b..5b5b061 100644
--- a/.env.production
+++ b/.env.production
@@ -5,7 +5,7 @@ VITE_APP_TITLE = 运营云后台管理系统
 VITE_APP_ENV = 'production'
 
 # 生产环境
-VITE_APP_BASE_API = 'http://47.109.205.240:8080/'
+VITE_APP_BASE_API = 'http://47.109.205.240:8080'
 VITE_APP_PLATFORM = 'http://47.109.205.240/platform'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
diff --git a/package.json b/package.json
index e5623d3..1aeedc3 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "vue": "3.4.31",
     "vue-cropper": "1.1.1",
     "vue-router": "4.4.0",
-    "vuedraggable": "4.1.0"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.0.5",
diff --git a/src/api/goods/info.js b/src/api/goods/info.js
index 46c79d7..861fc76 100644
--- a/src/api/goods/info.js
+++ b/src/api/goods/info.js
@@ -2,14 +2,23 @@ import request from '@/utils/request'
 
 // 获取商品管理列表
 export function getGoodManageInfo(query) {
+  console.log(query)
   return request({
-    url: '/goodInfoManage/getGoodManage',
+    url: '/goods/goodInfoManage/getGoodManage',
     method: 'get',
     params: query
   })
 }
 
-
+// 获取商品分类列表
+export function getGoodType(query) {
+  console.log(query)
+  return request({
+    url: '/goods/goodInfoManage/goodType',
+    method: 'get',
+    params: query
+  })
+}
 
 
 
diff --git a/src/assets/styles/custom.scss b/src/assets/styles/custom.scss
index 14e520d..f466efa 100644
--- a/src/assets/styles/custom.scss
+++ b/src/assets/styles/custom.scss
@@ -174,24 +174,30 @@
       cursor: pointer;
       transition: all 0.3s;
     }
-    // 表格中文本的颜色
-    .color-gray {
-      color: #5a5a5a;
-    }
-    .color-orange {
-      color: orange;
-    }
-    .color-green {
-      color: green;
-    }
-    .color-red {
-      color: red;
-    }
-  }  
-  .el-button {
-    font-size: 12px !important;
-    font-weight: 400;
   }
+  // 表格中文本的颜色
+  .color-blue {
+    color: #3685fe;
+  }
+  .color-black {
+    color: #000000;
+  }
+  .color-gray {
+    color: #5a5a5a;
+  }
+  .color-orange {
+    color: #ffb345;
+  }
+  .color-green {
+    color: #25bf82;
+  }
+  .color-red {
+    color: #ff4348;
+  }
+}
+.el-button {
+  font-size: 12px !important;
+  font-weight: 400;
 }
 // 页面添加的自定义容器，上下撑满
 .customer-control {
@@ -217,12 +223,53 @@
   width: 60px;
   height: 60px;
   overflow: hidden; /* 隐藏超出部分 */
-  display: flex;    /* 使用 Flex 布局居中 */
+  display: flex; /* 使用 Flex 布局居中 */
   justify-content: center;
   align-items: center;
   .table-cell-img {
-    min-width: 100%;  /* 至少撑满宽度 */
+    min-width: 100%; /* 至少撑满宽度 */
     min-height: 100%; /* 至少撑满高度 */
     object-fit: cover; /* 保持比例并覆盖容器 */
   }
 }
+
+// 新增商品页面-开始
+.customer-box {
+  height: 100%;
+  border-radius: 16px;
+  padding: 20px 16px;
+  overflow-y: auto;
+  background-color: #fff;
+  .my-el-select {
+    width: 200px;
+  }
+  .el-input-number .el-input__inner {
+    text-align: left;
+  }
+  // 商品属性
+  .attr-item {
+    display: inline-block;
+    margin-right: 10px;
+    .el-icon {
+      vertical-align: middle;
+      margin: 5px;
+    }
+  }
+  .attr-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+  .attr-input {
+    width: 120px;
+  }
+  .attr-box {
+    padding: 16px 16px 6px 16px;
+    border-radius: 6px;
+    border: 1px solid #999;
+  }
+}
+// 新增商品页面-结束
diff --git a/src/components/myUploadImage.vue b/src/components/myUploadImage.vue
new file mode 100644
index 0000000..435908c
--- /dev/null
+++ b/src/components/myUploadImage.vue
@@ -0,0 +1,387 @@
+<template>
+    <div class="component-upload-image">
+        <div class="upload-tip">图片比例1:1，建议尺寸为800 * 800px，支持png、jpg、gif等格式，大小2MB以内</div>
+        <el-upload multiple :disabled="disabled" :action="uploadImgUrl" list-type="picture-card"
+            :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :data="data" :limit="limit"
+            :on-error="handleUploadError" :on-exceed="handleExceed" ref="imageUpload" :before-remove="handleDelete"
+            :show-file-list="true" :headers="headers" :file-list="fileList" :on-preview="handlePictureCardPreview"
+            :class="{ hide: fileList.length >= limit }">
+            <el-icon size="30px" color="red">
+                <Plus />
+            </el-icon>
+            <div class="el-upload__text">上传图片</div>
+
+
+            <!-- 自定义文件列表项 -->
+            <template #file="{ file }">
+                <div class="custom-upload-item">
+                    <img :src="file.url" class="el-upload-list__item-thumbnail" />
+
+                    <!-- 主图角标（只在第一张图片显示） -->
+                    <div v-if="isShowSubscript">
+                        <span v-if="fileList[0]?.uid === file.uid" class="main-image-badge">主图</span>
+                    </div>
+
+
+                    <!-- 自定义删除按钮（带文字） -->
+                    <span class="custom-delete-btn" @click.stop="handleDelete(file)">
+                        <el-icon>
+                            <Delete />
+                        </el-icon>
+                        <span>删除</span>
+                    </span>
+                </div>
+            </template>
+        </el-upload>
+        <div class="upload-hint">至多可上传{{ limit }}张图片</div>
+        <!-- 上传提示 -->
+        <!-- <div class="el-upload__tip" v-if="showTip && !disabled">
+            请上传
+            <template v-if="fileSize">
+                大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+            </template>
+            <template v-if="fileType">
+                格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+            </template>
+            的文件
+        </div> -->
+
+        <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
+            <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+        </el-dialog>
+    </div>
+</template>
+
+<script setup>
+import { getToken } from "@/utils/auth"
+import { isExternal } from "@/utils/validate"
+import Sortable from 'sortablejs'
+
+const props = defineProps({
+    modelValue: [String, Object, Array],
+    // 上传接口地址
+    action: {
+        type: String,
+        default: "/uploadApis/file/upload"
+    },
+    // 上传携带的参数
+    data: {
+        type: Object
+    },
+    // 图片数量限制
+    limit: {
+        type: Number,
+        default: 5
+    },
+    isShowSubscript: {
+        type: Boolean,
+        default: true
+    },
+    // 大小限制(MB)
+    fileSize: {
+        type: Number,
+        default: 5
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+        type: Array,
+        default: () => ["png", "jpg", "jpeg"]
+    },
+    // 是否显示提示
+    isShowTip: {
+        type: Boolean,
+        default: true
+    },
+    // 禁用组件（仅查看图片）
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 拖动排序
+    drag: {
+        type: Boolean,
+        default: true
+    }
+})
+
+const { proxy } = getCurrentInstance()
+const emit = defineEmits()
+const number = ref(0)
+const uploadList = ref([])
+const dialogImageUrl = ref("")
+const dialogVisible = ref(false)
+const baseUrl = import.meta.env.VITE_APP_BASE_API
+const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action) // 上传的图片服务器地址
+const headers = ref({ Authorization: "Bearer " + getToken() })
+const fileList = ref([])
+const showTip = computed(
+    () => props.isShowTip && (props.fileType || props.fileSize)
+)
+
+watch(() => props.modelValue, val => {
+    if (val) {
+        // 首先将值转为数组
+        const list = Array.isArray(val) ? val : props.modelValue.split(",")
+        // 然后将数组转为对象数组
+        fileList.value = list.map(item => {
+            if (typeof item === "string") {
+                if (item.indexOf(baseUrl) === -1 && !isExternal(item)) {
+                    item = { name: baseUrl + item, url: baseUrl + item }
+                } else {
+                    item = { name: item, url: item }
+                }
+            }
+            return item
+        })
+    } else {
+        fileList.value = []
+        return []
+    }
+}, { deep: true, immediate: true })
+
+// 上传前loading加载
+function handleBeforeUpload(file) {
+    let isImg = false
+    if (props.fileType.length) {
+        let fileExtension = ""
+        if (file.name.lastIndexOf(".") > -1) {
+            fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1)
+        }
+        isImg = props.fileType.some(type => {
+            if (file.type.indexOf(type) > -1) return true
+            if (fileExtension && fileExtension.indexOf(type) > -1) return true
+            return false
+        })
+    } else {
+        isImg = file.type.indexOf("image") > -1
+    }
+    if (!isImg) {
+        proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}图片格式文件!`)
+        return false
+    }
+    if (file.name.includes(',')) {
+        proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
+        return false
+    }
+    if (props.fileSize) {
+        const isLt = file.size / 1024 / 1024 < props.fileSize
+        if (!isLt) {
+            proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`)
+            return false
+        }
+    }
+    proxy.$modal.loading("正在上传图片，请稍候...")
+    number.value++
+}
+
+// 文件个数超出
+function handleExceed() {
+    proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
+}
+
+// 上传成功回调
+function handleUploadSuccess(res, file) {
+    if (res.code === 200) {
+        uploadList.value.push({ name: res.data.name, url: res.data.url })
+        uploadList.value.forEach(item => {
+            item.url = "http://gov-cloud.oss-cn-chengdu.aliyuncs.com/" + item.url;
+        })
+        uploadedSuccessfully()
+    } else {
+        number.value--
+        proxy.$modal.closeLoading()
+        proxy.$modal.msgError(res.msg)
+        proxy.$refs.imageUpload.handleRemove(file)
+        uploadedSuccessfully()
+    }
+}
+
+// 删除图片
+function handleDelete(file) {
+    const findex = fileList.value.map(f => f.name).indexOf(file.name)
+    if (findex > -1 && uploadList.value.length === number.value) {
+        fileList.value.splice(findex, 1)
+        emit("update:modelValue", listToString(fileList.value))
+        return false
+    }
+}
+
+// 上传结束处理
+function uploadedSuccessfully() {
+    if (number.value > 0 && uploadList.value.length > 0) {
+        fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
+        uploadList.value = []
+        number.value = 0
+        emit("update:modelValue", listToString(fileList.value))
+        proxy.$modal.closeLoading()
+    }
+}
+
+// 上传失败
+function handleUploadError() {
+    proxy.$modal.msgError("上传图片失败")
+    proxy.$modal.closeLoading()
+}
+
+// 预览
+function handlePictureCardPreview(file) {
+    dialogImageUrl.value = file.url
+    dialogVisible.value = true
+}
+
+// 对象转成指定字符串分隔
+function listToString(list, separator) {
+    let strs = ""
+    separator = separator || ","
+    for (let i in list) {
+        if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {
+            strs += list[i].url.replace(baseUrl, "") + separator
+        }
+    }
+    return strs != "" ? strs.substr(0, strs.length - 1) : ""
+}
+
+// 初始化拖拽排序
+onMounted(() => {
+    if (props.drag && !props.disabled) {
+        nextTick(() => {
+            const element = proxy.$refs.imageUpload?.$el?.querySelector('.el-upload-list')
+            Sortable.create(element, {
+                onEnd: (evt) => {
+                    const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
+                    fileList.value.splice(evt.newIndex, 0, movedItem)
+                    emit('update:modelValue', listToString(fileList.value))
+                }
+            })
+        })
+    }
+})
+</script>
+
+<style scoped lang="scss">
+// .el-upload--picture-card 控制加号部分
+:deep(.hide .el-upload--picture-card) {
+    display: none;
+}
+
+// 上传图标加号颜色
+.el-upload--picture-card>i {
+    // color: #25BF82;
+}
+
+:deep() {
+
+    .el-upload--picture-card:hover,
+    .el-upload--picture-card:focus {
+        border-color: #cdd0d6 !important;
+        color: #333 !important
+    }
+
+}
+
+:deep(.el-upload.el-upload--picture-card.is-disabled) {
+    display: none !important;
+}
+
+// 上传图片样式-开始
+.upload-tip {
+    color: #999;
+    font-size: 12px;
+    margin-bottom: 10px;
+}
+
+.upload-hint {
+    color: #999;
+    font-size: 12px;
+    margin-top: 10px;
+}
+
+.el-upload__text {
+    font-size: 12px;
+    line-height: 30px;
+    color: #666;
+}
+
+:deep(.el-upload--picture-card) {
+    width: 120px;
+    height: 120px;
+    line-height: 100px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+:deep(.el-upload-dragger) {
+    width: 120px;
+    height: 120px;
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* 完全隐藏上传按钮区域 */
+.hide-upload :deep(.el-upload--picture-card) {
+    display: none !important;
+}
+
+/* 隐藏默认的查看按钮 */
+:deep(.el-upload-list__item-actions .el-upload-list__item-preview) {
+    display: none !important;
+}
+
+/* 自定义删除按钮（带文字） */
+.custom-delete-btn {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.custom-delete-btn:hover {
+    background: rgba(0, 0, 0, 0.7);
+}
+
+.custom-delete-btn .el-icon {
+    margin-right: 4px;
+    font-size: 14px;
+}
+
+/* 调整上传卡片样式 */
+:deep(.el-upload--picture-card) {
+    width: 120px;
+    height: 120px;
+}
+
+:deep(.el-upload-list__item),
+:deep(.el-upload-list--picture-card .el-upload-list__item) {
+    width: 120px !important;
+    height: 120px !important;
+}
+
+/* 主图角标样式 */
+.main-image-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: #25BF82;
+    color: white;
+    padding: 0 6px;
+    font-size: 10px;
+    border-radius: 0 4px 0 8px;
+    /* 右上和左下圆角 */
+    z-index: 2;
+    line-height: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/myUploadVideo.vue b/src/components/myUploadVideo.vue
new file mode 100644
index 0000000..3ccac7d
--- /dev/null
+++ b/src/components/myUploadVideo.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="upload-file">
+    
+    <div class="upload-tip">建议比例1:1，不超过60s，视频200MB以内</div>
+    <el-upload
+      multiple
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :data="data"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+      list-type="picture-card"
+      ref="fileUpload"
+      v-if="!disabled"
+    >
+      <!-- 上传按钮 -->
+      <el-icon size="30px" color="red">
+                <Plus />
+            </el-icon>
+            <div class="el-upload__text">上传视频</div>
+    </el-upload>
+    <!-- 上传提示 -->
+    <!-- <div class="el-upload__tip" v-if="showTip && !disabled">
+      请上传
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      的文件
+    </div> -->
+    <!-- 文件列表 -->
+    <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">&nbsp;删除</el-link>
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script setup>
+import { getToken } from "@/utils/auth"
+import Sortable from 'sortablejs'
+
+const props = defineProps({
+  modelValue: [String, Object, Array],
+  // 上传接口地址
+  action: {
+    type: String,
+    default: "/uploadApis/file/upload"
+  },
+  // 上传携带的参数
+  data: {
+    type: Object
+  },
+  // 数量限制
+  limit: {
+    type: Number,
+    default: 5
+  },
+  // 大小限制(MB)
+  fileSize: {
+    type: Number,
+    default: 5
+  },
+  // 文件类型
+  fileType: {
+    type: Array,
+    default: () => ["mp4", "mov", "avi", "wmv", "flv", "mkv", "webm"]
+  },
+  // 是否显示提示
+  isShowTip: {
+    type: Boolean,
+    default: true
+  },
+  // 禁用组件（仅查看文件）
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 拖动排序
+  drag: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const { proxy } = getCurrentInstance()
+const emit = defineEmits()
+const number = ref(0)
+const uploadList = ref([])
+const baseUrl = import.meta.env.VITE_APP_BASE_API
+const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action) // 上传文件服务器地址
+const headers = ref({ Authorization: "Bearer " + getToken() })
+const fileList = ref([])
+const showTip = computed(
+  () => props.isShowTip && (props.fileType || props.fileSize)
+)
+
+watch(() => props.modelValue, val => {
+  if (val) {
+    let temp = 1
+    // 首先将值转为数组
+    const list = Array.isArray(val) ? val : props.modelValue.split(',')
+    // 然后将数组转为对象数组
+    fileList.value = list.map(item => {
+      if (typeof item === "string") {
+        item = { name: item, url: item }
+      }
+      item.uid = item.uid || new Date().getTime() + temp++
+      return item
+    })
+  } else {
+    fileList.value = []
+    return []
+  }
+},{ deep: true, immediate: true })
+
+// 上传前校检格式和大小
+function handleBeforeUpload(file) {
+  // 校检文件类型
+  if (props.fileType.length) {
+    const fileName = file.name.split('.')
+    const fileExt = fileName[fileName.length - 1]
+    const isTypeOk = props.fileType.indexOf(fileExt) >= 0
+    if (!isTypeOk) {
+      proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}格式文件!`)
+      return false
+    }
+  }
+  // 校检文件名是否包含特殊字符
+  if (file.name.includes(',')) {
+    proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
+    return false
+  }
+  // 校检文件大小
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize
+    if (!isLt) {
+      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
+      return false
+    }
+  }
+  proxy.$modal.loading("正在上传文件，请稍候...")
+  number.value++
+  return true
+}
+
+// 文件个数超出
+function handleExceed() {
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
+}
+
+// 上传失败
+function handleUploadError(err) {
+  proxy.$modal.msgError("上传文件失败")
+  proxy.$modal.closeLoading()
+}
+
+// 上传成功回调
+function handleUploadSuccess(res, file) {
+  if (res.code === 200) {
+    uploadList.value.push({ name: res.data.name, url: res.data.url })
+        uploadList.value.forEach(item => {
+            item.url = "http://gov-cloud.oss-cn-chengdu.aliyuncs.com/" + item.url;
+        })
+    uploadedSuccessfully()
+  } else {
+    number.value--
+    proxy.$modal.closeLoading()
+    proxy.$modal.msgError(res.msg)
+    proxy.$refs.fileUpload.handleRemove(file)
+    uploadedSuccessfully()
+  }
+}
+
+// 删除文件
+function handleDelete(index) {
+  fileList.value.splice(index, 1)
+  emit("update:modelValue", listToString(fileList.value))
+}
+
+// 上传结束处理
+function uploadedSuccessfully() {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
+    uploadList.value = []
+    number.value = 0
+    emit("update:modelValue", listToString(fileList.value))
+    proxy.$modal.closeLoading()
+  }
+}
+
+// 获取文件名称
+function getFileName(name) {
+  // 如果是url那么取最后的名字 如果不是直接返回
+  if (name.lastIndexOf("/") > -1) {
+    return name.slice(name.lastIndexOf("/") + 1)
+  } else {
+    return name
+  }
+}
+
+// 对象转成指定字符串分隔
+function listToString(list, separator) {
+  let strs = ""
+  separator = separator || ","
+  for (let i in list) {
+    if (list[i].url) {
+      strs += list[i].url + separator
+    }
+  }
+  return strs != '' ? strs.substr(0, strs.length - 1) : ''
+}
+
+// 初始化拖拽排序
+onMounted(() => {
+  if (props.drag && !props.disabled) {
+    nextTick(() => {
+      const element = proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList
+      Sortable.create(element, {
+        ghostClass: 'file-upload-darg',
+        onEnd: (evt) => {
+          const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
+          fileList.value.splice(evt.newIndex, 0, movedItem)
+          emit('update:modelValue', listToString(fileList.value))
+        }
+      })
+    })
+  }
+})
+</script>
+<style scoped lang="scss">
+.file-upload-darg {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+  transition: none !important;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+// 上传提示文字
+.upload-tip {
+    color: #999;
+    font-size: 12px;
+    margin-bottom: 10px;
+}
+.el-upload__text {
+    font-size: 12px;
+    line-height: 30px;
+    color: #666;
+}
+
+:deep(.el-upload--picture-card) {
+    width: 120px;
+    height: 120px;
+    line-height: 100px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+</style>
diff --git a/src/components/tableComponent.vue b/src/components/tableComponent.vue
index 7c065f4..6c640b8 100644
--- a/src/components/tableComponent.vue
+++ b/src/components/tableComponent.vue
@@ -39,6 +39,11 @@
         width="55"
         align="center"
       />
+      <el-table-column label="序号" width="60" v-if="showSort">
+        <template #default="{ $index }">
+          {{ (currentPage - 1) * pageSize + $index + 1 }}
+        </template>
+      </el-table-column>
 
       <template v-for="column in columns" :key="column.prop">
         <el-table-column
@@ -144,6 +149,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  // 是否展示序号
+  showSort: {
+    type: Boolean,
+    default: false,
+  },
   // 每页显示条数选项
   pageSizes: {
     type: Array,
diff --git a/src/views/customer/customerManage.vue b/src/views/customer/customerManage.vue
index 4b0e3db..02f2fde 100644
--- a/src/views/customer/customerManage.vue
+++ b/src/views/customer/customerManage.vue
@@ -5,195 +5,105 @@
       <div ref="searchBarRef" class="search-box">
         <div class="search-bar">
           <div class="search-bar-left">
-            <el-form
-              ref="searchForm"
-              :inline="true"
-              :model="formInline"
-              class="demo-form-inline"
-              :label-width="'auto'"
-            >
+            <el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
               <el-form-item label="昵称" prop="nickname">
-                <el-input
-                  v-model="formInline.nickname"
-                  placeholder="用户昵称"
-                  clearable
-                />
+                <el-input v-model="formInline.nickname" placeholder="用户昵称" clearable />
               </el-form-item>
               <el-form-item label="ID" prop="id">
-                <el-input
-                  v-model="formInline.id"
-                  placeholder="用户ID"
-                  clearable
-                />
+                <el-input v-model="formInline.id" placeholder="用户ID" clearable />
               </el-form-item>
               <el-form-item label="姓名" prop="userName">
-                <el-input
-                  v-model="formInline.userName"
-                  placeholder="用户姓名"
-                  clearable
-                />
+                <el-input v-model="formInline.userName" placeholder="用户姓名" clearable />
               </el-form-item>
               <el-form-item label="账号" prop="accountNumber">
-                <el-input
-                  v-model="formInline.accountNumber"
-                  placeholder="用户账号"
-                  clearable
-                />
+                <el-input v-model="formInline.accountNumber" placeholder="用户账号" clearable />
               </el-form-item>
               <el-form-item label="手机号" prop="phoneNumber">
-                <el-input
-                  v-model="formInline.phoneNumber"
-                  placeholder="用户手机号"
-                  clearable
-                />
+                <el-input v-model="formInline.phoneNumber" placeholder="用户手机号" clearable />
               </el-form-item>
               <el-form-item label="性别" prop="sex">
-                <el-select
-                  v-model="formInline.sex"
-                  placeholder="请选择"
-                  clearable
-                >
+                <el-select v-model="formInline.sex" placeholder="请选择" clearable>
                   <el-option label="男" value="1" />
                   <el-option label="女" value="2" />
                 </el-select>
               </el-form-item>
               <el-form-item label="用户状态" prop="userStatus">
-                <el-select
-                  v-model="formInline.userStatus"
-                  placeholder="请选择"
-                  clearable
-                >
+                <el-select v-model="formInline.userStatus" placeholder="请选择" clearable>
                   <el-option label="异常" value="0" />
                   <el-option label="正常" value="1" />
                 </el-select>
               </el-form-item>
               <el-form-item label="用户分类" prop="userCategory">
-                <el-select
-                  v-model="formInline.userCategory"
-                  placeholder="请选择"
-                  clearable
-                >
+                <el-select v-model="formInline.userCategory" placeholder="请选择" clearable>
                   <el-option label="活跃/低消费" value="1" />
                   <el-option label="活跃/中消费" value="2" />
                   <el-option label="活跃/高消费" value="3" />
                 </el-select>
               </el-form-item>
               <el-form-item label="客单价" prop="unitPrice">
-                <el-select
-                  v-model="formInline.unitPrice"
-                  placeholder="请选择"
-                  clearable
-                >
+                <el-select v-model="formInline.unitPrice" placeholder="请选择" clearable>
                   <el-option label="≤500" value="1" />
                   <el-option label="≤1000" value="2" />
                   <el-option label="≤1500" value="3" />
                 </el-select>
               </el-form-item>
               <el-form-item label="订单数目" prop="ordersNums">
-                <el-select
-                  v-model="formInline.ordersNums"
-                  placeholder="请选择"
-                  clearable
-                >
+                <el-select v-model="formInline.ordersNums" placeholder="请选择" clearable>
                   <el-option label="≤500" value="1" />
                   <el-option label="≤1000" value="2" />
                   <el-option label="≤1500" value="3" />
                 </el-select>
               </el-form-item>
-              <el-form-item
-                label="申请日期"
-                prop="startDate"
-                style="margin-right: 0"
-              >
-                <el-date-picker
-                  v-model="formInline.startDate"
-                  type="date"
-                  value-format="YYYY-MM-DD"
-                  placeholder="请选择起始日期"
-                  clearable
-                  :disabled-date="disableStartDate"
-                  style="width: 160px"
-                />
-                <span
-                  style="width: 30px; text-align: center; display: inline-block"
-                >
+              <el-form-item label="申请日期" prop="startDate" style="margin-right: 0">
+                <el-date-picker v-model="formInline.startDate" type="date" value-format="YYYY-MM-DD"
+                  placeholder="请选择起始日期" clearable :disabled-date="disableStartDate" style="width: 160px" />
+                <span style="width: 30px; text-align: center; display: inline-block">
                   -
                 </span>
-                <el-date-picker
-                  v-model="formInline.endDate"
-                  type="date"
-                  value-format="YYYY-MM-DD"
-                  placeholder="请选择截止日期"
-                  clearable
-                  :disabled-date="disableEndDate"
-                  style="width: 160px"
-                />
+                <el-date-picker v-model="formInline.endDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择截止日期"
+                  clearable :disabled-date="disableEndDate" style="width: 160px" />
               </el-form-item>
             </el-form>
           </div>
           <div class="search-bar-right">
-            <el-button type="primary" icon="Search" @click="onSubmit"
-              >查询</el-button
-            >
-            <el-button
-              icon="Refresh"
-              style="margin: 16px 0 0 0"
-              @click="resetForm"
-              >重置</el-button
-            >
+            <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
+            <el-button icon="Refresh" style="margin: 16px 0 0 0" @click="resetForm">重置</el-button>
           </div>
         </div>
       </div>
       <!-- 表格 -->
       <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
-        <tableComponent
-          :table-data="tableData"
-          :columns="columns"
-          :show-border="false"
-          :show-selection="false"
-          :header-cell-class-name="getHeaderClass"
-          @page-change="handlePaginationChange"
-          @selection-change="handleSelectionChange"
-          :total="tableTotal" :current-page="formInline.current" :page-size="formInline.size"
-        >
+        <tableComponent :table-data="tableData" :columns="columns" :show-border="false" :show-selection="false"
+          :header-cell-class-name="getHeaderClass" @page-change="handlePaginationChange"
+          @selection-change="handleSelectionChange" :total="tableTotal" :current-page="formInline.current"
+          :page-size="formInline.size">
           <!-- 自定义-状态 -->
           <template #userStatus="slotProps">
-            <span v-if="slotProps.row.userStatus == 1" class="color-green"
-              >正常</span
-            >
-            <span v-else-if="slotProps.row.userStatus == 0" class="color-red"
-              >异常</span
-            >
+            <span v-if="slotProps.row.userStatus == 1" class="color-green">正常</span>
+            <span v-else-if="slotProps.row.userStatus == 0" class="color-red">异常</span>
           </template>
 
-          <!-- 自定义-操作 -->         
+          <!-- 自定义-操作 -->
           <template #action="slotProps">
             <el-tooltip effect="dark" placement="bottom-end">
               <template #content>
                 <div class="custom-tooltip-content">
-                  <el-icon
-                    class="el-icon-custom"
-                    @click="seeDetails(slotProps.row)"
-                  >
+                  <el-icon class="el-icon-custom" @click="seeDetails(slotProps.row)">
                     <View />
                   </el-icon>
-                  <el-icon
-                    class="el-icon-custom"
-                    @click="handleEdit(slotProps.row)"
-                  >
+                  <el-icon class="el-icon-custom" @click="handleEdit(slotProps.row)">
                     <Edit />
                   </el-icon>
-                  <el-icon
-                    class="el-icon-custom"
-                    @click="handleDelete(slotProps.row)"
-                  >
+                  <el-icon class="el-icon-custom" @click="handleDelete(slotProps.row)">
                     <Delete />
                   </el-icon>
                 </div>
               </template>
 
               <span class="el-dropdown-link">
-                <el-icon><More /></el-icon>
+                <el-icon>
+                  <More />
+                </el-icon>
               </span>
             </el-tooltip>
           </template>
@@ -330,12 +240,22 @@ const generateMockData = () => {
   }).list;
 };
 // 加载数据
-const loadData = () => {
+const loadData = async () => {
   // 模拟API请求延迟
   setTimeout(() => {
     tableData.value = generateMockData();
     tableTotal.value = tableData.value.length;
   }, 500);
+  // try {
+  //   let response = await getGoodManageInfo(formInline);
+  //   console.log(response);
+  //   if (response.code == 200) {
+  //     tableData.value = response.data.records;
+  //     tableTotal.value = response.data.total;
+  //   }
+  // } catch (error) {
+  //   console.log(error);
+  // }
 };
 // 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
 const getHeaderClass = ({ column }) => {
diff --git a/src/views/goods/addGoods.vue b/src/views/goods/addGoods.vue
index 3c0f3cd..9170802 100644
--- a/src/views/goods/addGoods.vue
+++ b/src/views/goods/addGoods.vue
@@ -1,145 +1,539 @@
 <template>
   <div class="app-container customer-control">
     <div class="customer-box">
-      <el-form ref="searchForm" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
+      <el-form ref="formRef" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
+        <!-- 商品名称 -->
         <el-form-item label="商品名称" prop="goodName">
           <el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" style="width: 800px" />
         </el-form-item>
 
+        <!-- 商品分类 -->
         <el-form-item label="商品分类" required>
-          <el-col :span="6">
-            <el-form-item prop="categoryId">
-              <el-select v-model="formInline.categoryId" placeholder="请选择" class="my-el-select">
-                <el-option v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.name" />
+          <div style="display: flex; gap: 16px;">
+            <el-form-item prop="categoryId1">
+              <el-select v-model="formInline.categoryId1" placeholder="请选择" class="my-el-select"
+                @change="changeCategory1($event)">
+                <el-option v-for="item in categoryList1" :key="item.id" :value="item.id" :label="item.name" />
               </el-select>
             </el-form-item>
-          </el-col>
-          <el-col :span="6">
             <el-form-item prop="categoryId2">
-              <el-select v-model="formInline.categoryId2" placeholder="请选择" class="my-el-select">
+              <el-select v-model="formInline.categoryId2" placeholder="请选择" class="my-el-select"
+                @change="changeCategory2($event)">
                 <el-option v-for="item in categoryList2" :key="item.id" :value="item.id" :label="item.name" />
               </el-select>
             </el-form-item>
-          </el-col>
-          <el-col :span="6">
             <el-form-item prop="categoryId3">
-              <el-select v-model="formInline.categoryId3" placeholder="请选择" class="my-el-select">
+              <el-select v-model="formInline.categoryId3" placeholder="请选择" class="my-el-select"
+                @change="changeCategory3($event)">
                 <el-option v-for="item in categoryList3" :key="item.id" :value="item.id" :label="item.name" />
               </el-select>
             </el-form-item>
-          </el-col>
+          </div>
         </el-form-item>
+        <!-- 公共品牌 -->
+        <el-form-item label="公共品牌" prop="brandId" v-show="formInline.goodCategorySelectType == 1">
+          <el-input v-model="formInline.brandId" clearable placeholder="请输入公共品牌" style="width: 800px" />
+        </el-form-item>
+        <!-- 溯源编码 -->
+        <el-form-item label="溯源编码" prop="traceCode" v-show="formInline.goodCategorySelectType == 1">
+          <el-input v-model="formInline.traceCode" clearable placeholder="请输入溯源编码" style="width: 800px" />
+        </el-form-item>
+        <!-- 商品图片 -->
+        <el-form-item label="商品图片" prop="goodUrl" required>
+          <div>
+            <myUploadImage v-model="formInline.goodUrl"></myUploadImage>
+          </div>
+        </el-form-item>
+        <!-- 规格样式 -->
+        <el-form-item label="规格样式" prop="specStyle" required>
+          <el-radio-group v-model="formInline.specStyle" style="margin-top: -3px;">
+            <el-radio value="1" size="large">单规格</el-radio>
+            <el-radio value="2" size="large">多规格</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-if="formInline.specStyle == 1">
+          <!-- 销售价格 -->
+          <el-form-item label="销售价格" prop="salePrice" required>
+            <el-input-number v-model="formInline.salePrice" :min="0" :precision="2" :controls="false" />
+            <span class="unit">元</span>
+          </el-form-item>
+
+          <!-- 库存数量 -->
+          <el-form-item label="库存数量" prop="stock" required>
+            <el-input-number v-model="formInline.stock" :min="0" :controls="false" />
+          </el-form-item>
+
+          <!-- 净含量 -->
+          <el-form-item label="净含量" prop="netContent" required>
+            <el-input-number v-model="formInline.netContent" :min="0" :controls="false" />
+            <el-select v-model="formInline.netContentUnit" style="width: 80px; margin-left: 10px">
+              <el-option label="kg" value="kg" />
+              <el-option label="g" value="g" />
+              <el-option label="ml" value="ml" />
+            </el-select>
+          </el-form-item>
+        </div>
+        <!-- 多规格 -->
+        <div v-else>
+多规格
+        </div>
+        
+
+        <!-- 商品属性 -->
+        <el-form-item label="商品属性" prop="attribute" required>
+          <div v-for="(item, index) in formInline.attribute" :key="index" class="attr-item">
+            <el-input v-model="item.name" :value="item.name" class="attr-input" placeholder="请输入属性名称" />
+            <el-icon size="20px" v-if="index !== 0" @click="deleteAttr(index)" style="cursor: pointer;">
+              <Delete />
+            </el-icon>
+          </div>
+          <el-button icon="plus" type="primary" plain style="margin: 0" @click="addAttr">添加属性</el-button>
+        </el-form-item>
+        <!-- 属性内容 -->
+        <el-form-item label="属性内容" prop="attribute" required>
+          <div class="attr-box">
+            <div class="attr-row">
+              <div class="attr-input color-gray">属性名称</div>
+              <div class="attr-input color-gray">属性内容</div>
+            </div>
+            <div v-for="(item, index) in formInline.attribute" :key="index" class="attr-row">
+              <div class="attr-input">{{ item.name }}</div>
+              <el-input v-model="item.value" class="attr-input" />
+            </div>
+          </div>
+        </el-form-item>
+        <!-- 发货地址 -->
+        <el-form-item label="发货地址" required>
+          <div style="display: flex; gap: 16px;">
+            <el-form-item prop="selectedAddress">
+              <!-- 省市区级联选择器 -->
+              <el-cascader v-model="formInline.selectedAddress" :options="addressOptions" :props="cascaderProps"
+                placeholder="请选择省市区" clearable />
+            </el-form-item>
+            <el-form-item prop="detailAddress">
+              <!-- 详细地址输入框 -->
+              <el-input v-model="formInline.detailAddress" placeholder="详细地址（如街道、门牌号等）" style="width: 220px;" />
+            </el-form-item>
+          </div>
+        </el-form-item>
+        <!-- 保障服务 -->
+        <el-form-item label="保障服务" prop="safeguard" required style="margin-bottom: 2px;">
+          <el-checkbox v-model="isSafeguardSelected" size="large" style="margin-top: -3px;">
+            <div style="color: #333;" v-for="(item, index) in formInline.safeguard.options" :key="index">{{ item.text }}
+            </div>
+          </el-checkbox>
+        </el-form-item>
+        <!-- 优惠折扣 -->
+        <el-form-item label="优惠折扣" style="margin-bottom: 10px;">
+          <div style="width: 100%;">
+            <el-checkbox v-model="isDiscountSettings" size="large" style="margin-top: -3px;">
+              <div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">{{
+                item.text }}</div>
+            </el-checkbox>
+          </div>
+          <div style="width: 100%;">
+            <el-checkbox v-model="isDiscountRebate" size="large" style="margin-top: -3px;">
+              <div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">{{
+                item.text }}</div>
+            </el-checkbox>
+          </div>
+        </el-form-item>
+        <!-- 商品详情 -->
+        <el-form-item label="商品详情" prop="detailUrl">
+          <div>
+            <myUploadImage v-model="formInline.detailUrl" :isShowSubscript="false"></myUploadImage>
+          </div>
+        </el-form-item>
+        <!-- 商品视频 -->
+        <el-form-item label="商品视频" prop="videoUrl">
+          <div>
+            <myUploadVideo v-model="formInline.videoUrl"></myUploadVideo>
+          </div>
+        </el-form-item>
+
       </el-form>
+      <el-button type="primary" @click="onSave" style="margin: 10px 0 0 80px;width: 150px;">确认新增</el-button>
     </div>
   </div>
 </template>
 <script setup>
 import { ca } from "element-plus/es/locales.mjs";
-import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+import { ref, reactive, nextTick, onMounted } from "vue";
+import myUploadImage from "@/components/myUploadImage.vue";
+import myUploadVideo from "@/components/myUploadVideo.vue";
+import { getGoodType } from "@/api/goods/info";
 
+const formRef = ref(null)
 const formInline = reactive({
   goodName: "高质量水稻",
-  categoryId: "", //一级
+  categoryId: "", //一级,
+  categoryId1: "", //一级,
   categoryId2: "", //二级
   categoryId3: "", //三级
-  goodUrl:
-    "https://image.cnhnb.com/image/jpg/head/2021/12/23/d304172c6f8f45a1aa11d9d1b51de309.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg,https://image.cnhnb.com/image/jpg/head/2021/12/25/d345dde8938240afb9e59b16f77f8b50.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg",
-  netWeight: { "100元": "1kg", "200元": "10kg", "300元": "100kg" },
-  stock: 6500,
-  attribute: {
-    品牌: "童涵春堂",
-    型号: "种子种苗",
-    储存条件: "15~25℃(避免高温或冷冻)",
-    系列: "农用百货",
-    产地: "耿马县",
-  },
-  sendAddress: "云南省昆明市",
-  safeguard: "七天无理由退货",
-  detailUrl:
-    "https://image.cnhnb.com/image/jpg/head/2021/12/23/d304172c6f8f45a1aa11d9d1b51de309.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg,https://image.cnhnb.com/image/jpg/head/2021/12/25/d345dde8938240afb9e59b16f77f8b50.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg",
+  goodUrl: "", //逗号分割的多个图片地址字符串
+  goodCategorySelectType: 2, // 商品分类一级选项
+  brandId: "", //品牌
+  traceCode: "", //溯源码
+
+  specStyle: "1",//规格样式
+  salePrice: 0,//销售价格-单规格
+  stock: 6500,//库存数量-单规格
+  netContent: 0,//净含量-单规格
+  netContentUnit: "kg",//净含量单位
+  netWeight: [
+    {
+      "goodSpecs": "含氮20%",
+      "goodPrice": 135,
+      "goodStock": 10000,
+      "netContent": "50",
+      "unit": "kg"
+    }
+  ], //规格，格式建议数组
+  attribute: [
+    {
+      name: '品牌', //属性
+      value: '童涵春堂', //内容
+    },
+    {
+      name: '型号', //属性
+      value: '种子种苗', //内容
+    },
+  ],
+  selectedAddress: [], //选中的省市区编码数组
+  areaAddress: '云南省,昆明市,五华区', //区域地址
+  detailAddress: "", //详细地址
+  sendAddress: "云南省昆明市", //提交的组合地址
+  isCheckbox: true,
+  safeguard: {
+    isSelected: 1, //0未选中 1选中
+    options: [
+      { text: '该商品，支持【七天无理由退货】服务' },
+    ]
+  }, //保障服务
+  discountSettings: {
+    isSelected: 0, //0未选中 1选中
+    options: [
+      { text: '支持【满100减10元】优惠活动' },
+      { text: '支持【满200减20元】优惠活动' },
+    ]
+  }, //优惠设置
+  discountRebate: {
+    isSelected: 0, //0未选中 1选中
+    options: [
+      { text: '支持【满两件-打8折】优惠活动' },
+      { text: '支持【单件-打905折】优惠活动' },
+    ]
+  }, //优惠折扣
+  detailUrl: "",
   brandId: "44552",
   traceCode: "45788",
   videoUrl: "",
-  describe:
-    "在实际应用中，你可能需要根据具体的业务需求来调整视频字段的表示方式。例如，在数据库设计中，你可能需要为每个字段定义更详细的数据类型、约束条件和索引策略；在API接口定义中，你可能需要为每个字段定义请求和响应的格式、错误码和文档说明等。",
 });
 const rules = reactive({
   goodName: [
-    { required: true, message: '请输入商品名称', trigger: 'blur' },
-  ],
-  region: [
     {
       required: true,
-      message: 'Please select Activity zone',
+      message: '请输入商品名称',
+      trigger: 'blur'
+    },
+  ],
+  categoryId1: [
+    {
+      required: true,
+      message: '请选择',
       trigger: 'change',
     },
   ],
-  count: [
+  categoryId2: [
     {
       required: true,
-      message: 'Please select Activity count',
+      message: '请选择',
       trigger: 'change',
     },
   ],
-  date1: [
+  categoryId3: [
     {
-      type: 'date',
       required: true,
-      message: 'Please pick a date',
+      message: '请选择',
       trigger: 'change',
     },
   ],
-  date2: [
+  goodUrl: [
     {
-      type: 'date',
-      required: true,
-      message: 'Please pick a time',
-      trigger: 'change',
-    },
+      validator: (rule, value, callback) => {
+        if (value === "" || value.trim() === "") {
+          callback(new Error('请至少上传一张商品图片'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
   ],
-  location: [
+  specStyle: [
+    { required: true, message: '请选择规格样式', trigger: 'change' }
+  ],
+  salePrice: formInline.specStyle === '1' ? [
+    {
+      validator: (rule, value, callback) => {
+        if (!value || Number(value) <= 0) {
+          callback(new Error('请输入销售价格'))
+        } else {
+          callback()
+        }
+      },
+      trigger: ['blur', 'change']
+    },
+  ] : [],
+  stock: formInline.specStyle === '1' ? [
+    {
+      validator: (rule, value, callback) => {
+        if (!value || Number(value) <= 0) {
+          callback(new Error('请输入库存数量'))
+        } else {
+          callback()
+        }
+      },
+      trigger: ['blur', 'change']
+    },
+  ] : [],
+  netContent: formInline.specStyle === '1' ? [
+    {
+      validator: (rule, value, callback) => {
+        if (!value || Number(value) <= 0) {
+          callback(new Error('请输入净含量'))
+        } else {
+          callback()
+        }
+      },
+      trigger: ['blur', 'change']
+    },
+  ] : [],
+  attribute: [
+    {
+      validator: (rule, value, callback) => {
+        // 检查是否至少有一个属性
+        if (!value || value.length === 0) {
+          return callback(new Error('至少需要添加一个属性'))
+        }
+
+        // 检查每个属性名称是否已填写
+        const emptyNames = value.filter(item => !item.name?.trim())
+        if (emptyNames.length > 0) {
+          return callback(new Error('请填写所有属性名称和内容'))
+        }
+
+        callback()
+      },
+      trigger: 'blur'
+    }
+  ],
+  selectedAddress: [
     {
       required: true,
-      message: 'Please select a location',
-      trigger: 'change',
-    },
+      validator: (rule, value, callback) => {
+        if (!value || value.length !== 3) {
+          callback(new Error('请选择完整的省市区'));
+        } else {
+          callback();
+        }
+      },
+      trigger: 'blur'
+    }
   ],
-  type: [
-    {
-      type: 'array',
-      required: true,
-      message: 'Please select at least one activity type',
-      trigger: 'change',
-    },
-  ],
-  resource: [
-    {
-      required: true,
-      message: 'Please select activity resource',
-      trigger: 'change',
-    },
-  ],
-  desc: [
-    { required: true, message: 'Please input activity form', trigger: 'blur' },
+  detailAddress: [
+    { required: true, message: '请输入详细地址', trigger: 'blur' }
   ],
 })
-const categoryList = ref([]);
-const categoryList2 = ref([]);
-const categoryList3 = ref([]);
-const searchForm = ref(null);
-const onSubmit = () => {
-  console.log("submit!");
-  console.log(formInline);
-};
-</script>
-<style lang="scss" scoped>
-.customer-box {
-  border-radius: 16px;
-  padding: 20px 16px;
-  background-color: #fff;
+
+const addAttr = () => {
+  formInline.attribute.push({
+    name: '',
+    value: '',
+  })
+}
+const deleteAttr = (index) => {
+  formInline.attribute.splice(index, 1)
 }
 
-.my-el-select {
-  margin-right: 16px;
-}
-</style>
+// 选中的省市区编码数组（如：['云南省', '昆明市', '呈贡区']）
+const selectedAddress = ref([]);
+const detailAddress = ref('');
+// 级联选择器配置
+const cascaderProps = ref({
+  value: 'name',  // 选项值字段名
+  label: 'name',  // 选项标签字段名
+  children: 'children' // 子选项字段名
+});
+// 省市区数据（示例）
+const addressOptions = ref([
+  {
+    name: '云南省',
+    children: [
+      {
+        name: '昆明市',
+        children: [
+          { name: '五华区' },
+          { name: '盘龙区' },
+          { name: '呈贡区' }
+        ]
+      },
+      {
+        name: '曲靖市',
+        children: [
+          { name: '麒麟区' },
+          { name: '沾益区' }
+        ]
+      }
+    ]
+  },
+  {
+    name: '广东省',
+    children: [
+      {
+        name: '广州市',
+        children: [
+          { name: '天河区' },
+          { name: '越秀区' }
+        ]
+      }
+    ]
+  }
+  // 其他省份数据...
+]);
+
+// 保障服务
+const isSafeguardSelected = computed({
+  get: () => formInline.safeguard.isSelected === 1,
+  set: (val) => {
+    formInline.safeguard.isSelected = val ? 1 : 0
+  }
+})
+// 优惠设置
+const isDiscountSettings = computed({
+  get: () => formInline.discountSettings.isSelected === 1,
+  set: (val) => {
+    formInline.discountSettings.isSelected = val ? 1 : 0
+  }
+})
+// 优惠折扣
+const isDiscountRebate = computed({
+  get: () => formInline.discountRebate.isSelected === 1,
+  set: (val) => {
+    formInline.discountRebate.isSelected = val ? 1 : 0
+  }
+})
+
+// 文件上传前的校验
+// const beforeUpload = (file) => {
+//   const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
+//   const isLt2M = file.size / 1024 / 1024 < 2
+
+//   if (!isImage) {
+//     ElMessage.error('只能上传JPG/PNG/GIF格式的图片!')
+//     return false
+//   }
+//   if (!isLt2M) {
+//     ElMessage.error('图片大小不能超过2MB!')
+//     return false
+//   }
+//   return true
+// }
+// 文件变化时触发验证
+// const handleChange = () => {
+//   console.log('文件变化时触发验证')
+//   nextTick(() => {
+//     console.log(formInline.images)
+//     formRef.value.validateField('images')
+//   })
+// }
+// 移除文件时触发验证
+// const handleRemove = (file) => {
+//   console.log('移除文件时触发验证')
+//   console.log(file)
+//   console.log(formInline.images)
+//   formInline.images = formInline.images.filter(item => item.uid !== file.uid)
+//   formRef.value.validateField('images')
+// }
+// 超出限制提示
+// const handleExceed = () => {
+//   ElMessage.warning('最多只能上传5张图片!')
+// }
+
+const categoryList1 = ref([]);
+const categoryList2 = ref([]);
+const categoryList3 = ref([]);
+
+const getGoodTypeList = async () => {
+  try {
+    let response = await getGoodType();
+    console.log(response);
+    if (response.code == 200) {
+      categoryList1.value = response.data;
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+const changeCategory1 = (id) => {
+  console.log(id);
+  formInline.categoryId1 = id;
+  formInline.categoryId2 = "";
+  categoryList2.value = categoryList1.value.filter((item) => item.id == id)[0].children;
+  formInline.categoryId3 = "";
+  formInline.categoryId = "";
+  categoryList3.value = [];
+  if (id == 70) {
+    // 选择产出品
+    formInline.goodCategorySelectType = 1;
+  } else {
+    // 选择投入品
+    formInline.goodCategorySelectType = 2;
+  }
+};
+const changeCategory2 = (id) => {
+  console.log(id);
+  formInline.categoryId2 = id;
+  categoryList3.value = categoryList2.value.filter((item) => item.id == id)[0].children;
+  formInline.categoryId3 = "";
+  formInline.categoryId = "";
+};
+const changeCategory3 = (id) => {
+  console.log(id);
+  formInline.categoryId3 = id;
+  formInline.categoryId = id;
+};
+
+const onSave = async () => {
+  console.log(formInline);
+  // formRef.validate(valid => {
+  //   if (!valid) return
+  //   console.log('验证通过!', formRef.value)
+  // })
+  try {
+    await formRef.value.validate()
+    console.log('验证通过!', formRef.value)
+    // 整理提交的参数
+
+    // 调用接口提交
+
+  } catch (error) {
+    console.log('验证失败', error)
+  }
+};
+
+const getGoodTypeList2 = async () => {
+  const res = await getGoodType({
+    pageNum: 1,
+    pageSize: 100,
+  });
+  if (res.code === 200) {
+    goodTypeList.value = res.data.list;
+  }
+};
+
+onMounted(() => {
+  getGoodTypeList();
+});
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/goods/goodsCategory.vue b/src/views/goods/goodsCategory.vue
index b690015..5e4976d 100644
--- a/src/views/goods/goodsCategory.vue
+++ b/src/views/goods/goodsCategory.vue
@@ -106,6 +106,7 @@
           :total="tableTotal"
           :current-page="formInline.current"
           :page-size="formInline.size"
+          :showSort="true"
         >
           <!-- 自定义-状态 -->
           <template #goodsUrl="slotProps">
diff --git a/src/views/goods/goodsManage.vue b/src/views/goods/goodsManage.vue
index d3e3303..5b5cf0b 100644
--- a/src/views/goods/goodsManage.vue
+++ b/src/views/goods/goodsManage.vue
@@ -7,118 +7,63 @@
           <div class="search-bar-left">
             <div class="order-tab" style="margin-top: -10px">
               <el-tabs v-model="activeCurrent" @tab-click="tabChange">
-                <el-tab-pane
-                  v-for="t in bottomList"
-                  :key="t.id"
-                  :label="t.title + '(' + t.value + ')'"
-                  :name="t.id"
-                >
+                <el-tab-pane v-for="t in bottomList" :key="t.id" :label="t.title + '(' + t.value + ')'" :name="t.id">
                 </el-tab-pane>
               </el-tabs>
             </div>
-            <el-form
-              ref="searchForm"
-              :inline="true"
-              :model="formInline"
-              class="demo-form-inline"
-              :label-width="'auto'"
-            >
-              <el-form-item label="商品名称" prop="goodsName">
-                <el-input
-                  v-model="formInline.goodsName"
-                  placeholder="请输入商品名称"
-                  clearable
-                />
+            <el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
+              <el-form-item label="商品名称" prop="goodName">
+                <el-input v-model="formInline.goodName" placeholder="请输入商品名称" clearable />
               </el-form-item>
-              <el-form-item label="商品分类" prop="goodsCategoryId">
-                <el-select
-                  v-model="formInline.goodsCategoryId"
-                  placeholder="请选择"
-                  clearable
-                >
-                  <el-option
-                    v-for="item in goodsCategoryList"
-                    :key="item.id"
-                    :value="item.id"
-                    :label="item.name"
-                  />
+              <el-form-item label="商品分类" prop="goodCategoryId">
+                <el-select v-model="formInline.goodCategoryId" placeholder="请选择" clearable>
+                  <el-option v-for="item in goodsCategoryList" :key="item.id" :value="item.id" :label="item.name" />
                 </el-select>
               </el-form-item>
-              <el-form-item label="商品品牌" prop="goodsBrandId">
-                <el-select
-                  v-model="formInline.goodsBrandId"
-                  placeholder="请选择"
-                  clearable
-                >
-                  <el-option
-                    v-for="item in goodsBrandList"
-                    :key="item.id"
-                    :value="item.id"
-                    :label="item.name"
-                  />
+              <el-form-item label="商品品牌" prop="storeId">
+                <el-select v-model="formInline.storeId" placeholder="请选择" clearable>
+                  <el-option v-for="item in goodsBrandList" :key="item.id" :value="item.id" :label="item.name" />
                 </el-select>
               </el-form-item>
             </el-form>
           </div>
           <div class="search-bar-right">
-            <el-button type="primary" icon="Search" @click="onSubmit"
-              >查询</el-button
-            >
-            <el-button
-              icon="Refresh"
-              style="margin: 16px 0 0 0"
-              @click="resetForm"
-              >重置</el-button
-            >
+            <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
+            <el-button icon="Refresh" style="margin: 16px 0 0 0" @click="resetForm">重置</el-button>
           </div>
         </div>
       </div>
       <!-- 表格 -->
       <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
         <div class="table-toolbar">
-          <el-button
-            icon="delete"
-            @click="batchDelete"
-            :disabled="btnStatus"
-            style="margin-right: 10px"
-            >批量删除</el-button
-          >
+          <el-button icon="delete" @click="batchDelete" :disabled="btnStatus"
+            style="margin-right: 10px">批量删除</el-button>
           <router-link to="/goods/addGoods">
-            <el-button type="primary" icon="plus" @click="onSubmit"
-              >新增商品</el-button
-            >
+            <el-button type="primary" icon="plus" @click="onSubmit">新增商品</el-button>
           </router-link>
         </div>
-        <tableComponent
-          :table-data="tableData"
-          :columns="columns"
-          :show-border="false"
-          :show-selection="true"
-          :header-cell-class-name="getHeaderClass"
-          @page-change="handlePaginationChange"
-          :loading="tableLoading"
-          @selection-change="handleSelectionChange"
-          :total="tableTotal"
-          :current-page="formInline.current"
-          :page-size="formInline.size"
-        >
+        <tableComponent :table-data="tableData" :columns="columns" :show-border="false" :show-selection="true"
+          :header-cell-class-name="getHeaderClass" @page-change="handlePaginationChange" :loading="tableLoading"
+          @selection-change="handleSelectionChange" :total="tableTotal" :current-page="formInline.current"
+          :page-size="formInline.size" :showSort="true">
           <!-- 自定义-图片 -->
-          <template #goodsUrl="slotProps">
+          <template #goodUrl="slotProps">
             <div class="table-cell-img-box">
-              <img
-                :src="slotProps.row.goodsUrl"
-                class="table-cell-img"
-                alt=""
-              />
+              <img :src="slotProps.row.goodUrl" class="table-cell-img" alt="" />
             </div>
           </template>
+          <!-- 自定义 - 序号 -->
+          <template #sort="slotProps">
+            <span v-if="slotProps.row.goodPrice">￥{{ slotProps.row.goodPrice }}</span>
+          </template>
 
           <!-- 自定义-状态 -->
-          <template #goodsStatus="slotProps">
-            <span v-if="slotProps.row.goodsStatus == '上架'" class="color-green"
-              >上架</span
-            >
-            <span v-else class="color-red">下架</span>
+          <template #isListed="slotProps">
+            <span v-if="slotProps.row.isListed == 0" class="color-blue">待上架</span>
+            <span v-else-if="slotProps.row.isListed == 1" class="color-black">已上架</span>
+            <span v-else-if="slotProps.row.isListed == 2" class="color-green">上架</span>
+            <span v-else-if="slotProps.row.isListed == 3" class="color-red">下架</span>
+            <span v-else-if="slotProps.row.isListed == 4" class="color-orange">审核中</span>
           </template>
 
           <!-- 自定义-操作 -->
@@ -126,34 +71,19 @@
             <el-tooltip effect="dark" placement="bottom-end">
               <template #content>
                 <div class="custom-tooltip-content">
-                  <el-icon
-                    class="el-icon-custom"
-                    @click="seeDetails(slotProps.row)"
-                  >
+                  <el-icon class="el-icon-custom" @click="seeDetails(slotProps.row)">
                     <View />
                   </el-icon>
-                  <el-icon
-                    class="el-icon-custom"
-                    @click="toUpload(slotProps.row)"
-                  >
+                  <el-icon class="el-icon-custom" @click="toUpload(slotProps.row)">
                     <Upload />
                   </el-icon>
-                  <el-icon
-                    class="el-icon-custom"
-                    @click="toDownload(slotProps.row)"
-                  >
+                  <el-icon class="el-icon-custom" @click="toDownload(slotProps.row)">
                     <Download />
                   </el-icon>
-                  <el-icon
-                    class="el-icon-custom"
-                    @click="handleEdit(slotProps.row)"
-                  >
+                  <el-icon class="el-icon-custom" @click="handleEdit(slotProps.row)">
                     <Edit />
                   </el-icon>
-                  <el-icon
-                    class="el-icon-custom"
-                    @click="handleDelete(slotProps.row)"
-                  >
+                  <el-icon class="el-icon-custom" @click="handleDelete(slotProps.row)">
                     <Delete />
                   </el-icon>
                 </div>
@@ -175,14 +105,14 @@
 import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
 import tableComponent from "@/components/tableComponent.vue";
 import Mock from "mockjs";
-import { getGoodManageInfo } from "@/api/goods/info";
+import { getGoodManageInfo, getGoodType } from "@/api/goods/info";
 import { ca } from "element-plus/es/locales.mjs";
 
 const formInline = reactive({
-  goodsName: "",
-  goodsCategoryId: "",
-  goodsBrandId: "",
-  serachType: "1",
+  goodName: "",
+  goodCategoryId: "",
+  storeId: "",
+  type: "1",
   current: 1,
   size: 10,
 });
@@ -218,13 +148,13 @@ const tabChange = (Event) => {
   console.log(Event.index);
   if (Event.index == "0") {
     // 请求全部
-    formInline.serachType = "1";
+    formInline.type = "1";
   } else if (Event.index == "1") {
     // 请求已上架
-    formInline.serachType = "2";
-  } else {
+    formInline.type = "2";
+  } else if (Event.index == "2"){
     // 请求已下架
-    formInline.serachType = "3";
+    formInline.type = "3";
   }
   loadData();
 };
@@ -241,16 +171,15 @@ let nowClickRow = ref({});
 // 列配置
 const columns = ref([]);
 const columns1 = ref([
-  { prop: "sort", label: "排序" },
-  { prop: "id", label: "ID" },
-  { prop: "goodsUrl", label: "商品图片", slotName: "goodsUrl" },
-  { prop: "goodsName", label: "商品名称", width: "120" },
+  { prop: "goodId", label: "ID", width: "150" },
+  { prop: "goodUrl", label: "商品图片", slotName: "goodUrl" },
+  { prop: "goodName", label: "商品名称", width: "120" },
   { prop: "categoryName", label: "分类名称" },
-  { prop: "goodsPrice", label: "商品售价" },
+  { prop: "goodPrice", label: "商品售价" },
   { prop: "salesVolume", label: "销量" },
   { prop: "pageView", label: "浏览量" },
-  { prop: "inventory", label: "库存" },
-  { prop: "goodsStatus", label: "状态", slotName: "goodsStatus" },
+  { prop: "stock", label: "库存" },
+  { prop: "isListed", label: "状态", slotName: "isListed" },
   { prop: "action", label: "操作", slotName: "action" },
 ]);
 
@@ -282,16 +211,16 @@ const generateMockData = () => {
   return Mock.mock({
     "list|10": [
       {
-        "id|+1": 10000,
+        "goodId|+1": 10000,
         "sort|+1": 1,
-        goodsUrl: " @image", //商品图片
-        goodsName: () => generateFoodNickname(), //商品名称
+        goodUrl: " @image", //商品图片
+        goodName: () => generateFoodNickname(), //商品名称
         categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
-        goodsPrice: "@float(10, 200, 2, 2)", //商品售价
+        goodPrice: "@float(10, 200, 2, 2)", //商品售价
         salesVolume: "@integer(1000, 20000)", //销量
         pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
-        inventory: "@integer(5000, 90000)", //库存
-        goodsStatus: '@pick(["上架", "下架"])', //状态
+        stock: "@integer(5000, 90000)", //库存
+        isListed: '@pick(["上架", "下架"])', //状态
         ordersNums: "@integer(10, 200)",
       },
     ],
@@ -300,18 +229,18 @@ const generateMockData = () => {
 // 加载数据
 const loadData = async () => {
   tableLoading.value = true;
-  tableData.value = generateMockData();
-  tableTotal.value = tableData.value.length;
-  // try {
-  //   let response = await getGoodManageInfo(formInline);
-  //   console.log(response);
-  //   if (response.code == 200) {
-  //     tableData.value = response.data.records;
-  //     tableTotal.value = response.data.total;
-  //   }
-  // } catch (error) {
-  //   console.log(error);
-  // }
+  // tableData.value = generateMockData();
+  // tableTotal.value = tableData.value.length;
+  try {
+    let response = await getGoodManageInfo(formInline);
+    console.log(response);
+    if (response.code == 200) {
+      tableData.value = response.data.records;
+      tableTotal.value = response.data.total;
+    }
+  } catch (error) {
+    console.log(error);
+  }
   tableLoading.value = false;
 };
 
@@ -339,10 +268,10 @@ const seeDetails = (row) => {
   console.log("要查看详情的行:", row);
 };
 const toUpload = () => {
-  console.log("向上移动:");
+  console.log("上架:");
 };
 const toDownload = () => {
-  console.log("向下移动:");
+  console.log("下架:");
 };
 // 编辑操作
 const handleEdit = (row) => {
diff --git a/vite.config.js b/vite.config.js
index 7701c1f..f86c245 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -46,10 +46,10 @@ export default defineConfig(({ mode, command }) => {
       open: true,
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
-        '/api': {
+        '/apis': {
           target: VITE_APP_BASE_API,
           changeOrigin: true,
-          rewrite: (p) => p.replace(/^\/api/, '')
+          rewrite: (p) => p.replace(/^\/apis/, '')
         },
          // springdoc proxy
          '^/v3/api-docs/(.*)': {