diff --git a/index.html b/index.html
index 5b2f707..43d346d 100644
--- a/index.html
+++ b/index.html
@@ -11,3 +11,11 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+
+<style>
+    html,body,#app{
+        height:100%;
+        margin: 0px;
+        padding: 0px;
+    }
+</style>
diff --git a/package-lock.json b/package-lock.json
index ba0d550..6d9c1fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -913,6 +913,7 @@
       "version": "3.5.12",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
       "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
+      "dev": true,
       "requires": {
         "@babel/parser": "^7.25.3",
         "@vue/shared": "3.5.12",
@@ -925,34 +926,98 @@
       "version": "3.5.12",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
       "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
+      "dev": true,
       "requires": {
         "@vue/compiler-core": "3.5.12",
         "@vue/shared": "3.5.12"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
-      "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
+      "version": "3.2.31",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.31.tgz",
+      "integrity": "sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==",
       "requires": {
-        "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.12",
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.12",
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.31",
+        "@vue/compiler-dom": "3.2.31",
+        "@vue/compiler-ssr": "3.2.31",
+        "@vue/reactivity-transform": "3.2.31",
+        "@vue/shared": "3.2.31",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.11",
-        "postcss": "^8.4.47",
-        "source-map-js": "^1.2.0"
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.31.tgz",
+          "integrity": "sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/shared": "3.2.31",
+            "estree-walker": "^2.0.2",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.31.tgz",
+          "integrity": "sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==",
+          "requires": {
+            "@vue/compiler-core": "3.2.31",
+            "@vue/shared": "3.2.31"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz",
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+        },
+        "magic-string": {
+          "version": "0.25.9",
+          "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
-      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
+      "version": "3.2.31",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.31.tgz",
+      "integrity": "sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==",
       "requires": {
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/shared": "3.5.12"
+        "@vue/compiler-dom": "3.2.31",
+        "@vue/shared": "3.2.31"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.31.tgz",
+          "integrity": "sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/shared": "3.2.31",
+            "estree-walker": "^2.0.2",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.31.tgz",
+          "integrity": "sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==",
+          "requires": {
+            "@vue/compiler-core": "3.2.31",
+            "@vue/shared": "3.2.31"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz",
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+        }
       }
     },
     "@vue/compiler-vue2": {
@@ -987,46 +1052,112 @@
       }
     },
     "@vue/reactivity": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.12.tgz",
-      "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
+      "version": "3.2.31",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.31.tgz",
+      "integrity": "sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==",
       "requires": {
-        "@vue/shared": "3.5.12"
+        "@vue/shared": "3.2.31"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz",
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+        }
+      }
+    },
+    "@vue/reactivity-transform": {
+      "version": "3.2.31",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.31.tgz",
+      "integrity": "sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.31",
+        "@vue/shared": "3.2.31",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.31.tgz",
+          "integrity": "sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/shared": "3.2.31",
+            "estree-walker": "^2.0.2",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz",
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+        },
+        "magic-string": {
+          "version": "0.25.9",
+          "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
       }
     },
     "@vue/runtime-core": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.12.tgz",
-      "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==",
+      "version": "3.2.31",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.2.31.tgz",
+      "integrity": "sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==",
       "requires": {
-        "@vue/reactivity": "3.5.12",
-        "@vue/shared": "3.5.12"
+        "@vue/reactivity": "3.2.31",
+        "@vue/shared": "3.2.31"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz",
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+        }
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz",
-      "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==",
+      "version": "3.2.31",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.31.tgz",
+      "integrity": "sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==",
       "requires": {
-        "@vue/reactivity": "3.5.12",
-        "@vue/runtime-core": "3.5.12",
-        "@vue/shared": "3.5.12",
-        "csstype": "^3.1.3"
+        "@vue/runtime-core": "3.2.31",
+        "@vue/shared": "3.2.31",
+        "csstype": "^2.6.8"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz",
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+        }
       }
     },
     "@vue/server-renderer": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
-      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
+      "version": "3.2.31",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.2.31.tgz",
+      "integrity": "sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==",
       "requires": {
-        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.12"
+        "@vue/compiler-ssr": "3.2.31",
+        "@vue/shared": "3.2.31"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz",
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+        }
       }
     },
     "@vue/shared": {
       "version": "3.5.12",
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.12.tgz",
-      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg=="
+      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
+      "dev": true
     },
     "@vue/tsconfig": {
       "version": "0.5.1",
@@ -1359,9 +1490,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+      "version": "2.6.21",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "d": {
       "version": "1.0.2",
@@ -1460,7 +1591,8 @@
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true
     },
     "errno": {
       "version": "0.1.8",
@@ -2309,12 +2441,12 @@
       "optional": true
     },
     "pinia": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.2.4.tgz",
-      "integrity": "sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==",
+      "version": "2.0.35",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.0.35.tgz",
+      "integrity": "sha512-P1IKKQWhxGXiiZ3atOaNI75bYlFUbRxtJdhPLX059Z7+b9Z04rnTZdSY8Aph1LA+/4QEMAYHsTQ638Wfe+6K5g==",
       "requires": {
-        "@vue/devtools-api": "^6.6.3",
-        "vue-demi": "^0.14.10"
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": "*"
       }
     },
     "pinia-plugin-persistedstate": {
@@ -2548,15 +2680,18 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
     "source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
     "ssr-window": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz",
@@ -2760,15 +2895,42 @@
       "dev": true
     },
     "vue": {
-      "version": "3.5.12",
-      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.12.tgz",
-      "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
+      "version": "3.2.31",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.2.31.tgz",
+      "integrity": "sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==",
       "requires": {
-        "@vue/compiler-dom": "3.5.12",
-        "@vue/compiler-sfc": "3.5.12",
-        "@vue/runtime-dom": "3.5.12",
-        "@vue/server-renderer": "3.5.12",
-        "@vue/shared": "3.5.12"
+        "@vue/compiler-dom": "3.2.31",
+        "@vue/compiler-sfc": "3.2.31",
+        "@vue/runtime-dom": "3.2.31",
+        "@vue/server-renderer": "3.2.31",
+        "@vue/shared": "3.2.31"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.31.tgz",
+          "integrity": "sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/shared": "3.2.31",
+            "estree-walker": "^2.0.2",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.31.tgz",
+          "integrity": "sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==",
+          "requires": {
+            "@vue/compiler-core": "3.2.31",
+            "@vue/shared": "3.2.31"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.2.31",
+          "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz",
+          "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
+        }
       }
     },
     "vue-demi": {
diff --git a/package.json b/package.json
index 36d6631..4c22f00 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,10 @@
     "dayjs": "^1.11.13",
     "element-plus": "^2.9.0",
     "mitt": "^3.0.1",
-    "pinia": "^2.2.4",
+    "pinia": "^2.0.35",
     "pinia-plugin-persistedstate": "^4.1.2",
     "querystring": "^0.2.1",
-    "vue": "^3.4.21",
+    "vue": "^3.2.31",
     "vue-router": "^4.3.3"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index be62b8c..e52996b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,8 +40,8 @@ html{
 body{
   padding: 0;
   margin: 0;
-  overflow: hidden;
+  overflow: auto;
   width: 100%;
-  height: 100%;
+  min-width: 1200px;
 }
 </style>
diff --git a/src/api/myAxios.ts b/src/api/myAxios.ts
index 0a72ae1..8ad9826 100644
--- a/src/api/myAxios.ts
+++ b/src/api/myAxios.ts
@@ -8,6 +8,7 @@ const myAxios = axios.create({
     // baseURL: 'http://123.249.108.160:8888/api' //测试服务器
     // baseURL: 'http://154.8.193.216:9092/api',  //隋雨霏服务器
     // baseURL: 'http://154.8.193.216:9093/api'  //隋雨霏服务器测试环境
+    // baseURL: 'https://www.carboner.cn:8888/api'
 });
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {
diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue
index 76066be..880f984 100644
--- a/src/layout/components/Header.vue
+++ b/src/layout/components/Header.vue
@@ -25,7 +25,7 @@
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item @click="$router.push('/PersonalCenter')">个人信息</el-dropdown-item>
+            <el-dropdown-item @click="router.push('/PersonalCenter')">个人信息</el-dropdown-item>
             <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
           </el-dropdown-menu>
         </template>
diff --git a/src/layout/components/richTextUtil.vue b/src/layout/components/richTextUtil.vue
index e454586..2ab6a40 100644
--- a/src/layout/components/richTextUtil.vue
+++ b/src/layout/components/richTextUtil.vue
@@ -2,28 +2,31 @@
   <div style="border: 1px solid #ccc">
     <Toolbar style="border-bottom: 1px solid #ccc; width: 400px;" :editor="editorRef" :defaultConfig="toolbarConfig"
              :mode="mode" />
-    <Editor style="height: 500px; overflow-y: hidden; width: 400px;" v-model="context" :defaultConfig="editorConfig"
+    <Editor style="height: 500px; overflow-y: hidden; width: 400px;" v-model="context"  :value="disableRich" :defaultConfig="editorConfig"
             :mode="mode" @onChange="handleChange" @onCreated="handleCreated" />
   </div>
 </template>
 
 <script setup>
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
-import { onBeforeUnmount, ref, shallowRef, onMounted, defineEmits, toRefs } from 'vue'
+import { onBeforeUnmount, ref, shallowRef, onMounted, defineEmits } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import axios from "axios";
+import myAxios from "@/api/myAxios";
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef()
 // 内容 HTML
 const valueHtml = ref('')
 const emit = defineEmits(['richTextContent'])   //子组件向父组件传值
 const props = defineProps({
-  context: String
+  context: String,
+  disableRich: Boolean
 })
-// 模拟 ajax 异步获取内容
+// const { context } = toRefs(props)  //结构context让他变为可写
+
 onMounted(() => {
   setTimeout(() => {
-    if(props.context != undefined) {
+    if(props.context !== undefined) {
       valueHtml.value = props.context   //访问父组件的值，回显
     }
   }, 1500)
@@ -31,15 +34,31 @@ onMounted(() => {
 const toolbarConfig = {}
 
 const editorConfig = {
+  placeholder: '请输入内容...',
   MENU_CONF: {}
 }
+
+editorConfig.readOnly = props.disableRich   //控制富文本是否启用
+
 editorConfig.MENU_CONF['uploadImage'] = {
-  placeholder: '请输入内容...',
-  async customUploadImage(file, insertFn) {
-    const { data: res } = await axios.post('',{},{})
-    console.log('res--->',res)
+  async customUpload(file, insertFn) {
+    const res = await myAxios({
+      url: '/file/uploadFile',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      data: {
+        biz: "test",
+        file: file
+      }
+    })
+    console.log('图片上传返回值--->',res.data)
+    const downloadUrl = 'http://123.249.108.160:8888/api/file/downloadFile?objectKey=';
+    insertFn(downloadUrl + res.data.data, res.alt, res.href)
   }
 }
+
 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
   const editor = editorRef.value
@@ -51,6 +70,7 @@ const handleCreated = (editor) => {
 }
 const handleChange = (editor) => {   //当选项改变时触发emit传值
   emit('richTextContent', props.context)
+  // emit('disableChange',props.disable)
   // console.log('html',editor.getHtml());
 }
 </script>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 099fec8..56ccc75 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -72,6 +72,16 @@ export const constantRoute = [
                     icon: 'Files',
                     hidden: false
                 }
+            },
+            {
+                path: '/EntityProductDetail/:id/:flag',
+                name: '商品详情',
+                component: () => import("@/views/Commodity/EntityProductDetail.vue"),
+                meta: {
+                    title: '商品详情',
+                    icon: 'Files',
+                    hidden: true
+                }
             }
         ]
     },
@@ -105,6 +115,15 @@ export const constantRoute = [
                     icon: 'DataBoard',
                     hidden: false
                 }
+            },
+            {
+                path: '/ServiceProductDetail/:id/:flag',
+                name: '课程详情',
+                component: () => import("@/views/ServiceType/ServiceProductDetail.vue"),
+                meta: {
+                    title: '课程详情',
+                    hidden: true
+                }
             }
         ]
     },
@@ -151,39 +170,6 @@ export const constantRoute = [
             }
         ]
     },
-    // 优惠卷信息
-    {
-        path: '/coupon',
-        redirect: '/AddCoupons',
-        component: () => import("@/layout/Manage.vue"),
-        meta: {
-            title: '优惠卷管理',
-            icon: 'Discount',
-            hidden: false
-        },
-        children: [
-            {
-                path: '/AddCoupons',
-                name: '添加优惠券',
-                component: () => import("@/views/Coupons/AddCoupons.vue"),
-                meta: {
-                    title: '添加优惠券',
-                    icon: 'Edit',
-                    hidden: false
-                }
-            },
-            {
-                path: '/CouponCenter',
-                name: '优惠券中心',
-                component: () => import("@/views/Coupons/CouponCenter.vue"),
-                meta: {
-                    title: '优惠券中心',
-                    icon: 'DataAnalysis',
-                    hidden: false
-                }
-            }
-        ]
-    },
     // 写真预约
     {
         path: '/outfitManage',
@@ -243,6 +229,48 @@ export const constantRoute = [
                     title: '写真订单详情',
                     hidden: true
                 }
+            },
+            {
+                path: '/OutfitDetail/:id/:flag',
+                name: '服装详情',
+                component: () => import("@/views/CostumeAppointments/OutfitDetail.vue"),
+                meta: {
+                    title: '服装详情',
+                    hidden: true
+                }
+            }
+        ]
+    },
+    // 优惠卷信息
+    {
+        path: '/coupon',
+        redirect: '/AddCoupons',
+        component: () => import("@/layout/Manage.vue"),
+        meta: {
+            title: '优惠卷管理',
+            icon: 'Discount',
+            hidden: false
+        },
+        children: [
+            {
+                path: '/AddCoupons',
+                name: '添加优惠券',
+                component: () => import("@/views/Coupons/AddCoupons.vue"),
+                meta: {
+                    title: '添加优惠券',
+                    icon: 'Edit',
+                    hidden: false
+                }
+            },
+            {
+                path: '/CouponCenter',
+                name: '优惠券中心',
+                component: () => import("@/views/Coupons/CouponCenter.vue"),
+                meta: {
+                    title: '优惠券中心',
+                    icon: 'DataAnalysis',
+                    hidden: false
+                }
             }
         ]
     },
@@ -300,17 +328,50 @@ export const constantRoute = [
                     icon: 'User',
                     hidden: false
                 }
