商品编辑页面

src/assets/styles/common.scss

-.router{
+.router {
  margin: 10px 5px;
 }
-.app-container{
+.app-container {
  padding: 20px;
 }
 
@@ -15,3 +15,30 @@
   margin-right: 10px;
  }
 }
+
+.avatar-uploader .avatar {
+ width: 178px;
+ height: 178px;
+ display: block;
+}
+
+.avatar-uploader .el-upload {
+ border: 1px dashed #dcdfe6;
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ transition: 0.2s;
+}
+
+.avatar-uploader .el-upload:hover {
+ /* // border-color: var(--el-color-primary); */
+}
+
+.el-icon.avatar-uploader-icon {
+ font-size: 28px;
+ color: #8c939d;
+ width: 178px;
+ height: 178px;
+ text-align: center;
+}

src/components/richTextEditor.vue

@@ -19,6 +19,7 @@ const props = defineProps({
   }
 })
 
+const mode = ref('mode')
 const emits = defineEmits(['htmlChange'])
 
 // 编辑器实例，必须用 shallowRef

src/router/index.ts

@@ -18,6 +18,21 @@ const routes: Array<RouteRecordRaw> = [
     ],
   },
   {
+    path: "/commodity",
+    component: Layout,
+    children: [
+      {
+        path: "/commodity/edit",
+        component: () => import("@/views/commodityManage/edit.vue"),
+        name: "edit",
+        meta: {
+          title: "商品编辑",
+          icon: "",
+        },
+      },
+    ],
+  },
+  {
     path: "/login",
     name: "login",
     component: () => import("@/views/login/login.vue"),

src/views/commodityManage/list.vue

@@ -161,7 +161,10 @@ let handleCreate = () => {
     router.push({ path: "/commodity/shelves" });
 };
 let handleUpdate = (row: any) => {
-    // router.push({ path: "/goods/edit", query: { id: row.id } });
+    console.log(row.id);
+    let commodityId = row.id
+    localStorage.setItem('commodityId', commodityId)
+    router.push({ path: "/commodity/edit", query: { id: row.id } });
 };
 let showDetail = (detail: any) => {
     goodsDetail = detail;

src/views/marketManage/category.vue

@@ -67,17 +67,21 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item label="类目图标" prop="iconUrl">
-                    <el-upload :headers="headers" :action="uploadPath" :show-file-list="false"
+                    <el-upload :headers="headers" :action="uploadPath" :show-file-list="false" list-type='picture'
                         :on-success="uploadIconUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
                         <img v-if="dataForm.iconUrl" :src="dataForm.iconUrl" class="avatar" />
-                        <i v-else class="el-icon-plus avatar-uploader-icon" />
+                        <el-icon v-else class="avatar-uploader-icon">
+                            <Plus />
+                        </el-icon>
                     </el-upload>
                 </el-form-item>
                 <el-form-item label="类目图片" prop="picUrl">
                     <el-upload :headers="headers" :action="uploadPath" :show-file-list="false"
                         :on-success="uploadPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
-                        <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar" />
-                        <i v-else class="el-icon-plus avatar-uploader-icon" />
+                        <img v-if="dataForm.iconUrl" :src="dataForm.iconUrl" class="avatar" />
+                        <el-icon v-else class="avatar-uploader-icon">
+                            <Plus />
+                        </el-icon>
                     </el-upload>
                 </el-form-item>
                 <el-form-item label="类目简介" prop="desc">
@@ -266,7 +270,3 @@ let handleDelete = (row: any) => {
         });
 };
 </script>
-
- 
-<style lang = "scss" scoped>
-</style>
\ No newline at end of file