feat(goodsOperation): 完善商品发布流程与分类选择界面

- 引入商品类型选择对话框，增强用户体验
- 重新组织商品发布步骤，优化步骤指示器
- 更新商品分类选择逻辑，确保用户选择到三级分类
- 调整数据传递与状态管理，支持商品编辑与复制功能
- 优化样式与布局，提高界面可用性

seller/src/views/goods/goods-seller/goodsOperation.vue

@@ -1,31 +1,58 @@
 <template>
   <div class="goods-operation">
-    <!-- 填写商品详细信息（含商品类型、商品分类） -->
+    <div class="step-list">
-    <second-step ref="second" :firstData="firstData" v-if="activestep === 1"></second-step>
+      <el-steps :active="activestep" align-center style="height: 60px; margin-top: 10px">
-    <!-- 发布完成 -->
+        <el-step title="选择商品品类" />
-    <third-step ref="third" v-if="activestep === 2"></third-step>
+        <el-step title="填写商品详情" />
+        <el-step title="商品发布成功" />
+      </el-steps>
+    </div>
+    <!-- 第一步 选择分类 -->
+    <first-step ref='first' v-show="activestep === 0" @change="getFirstData"></first-step>
+    <!-- 第二步 商品详细信息 -->
+    <second-step ref='second' :firstData="firstData" v-if="activestep === 1"></second-step>
+    <!-- 第三步 发布完成 -->
+    <third-step ref='third' v-if="activestep === 2"></third-step>
+    
+    
   </div>
 </template>
 <script>