+            }
+        ]
+    },
+    //节日管理+商城轮播图管理+课程首页轮播图管理
+    {
+        path: '/OtherManage',
+        redirect: '/EntityCarouseCenter',
+        component: () => import("@/layout/Manage.vue"),
+        meta: {
+            title: '其他管理',
+            icon: '',
+            hidden: false
+        },
+        children: [
+            {
+                path: '/EntityCarouseCenter',
+                name: '商城轮播图管理',
+                component: () => import("@/views/OtherManagement/EntityCarouseCenter.vue"),
+                meta: {
+                    title: '商城轮播图管理',
+                    icon: '',
+                    hidden: false
+                }
             },
-            // {
-            //     path: '/Upload',
-            //     name: '文件上传',
-            //     component: () => import("@/views/User/Upload.vue"),
-            //     meta: {
-            //         title: '文件上传',
-            //         icon: 'Upload',
-            //         hidden: false
-            //     }
-            // },
+            {
+                path: '/CourseCarouseCenter',
+                name: '课程轮播图管理',
+                component: () => import("@/views/OtherManagement/CourseCarouseCenter.vue"),
+                meta: {
+                    title: '课程轮播图管理',
+                    icon: '',
+                    hidden: false
+                }
+            },
+            {
+                path: '/FestivalManage',
+                name: '节日管理',
+                component: () => import("@/views/OtherManagement/FestivalManagement.vue"),
+                meta: {
+                    title: '节日管理',
+                    icon: '',
+                    hidden: false
+                }
+            }
         ]
     },
     {
diff --git a/src/utils/entityProduct/picUpload.ts b/src/utils/entityProduct/picUpload.ts
index 7ce94fc..9c8d43f 100644
--- a/src/utils/entityProduct/picUpload.ts
+++ b/src/utils/entityProduct/picUpload.ts
@@ -14,19 +14,21 @@ export const form : any = ref({   //添加实体类商品的表单
     festivalName: '', //节日名称
     type: '',//类别
     label: '',//商品标签
-    introDetail: '',//详情描述
+    // introDetail: '',//详情描述
     goodImg: '',  //商品图片url
-    detailImg: '',  //图文详情url
-    inventory: '' //库存
+    // detailImg: '',  //图文详情url
+    inventory: '', //库存
+    richText: ''
 })
 export const editForm: any = ref({}) //编辑后的实体类商品表格
+
 //图片上传请求  此请求只要选择了图片，就会默认上传
 export const handleChange = async (file: any, flag: number ) => { 
     fileSimple.value = file
     let formData = new FormData()  //这一步很重要 创建一个FormData对象
     formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
     const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-        url: '/file/upload/server/not_login',
+        url: '/file/uploadFile',
         method: 'post',
         headers: {
             'content-Type': 'multipart/form-data'
@@ -37,21 +39,20 @@ export const handleChange = async (file: any, flag: number ) => {
             file: formData.get("file")
         }
     })
+    // console.log('图片上传的结果--->',res.data)
     if (res.data.code === 1) {
         if ( flag === 2 ) {
             productImgArr.value.splice(0, productImgArr.value.length)  //一并删除数组中存放的图片Url地址
-            productImgMap.set(fileSimple.value.uid, res.data.data)
+            productImgMap.set(fileSimple.value.uid,res.data.data)
             productImgMap.forEach(loopMap)   //将图片url插入到数组中
             form.value.goodImg = formatString()
         } else if(flag === 0 && ImgArr != null) {
             dealImgArr(ImgArr.value)    //先处理
-            productImgMap.set(fileSimple.value.uid, res.data.data)
+            productImgMap.set(fileSimple.value.uid,res.data.data)
             productImgMap.forEach(loopMap)   //将图片url插入到数组中
             pushImgArr(productImgArr.value)
             editForm.value.goodImg = formatString()
             productImgMap.clear()  //清除所有的键，防止bug
-        } else {
-            form.value.detailImg = res.data.data
         }
     }
 }
diff --git a/src/views/Commodity/AddProduct.vue b/src/views/Commodity/AddProduct.vue
index 0bd0a63..71eb3a8 100644
--- a/src/views/Commodity/AddProduct.vue
+++ b/src/views/Commodity/AddProduct.vue
@@ -1,7 +1,12 @@
 <template>
-  <div class="totalBox">
+  <div class="flexCard">
+    <el-card class="richTextPreview" shadow="never">
+      <div class="titleText">移动端预览</div>
+      <p v-html="previewRichText"></p>
+    </el-card>
     <!-- 表单 ref 和 prop绑定  用于重置表单 -->
-    <div class="fromBox">
+    <el-card class="form-container" shadow="never">
+    <div class="form">
       <el-form ref="resetFormData" :model="form" label-width="auto" size="large" :rules="rules">
         <div>
           <el-form-item label="添加商品图片">
@@ -15,18 +20,6 @@
             </el-upload>
           </el-form-item>
         </div>
-        <!--  添加图文描述-->
-        <div>
-          <el-form-item label="添加图文描述">
-            <el-upload ref="uploadProductDetail" action="#" list-type="picture-card" :auto-upload="false"
-              multiple="true" :on-change="(event: any) => handleChange(event, 1)" :on-exceed="Exceed_ProductDetail"
-              limit="1" :on-remove="handleRemove">
-              <el-icon>
-                <Plus />
-              </el-icon>
-            </el-upload>
-          </el-form-item>
-        </div>
         <div class="NamePrice">
           <el-form-item label="产品名称" prop="name">
             <el-input v-model="form.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
@@ -49,7 +42,9 @@
         </div>
         <div class="festivalBox">
           <el-form-item label="节日名称" prop="festivalName" style="width: 300px;">
-            <el-input v-model="form.festivalName" />
+            <el-select v-model="form.festivalName" placeholder="请选择" >
+              <el-option v-for="item in festivalArr" :key="item" :label="item.name" :value="item.name" />
+            </el-select>
           </el-form-item>
           <el-form-item label="产品类别" prop="type" style="width: 240px;">
             <el-select v-model="form.type" placeholder="请选择" @change="(event: any) => loadForm(event)" :disabled="typeSelect">
@@ -67,8 +62,8 @@
           </div>
           <el-button type="primary" @click="addLabel">添加</el-button>
         </el-form-item>
-        <el-form-item label="商品详细描述" prop="introDetail">
-          <el-input v-model="form.introDetail" type="textarea" placeholder="产品尺寸，服务等" maxlength="100" show-word-limit />
+        <el-form-item label="商品图文" prop="richText">
+          <richTextUtil @richTextContent="getInfo"/>
         </el-form-item>
         <div class="btnBox">
           <el-form-item>
@@ -80,29 +75,44 @@
         </div>
       </el-form>
     </div>
+    </el-card>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, inject, reactive } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
-import { type UploadProps, genFileId, type UploadRawFile, type FormInstance, type FormRules } from 'element-plus';
+import { type FormRules } from 'element-plus';
 import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';   //封装ElMessage提示
 import myAxios from "@/api/myAxios";
 import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';
 import { validateName, validateIntro, validateDetail } from '@/utils/entityProduct/FormRules';
 import { handleChange, handleRemove, form, Exceed_ProductImg } from '@/utils/entityProduct/picUpload';
+import richTextUtil from '@/layout/components/richTextUtil.vue';
 const resetFormData = ref()
 const reload: any = inject("reload")  //导入组件刷新
 const typeList: any = ref([])
 const uploadProductImg: any = ref()  //图片上传的ref绑定
-const uploadProductDetail: any = ref()  //图片上传的ref绑定
 const labelList = ref([''])
 const isqualify : any = ref(false)
 const typeSelect : any = ref(false)  //类别下拉选项栏的禁用状态
+const previewRichText: any = ref<String>('')
+const festivalArr : any = ref([])   //节日数组
+
 onMounted(() => {
   getTypeList() //加载类别列表，渲染在产品列表的select选项里面
+  getFestivalArr()  //查询节日列表
 })
