更新了element-plus版本

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.6.2",
-        "element-plus": "^2.4.2",
+        "element-plus": "^2.5.3",
         "vue": "^3.3.8",
         "vue-router": "^4.2.5"
       },
@@ -48,9 +48,9 @@
       }
     },
     "node_modules/@element-plus/icons-vue": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
-      "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "peerDependencies": {
         "vue": "^3.2.0"
       }
@@ -1078,12 +1078,12 @@
       }
     },
     "node_modules/element-plus": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.2.tgz",
-      "integrity": "sha512-E/HwXX7JF1LPvQSjs0fZ8WblIoc0quoXsRXQZiL7QDq7xJdNGSUaXtdk7xiEv7axPmLfEFtxE5du9fFspDrmJw==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.5.3.tgz",
+      "integrity": "sha512-wmtstxaMkD6UinIgD+45CjrhbRh4u0vt+/GgxfPeMLt5pDpIVwZFjkUaVcWqqxcxd5a80HP3XlDF74fW7wim9A==",
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",
-        "@element-plus/icons-vue": "^2.0.6",
+        "@element-plus/icons-vue": "^2.3.1",
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
         "@types/lodash": "^4.14.182",

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.6.2",
-    "element-plus": "^2.4.2",
+    "element-plus": "^2.5.3",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },

src/components/Header.vue

@@ -62,14 +62,20 @@ const currentIdentity = sessionStorage.getItem('role')
         </router-link>
       </el-col>
 
-      <el-col :span="1" class="header-icon">
-        <router-link to="/customer/allOrder" v-slot="{navigate}" v-if="currentIdentity === 'CUSTOMER'">
+      <el-col :span="1" class="header-icon" v-if="currentIdentity === 'CUSTOMER'">
+        <router-link to="/customer/allOrder" v-slot="{navigate}">
           <el-icon @click="navigate" :size="35" color="white" ><Document /></el-icon>
         </router-link>
       </el-col>
 
-      <el-col :span="1" class="header-icon">
-        <router-link to="/customer/coupon" v-slot="{navigate}">
+      <el-col :span="1" class="header-icon" v-if="currentIdentity === 'CUSTOMER'">
+        <router-link to="/customer/coupon" v-slot="{navigate}" >
+          <el-icon @click="navigate" :size="35" color="white" ><Discount /></el-icon>
+        </router-link>
+      </el-col>
+
+      <el-col :span="1" class="header-icon" v-if="currentIdentity === 'STAFF'">
+        <router-link to="/staff/coupon" v-slot="{navigate}" >
           <el-icon @click="navigate" :size="35" color="white" ><Discount /></el-icon>
         </router-link>
       </el-col>

src/router/index.ts

@@ -50,11 +50,19 @@ const router = createRouter({
                 path: '/customer/coupon/',
                 name: 'manageCoupon',
                 component: () => import('../views/customer/ManageCoupon.vue'),
+                meta: {
+                    title: '商品详情',
+                    permission: ['CUSTOMER']
+                }
             },
             {
                 path: '/staff/coupon/',
                 name: 'releaseCoupon',
                 component: () => import('../views/staff/AllCoupon.vue'),
+                meta: {
+                    title: '商品详情',
+                    permission: ['STAFF', 'MANAGER']
+                }
             },
             {
                 path: '/productDetail/:productId',
@@ -103,7 +111,7 @@ const router = createRouter({
         }]
 })
 
-router.beforeEach((to, from, next) => {
+router.beforeEach((to, _, next) => {
     const token:string|null = sessionStorage.getItem('token');
     const role:string|null = sessionStorage.getItem('role')
 

src/views/common/ProductItem.vue

@@ -37,7 +37,7 @@ function getProductDetail() {
 </script>
 
 <template>
-  <el-card class="product-item-card" >
+  <el-card class="product-item-card" shadow="hover">
     <el-row style="font-size: 20px">
       {{ name }}
     </el-row>
@@ -67,13 +67,16 @@ function getProductDetail() {
     <el-row style="font-size: 10px">
       库存: {{ stock }}
     </el-row>
+
   </el-card>
 </template>
 
 <style scoped>
 .product-item-card {
-  margin-bottom: 10px;
-  width:30%;
+  width: 30%;
+  height: 30%;
   border-radius: 8px;
+  margin-bottom: 20px;
+  margin-right: auto;
 }
 </style>

src/views/common/StoreItem.vue

@@ -67,7 +67,7 @@ function getStoreDetail() {
   margin: 20px;
   border-radius: 8px;
   min-width: 25%;
-  max-width: 25%;
+  max-width: 30px;
 }
 
 .logo-image {

src/views/portal/AllStore.vue

@@ -37,5 +37,6 @@ function toStoreDetailPage(storeId: Number) {
   padding: 2px;
   flex-flow: wrap;
   justify-content: center;
+  align-content: start;
 }
 </style>

src/views/portal/StoreDetail.vue

@@ -46,48 +46,84 @@ function toProductDetailPage(productId) {
 </script>
 
 <template>
-  <div>
-    <div class="store-detail-main">
-      <el-image class="logo-image" :src="logoUrl"/>
-      <el-row style="font-size: 20px">
-        {{ name }}
-      </el-row>
-      <el-row style="font-size: 10px">
-        评分人数: {{ number }}
-      </el-row>
-      <el-row style="font-size: 10px">
-        评分: {{ rating }}
-      </el-row>
-      <el-row style="font-size: 10px">
-        地址: {{ location }}
-      </el-row>
-      <el-button class="create-product-button" type="primary" plain
-                 @click="toCreateProduct()">新增商品
-      </el-button>
-    </div>
-    <div class="all-product-main">
+  <el-container>
+    <el-aside width="25%" class="page-aside">
+      <div class="store-detail-main">
+
+        <el-button class="create-product-button" type="primary" plain>
+          返回
+        </el-button>
+
+        <el-image class="logo-image" :src="logoUrl"/>
+
+        <span style="font-size: 30px">
+          {{ name }}
+        </span>
+
+
+        <el-descriptions :column="1">
+          <el-descriptions-item style="font-size: 10px" label="评分人数">
+            {{ number }}
+          </el-descriptions-item>
+          <el-descriptions-item style="font-size: 10px" label="评分">
+            <el-rate
+                v-model="rating"
+                disabled
+                show-score
+                text-color="#ff9900"
+                score-template="{value} 分"
+                size="small"
+            />
+          </el-descriptions-item>
+          <el-descriptions-item style="font-size: 10px" label="地址">
+            {{ location }}
+          </el-descriptions-item>
+        </el-descriptions>
+
+
+        <el-button class="create-product-button" type="primary" plain
+                   @click="toCreateProduct()">新增商品
+        </el-button>
+
+      </div>
+    </el-aside>
+
+    <el-main class="all-product-main">
       <productItem class="product-item-list"
                    v-for="productVO in productList" :productId="productVO.id"
                    @click="toProductDetailPage(productVO.id)" />
-    </div>
-  </div>
+    </el-main>
+  </el-container>
+
 </template>
 
 <style scoped>
+.page-aside {
+  border-right: lightgrey solid 1px;
+}
+
 .store-detail-main {
-  margin-left: 50px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
 }
 
 .logo-image {
-  width: 30%;
+  width: 100%;
 }
 
 .create-product-button {
   margin-top: 20px;
 }
 
-.product-item-list {
-  margin-top: 20px;
-  margin-left: 50px;
+.all-product-main {
+  display: flex;
+  flex-direction: row;
+  padding: 20px;
+  flex-flow: wrap;
+  align-content: start;
+  justify-content: start;
 }
 </style>