-import secondStep from "./goodsOperationSec";
+import firstStep from  './goodsOperationFirst'
-import thirdStep from "./goodsOperationThird";
+import secondStep from  './goodsOperationSec'
+import thirdStep from  './goodsOperationThird'
 export default {
   name: "addGoods",
   components: {
+    firstStep,
     secondStep,
-    thirdStep,
+    thirdStep
   },
 
   data() {
     return {
-      /** 当前激活步骤：1 填写详情，2 发布成功 */
+      /** 当前激活步骤*/
-      activestep: 1,
+      activestep: 0,
-      firstData: {},
+      firstData: {}, // 第一步传递的数据
     };
   },
-  mounted() {
+  methods: {
-    window.scrollTo(0, 0);
+    // 选择商品分类回调
+    getFirstData (item) {
+      this.firstData = item;
+      this.activestep = 1;
+    }
   },
+  mounted() {
+    // 编辑商品、模板、复制商品
+    if (this.$route.query.id || this.$route.query.draftId || this.$route.query.copyId) {
+      this.activestep = 1;
+    } else {
+      this.activestep = 0
+      this.$refs.first.selectGoodsType = true;
+    }
+    
+  }
 };
 </script>
 <style lang="scss" scoped>

seller/src/views/goods/goods-seller/goodsOperationFirst.vue

@@ -1,9 +1,249 @@
 <template>
-  <div></div>
+  <div>
+    <!-- 选择商品类型 -->
+    <el-dialog v-model="selectGoodsType" width="550px" :show-close="false">
+      <div class="goods-type-list">
+        <div
+          class="goods-type-item"
+          :class="{ 'active-goods-type': item.check }"
+          @click="handleClickGoodsType(item)"
+          v-for="(item, index) in goodsTypeWay"
+          :key="index"
+        >
+          <img :src="item.img" />
+          <div>
+            <h2>{{ item.title }}</h2>
+            <p>{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="goods-type-actions">
+          <el-button @click="cancelGoodsType">取消</el-button>
+          <el-button type="primary" @click="confirmGoodsType">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 商品分类 -->
+    <div class="content-goods-publish">
+      <div class="goods-category">
+        <ul v-if="categoryListLevel1.length > 0">
+          <li
+            v-for="(item, index) in categoryListLevel1"
+            :class="{ activeClass: category[0].name === item.name }"
+            @click="handleSelectCategory(item, index, 1)"
+            :key="index"
+          >
+            <span>{{ item.name }}</span>
+            <span>&gt;</span>
+          </li>
+        </ul>
+        <ul v-if="categoryListLevel2.length > 0">
+          <li
+            v-for="(item, index) in categoryListLevel2"
+            :class="{ activeClass: category[1].name === item.name }"
+            @click="handleSelectCategory(item, index, 2)"
+            :key="index"
+          >
+            <span>{{ item.name }}</span>
+            <span>&gt;</span>
+          </li>
+        </ul>
+        <ul v-if="categoryListLevel3.length > 0">
+          <li
+            v-for="(item, index) in categoryListLevel3"
+            :class="{ activeClass: category[2].name === item.name }"
+            @click="handleSelectCategory(item, index, 3)"
+            :key="index"
+          >
+            <span>{{ item.name }}</span>
+          </li>
+        </ul>
+      </div>
+      <p class="current-goods-category">
+        您当前选择的商品类别是：
+        <span>{{ category[0].name }}</span>
+        <span v-show="category[1].name">> {{ category[1].name }}</span>
+        <span v-show="category[2].name">> {{ category[2].name }}</span>
+      </p>
+    </div>
+    <!-- 底部按钮 -->
+    <div class="footer">
+      <div class="footer-btns">
+        <el-button type="primary" @click="openGoodsTypeDialog">商品类型</el-button>
+        <el-button type="primary" @click="next">下一步</el-button>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-/** 商品类型与分类已迁移至 goodsOperationSec.vue 基本信息区 */
+import * as API_GOODS from "@/api/goods";
+import goodsType1Img from "@/assets/goodsType1.png";
+import goodsType2Img from "@/assets/goodsType2.png";
 export default {
-  name: "goodsOperationFirst",
+  data() {
+    return {
+      selectGoodsType: false, // 展示选择商品分类modal
+      /** 商品类型选项；E_COUPON 为卡密商品（与 VIRTUAL_GOODS 核销型区分，见 FR-S-01） */
+      goodsTypeWay: [
+        {
+          title: "实物商品",
+          img: goodsType1Img,
+          desc: "零售批发，物流配送",
+          type: "PHYSICAL_GOODS",
+          check: false,
+        },
+        {
+          title: "虚拟商品",
+          img: goodsType2Img,
+          desc: "虚拟核验，无需物流",
+          type: "VIRTUAL_GOODS",
+          check: false,
+        },
+        {
+          title: "电子卡券",
+          img: goodsType2Img,
+          desc: "卡密自动发卡，无需物流",
+          type: "E_COUPON", // goodsType；库存由卡池同步，非手动填写
+          check: false,
+        },
+      ],
+      // 商品分类选择数组
+      category: [
+        { name: "", id: "" },
+        { name: "", id: "" },
+        { name: "", id: "" },
+      ],
+      // 商品类型
+      goodsType: "",
+      pendingGoodsType: "",
+      /** 1级分类列表*/
+      categoryListLevel1: [],
+      /** 2级分类列表*/
+      categoryListLevel2: [],
+      /** 3级分类列表*/
+      categoryListLevel3: [],
+    };
+  },
+  watch: {
+    selectGoodsType(val) {
+      if (val) {
+        this.syncGoodsTypeSelection();
+      }
+    },
+  },
+  methods: {
+    syncGoodsTypeSelection() {
+      this.pendingGoodsType = this.goodsType;
+      this.goodsTypeWay.forEach((item) => {
+        item.check = item.type === this.goodsType;
+      });
+    },
+    openGoodsTypeDialog() {
+      this.selectGoodsType = true;
+    },
+    // 点击商品类型（仅临时选中，确认后才生效）
+    handleClickGoodsType(val) {
+      this.goodsTypeWay.forEach((item) => {
+        item.check = item.type === val.type;
+      });
+      this.pendingGoodsType = val.type;
+    },
+    cancelGoodsType() {
+      this.syncGoodsTypeSelection();
+      this.selectGoodsType = false;
+    },
+    confirmGoodsType() {
+      if (!this.pendingGoodsType) {
+        this.$Message.error("请选择商品类型");
+        return;
+      }
+      this.goodsType = this.pendingGoodsType;
+      this.selectGoodsType = false;
+    },
+    /** 选择商城商品分类 */
+    handleSelectCategory(row, index, level) {
+      if (level === 1) {
+        this.category.forEach((cate) => {
+          (cate.name = ""), (cate.id = "");
+        });
+        this.category[0].name = row.name;
+        this.category[0].id = row.id;
+        this.categoryListLevel2 = this.categoryListLevel1[index].children;
+        this.categoryListLevel3 = [];
+      } else if (level === 2) {
+        this.category[1].name = row.name;
+        this.category[1].id = row.id;
+        this.category[2].name = "";
+        this.category[2].id = "";
+        this.categoryListLevel3 = this.categoryListLevel2[index].children;
+      } else {
+        this.category[2].name = row.name;
+        this.category[2].id = row.id;
+      }
+    },
+    /** 查询下一级 商城商品分类*/
+    GET_NextLevelCategory(row) {
+      const _id = row && row.id !== 0 ? row.id : 0;
+      API_GOODS.getGoodsCategoryAll().then((res) => {
+        if (res.success && res.result) {
+          this.categoryListLevel1 = res.result;
+        }
+      });
+    },
+    // 下一步
+    next() {
+      window.scrollTo(0, 0);
+      if (!this.goodsType) {
+        this.$Message.error("请选择商品类型");
+        return;
+      }
+      if (!this.category[0].name) {
+        this.$Message.error("请选择商品分类");
+        return;
+      } else if (!this.category[2].name) {
+        this.$Message.error("必须选择到三级分类");
+        return;
+      } else if (this.category[2].name) {
+        let params = {
+          category: this.category,
+          goodsType: this.goodsType,
+        };
+        this.$emit("change", params);
+      }
+    },
+  },
+  mounted() {
+    this.GET_NextLevelCategory();
+  },
 };
 </script>
+<style lang="scss" scoped>
+@import "./addGoods.scss";
+
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.footer-btns {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.goods-type-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+}
+
+.content-goods-publish {
+  .goods-category li.activeClass {
+    background-color: #409eff;
+    border-color: #409eff;
+    color: #fff;
+  }
+}
+</style>

seller/src/views/goods/goods-seller/goodsOperationSec.vue

@@ -8,36 +8,12 @@
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
-            <el-form-item label="商品类型" prop="goodsType">
+            <el-form-item label="商品分类">
-              <el-select
+              <span class="goods-category-name">{{
-                v-model="baseInfoForm.goodsType"
+                baseInfoForm.categoryName[0]
-                placeholder="请选择商品类型"
+                }}</span>
-                style="width: 260px"
+              <span> &gt; {{ baseInfoForm.categoryName[1] }}</span>
-                popper-class="goods-type-select-popper"
+              <span> &gt; {{ baseInfoForm.categoryName[2] }}</span>
-                @change="handleGoodsTypeChange"
-              >
-                <el-option
-                  v-for="item in goodsTypeOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                  <div class="goods-type-option">
-                    <span class="goods-type-option-label">{{ item.label }}</span>
-                    <span class="goods-type-option-desc">{{ item.desc }}</span>
-                  </div>
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="商品分类" prop="categoryPath">
-              <el-cascader
-                v-model="selectedCategory"
-                :options="categoryList"
-                placeholder="请选择商品分类"
-                clearable
-                style="width: 260px"
-                @change="handleCategoryChange"
-              />
             </el-form-item>
             <el-form-item label="商品名称" prop="goodsName">
               <el-input v-model="baseInfoForm.goodsName" clearable placeholder="商品名称" style="width: 260px" type="text" />
@@ -547,6 +523,7 @@
     <!-- 底部按钮 -->
     <div class="footer">
       <div class="footer-btns">
+        <el-button type="primary" @click="pre">上一步</el-button>
         <el-button :loading="submitLoading" type="primary" @click="save">
           {{ $route.query.id ? "保存" : "保存商品" }}
         </el-button>
@@ -660,16 +637,6 @@ export default {
       accessToken: "", //令牌token
       goodsParams: [],
       categoryId: "", // 商品分类第三级id
-      /** 商品类型选项 */
-      goodsTypeOptions: [
-        { label: "实物商品", value: "PHYSICAL_GOODS", desc: "零售批发，物流配送" },
-        { label: "虚拟商品", value: "VIRTUAL_GOODS", desc: "虚拟核验，无需物流" },
-        { label: "电子卡券", value: "E_COUPON", desc: "卡密自动发卡，无需物流" },
-      ],
-      /** 商城分类级联数据 */
-      categoryList: [],
-      /** 商城分类选中值 [一级id, 二级id, 三级id] */
-      selectedCategory: [],
       //提交状态
       submitLoading: false,
       //上传图片路径
@@ -791,8 +758,6 @@ export default {
       /** 存储未通过校验的单元格位置  */
       validateError: [],
       baseInfoFormRule: {
-        goodsType: [{ required: true, message: "请选择商品类型", trigger: "change" }],
-        categoryPath: [{ required: true, message: "请选择商品分类", trigger: "change" }],
         goodsName: [regular.REQUIRED, regular.WHITE_SPACE, regular.VARCHAR60],
         price: [regular.REQUIRED, { validator: checkPrice }],
         sellingPoint: [regular.REQUIRED, regular.VARCHAR60],
@@ -1050,79 +1015,9 @@ export default {
         });
       }
     },
-    /** 加载商城商品分类树 */
+    pre() {
-    loadCategoryList() {
+      // 上一步
-      return API_GOODS.getGoodsCategoryAll().then((res) => {
+      this.$parent.activestep--;
-        if (res.success && res.result) {
-          this.categoryList = this.formatCategoryTree(res.result);
-          this.syncSelectedCategoryFromPath();
-        }
-      });
-    },
-    formatCategoryTree(list) {
-      return (list || []).map((item) => ({
-        value: String(item.id),
-        label: item.name,
-        children: (item.children || []).map((child) => ({
-          value: String(child.id),
-          label: child.name,
-          children: (child.children || []).map((grandson) => ({
-            value: String(grandson.id),
-            label: grandson.name,
-          })),
-        })),
-      }));
-    },
-    syncSelectedCategoryFromPath() {
-      const path = this.baseInfoForm.categoryPath;
-      if (!path) {
-        return;
-      }
-      const ids = path.split(",").filter(Boolean).map(String);
-      if (ids.length >= 3) {
-        this.selectedCategory = ids;
-        this.categoryId = ids[2];
-      }
-    },
-    getCategoryNames(ids) {
-      const names = [];
-      let options = this.categoryList;
-      ids.forEach((id) => {
-        const found = (options || []).find((item) => item.value === id);
-        if (found) {
-          names.push(found.label);
-          options = found.children || [];
-        }
-      });
-      return names;
-    },
-    handleGoodsTypeChange() {
-      if (this.isVirtualLikeGoods) {
-        this.baseInfoForm.salesModel = "RETAIL";
-      }
-      if (this.isECouponGoods) {
-        this.baseInfoForm.templateId = 0;
-      }
-      this.renderTableData(this.skuTableData);
-    },
-    handleCategoryChange(val) {
-      if (!val || val.length < 3) {
-        this.selectedCategory = val || [];
-        this.categoryId = "";
-        this.baseInfoForm.categoryPath = "";
-        this.baseInfoForm.categoryName = [];
-        this.baseInfoForm.brandId = "";
-        this.brandList = [];
-        this.goodsParams = [];
-        this.params_panel = [];
-        return;
-      }
-      this.categoryId = val[2];
-      this.baseInfoForm.categoryPath = val.join(",");
-      this.baseInfoForm.categoryName = this.getCategoryNames(val);
-      this.baseInfoForm.brandId = "";
-      this.getGoodsBrandList();
-      this.GET_GoodsParams();
     },
     // 预览图片
     handleView(url) {
@@ -1413,7 +1308,6 @@ export default {
       this.baseInfoForm.release = 1; //即使是被放入仓库，修改的时候也会显示会立即发布
       this.baseInfoForm.brandId = this.normalizeBrandId(this.baseInfoForm.brandId);
       this.categoryId = response.result.categoryPath.split(",")[2];
-      this.syncSelectedCategoryFromPath();
 
       // 如果是复制商品，需要清除ID，确保提交时作为新商品
       if (this.$route.query.copyId) {
@@ -1450,6 +1344,20 @@ export default {
       this.GET_ShopGoodsLabel();
       this.GET_GoodsUnit();
 
+      if (this.firstData.category) {
+        const cateId = [];
+        this.baseInfoForm.categoryName = [];
+        this.firstData.category.forEach((cate) => {
+          this.baseInfoForm.categoryName.push(cate.name);
+          cateId.push(cate.id);
+        });
+        this.categoryId = cateId[2];
+
+        this.baseInfoForm.categoryPath = cateId.toString();
+      }
+      this.firstData.goodsType &&
+        (this.baseInfoForm.goodsType = this.firstData.goodsType);
+
       /** 查询商品参数 */
       this.GET_GoodsParams();
 
@@ -2356,10 +2264,6 @@ export default {
         this.$Message.error(`以下参数为必填项：${missingParams.join('、')}`);
         return;
       }
-      if (!this.selectedCategory || this.selectedCategory.length < 3) {
-        this.$Message.error("必须选择到三级分类");
-        return;
-      }
       this.submitLoading = true;
       this.$refs["baseInfoForm"].validate((valid) => {
         if (valid) {
@@ -2520,7 +2424,6 @@ export default {
       accessToken: this.getStore("accessToken"),
     };
     this.GET_ShipTemplate()
-    this.loadCategoryList();
     if (this.$route.query.id || this.$route.query.draftId) {
       // 编辑商品、模板
       this.GET_GoodData(this.$route.query.id, this.$route.query.draftId);
@@ -2532,6 +2435,17 @@ export default {
       this.GET_GoodData("", this.firstData.tempId);
     } else {
       // 新增商品
+      const cateId = [];
+      (this.firstData.category || []).forEach((cate) => {
+        this.baseInfoForm.categoryName.push(cate.name);
+        cateId.push(cate.id);
+      });
+      this.categoryId = cateId[2];
+      this.baseInfoForm.categoryPath = cateId.toString();
+      this.baseInfoForm.goodsType = this.firstData.goodsType;
+
+      this.GET_GoodsParams();
+      this.getGoodsBrandList();
       this.GET_GoodsUnit();
       this.GET_ShopGoodsLabel();
     }
@@ -2714,50 +2628,4 @@ export default {
   margin-left: 100px;
   transform: translateY(-50%);
 }
-
-.goods-type-option {
-  display: flex;
-  flex-direction: column;
-  line-height: 1.4;
-  padding: 2px 0;
-}
-
-.goods-type-option-label {
-  color: #303133;
-}
-
-.goods-type-option-desc {
-  color: #909399;
-  font-size: 12px;
-}
-</style>
-<style lang="scss">
-.goods-type-select-popper {
-  .el-select-dropdown__item {
-    height: auto;
-    min-height: 58px;
-    padding: 10px 12px;
-    line-height: 1.5;
-    white-space: normal;
-  }
-
-  .goods-type-option {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .goods-type-option-label {
-    color: #303133;
-    font-size: 14px;
-    line-height: 1.4;
-  }
-
-  .goods-type-option-desc {
-    color: #909399;
-    font-size: 12px;
-    line-height: 1.5;
-    white-space: normal;
-  }
-}
 </style>