+
+const getFestivalArr = async () => {
+  const res = await myAxios.get('/festival/get')
+  if(res.data.code === 1) {
+    festivalArr.value = res.data.data
+  } else {
+    WarnInfo('获取节日失败，检查服务')
+  }
+}
+
 const getTypeList = async () => {  //获取类别列表作为可选项
   const res = await myAxios.post('/category/list/web', {})  //获取商品列表
   for(let key in res.data.data) {
@@ -118,8 +128,17 @@ const onSubmit = async () => {
     WarnInfo('请检查表单数据是否完整填写')
     return;  //空返回结束函数
   }
-  const res = await myAxios.post('/goods/add', { ...form.value })
-  // console.log(res.data);
+  const res = await myAxios.post('/goods/add', {
+    name: form.value.name,
+    type: form.value.type,
+    intro: form.value.intro,
+    price: form.value.price,
+    goodImg: form.value.goodImg,
+    richText: form.value.richText,
+    inventory: form.value.inventory,
+    festivalName: form.value.festivalName,
+    label: form.value.label
+  })
   if (res.data.code === 1) {
     SuccessInfo('提交成功')
     form.value = {}  //12.18改
@@ -137,12 +156,7 @@ const loadForm = (value: any) => {
 const resetForm = () => {
   resetFormData.value.resetFields()
 }
-const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商品详情图片
-  uploadProductDetail.value!.clearFiles()   //清空已上传的文件列表
-  const file = files[0] as UploadRawFile
-  file.uid = genFileId()
-  uploadProductDetail.value!.handleStart(file)  //手动选择文件
-}
+
 const rules = reactive<FormRules<typeof form>>({  //表单校验规则
   name: [{ validator: validateName, trigger: 'blur' }],
   intro: [{ validator: validateIntro, trigger: 'blur' }],
@@ -177,17 +191,37 @@ const customTag = (e:any)=>{   //点击定制
     form.value.type = ''
   }
 }
+const getInfo = (info: any) => {  //富文本赋值
+  // console.log('info', info)
+  previewRichText.value = info
+  form.value.richText = encode64(info)
+}
+function encode64(text: string): string {
+  return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
+}
 </script>
 
 <style scoped>
-.totalBox {
+.flexCard {
   display: flex;
-  margin: 0 auto;
+  height: 100%;
+  width: 1200px;
+  overflow-x: auto;
 }
 
-.fromBox {
+.richTextPreview {
+  height: 80vh;
+  overflow-y: auto;
+  word-break: break-all;
+  width: 400px;
+  margin-right: 10px;
+}
+.form-container {
   width: 700px;
-  height: 750px;
+  /* margin: 0 auto; */
+}
+.form {
+  /* width: 500px; */
   margin: 0 auto;
 }
 
diff --git a/src/views/Commodity/EntityProductDetail.vue b/src/views/Commodity/EntityProductDetail.vue
new file mode 100644
index 0000000..41ad1dc
--- /dev/null
+++ b/src/views/Commodity/EntityProductDetail.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="flexCard">
+    <el-card class="richTextPreview" shadow="never">
+      <div class="titleText">移动端预览</div>
+      <p v-html="previewRichText"></p>
+    </el-card>
+    <!-- 表单 ref 和 prop绑定  用于重置表单 -->
+    <el-card class="form-container" shadow="never">
+      <div class="form">
+        <el-form ref="resetFormData" :model="detailFrom" label-width="auto" size="large" :rules="rules" :disabled="disabledRichText">
+          <div>
+            <el-form-item label="添加商品图片">
+              <!-- 下面的event的作用,传入当前事件对象 -->
+              <el-upload v-model:file-list="ImgArr" ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
+                         :on-remove="handleRemove" @change="(event: any) => handleChange(event, 2)" :on-exceed="Exceed_ProductImg"
+                         limit="7">
+                <el-icon>
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </el-form-item>
+          </div>
+          <div class="NamePrice">
+            <el-form-item label="产品名称" prop="name">
+              <el-input v-model="detailFrom.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
+            </el-form-item>
+            <el-form-item label="产品价格" prop="price">
+              <el-input-number v-model="detailFrom.price" min="0" :precision="2" :step="0.5" />
+              <p>元</p>
+            </el-form-item>
+          </div>
+          <div class="IntroInven">
+            <el-form-item label="产品简介" prop="intro">
+              <el-input v-model="detailFrom.intro" type="textarea" placeholder="产品尺寸，服务等" maxlength="30" show-word-limit
+                        style="width: 300px;" />
+            </el-form-item>
+            <div>
+              <el-form-item label="库存" prop="inventory">
+                <el-input-number v-model="detailFrom.inventory" min="0" :precision="0" :step="1" :disabled="invInput" />
+              </el-form-item>
+            </div>
+          </div>
+          <div class="festivalBox">
+            <el-form-item label="节日名称" prop="festivalName" style="width: 300px;">
+              <el-select v-model="detailFrom.festivalName" placeholder="请选择" >
+                <el-option v-for="item in festivalArr" :key="item" :label="item.name" :value="item.name" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="产品类别" prop="type" style="width: 240px;">
+              <el-select v-model="detailFrom.type" placeholder="请选择" @change="(event: any) => loadForm(event)" :disabled="typeSelect">
+                <el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
+              </el-select>
+            </el-form-item>
+            <div>
+              <el-checkbox v-model="isqualify" label="定制商品" size="large" border style="margin-left: 10px;" @change="customTag" />
+            </div>
+          </div>
+          <el-form-item label="商品标签" prop="label">
+            <div v-for="(item, index) in labelList" :key="index">
+              <el-input v-model="labelList[index]" type="text" style="width: 150px;" maxlength="5" show-word-limit
+                        @blur="addLabelList" />
+            </div>
+            <el-button type="primary" @click="addLabel">添加</el-button>
+          </el-form-item>
+          <el-form-item label="商品图文" prop="richText">
+            <richTextUtil @richTextContent="getInfo" v-model:disableRich="disabledRichText" v-model:context="previewRichText"/>
+          </el-form-item>
+          <div class="btnBox">
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit" :disabled="saveBtn">更新</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="resetForm">重置</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, inject, reactive, onBeforeMount  } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+import {type FormRules, type UploadUserFile} from 'element-plus';
+import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';   //封装ElMessage提示
+import myAxios from "@/api/myAxios";
+import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';
+import { validateName, validateIntro, validateDetail } from '@/utils/entityProduct/FormRules';
+import { handleChange, handleRemove, form, Exceed_ProductImg } from '@/utils/entityProduct/picUpload';
+import richTextUtil from '@/layout/components/richTextUtil.vue';
+import { useRoute } from "vue-router";
+
+const route = useRoute();  //路由
+const resetFormData = ref()
+const reload: any = inject("reload")  //导入组件刷新
+const typeList: any = ref([])
+const uploadProductImg: any = ref()  //图片上传的ref绑定
+const labelList = ref([''])
+const isqualify : any = ref(false)
+const typeSelect : any = ref(false)  //类别下拉选项栏的禁用状态
+const ImgArr: any = ref<UploadUserFile[]>([])
+const detailFrom : any = ref({
+  name: '',   //商品名称
+  price: '',  //商品价格
+  intro: '',//产品简介
+  festivalName: '', //节日名称
+  type: '',//类别
+  label: '',//商品标签
+  // introDetail: '',//详情描述
+  goodImg: '',  //商品图片url
+  // detailImg: '',  //图文详情url
+  inventory: '', //库存
+  richText: ''
+})
+const disabledRichText:any = ref(false);
+const previewRichText:any = ref('');
+const festivalArr : any = ref([])   //节日数组
+
+onBeforeMount(()=>{   //页面加载最早的生命周期
+  if(route.params.flag === '0'){
+    disabledRichText.value = true;
+  }
+})
+
+onMounted(() => {
+  getTypeList() //加载类别列表，渲染在产品列表的select选项里面
+  getProductInfo()   //编辑页查询商品信息
+  getFestivalArr()
+})
+
+//节日信息
+const getFestivalArr = async () => {
+  const res = await myAxios.get('/festival/get')
+  if(res.data.code === 1) {
+    festivalArr.value = res.data.data
+  } else {
+    WarnInfo('获取节日失败，检查服务')
+  }
+}
+
+const getProductInfo = async () => {   //商品信息
+  const res = await myAxios.post('/goods/getById',{ id: route.params.id })
+  // console.log('后端查询商品--->',res.data.data)
+  if(res.data.code === 1) {
+    detailFrom.value = res.data.data
+    previewRichText.value = JSON.parse(JSON.stringify(res.data.data.richText))
+    ImgArr.value.splice(0, ImgArr.value.length)
+    labelList.value = res.data.data.label.split(';')
+    var tempArr = res.data.data.goodImg.split(';')
+    tempArr.forEach((item: any) => {
+      ImgArr.value.push({
+        url: item
+      })
+    })
+  }
+}
+
+const getTypeList = async () => {  //获取类别列表作为可选项
+  const res = await myAxios.post('/category/list/web', {})  //获取商品列表
+  for(let key in res.data.data) {
+    typeList.value.push(res.data.data[key].typeName)
+  }
+}
+
+//提交表单
+const onSubmit = async () => {
+  const values = Object.values(detailFrom.value );
+  // 使用some()方法来检查是否有任何值为空
+  if (values.some((value: any) => value === null || value === undefined || value === '' || value === 0)) {
+    WarnInfo('请检查表单数据是否完整填写')
+    return;  //空返回结束函数
+  }
+  const res = await myAxios.post('/goods/update', { ...detailFrom.value })
+  // console.log(res.data);
+  if (res.data.code === 1) {
+    SuccessInfo('提交成功')
+    // detailFrom.value = {}
+    // reload() //上传完后重置表单
+  } else {
+    WarnInfo('服务错误')
+    return;
+  }
+}
+//将 商品类别 赋值到表格里
+const loadForm = (value: any) => {
+  detailFrom.value.type = value  //三元运算符 flag=1 是关于"商品类别"选项的值  flag=0 是关于“是否为节日限定”选项的值
+}
+//清除表单
+const resetForm = () => {
+  resetFormData.value.resetFields()
+}
+const rules = reactive<FormRules<typeof form>>({  //表单校验规则
+  name: [{ validator: validateName, trigger: 'blur' }],
+  intro: [{ validator: validateIntro, trigger: 'blur' }],
+  introDetail: [{ validator: validateDetail, trigger: 'blur' }]
+})
+const addLabel = () => {   //添加商品标签按钮的方法
+  if (labelList.value[labelList.value.length - 1] === '') {
+    WarnInfo('请填写完')
+    return;
+  }
+  if (labelList.value.length < 4) {
+    labelList.value.push('')
+  }
+}
+
+const addLabelList = () => {   //格式化商品标签
+  var string = ''
+  if (!labelList.value.some((item: any) => item === '')) {
+    string = labelList.value.join(';')
+  } else return;
+  detailFrom.value.label = string
+}
+
+const customTag = (e:any)=>{   //点击定制
+  if(e) {
+    detailFrom.value.inventory = 1
+    invInput.value = true
+    typeSelect.value = true
+    detailFrom.value.type = '定制'
+  } else {
+    detailFrom.value.inventory = 0
+    invInput.value = false
+    typeSelect.value = false
+    detailFrom.value.type = ''
+  }
+}
+
+const getInfo = (info: any) => {  //富文本赋值
+  // console.log('info', info)
+  previewRichText.value = info
+  detailFrom.value.richText = encode64(info)
+}
+
+//字符串转为base64编码
+function encode64(text: string): string {
+  return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
+}
+
+</script>
+
+<style scoped>
+.flexCard {
+  display: flex;
+  height: 100%;
+}
+
+.richTextPreview {
+  height: 80vh;
+  overflow-y: auto;
+  word-break: break-all;
+  width: 400px;
+  margin-right: 10px;
+}
+
+.form-container {
+  width: 700px;
+  /* margin: 0 auto; */
+}
+.form {
+  /* width: 500px; */
+  margin: 0 auto;
+}
+
+.NamePrice {
+  display: flex;
+}
+
+.IntroInven {
+  display: flex;
+}
+
+.festivalBox {
+  display: flex;
+}
+
+.btnBox {
+  display: flex;
+  justify-content: space-around;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Commodity/MerchandiseCenter.vue b/src/views/Commodity/MerchandiseCenter.vue
index 815177e..a4bb4db 100644
--- a/src/views/Commodity/MerchandiseCenter.vue
+++ b/src/views/Commodity/MerchandiseCenter.vue
@@ -95,105 +95,16 @@
                    :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
                    :total="total"/>
   </div>
-  <!-- 编辑/详情表单 -->
-  <el-dialog v-model="DialogVisible" :title="title">
-    <el-form label-width="100px" :disabled="disabled" v-model="editForm">
-      <el-form-item label="商品编号">
-        <el-input v-model="editForm.id" disabled style="width: 60px;"></el-input>
-      </el-form-item>
-      <el-form-item label="商品图片">
-        <el-upload
-            v-model:file-list="ImgArr"
-            ref="uploadProductImg"
-            action="#"
-            list-type="picture-card"
-            :auto-upload="false"
-            multiple="true"
-            :on-remove="removePic"
-            @change="(event: any) => handleChange(event, 0)"
-            :on-exceed="Exceed_ProductImg"
-            limit="7">
-          <el-icon>
-            <Plus/>
-          </el-icon>
-        </el-upload>
-      </el-form-item>
-      <el-form-item label="商品名称">
-        <el-input v-model="editForm.name" style="width: 200px;"></el-input>
-      </el-form-item>
-      <el-form-item label="产品价格" prop="price">
-        <el-input-number v-model="editForm.price" min="0.01" :precision="2" :step="0.5"/>
-        <p style="margin-left: 5px">元</p>
-      </el-form-item>
-      <div style="display: flex;">
-        <el-form-item label="产品类别" prop="type">
-          <el-select v-model="editForm.type" @change="(event: any) => loadForm(event, 1)" style="width: 120px;">
-            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1"/>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="商品数量">
-          <el-input v-model="editForm.inventory" style="width: 50px;"></el-input>
-        </el-form-item> -->
-        <el-form-item label="库存" prop="inventory">
-          <el-input-number v-model="editForm.inventory" min="0" :precision="0" :step="1"/>
-        </el-form-item>
-      </div>
-      <div style="display: flex;">
-        <el-form-item label="是否为限定类产品" prop="festivalOrder">
-          <el-select v-model="editForm.festivalOrder" @change="(event: any) => loadForm(event, 0)" style="width: 70px;">
-            <el-option label="是" value="1"/>
-            <el-option label="否" value="0"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="商品标签">
-          <el-input v-model="editForm.label" style="width: auto;"></el-input>
-        </el-form-item>
-      </div>
-      <el-form-item label="商品图文">
-        <div v-if="editForm.detailImg">
-          <img :src="editForm.detailImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;"/>
-        </div>
-        <el-upload
-            ref="uploadProductDetail"
-            action="#"
-            list-type="picture-card"
-            :auto-upload="false"
-            multiple="true"
-            :on-remove="handleRemove"
-            @change="(event: any) => handleChange(event, 1)"
-            :on-exceed="Exceed_ProductDetail"
-            limit="1">
-          <el-icon>
-            <Plus/>
-          </el-icon>
-        </el-upload>
-      </el-form-item>
-      <el-form-item label="商品描述">
-        <el-input type="textarea" v-model="editForm.introDetail"></el-input>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
-        <el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
-      </span>
-    </template>
-  </el-dialog>
 </template>
 
 <script setup lang="ts">
 import {ElMessage, type UploadProps, genFileId, type UploadRawFile} from 'element-plus';
 import {ref, onMounted, inject} from 'vue';
 import myAxios from "@/api/myAxios";
-import {
-  handleChange,
-  removePic,
-  handleRemove,
-  Exceed_ProductImg,
-  ImgArr,
-  editForm
-} from '@/utils/entityProduct/picUpload';
-// import { handleChange, handleRemove, form, Exceed_ProductImg } from '@/utils/entityProduct/picUpload';
+import { editForm } from '@/utils/entityProduct/picUpload';
+import { useRouter } from "vue-router";
+
+const router = useRouter();  //路由
 const total = ref(0); //总页数
 const idList = ref<Number[]>([]);
 const searchParams: any = ref({ //封装分页
@@ -202,15 +113,10 @@ const searchParams: any = ref({ //封装分页
   sortField: "id",  //根据ID分类
   sortOrder: "descend" //降序
 })
-const disabled = ref(true)
-//表单变量
-const title = ref('')  //表单名字
 const productName = ref('');
-const DialogVisible = ref(false);
 const state = ref('');  //根据商品上架状态select栏
 const tableData: any = ref([]);  //实体类商品表格
 const reload: any = inject("reload")  //页面重新刷新
-const uploadProductImg: any = ref()  //图片上传的ref绑定
 const uploadProductDetail: any = ref()  //图片上传的ref绑定
 const typeList: any = ref([
   {
@@ -251,19 +157,7 @@ const getTypeList = async () => {
     }
   }
 }
-const saveEdit = async () => { //编辑商品
-  const res = await myAxios.post('/goods/update', {...editForm.value})
-  if (res.data.code === 1) {
-    ElMessage({
-      type: 'success',
-      message: '更新成功'
-    })
-    DialogVisible.value = false
-    getProductList()
-  } else {
-    ElMessage.error('更新失败，请检查字段')
-  }
-}
+
 const searchByType = (event: any) => { //通过类别搜索
   searchParams.value.type = event
   searchParams.value.current = 1
@@ -284,22 +178,19 @@ const deleteProduct = async (index: number) => {
       type: 'success',
       message: '删除成功',
     })
-    getProductList()
+    await getProductList()
   }
-  getTypeList()
+  await getTypeList()
 }
 //详情或编辑 
 const ReviseOrView = (index: number, row: any, flag: number) => {
-  ImgArr.value.splice(0, ImgArr.value.length)
-  var tempArr = row.goodImg.split(';')
-  tempArr.forEach((item: any) => {
-    ImgArr.value.push({
-      url: item
-    })
+  router.push({
+    name: '商品详情',
+    params: {
+      id: row.id,
+      flag: flag
+    }
   })
-  flag ? (title.value = "编辑商品" , disabled.value = false) : (title.value = "商品详情" , disabled.value = true)
-  DialogVisible.value = true;
-  editForm.value = JSON.parse(JSON.stringify(row))
 }
 //下架商品
 const handleOff = async (index: number, row: any) => {
@@ -327,21 +218,7 @@ const handleCurrentChange = (Current: any) => {
 const reset = () => {
   reload()
 };
-const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商品详情图片
-  uploadProductDetail.value!.clearFiles()
-  const file = files[0] as UploadRawFile
-  file.uid = genFileId()
-  uploadProductDetail.value!.handleStart(file)
-}
-//将 商品类别 赋值到表格里
-const loadForm = (value: any, flag: number) => {
-  flag ? editForm.value.type = value : editForm.value.festivalOrder = value  //三元运算符 flag=1 是关于"商品类别"选项的值  flag=0 是关于“是否为节日限定”选项的值
-}
-const onSearch = (data: String) => { //搜索按钮方法
-  searchParams.value.name = data
-  searchParams.value.current = 1
-  getProductList()
-}
+
 //批量删除
 const delBatch = async () => {
   console.log(idList.value);
@@ -368,6 +245,9 @@ const selectChange = (selection: any, row: any) => {   //selction是对象数组
   })
   // console.log('idList--->',idList.value);
 }
+
+//查询
+const onSearch = (value: string) => {}
 </script>
 
 <style scoped>
diff --git a/src/views/Commodity/TypeManagement.vue b/src/views/Commodity/TypeManagement.vue
index 5f56cda..071157d 100644
--- a/src/views/Commodity/TypeManagement.vue
+++ b/src/views/Commodity/TypeManagement.vue
@@ -112,7 +112,7 @@ const handleChange = async (file: any) => {
   let formData = new FormData()  //这一步很重要 创建一个FormData对象
   formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
   const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-    url: '/file/upload/server/not_login',
+    url: '/file/uploadFile',
     method: 'post',
     headers: {
       'content-Type': 'multipart/form-data'
diff --git a/src/views/CostumeAppointments/AddCostumes.vue b/src/views/CostumeAppointments/AddCostumes.vue
index 3ee5bb1..1c79fb4 100644
--- a/src/views/CostumeAppointments/AddCostumes.vue
+++ b/src/views/CostumeAppointments/AddCostumes.vue
@@ -1,72 +1,57 @@
 <template>
-  <div class="totalBox">
-    <div class="fromBox">
-      <!-- 表单 ref 和 prop绑定  用于重置表单 -->
-      <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px;" size="large">
-        <div class="totalPicture">
-          <div>
-            <el-form-item label="添加写真展示图片">
-              <!-- 下面的event的作用,传入当前事件对象 -->
-              <el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
-                :on-remove="handleRemove" @change="(event: any) => handleChange(event, 0)"
-                :on-exceed="Exceed_ProductImg" limit="1">
-                <el-icon>
-                  <Plus />
-                </el-icon>
-              </el-upload>
-            </el-form-item>
-          </div>
-          <!--  添加图文描述-->
-          <div>
-            <el-form-item label="添加服装详情图">
-              <el-upload ref="uploadProductDetail" action="#" list-type="picture-card" :auto-upload="false"
-                multiple="true" :on-change="(event: any) => handleChange(event, 1)" :on-exceed="Exceed_ProductDetail"
-                limit="1" :on-remove="handleRemove">
-                <el-icon>
-                  <Plus />
-                </el-icon>
-              </el-upload>
-            </el-form-item>
-          </div>
-        </div>
-        <div class="NamePrice">
-          <div class="name">
-            <el-form-item label="服装名称" prop="name">
-              <el-input v-model="form.name" />
-            </el-form-item>
-          </div>
-          <div class="price">
-            <el-form-item label="价格" prop="price">
-            <el-input-number v-model="form.price" min="0" :precision="2" :step="0.5" />
-            <p>元</p>
-          </el-form-item>
-          </div>
-        </div>
-          <!-- 拍摄场地：户外、室内、均可 -->
-          <div class="kinds">
-            <el-form-item label="拍摄场地" prop="type" style="width: 240px;">
+  <div class="flexCard">
+    <el-card class="richTextPreview" shadow="never">
+      <div class="titleText">移动端预览</div>
+      <p v-html="form.richText"></p>
+    </el-card>
+    <!-- 表单 ref 和 prop绑定  用于重置表单 -->
+    <el-card class="form-FormContainer" shadow="never">
+      <el-form ref="resetFormData" :model="form" label-width="auto" size="large">
+        <el-form-item label="添加写真展示图片">
+          <!-- 下面的event的作用,传入当前事件对象 -->
+          <el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
+                     :on-remove="handleRemove" @change="(event: any) => handleChange(event, 0)"
+                     :on-exceed="Exceed_ProductImg" limit="1">
+            <el-icon>
+              <Plus />
+            </el-icon>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="服装名称" prop="name" style="width: 300px;" label-width="70px">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="价格" prop="price" label-width="70px">
+          <el-input-number v-model="form.price" min="0" :precision="2" :step="0.5" />
+          <p>元</p>
+        </el-form-item>
+        <!-- 拍摄场地：户外、室内、均可 -->
+        <div class="kinds">
+          <el-form-item label="拍摄场地" prop="type" style="width: 240px;" label-width="70px">
             <el-select v-model="form.shotScene" placeholder="请选择" @change="(event: any) => loadScene(event)" >
               <el-option v-for="item in siteList" :key="item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-          <el-form-item label="服装类别" prop="type" style="width: 240px;">
+          <el-form-item label="服装类别" prop="type" style="width: 240px;" label-width="80px">
             <el-select v-model="form.categoryName" placeholder="请选择" @change="(event: any) => loadCategory(event)" >
               <el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-          </div>
-          <div class="numberSelect">
-            <el-form-item label="最小人数" prop="type" style="width: 240px;">
+        </div>
+        <div class="numberSelect">
+          <el-form-item label="最小人数" prop="type" style="width: 240px;" label-width="70px">
             <el-select v-model="form.minNumber" @change="minNum()">
-            <el-option v-for="item in minArr" :label="item" :value="item" />
-          </el-select>
+              <el-option v-for="item in minArr" :label="item" :value="item" />
+            </el-select>
           </el-form-item>
-          <el-form-item label="最大人数" prop="type" style="width: 240px;">
+          <el-form-item label="最大人数" prop="type" style="width: 240px;" label-width="80px">
             <el-select v-model="form.maxNumber" @change="maxNum()">
-            <el-option v-for="item in maxArr" :label="item" :value="item" />
-          </el-select>
+              <el-option v-for="item in maxArr" :label="item" :value="item" />
+            </el-select>
           </el-form-item>
-          </div>
+        </div>
+        <el-form-item label="效果图" label-width="70px">
+          <richTextUtil @richTextContent="getInfo"/>
+        </el-form-item>
         <div class="totalButton">
           <el-form-item>
             <el-button type="primary" @click="onSubmit">保存</el-button>
@@ -76,24 +61,23 @@
           </el-form-item>
         </div>
       </el-form>
-    </div>
-    <div>
-      <!-- <appointTime @time-Info="getInfo"></appointTime> -->
+    </el-card>
+    <el-card class="form-RichTextContainer" shadow="never">
       <outfitCalendarUtil @calendar-info="getInfo"></outfitCalendarUtil>
-    </div>
+    </el-card>
   </div>
-  
+
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, inject, toRaw, effect } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
-import { ElMessage, type UploadFile, type UploadProps, genFileId, type UploadRawFile } from 'element-plus';
+import { ElMessage, type UploadProps, genFileId, type UploadRawFile } from 'element-plus';
 import myAxios from "@/api/myAxios";
 import outfitCalendarUtil from '@/layout/components/outfitCalendarUtil.vue';
+import richTextUtil from '@/layout/components/richTextUtil.vue';
+
 const fileSimple = ref() //单个文件
-const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
-const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
 const resetFormData = ref()
 const form = ref({
   name: '',  //服装名字
@@ -101,16 +85,14 @@ const form = ref({
   shotScene: '', //拍摄场地
   categoryName: '', //服装类别
   goodImg: '',  //商品图片url
-  detailImg: '',  //图文详情url
   minNumber: 0, //最小人数
   maxNumber: 0, //最大人数
-  effectImg: ["21312312312"], //写真效果图  暂时不用
+  richText: '',
   bookingDateAddRequestList: []  //预约时间点，是否可预约，人数范围
 })
 //导入组件刷新
 const reload: any = inject("reload")
 const uploadProductImg: any = ref()  //图片上传的ref绑定
-const uploadProductDetail: any = ref()  //图片上传的ref绑定
 const typeList = ref<String[]>([])  //服装类别数组
 const siteList = ref<String[]>(['室外','室内','均可'])  //场地类型
 const minArr = ref<Number[]>([])  //最小人数数组
@@ -134,7 +116,7 @@ const loadScene = (value: any) => {
   form.value.shotScene = value  //三元运算符 flag=1 是关于"商品类别"选项的值  flag=0 是关于“是否为节日限定”选项的值
 }
 //提交表单
-const onSubmit = async () => {  
+const onSubmit = async () => {
   const values : any = Object.values(form.value);
   // 使用some()方法来检查是否有任何值为空
   console.log(form.value.bookingDateAddRequestList)
@@ -146,7 +128,7 @@ const onSubmit = async () => {
     return;  //空返回结束函数
   }
   console.log(form.value);
-  const res = await myAxios.post('/photoProducts/add', { 
+  const res = await myAxios.post('/photoProducts/add', {
     name: form.value.name,
     price: form.value.price,
     minNumber: form.value.minNumber,
@@ -154,8 +136,6 @@ const onSubmit = async () => {
     shotScene: form.value.shotScene,
     categoryName: form.value.categoryName,
     introImg: form.value.goodImg,
-    detailImg: form.value.detailImg,
-    effectImg: toRaw(form.value.effectImg),
     bookingDateAddRequestList: toRaw(form.value.bookingDateAddRequestList)
   })
   console.log(res.data);
@@ -176,7 +156,7 @@ const handleChange = async (file: any, flag: number) => {
   let formData = new FormData()  //这一步很重要 创建一个FormData对象
   formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
   const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-    url: '/file/upload/server/not_login',
+    url: '/file/uploadFile',
     method: 'post',
     headers: {
       'content-Type': 'multipart/form-data'
@@ -188,8 +168,9 @@ const handleChange = async (file: any, flag: number) => {
     }
   })
   if (res.data.code === 1) {
+    form.value.goodImg =res.data.data
     //三元运算   当flag为0时，赋值给商品图片  flag为1时，赋值给详情图片
-    flag ? form.value.detailImg = res.data.data : form.value.goodImg = res.data.data
+    // flag ? form.value.detailImg = res.data.data : form.value.goodImg = res.data.data
   }
 }
 //清除表单
@@ -202,23 +183,20 @@ const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品
   file.uid = genFileId()
   uploadProductImg.value!.handleStart(file)
 }
-const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商品详情图片
-  uploadProductDetail.value!.clearFiles()
-  const file = files[0] as UploadRawFile
-  file.uid = genFileId()
-  uploadProductDetail.value!.handleStart(file)
-}
+
 const getInfo =(info:any)=>{
   console.log('info-->',info);
   // timeInfo.value = info
-  form.value.bookingDateAddRequestList = info
+  form.value.richText = info
 }
+
 const getOutfitKind = async ()=> {   //获取服装类别
   const res = await myAxios.post('/photoCategory/list',{})
   for(let key in res.data.data) {
     typeList.value.push(res.data.data[key].name)
   }
 }
+
 const minNum =()=>{  //最小人数不能大于最大人数
   if(form.value.minNumber > form.value.maxNumber && form.value.maxNumber != 0) {
     ElMessage({
@@ -239,60 +217,43 @@ const maxNum =()=>{
     return;
   }
 }
+
 </script>
 
 <style scoped>
-.totalBox {
-  display: flex;
+
+.form-FormContainer {
+  width: 600px;
+  /* margin: 0 auto; */
 }
 
-.fromBox {
-  width: 700px;
-  height: 750px;
+.form-RichTextContainer {
+  width: 550px;
 }
 
-.totalPicture {
+.flexCard {
   display: flex;
+  height: 100%;
 }
 
-.NamePrice {
-  display: flex;
+.richTextPreview {
+  height: 80vh;
+  overflow-y: auto;
+  word-break: break-all;
+  width: 400px;
+  margin-right: 10px;
 }
+
 .kinds {
   display: flex;
 }
+
 .totalButton {
   display: flex;
   justify-content: space-evenly;
   /*  盒子里面水平分隔开 */
 }
-.midBox {
-  display: flex;
-}
-.date-picker {
-  flex: 0.3;
-  /* 日期选择区域占据左边 */
-  display: inline-block;
-  margin-bottom: 10px;
-}
 
-.father {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  border: 1px solid red;
-}
-
-.box {
-  margin-bottom: 20px;
-  /* 每个日期或时间段之间的间距 */
-  border: 1px solid yellow;
-}
-
-.inner {
-  margin-bottom: 10px;
-  border: 1px solid orange;
-}
 .numberSelect {
   display: flex;
 }
diff --git a/src/views/CostumeAppointments/AppointmentOrder.vue b/src/views/CostumeAppointments/AppointmentOrder.vue
index 40686d8..52af406 100644
--- a/src/views/CostumeAppointments/AppointmentOrder.vue
+++ b/src/views/CostumeAppointments/AppointmentOrder.vue
@@ -29,7 +29,7 @@
           详情
         </el-button>
         <el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
-                       title="是否取消订单？" @confirm="deleteOrder(scope.row)" width=180 v-if="['待支付'].includes(scope.row.orderStatus)">
+                       title="是否取消订单？" @confirm="cancelOrder(scope.row)" width=180 v-if="['待支付'].includes(scope.row.orderStatus)">
           <template #reference>
             <el-button size="small" type="primary" plain>取消订单</el-button>
           </template>
@@ -96,7 +96,7 @@ const getOrderList = async () => {
   try {
     searchParams.value.orderNumber = orderNumber.value
     const res = await myAxios.post('/advanceOrder/list', { ...searchParams.value });
-    console.log('订单信息--->', res.data.data);
+    // console.log('订单信息--->', res.data.data);
     if (res.data.code === 1) {
       tableData.value = res.data.data.records;
       total.value = parseInt(res.data.data.total)
diff --git a/src/views/CostumeAppointments/ClothingGrade.vue b/src/views/CostumeAppointments/ClothingGrade.vue
index 08f4e16..3e487ef 100644
--- a/src/views/CostumeAppointments/ClothingGrade.vue
+++ b/src/views/CostumeAppointments/ClothingGrade.vue
@@ -50,22 +50,16 @@ import myAxios from '@/api/myAxios';
 const fileSimple = ref()  //单个文件
 const selectedItems = ref([]) 
 const dialogVisible = ref(false)
-// const submitable = ref(true)  //提交按钮禁用状态
 const loading = ref(false)  //加载
 const typeImg: any = ref<UploadUserFile[]>([])  //商品类别图片
-// const imgMap = new Map()  //商品类别的map集合
 //表单数据
 const typeForm = ref({
   id: 0,
-  name: '',
-  // typeIntro: ''
+  name: ''
 })
 //表格数据
 const tableData = ref([])
-//旗帜 表示点击添加类别(0)  和  点击修改类别两个状态(1)，因为我们共用一个表格 
 const flag = ref(0)
-const typeList = ref([])
-//老套路 页面加载必须获取类别列表
 onMounted(() => {
   getTypeList()
 })
diff --git a/src/views/CostumeAppointments/ManagementCenter.vue b/src/views/CostumeAppointments/ManagementCenter.vue
index dff2014..1ea15f8 100644
--- a/src/views/CostumeAppointments/ManagementCenter.vue
+++ b/src/views/CostumeAppointments/ManagementCenter.vue
@@ -254,8 +254,10 @@ import {ref, onMounted, inject, toRaw} from 'vue';
 import myAxios from "@/api/myAxios";
 import outfitCalendarUtil from '@/layout/components/outfitCalendarUtil.vue';
 import emitter from "@/utils/emitter";
-import {form} from "@/utils/entityProduct/picUpload";
+import { useRouter } from "vue-router";
 import {WarnInfo} from "@/utils/messageInfo";
+
+const router = useRouter();  //路由
 const total = ref(0); //总页数
 const idList = ref<Number[]>([]);  //用于批量删除
 const searchParams: any = ref({ //封装分页
@@ -386,6 +388,13 @@ const deleteProduct = async (index: number) => {
 }
 //详情或编辑 
 const ReviseOrView = (index: number, row: any , flag : number) => {
+  // router.push({
+  //   name: '服装详情',
+  //   params: {
+  //     id: row.id,
+  //     flag: flag
+  //   }
+  // })
   //flag值不同显示不同内容  disabled开启和关闭
   flag ?  (title.value = "编辑服装" , disabled.value = false) : (title.value = "服装详情" , disabled.value = true)
   DialogVisible.value = true;
@@ -456,7 +465,7 @@ const handleChange = async (file: any, flag: number) => {
   let formData = new FormData()  //这一步很重要 创建一个FormData对象
   formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
   const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-    url: '/file/upload/server/not_login',
+    url: '/file/uploadFile',
     method: 'post',
     headers: {
       'content-Type': 'multipart/form-data'
diff --git a/src/views/CostumeAppointments/OutfitDetail.vue b/src/views/CostumeAppointments/OutfitDetail.vue
new file mode 100644
index 0000000..c9a9356
--- /dev/null
+++ b/src/views/CostumeAppointments/OutfitDetail.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="flexCard">
+    <el-card class="richTextPreview" shadow="never">
+      <div class="titleText">移动端预览</div>
+      <p v-html="detailFrom.richText"></p>
+    </el-card>
+    <!-- 表单 ref 和 prop绑定  用于重置表单 -->
+    <el-card class="form-container" shadow="never">
+      <div class="form">
+        <el-form ref="resetFormData" :model="detailFrom" label-width="auto" size="large" :rules="rules" :disabled="true">
+          <div>
+            <el-form-item label="添加商品图片">
+              <!-- 下面的event的作用,传入当前事件对象 -->
+              <el-upload v-model:file-list="ImgArr" ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
+                         :on-remove="handleRemove" @change="(event: any) => handleChange(event, 2)" :on-exceed="Exceed_ProductImg"
+                         limit="7">
+                <el-icon>
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </el-form-item>
+          </div>
+          <div class="NamePrice">
+            <el-form-item label="产品名称" prop="name">
+              <el-input v-model="detailFrom.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
+            </el-form-item>
+            <el-form-item label="产品价格" prop="price">
+              <el-input-number v-model="detailFrom.price" min="0" :precision="2" :step="0.5" />
+              <p>元</p>
+            </el-form-item>
+          </div>
+          <div class="IntroInven">
+            <el-form-item label="产品简介" prop="intro">
+              <el-input v-model="detailFrom.intro" type="textarea" placeholder="产品尺寸，服务等" maxlength="30" show-word-limit
+                        style="width: 300px;" />
+            </el-form-item>
+            <div>
+              <el-form-item label="库存" prop="inventory">
+                <el-input-number v-model="detailFrom.inventory" min="0" :precision="0" :step="1" :disabled="invInput" />
+              </el-form-item>
+            </div>
+          </div>
+          <div class="festivalBox">
+            <el-form-item label="节日名称" prop="festivalName" style="width: 300px;">
+              <el-input v-model="detailFrom.festivalName" />
+            </el-form-item>
+            <el-form-item label="产品类别" prop="type" style="width: 240px;">
+              <el-select v-model="detailFrom.type" placeholder="请选择" @change="(event: any) => loadForm(event)" :disabled="typeSelect">
+                <el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
+              </el-select>
+            </el-form-item>
+            <div>
+              <el-checkbox v-model="isqualify" label="定制商品" size="large" border style="margin-left: 10px;" @change="customTag" />
+            </div>
+          </div>
+          <el-form-item label="商品标签" prop="label">
+            <div v-for="(item, index) in labelList" :key="index">
+              <el-input v-model="labelList[index]" type="text" style="width: 150px;" maxlength="5" show-word-limit
+                        @blur="addLabelList" />
+            </div>
+            <el-button type="primary" @click="addLabel">添加</el-button>
+          </el-form-item>
+          <el-form-item label="商品图文" prop="richText">
+            <richTextUtil @richTextContent="getInfo" v-model:disable="disabledRichText"/>
+          </el-form-item>
+          <div class="btnBox">
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit" :disabled="saveBtn">更新</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="resetForm">重置</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, inject, reactive, onBeforeMount  } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+import {type FormRules, type UploadUserFile} from 'element-plus';
+import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';   //封装ElMessage提示
+import myAxios from "@/api/myAxios";
+import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';
+import { validateName, validateIntro, validateDetail } from '@/utils/entityProduct/FormRules';
+import { handleChange, handleRemove, form, Exceed_ProductImg } from '@/utils/entityProduct/picUpload';
+import richTextUtil from '@/layout/components/richTextUtil.vue';
+import { useRoute } from "vue-router";
+
+const route = useRoute();  //路由
+const resetFormData = ref()
+const reload: any = inject("reload")  //导入组件刷新
+const typeList: any = ref([])
+const uploadProductImg: any = ref()  //图片上传的ref绑定
+const labelList = ref([''])
+const isqualify : any = ref(false)
+const typeSelect : any = ref(false)  //类别下拉选项栏的禁用状态
+const ImgArr: any = ref<UploadUserFile[]>([])
+const detailFrom : any = ref({
+  name: '',   //商品名称
+  price: '',  //商品价格
+  intro: '',//产品简介
+  categoryName: '',  //服装类别
+  goodImg: '',  //商品图片url
+  minNumber: 0,
+  maxNumber: 0,
+  richText: '',
+  shotScene: ''   //拍摄场地
+})
+const disabledRichText:any = ref(false);
+
+onBeforeMount(()=>{   //页面加载最早的生命周期
+  if(route.params.flag === '0'){
+    disabledRichText.value = true;
+  }
+})
+
+onMounted(() => {
+  getTypeList() //加载类别列表，渲染在产品列表的select选项里面
+  getProductInfo()   //编辑页查询商品信息
+  // console.log('id---->',route.params.id)
+  // console.log('flag---->',typeof (route.params.flag))
+
+})
+
+const getProductInfo = async () => {
+  const res = await myAxios.post('/goods/getById',{ id: route.params.id })
+  console.log('后端查询商品--->',res.data.data)
+  if(res.data.code === 1) {
+    detailFrom.value = res.data.data
+    ImgArr.value.splice(0, ImgArr.value.length)
+    labelList.value = res.data.data.label.split(';')
+    var tempArr = res.data.data.goodImg.split(';')
+    tempArr.forEach((item: any) => {
+      ImgArr.value.push({
+        url: item
+      })
+    })
+  }
+}
+
+const getTypeList = async () => {  //获取类别列表作为可选项
+  const res = await myAxios.post('/category/list/web', {})  //获取商品列表
+  for(let key in res.data.data) {
+    typeList.value.push(res.data.data[key].typeName)
+  }
+}
+//提交表单
+const onSubmit = async () => {
+  const values = Object.values(detailFrom.value );
+  // 使用some()方法来检查是否有任何值为空
+  if (values.some((value: any) => value === null || value === undefined || value === '' || value === 0)) {
+    WarnInfo('请检查表单数据是否完整填写')
+    return;  //空返回结束函数
+  }
+  const res = await myAxios.post('/goods/add', { ...detailFrom.value })
+  // console.log(res.data);
+  if (res.data.code === 1) {
+    SuccessInfo('提交成功')
+    detailFrom.value = {}  //12.18改
+    reload() //上传完后重置表单
+  } else {
+    WarnInfo('服务错误')
+    return;
+  }
+}
+//将 商品类别 赋值到表格里
+const loadForm = (value: any) => {
+  detailFrom.value.type = value  //三元运算符 flag=1 是关于"商品类别"选项的值  flag=0 是关于“是否为节日限定”选项的值
+}
+//清除表单
+const resetForm = () => {
+  resetFormData.value.resetFields()
+}
+const rules = reactive<FormRules<typeof form>>({  //表单校验规则
+  name: [{ validator: validateName, trigger: 'blur' }],
+  intro: [{ validator: validateIntro, trigger: 'blur' }],
+  introDetail: [{ validator: validateDetail, trigger: 'blur' }]
+})
+const addLabel = () => {   //添加商品标签按钮的方法
+  if (labelList.value[labelList.value.length - 1] === '') {
+    WarnInfo('请填写完')
+    return;
+  }
+  if (labelList.value.length < 4) {
+    labelList.value.push('')
+  }
+}
+
+const addLabelList = () => {   //格式化商品标签
+  var string = ''
+  if (!labelList.value.some((item: any) => item === '')) {
+    string = labelList.value.join(';')
+  } else return;
+  detailFrom.value.label = string
+}
+const customTag = (e:any)=>{   //点击定制
+  if(e) {
+    detailFrom.value.inventory = 1
+    invInput.value = true
+    typeSelect.value = true
+    detailFrom.value.type = '定制'
+  } else {
+    detailFrom.value.inventory = 0
+    invInput.value = false
+    typeSelect.value = false
+    detailFrom.value.type = ''
+  }
+}
+const getInfo = (info: any) => {  //富文本赋值
+  console.log('info', info)
+  detailFrom.value.richText = info
+}
+</script>
+
+<style scoped>
+.flexCard {
+  display: flex;
+  height: 100%;
+}
+
+.richTextPreview {
+  height: 80vh;
+  overflow-y: auto;
+  word-break: break-all;
+  width: 400px;
+  margin-right: 10px;
+}
+
+.form-container {
+  width: 700px;
+  /* margin: 0 auto; */
+}
+.form {
+  /* width: 500px; */
+  margin: 0 auto;
+}
+
+.NamePrice {
+  display: flex;
+}
+
+.IntroInven {
+  display: flex;
+}
+
+.festivalBox {
+  display: flex;
+}
+
+.btnBox {
+  display: flex;
+  justify-content: space-around;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Coupons/AddCoupons.vue b/src/views/Coupons/AddCoupons.vue
index c2d9a81..8c9b1dc 100644
--- a/src/views/Coupons/AddCoupons.vue
+++ b/src/views/Coupons/AddCoupons.vue
@@ -40,12 +40,10 @@
 
 <script lang="ts" setup>
 import { ref,onMounted} from 'vue'
-import {Plus} from "@element-plus/icons-vue";
 import {ElMessage, type UploadProps} from "element-plus";
 import myAxios from "@/api/myAxios";
 
 
-const fileSimple = ref()
 const form = ref({
   name: '',
   standardAmount:0,//满
@@ -78,10 +76,6 @@ const AddCoupon = async () => {
   }
 }
 
-const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
-  console.log(uploadFile, uploadFiles)
-}
-
 </script>
 
 
diff --git a/src/views/Coupons/CouponCenter.vue b/src/views/Coupons/CouponCenter.vue
index abf5ce3..33d8329 100644
--- a/src/views/Coupons/CouponCenter.vue
+++ b/src/views/Coupons/CouponCenter.vue
@@ -120,10 +120,8 @@ const DialogVisible = ref(false)
 const idList = ref([])
 const total = ref(0)
 const tableData : any= ref([])
-const Couponsname = ref('')
 const title = ref('')
 const editForm : any = ref({})
-const fileSimple = ref()
 const disabled = ref(true)
 const searchParams: any = ref({ //分页
   current: 1,
@@ -209,25 +207,7 @@ const getCouponsList = async ()=> {
     })
   }
 }
-const handleChange = async (file: any, flag: number) => {
-  fileSimple.value = file
-  let formData = new FormData()  //这一步很重要 创建一个FormData对象
-  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
-  const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-    url: '/file/upload/server/not_login',
-    method: 'post',
-    headers: {
-      'content-Type': 'multipart/form-data'
-    },
-    data: {
-      biz: "test",
-      file: formData.get("file") // 取出formData对象中的file
-    }
-  })
-  if (res.data.code === 1) {
-    editForm.value.image = res.data.data
-  }
-}
+
 const deleteCoupons = async (index: number) => {
   console.log(typeof index)
   const res = await myAxios.post('/coupon/delete', { id: index })
diff --git a/src/views/Login.vue b/src/views/Login.vue
index c40ac1f..2086e6f 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -31,6 +31,7 @@
                     " @click="Login">登录</div>
             </div>
           </el-form>
+          <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2024274839号</a>
         </div>
       </div>
     </div>
diff --git a/src/views/Orders/OrderList.vue b/src/views/Orders/OrderList.vue
index 1699940..356d6d3 100644
--- a/src/views/Orders/OrderList.vue
+++ b/src/views/Orders/OrderList.vue
@@ -145,9 +145,6 @@
         <el-form-item label="下单时间" style="width: 300px;">
           <el-input v-model="editForm.createTime" autocomplete="off"></el-input>
         </el-form-item>
-        <!--        <el-form-item label="更新时间" style="width: 300px;">-->
-        <!--          <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>-->
-        <!--        </el-form-item>-->
       </div>
     </el-form>
     <template #footer>
diff --git a/src/views/Orders/PendingServiceOrderList.vue b/src/views/Orders/PendingServiceOrderList.vue
index 641f184..68bac24 100644
--- a/src/views/Orders/PendingServiceOrderList.vue
+++ b/src/views/Orders/PendingServiceOrderList.vue
@@ -85,7 +85,7 @@
     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
       :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
       :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
-      :total="total" />
+      :total="totalPage" />
   </div>
   <!--  弹窗-->
   <el-dialog title="待处理订单详情信息" v-model="DialogVisible" width="60%">
@@ -158,7 +158,7 @@ import TimePicker from "@/layout/components/TimePicker.vue";
 import emitter from "@/utils/emitter";
 import { checkObjectProperties } from "@/layout/js/validUtils";
 const tableData: any = ref([]);  //表单展示数据
-const total = ref(0);
+const totalPage = ref(0);
 const title = ref('')
 const disabled = ref(true)
 const editForm: any = ref({});//编辑表单
@@ -174,11 +174,11 @@ const timeSlot = ref('')
 const searchParams: any = ref({ //封装分页
   current: 1, //当前页码
   pageSize: 5, //每页显示条数
-  sortField: "id",  //根据ID分类
+  // sortField: "id",  //根据ID分类
   sortOrder: "descend", //降序
-  goodId: goodId.value,
-  reservationDate: reservationDate.value,
-  timeSlot: timeSlot.value
+  // goodId: goodId.value,
+  // reservationDate: reservationDate.value,
+  // timeSlot: timeSlot.value
 })
 const loading = ref(false)
 onMounted(() => {
@@ -211,6 +211,7 @@ const getOrderList = async () => {
     const res = await myAxios.post('pending/list/advance/detail', { ...searchParams.value });
     if (res.data.code === 1) {
       tableData.value = res.data.data.records;
+      totalPage.value = parseInt(res.data.data.total);
       console.log(tableData.value)
       tableData.value.forEach((item: any) => {
         let total = 0;
diff --git a/src/views/OtherManagement/CourseCarouseCenter.vue b/src/views/OtherManagement/CourseCarouseCenter.vue
new file mode 100644
index 0000000..e97026f
--- /dev/null
+++ b/src/views/OtherManagement/CourseCarouseCenter.vue
@@ -0,0 +1,214 @@
+<template>
+  <div>
+    <div style="margin: 10px 0">
+      <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入图片名称" v-model="simpleList.name"></el-input>
+      <el-button class="ml-5" type="primary" @click="onSearch" style="height: 25px;">搜索</el-button>
+      <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
+    </div>
+    <div style="margin: 15px 0">
+      <el-popconfirm
+          confirm-button-text='确定'
+          cancel-button-text='取消'
+          icon="InfoFilled"
+          icon-color="red"
+          title="您确定批量删除这些数据吗？"
+          @confirm=""
+          width=180
+      >
+        <template #reference>
+          <el-button style="height: 25px"  type="danger" slot="reference">批量删除 <el-icon style="margin-left: 5px;"><Remove /></el-icon></el-button>
+        </template>
+      </el-popconfirm>
+    </div>
+    <el-table :data="simpleList" border stripe header-cell-class-name="headerBg" :cell-style="{textAlign: 'center'}"
+              @selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}">
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column prop="id" label="图片序号" width="50"></el-table-column>
+      <el-table-column prop="imgUrl" label="图片">
+        <template #default="scope"><img :src="scope.row.imgUrl" alt="" style="height: 50px;"></template>
+      </el-table-column>
+      <el-table-column prop="name" label="商品图片" ></el-table-column>
+      <el-table-column prop="tips" label="对应商品"></el-table-column>
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button type="success" @click="editCarouse(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
+          <el-popconfirm
+              confirm-button-text='确定'
+              cancel-button-text='取消'
+              icon="el-icon-info"
+              icon-color="red"
+              title="您确定删除吗？"
+              @confirm="deleteCarouse"
+          >
+            <template #reference>
+              <el-button type="danger">删除</el-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="padding: 10px 0">
+      <!-- 分页器 -->
+      <el-pagination
+          :current-page="searchParams.current"
+          :page-size="searchParams.pageSize"
+          :page-sizes="[2, 5, 10, 20]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :small="null"
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+      />
+    </div>
+  </div>
+  <!-- 编辑/详情表单 -->
+  <el-dialog v-model="DialogVisible" title="轮播图编辑">
+    <el-form label-width="100px" :disabled="disabled">
+      <el-form-item label="轮播图">
+        <el-upload
+            v-model:file-list="carouseImg"
+            ref="uploadImg"
+            action="#"
+            list-type="picture-card"
+            :auto-upload="false"
+            multiple="true"
+            :on-remove="removePic"
+            @change="(event: any) => handleChange(event)"
+            :on-exceed="Exceed_ProductImg"
+            limit="1" >
+          <el-icon>
+            <Plus/>
+          </el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="图片名称">
+        <el-input v-model="editForm.productImg" style="width: 200px;"></el-input>
+      </el-form-item>
+      <el-form-item label="对应商品" prop="price">
+        <el-select v-model="editForm.prdouctName" @change="(event: any) => loadForm(event)" style="width: 120px;">
+          <el-option v-for="item in goodList" :key="item" :label="item" :value="item"  />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer >
+      <span class="dialog-footer">
+        <el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
+        <el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { type UploadProps , type UploadUserFile , genFileId ,type UploadRawFile } from 'element-plus';
+import myAxios from '@/api/myAxios';
+import {ref, onMounted , inject} from 'vue'
+import { WarnInfo, SuccessInfo , ErrorInfo, CommInfo } from '@/utils/messageInfo';
+const simpleList : any = ref([
+  {
+    id: '1', //图片id
+    name: '样例1',  //图片名称
+    imgUrl: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgGwBQzmm-cxz.png',  //图片样例
+    grade: '等级1',  //图片级别
+    correspondingGoods: '非遗发簪'  //对应商品
+  },
+  {
+    id: '2',  //图片id
+    name: '样例2',  //图片名称
+    imgUrl: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgGwBQzmm-cxz.png',  //图片样例
+    grade: '等级2',  //图片级别
+    correspondingGoods: '非遗螺钿'  //对应商品
+  }
+])
+const goodList = ref([])  //商品名称
+const DialogVisible = ref(false);  //表单显示
+const disabled = ref(false)
+const editForm : any= ref({})
+const uploadImg : any = ref()  //图片上传的ref绑定
+const carouseImg: any = ref<UploadUserFile[]>([]) //给商品中心页面编辑商品使用
+const tableData = ref([])  //获取的所有数据
+const total = ref(0) //筛选条数
+const fileSimple = ref() //单个文件
+//请求参数
+const searchParams: any = ref({
+  //当前页码
+  current: 1,
+  //每页显示条数
+  pageSize: 5
+})
+//导入组件刷新
+const reload : any = inject("reload")
+onMounted(() => {
+})
+//重置按钮
+const reset =()=>{
+  reload()
+}
+const handleSelectionChange  = (val:any)=>{
+  console.log(val)
+}
+// 处理行数大小变化
+const handleSizeChange = (newSize:any) => {
+  searchParams.value.pageSize = newSize //新的页面条数
+  //重新发起请求
+};
+// 处理当前页变化
+const handleCurrentChange = (Current:any) => {
+  searchParams.value.current = Current //新的当前页面
+  //重新发起请求
+};
+//搜索按钮方法
+const onSearch = (data : String)=>{
+  searchParams.value.name = data
+  searchParams.value.current = 1
+  //重新发请求
+}
+const deleteCarouse = async (index: number,row: any) =>{  //删除单个轮播图
+  simpleList.value.splice(index,1)
+}
+const editCarouse = async (obj: any) =>{
+  carouseImg.value.splice(0,carouseImg.value.length)
+  carouseImg.value.push({   //编辑展示
+    url: obj.imgUrl
+  })
+  editForm.value = obj
+  DialogVisible.value = true
+}
+const saveEdit = ()=>{  //保存表单
+  DialogVisible.value = false
+}
+const removePic : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {    //uploadFile表示当前删除的图片，uploadFiles是还剩余的图片信息
+}
+//将 等级选项 赋值到表格里
+const loadForm = (value: any) => {
+  editForm.value.grade = value
+}
+const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片   'onExceed'当文件个数超过限制时，做出的判断
+  WarnInfo('请移除之前的再上传')
+}
+const handleChange = async (file: any ) => {
+  fileSimple.value = file
+  let formData = new FormData()  //这一步很重要 创建一个FormData对象
+  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
+  // const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
+  //     url: '/file/uploadFile',
+  //     method: 'post',
+  //     headers: {
+  //         'content-Type': 'multipart/form-data'
+  //     },
+  //     data: {
+  //         biz: "test",
+  //         // 取出formData对象中的file
+  //         file: formData.get("file")
+  //     }
+  // })
+}
+</script>
+
+
+<style scoped>
+.headerBg{
+  background-color: #eee !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OtherManagement/EntityCarouseCenter.vue b/src/views/OtherManagement/EntityCarouseCenter.vue
new file mode 100644
index 0000000..e97026f
--- /dev/null
+++ b/src/views/OtherManagement/EntityCarouseCenter.vue
@@ -0,0 +1,214 @@
+<template>
+  <div>
+    <div style="margin: 10px 0">
+      <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入图片名称" v-model="simpleList.name"></el-input>
+      <el-button class="ml-5" type="primary" @click="onSearch" style="height: 25px;">搜索</el-button>
+      <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
+    </div>
+    <div style="margin: 15px 0">
+      <el-popconfirm
+          confirm-button-text='确定'
+          cancel-button-text='取消'
+          icon="InfoFilled"
+          icon-color="red"
+          title="您确定批量删除这些数据吗？"
+          @confirm=""
+          width=180
+      >
+        <template #reference>
+          <el-button style="height: 25px"  type="danger" slot="reference">批量删除 <el-icon style="margin-left: 5px;"><Remove /></el-icon></el-button>
+        </template>
+      </el-popconfirm>
+    </div>
+    <el-table :data="simpleList" border stripe header-cell-class-name="headerBg" :cell-style="{textAlign: 'center'}"
+              @selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}">
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column prop="id" label="图片序号" width="50"></el-table-column>
+      <el-table-column prop="imgUrl" label="图片">
+        <template #default="scope"><img :src="scope.row.imgUrl" alt="" style="height: 50px;"></template>
+      </el-table-column>
+      <el-table-column prop="name" label="商品图片" ></el-table-column>
+      <el-table-column prop="tips" label="对应商品"></el-table-column>
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button type="success" @click="editCarouse(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
+          <el-popconfirm
+              confirm-button-text='确定'
+              cancel-button-text='取消'
+              icon="el-icon-info"
+              icon-color="red"
+              title="您确定删除吗？"
+              @confirm="deleteCarouse"
+          >
+            <template #reference>
+              <el-button type="danger">删除</el-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="padding: 10px 0">
+      <!-- 分页器 -->
+      <el-pagination
+          :current-page="searchParams.current"
+          :page-size="searchParams.pageSize"
+          :page-sizes="[2, 5, 10, 20]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :small="null"
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+      />
+    </div>
+  </div>
+  <!-- 编辑/详情表单 -->
+  <el-dialog v-model="DialogVisible" title="轮播图编辑">
+    <el-form label-width="100px" :disabled="disabled">
+      <el-form-item label="轮播图">
+        <el-upload
+            v-model:file-list="carouseImg"
+            ref="uploadImg"
+            action="#"
+            list-type="picture-card"
+            :auto-upload="false"
+            multiple="true"
+            :on-remove="removePic"
+            @change="(event: any) => handleChange(event)"
+            :on-exceed="Exceed_ProductImg"
+            limit="1" >
+          <el-icon>
+            <Plus/>
+          </el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="图片名称">
+        <el-input v-model="editForm.productImg" style="width: 200px;"></el-input>
+      </el-form-item>
+      <el-form-item label="对应商品" prop="price">
+        <el-select v-model="editForm.prdouctName" @change="(event: any) => loadForm(event)" style="width: 120px;">
+          <el-option v-for="item in goodList" :key="item" :label="item" :value="item"  />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer >
+      <span class="dialog-footer">
+        <el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
+        <el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { type UploadProps , type UploadUserFile , genFileId ,type UploadRawFile } from 'element-plus';
+import myAxios from '@/api/myAxios';
+import {ref, onMounted , inject} from 'vue'
+import { WarnInfo, SuccessInfo , ErrorInfo, CommInfo } from '@/utils/messageInfo';
+const simpleList : any = ref([
+  {
+    id: '1', //图片id
+    name: '样例1',  //图片名称
+    imgUrl: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgGwBQzmm-cxz.png',  //图片样例
+    grade: '等级1',  //图片级别
+    correspondingGoods: '非遗发簪'  //对应商品
+  },
+  {
+    id: '2',  //图片id
+    name: '样例2',  //图片名称
+    imgUrl: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FgGwBQzmm-cxz.png',  //图片样例
+    grade: '等级2',  //图片级别
+    correspondingGoods: '非遗螺钿'  //对应商品
+  }
+])
+const goodList = ref([])  //商品名称
+const DialogVisible = ref(false);  //表单显示
+const disabled = ref(false)
+const editForm : any= ref({})
+const uploadImg : any = ref()  //图片上传的ref绑定
+const carouseImg: any = ref<UploadUserFile[]>([]) //给商品中心页面编辑商品使用
+const tableData = ref([])  //获取的所有数据
+const total = ref(0) //筛选条数
+const fileSimple = ref() //单个文件
+//请求参数
+const searchParams: any = ref({
+  //当前页码
+  current: 1,
+  //每页显示条数
+  pageSize: 5
+})
+//导入组件刷新
+const reload : any = inject("reload")
+onMounted(() => {
+})
+//重置按钮
+const reset =()=>{
+  reload()
+}
+const handleSelectionChange  = (val:any)=>{
+  console.log(val)
+}
+// 处理行数大小变化
+const handleSizeChange = (newSize:any) => {
+  searchParams.value.pageSize = newSize //新的页面条数
+  //重新发起请求
+};
+// 处理当前页变化
+const handleCurrentChange = (Current:any) => {
+  searchParams.value.current = Current //新的当前页面
+  //重新发起请求
+};
+//搜索按钮方法
+const onSearch = (data : String)=>{
+  searchParams.value.name = data
+  searchParams.value.current = 1
+  //重新发请求
+}
+const deleteCarouse = async (index: number,row: any) =>{  //删除单个轮播图
+  simpleList.value.splice(index,1)
+}
+const editCarouse = async (obj: any) =>{
+  carouseImg.value.splice(0,carouseImg.value.length)
+  carouseImg.value.push({   //编辑展示
+    url: obj.imgUrl
+  })
+  editForm.value = obj
+  DialogVisible.value = true
+}
+const saveEdit = ()=>{  //保存表单
+  DialogVisible.value = false
+}
+const removePic : UploadProps['onRemove'] = (uploadFile, uploadFiles) => {    //uploadFile表示当前删除的图片，uploadFiles是还剩余的图片信息
+}
+//将 等级选项 赋值到表格里
+const loadForm = (value: any) => {
+  editForm.value.grade = value
+}
+const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片   'onExceed'当文件个数超过限制时，做出的判断
+  WarnInfo('请移除之前的再上传')
+}
+const handleChange = async (file: any ) => {
+  fileSimple.value = file
+  let formData = new FormData()  //这一步很重要 创建一个FormData对象
+  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
+  // const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
+  //     url: '/file/uploadFile',
+  //     method: 'post',
+  //     headers: {
+  //         'content-Type': 'multipart/form-data'
+  //     },
+  //     data: {
+  //         biz: "test",
+  //         // 取出formData对象中的file
+  //         file: formData.get("file")
+  //     }
+  // })
+}
+</script>
+
+
+<style scoped>
+.headerBg{
+  background-color: #eee !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OtherManagement/FestivalManagement.vue b/src/views/OtherManagement/FestivalManagement.vue
new file mode 100644
index 0000000..d4b62a3
--- /dev/null
+++ b/src/views/OtherManagement/FestivalManagement.vue
@@ -0,0 +1,215 @@
+<template>
+  <div style="margin-bottom: 10px;">
+    <el-button type="success" @click="showForm">添加类别</el-button>
+  </div>
+  <el-dialog v-model="dialogVisible" title="节日" width="500">
+    <el-form :model="festivalForm" label-width="auto" style="max-width: 600px" v-loading="loading">
+      <el-form-item label="添加节日缩略图">
+        <!-- 下面的event的作用,传入当前事件对象 -->
+        <el-upload
+            v-model:file-list="festivalImg"
+            action="#"
+            ref="uploadProductImg"
+            list-type="picture-card"
+            :auto-upload="false"
+            multiple="true"
+            :on-remove="handleRemove"
+            @change="(event: any) => handleChange(event)"
+            :on-exceed="Exceed_ProductImg"
+            limit="1">
+          <el-icon>
+            <Plus/>
+          </el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="节日名称">
+<!--        <el-input v-model="festivalForm.name" @input="changeInput"/>-->
+        <el-select v-model="form.festivalName" placeholder="请选择" >
+          <el-option v-for="item in festivalArr" :key="item" :label="item.name" :value="item.name" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer #default="{ row, $index }">
+      <div class="dialog-footer">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="addOrUpdateFestival" :disabled="submitable">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 数据展示层 -->
+  <el-table :data="tableData" border style="width: 100%;" :header-cell-style="{ 'text-align': 'center' }"
+            @selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center', 'font-size': '16px' }">
+    <el-table-column type="selection" width="55"></el-table-column>
+    <el-table-column prop="url" label="节日图片">
+      <!-- 插槽，拿到父组件的值typeUrl -->
+      <!-- scope 提供了关于当前行的信息 -->
+      <template #default="scope"><img :src="scope.row.url" alt="" style="height: 50px;"></template>
+    </el-table-column>
+    <el-table-column prop="name" label="节日名称"></el-table-column>
+    <el-table-column prop="operation" label="操作">
+      <template #default="scope">
+        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled"
+                       icon-color="red"
+                       title="是否确认删除" @confirm="DeleteFestival(scope.row.name)" width=180>
+          <template #reference>
+            <el-button style="height: 25px" class="ml-5" type="danger">删除节日</el-button>
+          </template>
+        </el-popconfirm>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import {ElMessage, type UploadProps, type UploadUserFile,type UploadFile, genFileId, type UploadRawFile} from 'element-plus';
+import {ErrorInfo, SuccessInfo, WarnInfo} from '@/utils/messageInfo';
+import {onMounted, ref} from 'vue'
+import myAxios from '@/api/myAxios';
+import {form} from "@/utils/entityProduct/picUpload";
+
+const fileSimple = ref()  //单个文件
+const selectedItems = ref([])
+const dialogVisible = ref(false)
+const submitable = ref(true)  //提交按钮禁用状态
+const loading = ref(false)  //加载
+const festivalImg: any = ref<UploadUserFile[]>([])  //商品类别图片
+const uploadProductImg: any = ref()  //图片上传的ref绑定
+//表单数据
+const festivalForm = ref({
+  id: 0,
+  name: '',
+  url: '',
+})
+//表格数据
+const tableData = ref([])
+//旗帜 表示点击添加类别(0)  和  点击修改类别两个状态(1)，因为我们共用一个表格
+const flag = ref(0)
+const tempImgUrl = ref('')  //暂存图片URL
+const festivalArr : any = ref([])   //节日数组
+
+//老套路 页面加载必须获取类别列表
+onMounted(() => {
+  getFestivalList()
+})
+
+//获取类别列表
+const getFestivalList = async () => {
+  const res = await myAxios.get('/festival/get')
+  if (res.data.code === 1) {
+    tableData.value = res.data.data
+  } else {
+    ElMessage.error('获取类别列表失败，请检查服务')
+  }
+}
+//上传图片，一张图片，不需要flag值
+const handleChange = async (file: any) => {
+  fileSimple.value = file
+  loading.value = true
+  let formData = new FormData()  //这一步很重要 创建一个FormData对象
+  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
+  const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
+    url: '/file/uploadFile',
+    method: 'post',
+    headers: {
+      'content-Type': 'multipart/form-data'
+    },
+    data: {
+      biz: "test",
+      file: formData.get("file")  // 取出formData对象中的file
+    }
+  })
+  if (res.data.code === 1) {
+    loading.value = false
+    SuccessInfo('上传成功')
+    submitable.value = false
+    tempImgUrl.value = res.data.data
+  } else {
+    ErrorInfo(res.data.message)
+  }
+}
+//上传图片移除
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
+  // typeForm.value.typeUrl = ''
+  festivalImg.value.splice(0, festivalImg.value.length)  //移除展示即可
+  submitable.value = true  //再禁止上传
+}
+//图片上限警告
+const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片   'onExceed'当文件个数超过限制时，做出的判断
+  uploadProductImg.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+  file.uid = genFileId()
+  uploadProductImg.value!.handleStart(file)
+}
+//新增节日
+const showForm = async () => {
+  resetForm()
+  tempImgUrl.value = ''
+  festivalImg.value.splice(0, festivalImg.value.length)
+  dialogVisible.value = true;
+  flag.value = 0
+}
+//取消
+const cancel = () => {
+  dialogVisible.value = false
+  resetForm()
+}
+//新增类别
+const addOrUpdateFestival = async () => {
+  //判空
+  // if (festivalForm.value.name?.indexOf(' ') !== -1 ||
+  //     festivalForm.value.name == '' || tempImgUrl.value == '') {
+  //   ElMessage({
+  //     type: 'warning',
+  //     message: '不能为空格/空字符串'
+  //   })
+  //   return
+  // }
+  //取消展示表单
+  dialogVisible.value = false;
+  console.log('添加的类别--->',festivalForm.value)
+  const res = await myAxios.post('/festival/add', {
+    name: festivalForm.value.name,
+    url: '12321234123453124',
+    //对齐后端请求体
+  })
+  if (res.data.code === 1) {
+    //提交成功后，之间重置表格
+    SuccessInfo('添加类别成功')
+    resetForm()
+  } else {
+    ElMessage.error('提交失败')
+  }
+
+  await getFestivalList()
+}
+//重置表单
+const resetForm = () => {
+  festivalForm.value = {
+    id: 0,
+    name: '',
+    url: ''
+  }
+};
+const handleSelectionChange = (row: any) => {
+  selectedItems.value = JSON.parse(JSON.stringify(row))
+}
+//删除节日  请求体里只传id即可
+const DeleteFestival = async (name : string) => {
+  const res = await myAxios.get('/festival/delete', {params:{ festivalName: name}})
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功',
+    })
+  }
+  getFestivalList()
+}
+const changeInput = () => {  //当输入栏变化时解除禁用提交按钮
+  submitable.value = false
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/ServiceType/AddServiceProduct.vue b/src/views/ServiceType/AddServiceProduct.vue
index bb1807f..8b17e34 100644
--- a/src/views/ServiceType/AddServiceProduct.vue
+++ b/src/views/ServiceType/AddServiceProduct.vue
@@ -1,55 +1,37 @@
 <template>
-  <div class="totalBox">
-    <div class="fromBox">
+  <div class="flexCard">
+      <el-card class="richTextPreview" shadow="never">
+        <div class="titleText">移动端预览</div>
+        <p v-html="form.richText"></p>
+      </el-card>
       <!-- 表单 ref 和 prop绑定  用于重置表单 -->
-      <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px;" size="large">
-        <div class="totalPicture">
-          <div>
-            <el-form-item label="添加课程展示图片">
-              <!-- 下面的event的作用,传入当前事件对象 -->
-              <el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
-                :on-remove="handleRemove" @change="(event: any) => handleChange(event, 0)"
-                :on-exceed="Exceed_ProductImg" limit="1">
-                <el-icon>
-                  <Plus />
-                </el-icon>
-              </el-upload>
-            </el-form-item>
-          </div>
-          <!--  添加图文描述-->
-          <div>
-            <el-form-item label="添加课程展示图">
-              <el-upload ref="uploadProductDetail" action="#" list-type="picture-card" :auto-upload="false"
-                multiple="true" :on-change="(event: any) => handleChange(event, 1)" :on-exceed="Exceed_ProductDetail"
-                limit="1" :on-remove="handleRemove">
-                <el-icon>
-                  <Plus />
-                </el-icon>
-              </el-upload>
-            </el-form-item>
-          </div>
-        </div>
-        <div class="NamePrice">
-          <div class="name">
-            <el-form-item label="体验课名称" prop="name">
-              <el-input v-model="form.name" />
-            </el-form-item>
-          </div>
-          <div class="price">
-            <el-form-item label="产品价格" prop="price">
-              <el-input-number v-model="form.price" min="0" :precision="2" :step="0.5" />
-              <p>元</p>
-            </el-form-item>
-          </div>
-        </div>
+      <el-card class="form-FormContainer" shadow="never">
+      <el-form ref="resetFormData" :model="form" label-width="auto" size="large">
+        <el-form-item label="添加课程展示图片">
+          <!-- 下面的event的作用,传入当前事件对象 -->
+          <el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
+                     :on-remove="handleRemove" @change="(event: any) => handleChange(event, 0)"
+                     :on-exceed="Exceed_ProductImg" limit="1">
+            <el-icon>
+              <Plus />
+            </el-icon>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="体验课名称" prop="name" style="width:  250px">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="产品价格" prop="price">
+          <el-input-number v-model="form.price" min="0" :precision="2" :step="0.5" />
+          <p>元</p>
+        </el-form-item>
         <el-form-item label="课程简介" prop="intro">
-          <el-input v-model="form.intro" type="textarea" style="width: 500px;" />
+          <el-input v-model="form.intro" type="textarea" style="width: 250px;" />
         </el-form-item>
         <el-form-item label="商品标签" prop="label">
-          <el-input v-model="form.label" type="textarea" placeholder="使用英文;分隔符分开" style="width: 500px;" />
+          <el-input v-model="form.label" type="textarea" placeholder="使用英文;分隔符分开" style="width: 250px;" />
         </el-form-item>
-        <el-form-item label="商品详细描述" prop="introDetail">
-          <el-input v-model="form.introDetail" type="textarea" placeholder="产品尺寸，服务等" style="width: 500px;" />
+        <el-form-item>
+          <richTextUtil @richTextContent="getInfo"></richTextUtil>
         </el-form-item>
         <div class="totalButton">
           <el-form-item>
@@ -60,13 +42,12 @@
           </el-form-item>
         </div>
       </el-form>
-    </div>
-    <div>
-      <!-- <appointTime @time-Info="getInfo"></appointTime> -->
+      </el-card>
+    <el-card class="form-RichTextContainer" shadow="never">
       <calendarUtil @calendar-info="getInfo"></calendarUtil>
-    </div>
+    </el-card>
+
   </div>
-  
 </template>
 
 <script setup lang="ts">
@@ -75,24 +56,22 @@ import { Plus } from '@element-plus/icons-vue';
 import { ElMessage, type UploadFile, type UploadProps, genFileId, type UploadRawFile } from 'element-plus';
 import myAxios from "@/api/myAxios";
 import calendarUtil from '@/layout/components/calendarUtil.vue';
+import richTextUtil from '@/layout/components/richTextUtil.vue';
+
 const fileSimple = ref() //单个文件
-const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
-const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
 const resetFormData = ref()
 const form = ref({
   name: '',
   price: '',  //商品价格
   intro: '',//产品简介
   label: '',//商品标签
-  introDetail: '',//详情描述
   goodImg: '',  //商品图片url
-  detailImg: '',  //图文详情url
+  richText: '',
   appointmentDateAddRequestList: []  //预约时间段，是否可预约，人数范围
 })
 //导入组件刷新
 const reload: any = inject("reload")
 const uploadProductImg: any = ref()  //图片上传的ref绑定
-const uploadProductDetail: any = ref()  //图片上传的ref绑定
 onMounted(() => {
   // console.log(myDate.getHours());   //打印当前小时数
 })
@@ -100,7 +79,7 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   console.log(uploadFile, uploadFiles)
 }
 //提交表单
-const onSubmit = async () => {  
+const onSubmit = async () => {
   const values = Object.values(form.value);
   // 使用some()方法来检查是否有任何值为空
   console.log(form.value.appointmentDateAddRequestList)
@@ -112,13 +91,12 @@ const onSubmit = async () => {
     return;  //空返回结束函数
   }
   console.log(form.value);
-  const res = await myAxios.post('/goods/add/service', { 
+  const res = await myAxios.post('/goods/add/service', {
     name: form.value.name,
     price: form.value.price,
     goodImg: form.value.goodImg,
     intro: form.value.intro,
-    introDetail: form.value.introDetail,
-    detailImg: form.value.detailImg,
+    richTetx: form.value.richText,
     label: form.value.label,
     appointmentDateAddRequestList: toRaw(form.value.appointmentDateAddRequestList)
   })
@@ -140,7 +118,7 @@ const handleChange = async (file: any, flag: number) => {
   let formData = new FormData()  //这一步很重要 创建一个FormData对象
   formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
   const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-    url: '/file/upload/server/not_login',
+    url: '/file/uploadFile',
     method: 'post',
     headers: {
       'content-Type': 'multipart/form-data'
@@ -153,7 +131,7 @@ const handleChange = async (file: any, flag: number) => {
   })
   if (res.data.code === 1) {
     //三元运算   当flag为0时，赋值给商品图片  flag为1时，赋值给详情图片
-    flag ? form.value.detailImg = res.data.data : form.value.goodImg = res.data.data
+    form.value.goodImg = res.data.data
   }
 }
 //清除表单
@@ -166,35 +144,34 @@ const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品
   file.uid = genFileId()
   uploadProductImg.value!.handleStart(file)
 }
-const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商品详情图片
-  uploadProductDetail.value!.clearFiles()
-  const file = files[0] as UploadRawFile
-  file.uid = genFileId()
-  uploadProductDetail.value!.handleStart(file)
-}
 const getInfo =(info:any)=>{
   console.log('info-->',info);
-  // timeInfo.value = info
-  form.value.appointmentDateAddRequestList = info
+  form.value.richText = info
 }
 </script>
 
 <style scoped>
-.totalBox {
-  display: flex;
+
+.form-FormContainer {
+  width: 450px;
+  /* margin: 0 auto; */
 }
 
-.fromBox {
-  width: 700px;
-  height: 750px;
+.form-RichTextContainer {
+  width: 550px;
 }
 
-.totalPicture {
+.flexCard {
   display: flex;
+  height: 100%;
 }
 
-.NamePrice {
-  display: flex;
+.richTextPreview {
+  height: 80vh;
+  overflow-y: auto;
+  word-break: break-all;
+  width: 400px;
+  margin-right: 10px;
 }
 
 .totalButton {
@@ -202,32 +179,5 @@ const getInfo =(info:any)=>{
   justify-content: space-evenly;
   /*  盒子里面水平分隔开 */
 }
-.midBox {
-  display: flex;
-}
-.date-picker {
-  flex: 0.3;
-  /* 日期选择区域占据左边 */
-  display: inline-block;
-  margin-bottom: 10px;
-}
-
-.father {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  border: 1px solid red;
-}
-
-.box {
-  margin-bottom: 20px;
-  /* 每个日期或时间段之间的间距 */
-  border: 1px solid yellow;
-}
-
-.inner {
-  margin-bottom: 10px;
-  border: 1px solid orange;
-}
 
 </style>
\ No newline at end of file
diff --git a/src/views/ServiceType/ProductCenter.vue b/src/views/ServiceType/ProductCenter.vue
index 4ebf193..279b13b 100644
--- a/src/views/ServiceType/ProductCenter.vue
+++ b/src/views/ServiceType/ProductCenter.vue
@@ -232,7 +232,9 @@ import {ref, onMounted, inject, toRaw} from 'vue';
 import myAxios from "@/api/myAxios";
 import calendarUtil from '@/layout/components/calendarUtil.vue';
 import emitter from "@/utils/emitter";
-import {form} from "@/utils/entityProduct/picUpload";
+import { useRouter } from "vue-router";
+
+const router = useRouter();  //路由
 const total = ref(0); //总页数
 const idList = ref<Number[]>([]);  //用于批量删除
 const searchParams: any = ref({ //封装分页
@@ -347,9 +349,15 @@ const deleteProduct = async (index: number) => {
 }
 //详情或编辑 
 const ReviseOrView = (index: number, row: any , flag : number) => {
+  router.push({
+    name: '课程详情',
+    params: {
+      id: row.id,
+      flag: flag
+    }
+  })
   //flag值不同显示不同内容  disabled开启和关闭
   flag ?  (title.value = "编辑商品" , disabled.value = false) : (title.value = "商品详情" , disabled.value = true)
-  DialogVisible.value = true;
   editForm.value = JSON.parse(JSON.stringify(row));
 };
 //下架商品(待优化，有问题，逻辑有问题)
@@ -400,7 +408,7 @@ const handleChange = async (file: any, flag: number) => {
   let formData = new FormData()  //这一步很重要 创建一个FormData对象
   formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
   const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-    url: '/file/upload/server/not_login',
+    url: '/file/uploadFile',
     method: 'post',
     headers: {
       'content-Type': 'multipart/form-data'
@@ -413,6 +421,7 @@ const handleChange = async (file: any, flag: number) => {
   if (res.data.code === 1) {
     //三元运算   当flag为0时，赋值给商品图片  flag为1时，赋值给详情图片
     flag ? editForm.value.detailImg = res.data.data : editForm.value.goodImg = res.data.data
+    console.log('res--->',res.data.data)
   }
 }
 const onSearch = (data : String)=>{ //搜索按钮方法
diff --git a/src/views/ServiceType/ServiceProductDetail.vue b/src/views/ServiceType/ServiceProductDetail.vue
new file mode 100644
index 0000000..9f2f9fd
--- /dev/null
+++ b/src/views/ServiceType/ServiceProductDetail.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="flexCard">
+    <el-card class="richTextPreview" shadow="never">
+      <div class="titleText">移动端预览</div>
+      <p v-html="detailFrom.richText"></p>
+    </el-card>
+    <!-- 表单 ref 和 prop绑定  用于重置表单 -->
+    <el-card class="form-container" shadow="never">
+      <div class="form">
+        <el-form ref="resetFormData" :model="detailFrom" label-width="auto" size="large" :rules="rules" :disabled="true">
+          <div>
+            <el-form-item label="添加商品图片">
+              <!-- 下面的event的作用,传入当前事件对象 -->
+              <el-upload v-model:file-list="ImgArr" ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
+                         :on-remove="handleRemove" @change="(event: any) => handleChange(event, 2)" :on-exceed="Exceed_ProductImg"
+                         limit="7">
+                <el-icon>
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </el-form-item>
+          </div>
+          <div class="NamePrice">
+            <el-form-item label="课程名称" prop="name">
+              <el-input v-model="detailFrom.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
+            </el-form-item>
+            <el-form-item label="单次价格" prop="price">
+              <el-input-number v-model="detailFrom.price" min="0" :precision="2" :step="0.5" />
+              <p>元</p>
+            </el-form-item>
+          </div>
+          <div class="IntroInven">
+            <el-form-item label="课程简介" prop="intro">
+              <el-input v-model="detailFrom.intro" type="textarea" placeholder="产品尺寸，服务等" maxlength="30" show-word-limit
+                        style="width: 300px;" />
+            </el-form-item>
+          </div>
+          <el-form-item label="课程详情图" prop="richText">
+            <richTextUtil @richTextContent="getInfo" v-model:disableRich="disabledRichText"/>
+          </el-form-item>
+          <div class="btnBox">
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit" :disabled="saveBtn">更新</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="resetForm">重置</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, inject, reactive , onBeforeMount} from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+import {type FormRules, type UploadUserFile} from 'element-plus';
+import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';   //封装ElMessage提示
+import myAxios from "@/api/myAxios";
+import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';
+import { validateName, validateIntro, validateDetail } from '@/utils/entityProduct/FormRules';
+import { handleChange, handleRemove, form, Exceed_ProductImg } from '@/utils/entityProduct/picUpload';
+import richTextUtil from '@/layout/components/richTextUtil.vue';
+import { useRoute } from "vue-router";
+
+const route = useRoute();  //路由
+const resetFormData = ref()
+const reload: any = inject("reload")  //导入组件刷新
+const uploadProductImg: any = ref()  //图片上传的ref绑定
+const ImgArr: any = ref<UploadUserFile[]>([])
+const detailFrom : any = ref({
+  name: '',   //商品名称
+  price: '',  //商品价格
+  intro: '',//产品简介
+  festivalName: '', //节日名称
+  type: '',//类别
+  label: '',//商品标签
+  goodImg: '',  //商品图片url
+  inventory: '', //库存
+  richText: ''
+})
+
+const disabledRichText:any = ref(false);
+
+onBeforeMount(()=>{
+  if(route.params.flag === '0'){
+    disabledRichText.value = true;
+  }
+})
+
+onMounted(() => {
+  getServiceInfo()   //编辑页查询商品信息
+  // console.log('id---->',route.params.id)
+  // console.log('flag---->',route.params.flag)
+})
+const getServiceInfo = async () => {
+  const res = await myAxios.post("/goods/service/list/id",{ id: route.params.id })
+  console.log('res--->',res.data)
+  if(res.data.code == 1){
+    detailFrom.value = res.data.data
+    ImgArr.value.splice(0,ImgArr.value.length)
+    var tempArr = res.data.data.goodImg.split(';')
+    tempArr.forEach((item: any) => {
+      ImgArr.value.push({
+        url: item
+      })
+    })
+  } else {
+    WarnInfo('信息获取失败')
+  }
+}
+
+//提交表单
+const onSubmit = async () => {
+  const values = Object.values(detailFrom.value );
+  // 使用some()方法来检查是否有任何值为空
+  if (values.some((value: any) => value === null || value === undefined || value === '' || value === 0)) {
+    WarnInfo('请检查表单数据是否完整填写')
+    return;  //空返回结束函数
+  }
+  const res = await myAxios.post('/goods/add', { ...detailFrom.value })
+  // console.log(res.data);
+  if (res.data.code === 1) {
+    SuccessInfo('提交成功')
+    detailFrom.value = {}  //12.18改
+    reload() //上传完后重置表单
+  } else {
+    WarnInfo('服务错误')
+    return;
+  }
+}
+
+//清除表单
+const resetForm = () => {
+  resetFormData.value.resetFields()
+}
+const rules = reactive<FormRules<typeof form>>({  //表单校验规则
+  name: [{ validator: validateName, trigger: 'blur' }],
+  intro: [{ validator: validateIntro, trigger: 'blur' }],
+  introDetail: [{ validator: validateDetail, trigger: 'blur' }]
+})
+
+const getInfo = (info: any) => {  //富文本赋值
+  console.log('info', info)
+  detailFrom.value.richText = info
+}
+</script>
+
+<style scoped>
+.flexCard {
+  display: flex;
+  height: 100%;
+}
+
+.richTextPreview {
+  height: 80vh;
+  overflow-y: auto;
+  word-break: break-all;
+  width: 400px;
+  margin-right: 10px;
+}
+
+.form-container {
+  width: 700px;
+  /* margin: 0 auto; */
+}
+.form {
+  /* width: 500px; */
+  margin: 0 auto;
+}
+
+.NamePrice {
+  display: flex;
+}
+
+.IntroInven {
+  display: flex;
+}
+
+.festivalBox {
+  display: flex;
+}
+
+.btnBox {
+  display: flex;
+  justify-content: space-around;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/User/PersonalCenter.vue b/src/views/User/PersonalCenter.vue
index c7642e1..c426bb1 100644
--- a/src/views/User/PersonalCenter.vue
+++ b/src/views/User/PersonalCenter.vue
@@ -81,7 +81,7 @@ const handleChange = async (file: any) => {
   let formData = new FormData()  //这一步很重要 创建一个FormData对象
   formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
   const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-    url: '/file/upload/server/not_login',
+    url: '/file/uploadFile',
     method: 'post',
     headers: {
       'content-Type': 'multipart/form-data'
diff --git a/src/views/User/Upload.vue b/src/views/User/Upload.vue
index b88f0d3..8d2971b 100644
--- a/src/views/User/Upload.vue
+++ b/src/views/User/Upload.vue
@@ -32,7 +32,7 @@ const handleChange = async (file: any, flag: number) => {
   let formData = new FormData()  //这一步很重要 创建一个FormData对象
   formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
   const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-    url: '/file/upload/server/not_login',
+    url: '/file/uploadFile',
     method: 'post',
     headers: {
       'content-Type': 'multipart/form-data'
diff --git a/src/views/User/UserManagement.vue b/src/views/User/UserManagement.vue
index eee5793..52e5d98 100644
--- a/src/views/User/UserManagement.vue
+++ b/src/views/User/UserManagement.vue
@@ -117,7 +117,7 @@ const handleChange = async (file: any) => {
   let formData = new FormData()  //这一步很重要 创建一个FormData对象
   formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
   const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
-    url: '/file/upload/server/not_login',
+    url: '/file/uploadFile',
     method: 'post',
     headers: {
       'content-Type': 'multipart/form-data'
diff --git a/src/views/test.vue b/src/views/test.vue
index 540c4c5..55cebb8 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,28 +1,128 @@
 <template>
-  <el-scrollbar height="100px">
-      <H2 v-for="item in 1" :key="item" class="scrollbar-demo-item">
-          Scrollbar 滚动条内容{{ item }}:<br /><br />
-          逆境清醒：<br />
-          阳光总在风雨后，<br />
-          历练中完成自我升华!<br />
-          共勉！<br />
-      </H2>
-  </el-scrollbar>
+  <el-container class="layout-container-demo" style="height: 500px">
+    <el-aside width="200px">
+      <el-scrollbar>
+        <el-menu :default-openeds="['1', '3']">
+          <el-sub-menu index="1">
+            <template #title>
+              <el-icon><message /></el-icon>Navigator One
+            </template>
+            <el-menu-item-group>
+              <template #title>Group 1</template>
+              <el-menu-item index="1-1">Option 1</el-menu-item>
+              <el-menu-item index="1-2">Option 2</el-menu-item>
+            </el-menu-item-group>
+            <el-menu-item-group title="Group 2">
+              <el-menu-item index="1-3">Option 3</el-menu-item>
+            </el-menu-item-group>
+            <el-sub-menu index="1-4">
+              <template #title>Option4</template>
+              <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
+            </el-sub-menu>
+          </el-sub-menu>
+          <el-sub-menu index="2">
+            <template #title>
+              <el-icon><icon-menu /></el-icon>Navigator Two
+            </template>
+            <el-menu-item-group>
+              <template #title>Group 1</template>
+              <el-menu-item index="2-1">Option 1</el-menu-item>
+              <el-menu-item index="2-2">Option 2</el-menu-item>
+            </el-menu-item-group>
+            <el-menu-item-group title="Group 2">
+              <el-menu-item index="2-3">Option 3</el-menu-item>
+            </el-menu-item-group>
+            <el-sub-menu index="2-4">
+              <template #title>Option 4</template>
+              <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
+            </el-sub-menu>
+          </el-sub-menu>
+          <el-sub-menu index="3">
+            <template #title>
+              <el-icon><setting /></el-icon>Navigator Three
+            </template>
+            <el-menu-item-group>
+              <template #title>Group 1</template>
+              <el-menu-item index="3-1">Option 1</el-menu-item>
+              <el-menu-item index="3-2">Option 2</el-menu-item>
+            </el-menu-item-group>
+            <el-menu-item-group title="Group 2">
+              <el-menu-item index="3-3">Option 3</el-menu-item>
+            </el-menu-item-group>
+            <el-sub-menu index="3-4">
+              <template #title>Option 4</template>
+              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
+            </el-sub-menu>
+          </el-sub-menu>
+        </el-menu>
+      </el-scrollbar>
+    </el-aside>
+
+    <el-container>
+      <el-header style="text-align: right; font-size: 12px">
+        <div class="toolbar">
+          <el-dropdown>
+            <el-icon style="margin-right: 8px; margin-top: 1px">
+              <setting />
+            </el-icon>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>View</el-dropdown-item>
+                <el-dropdown-item>Add</el-dropdown-item>
+                <el-dropdown-item>Delete</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <span>Tom</span>
+        </div>
+      </el-header>
+
+      <el-main>
+        <el-scrollbar>
+          <el-table :data="tableData">
+            <el-table-column prop="date" label="Date" width="140" />
+            <el-table-column prop="name" label="Name" width="120" />
+            <el-table-column prop="address" label="Address" />
+          </el-table>
+        </el-scrollbar>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
 
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
+
+const item = {
+  date: '2016-05-02',
+  name: 'Tom',
+  address: 'No. 189, Grove St, Los Angeles',
+}
+const tableData = ref(Array.from({ length: 20 }).fill(item))
+</script>
+
 <style scoped>
-  .scrollbar-demo-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 400px;
-      margin: 10px;
-      padding:30px;
-      width:300px;
-      text-align: left;
-      border-radius: 4px;
-      background: var(--el-color-primary-light-9);
-      color: var(--el-color-primary);
-      border:5px solid #0094ff;
-  }
+.layout-container-demo .el-header {
+  position: relative;
+  background-color: var(--el-color-primary-light-7);
+  color: var(--el-text-color-primary);
+}
+.layout-container-demo .el-aside {
+  color: var(--el-text-color-primary);
+  background: var(--el-color-primary-light-8);
+}
+.layout-container-demo .el-menu {
+  border-right: none;
+}
+.layout-container-demo .el-main {
+  padding: 0;
+}
+.layout-container-demo .toolbar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  right: 20px;
+}
 </style>
\ No newline at end of file