feat: 会员等级设置模块页面样式

src/router/full-routers.js

@@ -370,6 +370,20 @@ export default {
         }
       ]
     },
+    {
+      menuId: getUUID(),
+      parentId: 0,
+      parentName: null,
+      name: "等级明细",
+      url: "marketing-level/detail",
+      perms: "",
+      type: 1,
+      elIcon: "el-icon-user",
+      orderNum: 0,
+      open: null,
+      list: [],
+      hideInMenu: true
+    },
     {
       menuId: getUUID(),
       parentId: 0,
@@ -395,6 +409,7 @@ export default {
           open: null,
           list: []
         },
+
         {
           menuId: getUUID(),
           parentId: 0,

src/router/index.js

@@ -25,14 +25,14 @@ const globalRoutes = [
     path: "/404",
     component: _import("common/404"),
     name: "404",
-    meta: { title: "404未找到" },
+    meta: { title: "404未找到" }
   },
   {
     path: "/login",
     component: _import("common/login"),
     name: "login",
-    meta: { title: "登录" },
+    meta: { title: "登录" }
-  },
+  }
   //test用，会员管理
 ];
 
@@ -52,20 +52,20 @@ const mainRoutes = {
       path: "/home",
       component: _import("common/home"),
       name: "home",
-      meta: { title: "首页" },
+      meta: { title: "首页" }
     },
     {
       path: "/theme",
       component: _import("common/theme"),
       name: "theme",
-      meta: { title: "主题" },
+      meta: { title: "主题" }
     },
     {
       path: "/demo-echarts",
       component: _import("demo/echarts"),
       name: "demo-echarts",
-      meta: { title: "demo-echarts", isTab: true },
+      meta: { title: "demo-echarts", isTab: true }
-    },
+    }
   ],
   beforeEnter(to, from, next) {
     let token = Vue.cookie.get("token");
@@ -74,7 +74,7 @@ const mainRoutes = {
       next({ name: "login" });
     }
     next();
-  },
+  }
 };
 
 const router = new Router({
@@ -82,7 +82,7 @@ const router = new Router({
   // mode:"history",
   scrollBehavior: () => ({ y: 0 }),
   isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
-  routes: globalRoutes.concat(mainRoutes),
+  routes: globalRoutes.concat(mainRoutes)
 });
 
 router.beforeEach((to, from, next) => {
@@ -98,7 +98,7 @@ router.beforeEach((to, from, next) => {
   } else {
     let loadingInstance = Loading.service({
       text: "正在初始化中...",
-      background: "rgba(255,255,255,0.7)",
+      background: "rgba(255,255,255,0.7)"
     });
     $api
       .getUserInfo()
@@ -120,7 +120,7 @@ router.beforeEach((to, from, next) => {
               // 创建一个新的节点，包含过滤后的子节点
               filtered.push({
                 ...node,
-                list,
+                list
               });
             }
             return filtered;
@@ -132,25 +132,25 @@ router.beforeEach((to, from, next) => {
           // 存在多个市场
           $api.mer_admin
             .storeList({ marketId: data.data.markets[0].marketId })
-            .then((res) => {
+            .then(res => {
               store.commit("userData/setState", {
                 isMerchant: true,
                 marketList: data.data.markets,
                 storeList: res.data.data,
                 marketId: data.data.markets[0].marketId,
-                shopId: res.data.data[0].shopId,
+                shopId: res.data.data[0].shopId
               });
             });
           console.log(data.data.markets);
         } else if (data.data.shopId) {
           // 存在单个店铺或云店
-          if(data.data.marketId) {
+          if (data.data.marketId) {
             store.commit("userData/setState", {
               isMerchant: true,
               marketList: [],
               storeList: [],
               marketId: data.data.marketId,
-              shopId: data.data.shopId,
+              shopId: data.data.shopId
             });
           } else {
             store.commit("userData/setState", {
@@ -158,7 +158,7 @@ router.beforeEach((to, from, next) => {
               marketList: [],
               storeList: [],
               marketId: -1,
-              shopId: data.data.shopId,
+              shopId: data.data.shopId
             });
           }
         } else {
@@ -168,7 +168,7 @@ router.beforeEach((to, from, next) => {
             marketList: [],
             storeList: [],
             marketId: "",
-            shopId: "",
+            shopId: ""
           });
         }
         sessionStorage.setItem("userInfo", JSON.stringify(data.data));
@@ -189,7 +189,7 @@ router.beforeEach((to, from, next) => {
         router.options.isAddDynamicMenuRoutes = true;
         next({ ...to, replace: true });
       })
-      .catch((e) => {
+      .catch(e => {
         sessionStorage.setItem("menuList", "[]");
         sessionStorage.setItem("permissions", "[]");
         console.log(
@@ -264,8 +264,8 @@ function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
           isDynamic: true,
           isTab: true,
           iframeUrl: "",
-          isMicroApp: menuList[i].isMicroApp,
+          isMicroApp: menuList[i].isMicroApp
-        },
+        }
       };
       // url以http[s]://开头, 通过iframe展示,或者启用microApp框架
       if (isURL(menuList[i].url)) {

src/utils/index.js

@@ -161,6 +161,7 @@ export function getMenu(role, manageMode) {
       "presale/order/index",
       "marketing",
       "marketing/level/index",
+      "marketing-level/detail",
       "marketing/user/index",
       "marketing/points-setting/index",
       "marketing/points-mall/index",
@@ -229,6 +230,7 @@ export function getMenu(role, manageMode) {
         "presale/order/index",
         "marketing",
         "marketing/level/index",
+        "marketing-level/detail",
         "marketing/user/index",
         "marketing/points-setting/index",
         "marketing/points-mall/index",

src/views/modules/marketing/level/index.vue

@@ -72,81 +72,6 @@
         </el-table-column>
       </el-table>
     </div>
-
-    <!-- 会员等级明细弹窗 -->
-    <el-dialog
-      title="会员等级明细"
-      :visible.sync="levelDialogVisible"
-      width="80%"
-      :before-close="handleDialogClose"
-    >
-      <div class="level-detail-dialog">
-        <div class="dialog-header">
-          <div class="shop-info">
-            <span>摊铺：{{ currentShop.shopName }}</span>
-          </div>
-          <div class="dialog-actions">
-            <el-button type="primary" size="small" @click="handleEditLevel"
-              >等级编辑</el-button
-            >
-            <el-button type="success" size="small" @click="handleSaveLevel"
-              >提交</el-button
-            >
-          </div>
-        </div>
-
-        <!-- 会员等级明细表格 -->
-        <el-table
-          :data="levelDetailData"
-          border
-          style="width: 100%; margin-top: 20px;"
-        >
-          <el-table-column
-            prop="levelName"
-            label="等级名称"
-            width="100"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <span :style="{ color: getLevelColor(scope.row.levelName) }">
-                {{ scope.row.levelName }}
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="requiredGrowthValue"
-            label="所需成长值"
-            width="120"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <span style="color: #1890ff;">{{
-                scope.row.requiredGrowthValue
-              }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="memberCount"
-            label="会员人数"
-            width="100"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <span style="color: #52c41a;">{{ scope.row.memberCount }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="memberBenefits"
-            label="会员权益"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <span style="color: #666;">{{ scope.row.memberBenefits }}</span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -160,35 +85,7 @@ export default {
       formInline: {
         shopIds: []
       },
-      tableData: [],
+      tableData: []
-      levelDialogVisible: false,
-      currentShop: {},
-      levelDetailData: [
-        {
-          levelName: "LV1",
-          requiredGrowthValue: "100",
-          memberCount: "1,250",
-          memberBenefits: "新会员双倍积分，享受基础会员价格优惠"
-        },
-        {
-          levelName: "LV2",
-          requiredGrowthValue: "500",
-          memberCount: "850",
-          memberBenefits: "享受9.5折优惠，每月专属优惠券，生日礼品"
-        },
-        {
-          levelName: "LV3",
-          requiredGrowthValue: "1,200",
-          memberCount: "450",
-          memberBenefits: "享受9折优惠，免费配送服务，专属客服支持"
-        },
-        {
-          levelName: "LV4",
-          requiredGrowthValue: "2,500",
-          memberCount: "180",
-          memberBenefits: "享受8.5折优惠，优先配送，专属活动邀请，年度礼品"
-        }
-      ]
     };
   },
   computed: {
@@ -244,40 +141,46 @@ export default {
       // 这里应该调用API更新状态
     },
 
+    // 关闭已打开的等级明细页面
+    closeLevelDetailTab() {
+      const mainTabs = this.$store.state.common.mainTabs;
+      const filteredTabs = mainTabs.filter(
+        tab => tab.name !== "marketing-level-detail"
+      );
+      this.$store.commit("common/updateMainTabs", filteredTabs);
+    },
+
     handleLevelSetting(row) {
-      this.currentShop = row;
+      // 先关闭已打开的等级明细页面
-      this.levelDialogVisible = true;
+      this.closeLevelDetailTab();
+
+      setTimeout(() => {
+        // 跳转到等级明细页面，添加时间戳确保页面刷新
+        this.$router.push({
+          name: "marketing-level-detail",
+          query: {
+            shopId: row.shopId,
+            shopName: row.shopName,
+            timestamp: Date.now() // 添加时间戳确保每次跳转都是新的
+          }
+        });
+      }, 200);
     },
 
     handleBatchLevelSetting() {
-      // 批量设置功能
+      // 先关闭已打开的等级明细页面
-      this.$message.info("批量会员等级编辑功能待实现");
+      this.closeLevelDetailTab();
-    },
 
-    handleDialogClose() {
+      setTimeout(() => {
-      this.levelDialogVisible = false;
+        // 跳转到批量会员等级编辑页面，添加时间戳确保页面刷新
-      this.currentShop = {};
+        this.$router.push({
-    },
+          name: "marketing-level-detail",
-
+          query: {
-    handleEditLevel() {
+            mode: "batch", // 标识为批量编辑模式
-      // 等级编辑功能
+            timestamp: Date.now() // 添加时间戳确保每次跳转都是新的
-      this.$message.info("等级编辑功能待实现");
+          }
-    },
+        });
-
+      }, 200);
-    handleSaveLevel() {
-      // 提交保存功能
-      this.$message.success("等级明细保存成功");
-      this.handleDialogClose();
-    },
-
-    getLevelColor(levelName) {
-      const colorMap = {
-        LV1: "#52c41a",
-        LV2: "#1890ff",
-        LV3: "#fa8c16",
-        LV4: "#f5222d"
-      };
-      return colorMap[levelName] || "#666";
     }
   }
 };
@@ -299,44 +202,5 @@ export default {
       }
     }
   }
-
-  .level-detail-dialog {
-    .dialog-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 10px;
-
-      .shop-info {
-        padding: 8px 12px;
-        background: #f0f9ff;
-        border-radius: 4px;
-        color: #1890ff;
-        font-weight: 500;
-      }
-
-      .dialog-actions {
-        .el-button {
-          margin-left: 8px;
-        }
-      }
-    }
-
-    .el-table {
-      .el-table__header {
-        th {
-          background-color: #fafafa;
-          color: #333;
-          font-weight: 600;
-        }
-      }
-
-      .el-table__body {
-        td {
-          padding: 12px 0;
-        }
-      }
-    }
-  }
 }
 </style>