增加功能报价

backend/src/api/product.js

@@ -0,0 +1,56 @@
+import request from "@/utils/request";
+
+/*************************************************
+ * 租户端「产品购买」相关接口
+ *************************************************/
+
+/** 可购买产品列表（含功能节点与价格档位） */
+export function getProductList(params) {
+  return request({
+    url: "/backend/product/list",
+    method: "get",
+    params,
+  });
+}
+
+/** 按产品编码取详情 */
+export function getProductDetailByCode(code) {
+  return request({
+    url: `/backend/product/detail/${code}`,
+    method: "get",
+  });
+}
+
+/** 下单（channel 为空表示线下/待平台开通） */
+export function createProductOrder(data) {
+  return request({
+    url: "/backend/product/order/create",
+    method: "post",
+    data,
+  });
+}
+
+/** 查询订单状态（已支付会自动开通） */
+export function getProductOrderStatus(orderNo) {
+  return request({
+    url: "/backend/product/order/status",
+    method: "get",
+    params: { order_no: orderNo },
+  });
+}
+
+/** 本租户购买记录 */
+export function getMyProductOrders() {
+  return request({
+    url: "/backend/product/order/list",
+    method: "get",
+  });
+}
+
+/** 收银台可用支付渠道 */
+export function getPaymentChannels() {
+  return request({
+    url: "/backend/payment/channels",
+    method: "get",
+  });
+}

backend/src/components/CommonAside.vue

@@ -41,10 +41,12 @@
         <el-menu-item
           v-if="!item.children || item.children.length === 0"
           :index="item.path || item.id.toString()"
+          :class="{ 'is-locked': item.locked }"
         >
           <i v-if="item.icon" :class="item.icon" class="menu-icon"></i>
           <template #title>
             <span>{{ item.title }}</span>
+            <i v-if="item.locked" class="fa-solid fa-lock lock-badge"></i>
           </template>
         </el-menu-item>
 
@@ -53,10 +55,12 @@
           v-else
           :index="item.path || item.id.toString()"
           :unique-opened="true"
+          :class="{ 'is-locked': item.locked }"
         >
           <template #title>
             <i v-if="item.icon" :class="item.icon" class="menu-icon"></i>
             <span>{{ item.title }}</span>
+            <i v-if="item.locked" class="fa-solid fa-lock lock-badge"></i>
           </template>
 
           <!-- 递归渲染子菜单 -->
@@ -64,10 +68,12 @@
             <el-menu-item
               v-if="!child.children || child.children.length === 0"
               :index="child.path || child.id.toString()"
+              :class="{ 'is-locked': child.locked }"
             >
               <i v-if="child.icon" :class="child.icon" class="menu-icon"></i>
               <template #title>
                 <span>{{ child.title }}</span>
+                <i v-if="child.locked" class="fa-solid fa-lock lock-badge"></i>
               </template>
             </el-menu-item>
 
@@ -75,10 +81,12 @@
               v-else
               :index="child.path || child.id.toString()"
               :unique-opened="true"
+              :class="{ 'is-locked': child.locked }"
             >
               <template #title>
                 <i v-if="child.icon" :class="child.icon" class="menu-icon"></i>
                 <span>{{ child.title }}</span>
+                <i v-if="child.locked" class="fa-solid fa-lock lock-badge"></i>
               </template>
 
               <!-- 继续递归渲染子菜单 -->
@@ -91,6 +99,7 @@
                     !grandchild.children || grandchild.children.length === 0
                   "
                   :index="grandchild.path || grandchild.id.toString()"
+                  :class="{ 'is-locked': grandchild.locked }"
                 >
                   <i
                     v-if="grandchild.icon"
@@ -99,6 +108,7 @@
                   ></i>
                   <template #title>
                     <span>{{ grandchild.title }}</span>
+                    <i v-if="grandchild.locked" class="fa-solid fa-lock lock-badge"></i>
                   </template>
                 </el-menu-item>
 
@@ -106,6 +116,7 @@
                   v-else
                   :index="grandchild.path || grandchild.id.toString()"
                   :unique-opened="true"
+                  :class="{ 'is-locked': grandchild.locked }"
                 >
                   <template #title>
                     <i
@@ -114,6 +125,7 @@
                       class="menu-icon"
                     ></i>
                     <span>{{ grandchild.title }}</span>
+                    <i v-if="grandchild.locked" class="fa-solid fa-lock lock-badge"></i>
                   </template>
 
                   <!-- 继续递归渲染... -->
@@ -125,6 +137,7 @@
                       :index="
                         greatGrandchild.path || greatGrandchild.id.toString()
                       "
+                      :class="{ 'is-locked': greatGrandchild.locked }"
                     >
                       <i
                         v-if="greatGrandchild.icon"
@@ -133,6 +146,7 @@
                       ></i>
                       <template #title>
                         <span>{{ greatGrandchild.title }}</span>
+                        <i v-if="greatGrandchild.locked" class="fa-solid fa-lock lock-badge"></i>
                       </template>
                     </el-menu-item>
                   </template>
@@ -283,6 +297,7 @@ const processMenus = (menus) => {
       title: menu.title,
       route: menu.path,
       component_path: menu.component_path,
+      locked: !!menu.locked,
       parentId: menu.pid || 0,
       order: menu.sort || 0,
       children: menu.children ? processMenus(menu.children) : [],
@@ -608,6 +623,18 @@ h3 {
     padding-left: 48px !important;
   }
 
+  // 套餐未开通模块：锁定态置灰 + 锁图标
+  .el-menu-item.is-locked,
+  .el-sub-menu.is-locked > .el-sub-menu__title {
+    opacity: 0.65;
+
+    .lock-badge {
+      margin-left: 6px;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.75);
+    }
+  }
+
   // 暗色主题适配
   html.dark & {
     .el-menu-item.is-active {

backend/src/router/dynamicRoutes.js

@@ -38,6 +38,9 @@ function resolvePageComponent(menu) {
   return () => import('@/views/404/404.vue');
 }
 
+/** 套餐未开通模块的锁定占位页组件 */
+const lockedPageComponent = () => import('@/views/locked/index.vue');
+
 /**
  * 菜单子节点 -> 嵌套路由（path 相对 layoutAbsPath）
  */
@@ -59,6 +62,20 @@ function nestedMenuToRoute(menu, layoutAbsPath) {
     componentPath: menu.component_path,
   };
 
+  // 套餐未开通模块：渲染锁定占位页（子路由同样注册，保证深链接不 404）
+  if (menu.locked) {
+    const route = {
+      path: relPath,
+      name: `menu_${menu.id}`,
+      meta,
+      component: lockedPageComponent,
+    };
+    if (hasChildren) {
+      route.children = convertNestedMenuChildren(menu.children, childAbs);
+    }
+    return route;
+  }
+
   // 既有自己的页面又有子菜单：套一层 EmptyLayout，避免父页面组件里没有 <router-view> 导致子路由无法渲染
   if (hasChildren && ownPage) {
     return {
@@ -128,6 +145,20 @@ export function convertMenusToRoutes(menus, parentPath = '') {
       componentPath: menu.component_path,
     };
 
+    // 套餐未开通模块：渲染锁定占位页（子路由同样注册，保证深链接不 404）
+    if (menu.locked) {
+      const route = {
+        path: fullPath || menu.path || '',
+        name: `menu_${menu.id}`,
+        meta,
+        component: lockedPageComponent,
+      };
+      if (hasChildren) {
+        route.children = convertMenusToRoutes(menu.children, fullPath);
+      }
+      return route;
+    }
+
     // 顶层：有页面 + 有子菜单 -> EmptyLayout + 默认子路由 + 相对 path 子路由
     if (hasChildren && ownPage) {
       return {

backend/src/router/index.js

@@ -157,6 +157,13 @@ const staticRoutes = [
     path: "/apps/erp/dashborad",
     redirect: "/apps/erp/dashboard"
   },
+  // 产品购买页：home 未开通卡片「购买」按钮跳转，独立于 Main 框架展示
+  {
+    path: "/product/:code",
+    name: "ProductPurchase",
+    component: () => import("@/views/product/index.vue"),
+    meta: { requiresAuth: true, title: "产品购买", isStandalone: true }
+  },
   {
     path: "/:pathMatch(.*)*",
     name: "NotFound",

backend/src/views/home/index.vue

@@ -71,16 +71,24 @@
               v-for="module in basicModules"
               :key="module.path"
               class="module-card"
+              :class="{ 'is-locked': module.locked }"
               @click="handleNavigate(module)"
             >
               <div class="card-header">
-                <span class="card-title">{{ module.name }}</span>
+                <span class="card-title">
+                  {{ module.name }}
+                  <el-icon v-if="module.locked" class="lock-badge"><Lock /></el-icon>
+                </span>
                 <div class="card-icon-wrapper" v-html="module.icon"></div>
               </div>
               <div class="card-divider"></div>
               <div class="card-content">
                 <p class="card-desc">{{ module.description || "暂无描述" }}</p>
               </div>
+              <div v-if="module.locked" class="card-lock-tip">
+                <span class="lock-text">套餐未开通</span>
+                <span class="buy-btn" @click.stop="handleBuy(module)">购买</span>
+              </div>
             </div>
           </div>
         </div>
@@ -93,16 +101,24 @@
               v-for="module in systemModules"
               :key="module.path"
               class="module-card"
+              :class="{ 'is-locked': module.locked }"
               @click="handleNavigate(module)"
             >
               <div class="card-header">
-                <span class="card-title">{{ module.name }}</span>
+                <span class="card-title">
+                  {{ module.name }}
+                  <el-icon v-if="module.locked" class="lock-badge"><Lock /></el-icon>
+                </span>
                 <div class="card-icon-wrapper" v-html="module.icon"></div>
               </div>
               <div class="card-divider"></div>
               <div class="card-content">
                 <p class="card-desc">{{ module.description || "暂无描述" }}</p>
               </div>
+              <div v-if="module.locked" class="card-lock-tip">
+                <span class="lock-text">套餐未开通</span>
+                <span class="buy-btn" @click.stop="handleBuy(module)">购买</span>
+              </div>
             </div>
           </div>
         </div>
@@ -115,16 +131,24 @@
               v-for="module in uncategorizedModules"
               :key="module.path"
               class="module-card"
+              :class="{ 'is-locked': module.locked }"
               @click="handleNavigate(module)"
             >
               <div class="card-header">
-                <span class="card-title">{{ module.name }}</span>
+                <span class="card-title">
+                  {{ module.name }}
+                  <el-icon v-if="module.locked" class="lock-badge"><Lock /></el-icon>
+                </span>
                 <div class="card-icon-wrapper" v-html="module.icon"></div>
               </div>
               <div class="card-divider"></div>
               <div class="card-content">
                 <p class="card-desc">{{ module.description || "暂无描述" }}</p>
               </div>
+              <div v-if="module.locked" class="card-lock-tip">
+                <span class="lock-text">套餐未开通</span>
+                <span class="buy-btn" @click.stop="handleBuy(module)">购买</span>
+              </div>
             </div>
           </div>
         </div>
@@ -146,7 +170,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 
 import {
   ArrowDown,
@@ -157,6 +181,7 @@ import {
   Sunny,
   Moon,
   OfficeBuilding,
+  Lock,
 } from "@element-plus/icons-vue";
 
 import { getTenantList } from "@/api/modules";
@@ -175,21 +200,30 @@ interface ModuleItem {
   status: number;
   type: number;
   title?: string;
+  locked?: boolean;
+  is_show?: number;
 }
 
 const router = useRouter();
 const authStore = useAuthStore();
 const menuStore = useMenuStore();
 
+// 已开通模块排在前面，套餐未开通（锁定）的模块沉到后方
+function sortUnlockedFirst(list: ModuleItem[]): ModuleItem[] {
+  return [...list].sort(
+    (a, b) => Number(!!a.locked) - Number(!!b.locked)
+  );
+}
+
 // 根据type分组模块
 const basicModules = computed(() =>
-  moduleList.value.filter((item) => item.type === 1)
+  sortUnlockedFirst(moduleList.value.filter((item) => item.type === 1))
 );
 const systemModules = computed(() =>
-  moduleList.value.filter((item) => item.type === 2)
+  sortUnlockedFirst(moduleList.value.filter((item) => item.type === 2))
 );
 const uncategorizedModules = computed(() =>
-  moduleList.value.filter((item) => item.type === 0)
+  sortUnlockedFirst(moduleList.value.filter((item) => item.type === 0))
 );
 
 const moduleList = ref<ModuleItem[]>([]);
@@ -265,8 +299,32 @@ const fetchUserProfile = async () => {
 // 当前租户（企业）名称，来自后端 /backend/getCurrentUser 或登录接口返回的 tenant_name
 const tenantName = computed(() => authStore.user?.tenant_name || "");
 
+// 当前租户生效套餐名称（用于未开通提示）
+const packageName = ref("");
+// 套餐购买链接（平台端配置，为空时点击「购买」仅提示联系管理员）
+const purchaseUrl = ref("");
+
+// 套餐未开通模块：不跳转，提示购买套餐后使用
+function showLockedTip(module: ModuleItem) {
+  const pkg = packageName.value ? `「${packageName.value}」` : "当前";
+  ElMessageBox.alert(
+    `${pkg}套餐未包含「${module.name}」功能模块，请购买或升级套餐后使用。如有疑问请联系平台管理员。`,
+    "功能未开通",
+    {
+      confirmButtonText: "我知道了",
+      type: "warning",
+      customClass: "module-locked-tip"
+    }
+  ).catch(() => {});
+}
+
 // 处理导航跳转
 function handleNavigate(module: ModuleItem) {
+  if (module.locked) {
+    showLockedTip(module);
+    return;
+  }
+
   const isWebsiteManagement = module.name === "网站管理" || module.path.startsWith("/apps/cms");
   const targetPath = isWebsiteManagement
     ? "/apps/cms/analytics/content"
@@ -275,6 +333,22 @@ function handleNavigate(module: ModuleItem) {
   if (targetPath) router.push(targetPath);
 }
 
+// 点击「购买」：跳转该产品（按功能模块编码）的购买页，展示产品介绍 / 功能节点 / 价格档位
+function handleBuy(module: ModuleItem) {
+  const code = (module.code || "").trim();
+  if (code) {
+    router.push(`/product/${code}`);
+    return;
+  }
+  // 无模块编码时回退到平台配置的外部购买链接，仍无则提示联系管理员
+  const url = (purchaseUrl.value || "").trim();
+  if (url) {
+    window.open(url, "_blank", "noopener,noreferrer");
+    return;
+  }
+  showLockedTip(module);
+}
+
 // 刷新菜单
 async function handleRefreshMenus() {
   refreshLoading.value = true;
@@ -331,10 +405,13 @@ async function loadModules() {
           const mapped = {
             ...item,
             type: item.type ?? 0, // 默认为0（未分类）
+            locked: !!item.locked, // 套餐未开通模块：置灰并锁定
             title: item.name // 添加title字段用于显示分类标题
           };
           return mapped;
         });
+      packageName.value = res.data?.package_name || "";
+      purchaseUrl.value = res.data?.purchase_url || "";
     }
   } catch (error) {
     console.error("加载模块列表失败:", error);
@@ -580,7 +657,7 @@ onMounted(() => {
       }
 
       .module-card {
-        height: 180px;
+        min-height: 180px;
         background: #fff;
         border-radius: 12px;
         padding: 30px;
@@ -606,9 +683,17 @@ onMounted(() => {
           }
 
           .card-title {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
             font-size: 18px;
             font-weight: 600;
             color: @text-main;
+
+            .lock-badge {
+              font-size: 14px;
+              color: #c0c4cc;
+            }
           }
         }
 
@@ -631,6 +716,79 @@ onMounted(() => {
           }
         }
 
+        .card-lock-tip {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 8px;
+          margin-top: 12px;
+          font-size: 12px;
+          color: #c0c4cc;
+
+          .buy-btn {
+            flex-shrink: 0;
+            padding: 2px 10px;
+            border: 1px solid #3973ff;
+            border-radius: 12px;
+            color: #3973ff;
+            font-size: 12px;
+            cursor: pointer;
+            transition: all 0.2s;
+
+            &:hover {
+              background: #3973ff;
+              border-color: #3973ff;
+              color: #fff;
+            }
+          }
+        }
+
+        // 套餐未开通模块：置灰 + 禁止点击效果
+        &.is-locked {
+          background: #fafafa;
+          border-style: dashed;
+          border-color: #dcdfe6;
+          box-shadow: none;
+          cursor: not-allowed;
+          filter: grayscale(1);
+          opacity: 0.8;
+
+          .card-title {
+            color: #909399;
+          }
+
+          .card-desc {
+            color: #a8abb2;
+          }
+
+          .card-icon-wrapper {
+            color: #c0c4cc;
+          }
+
+          .card-divider {
+            border-color: #e4e7ed;
+          }
+
+          &:hover {
+            transform: none;
+            background: #fafafa;
+            box-shadow: none;
+
+            .card-title,
+            .card-desc {
+              color: #909399;
+            }
+
+            .card-icon-wrapper {
+              color: #c0c4cc;
+            }
+
+            .card-divider {
+              opacity: 1;
+            }
+          }
+        }
+
         &:hover {
           transform: translateY(-4px);
           box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
@@ -947,6 +1105,43 @@ onMounted(() => {
         .card-divider {
           border-color: #3d3d3d;
         }
+
+        &.is-locked {
+          background: #1f1f1f;
+
+          .card-title {
+            color: #8c8c8c !important;
+            font-weight: 600;
+          }
+
+          .card-desc {
+            color: #6b6b6b !important;
+          }
+
+          .card-icon-wrapper {
+            color: #5a5a5a;
+          }
+
+          .lock-badge {
+            color: #8c8c8c;
+          }
+
+          .card-lock-tip {
+            color: #6b6b6b;
+          }
+
+          &:hover {
+            background: #1f1f1f;
+
+            .card-title {
+              color: #8c8c8c !important;
+            }
+
+            .card-desc {
+              color: #6b6b6b !important;
+            }
+          }
+        }
       }
     }
 
@@ -972,6 +1167,19 @@ onMounted(() => {
     .modules-section .module-card .card-desc {
       color: #8c8c8c !important;
     }
+
+    .modules-section .module-card.is-locked {
+      background: #1f1f1f;
+
+      .card-title {
+        color: #8c8c8c !important;
+        font-weight: 600;
+      }
+
+      .card-desc {
+        color: #6b6b6b !important;
+      }
+    }
   }
 }
 </style>

backend/src/views/locked/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="locked-container">
+    <div class="locked-content">
+      <div class="locked-icon">
+        <i class="fa-solid fa-lock"></i>
+      </div>
+      <div class="locked-message">功能未开通</div>
+      <div class="locked-desc">
+        当前套餐未包含<template v-if="moduleName">「{{ moduleName }}」</template>功能模块，请联系管理员升级套餐后使用。
+      </div>
+      <div class="locked-actions">
+        <a href="javascript:void(0)" class="back-home-btn" @click.prevent="backToHome">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+
+const moduleName = computed(() => route.meta?.title || "");
+
+const backToHome = () => {
+  router.push("/home");
+};
+</script>
+
+<style scoped>
+.locked-container {
+  min-height: 100%;
+  background: linear-gradient(120deg, #e0e7ff 0%, #fce7f3 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+}
+
+.locked-content {
+  background: #fff;
+  padding: 48px 48px 40px;
+  border-radius: 16px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  text-align: center;
+  max-width: 460px;
+  animation: float-in 0.6s cubic-bezier(0.7, 0.13, 0.45, 0.81) both;
+}
+
+.locked-icon {
+  width: 88px;
+  height: 88px;
+  margin: 0 auto 20px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  color: #f59e0b;
+}
+
+.locked-message {
+  font-size: 24px;
+  color: #222;
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.locked-desc {
+  font-size: 15px;
+  color: #888;
+  margin-bottom: 28px;
+  line-height: 1.6;
+}
+
+.locked-actions {
+  margin-bottom: 4px;
+}
+
+.back-home-btn {
+  display: inline-block;
+  background: linear-gradient(90deg, #3973ff 0%, #6a82fb 100%);
+  color: #fff;
+  padding: 10px 36px;
+  border-radius: 24px;
+  font-size: 15px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: opacity 0.2s;
+}
+
+.back-home-btn:hover {
+  opacity: 0.85;
+}
+
+@keyframes float-in {
+  0% {
+    transform: translateY(30px) scale(0.97);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+</style>

backend/src/views/product/index.vue

@@ -0,0 +1,585 @@
+<template>
+  <div class="product-page">
+    <!-- 顶部栏 -->
+    <div class="page-top">
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <el-button link class="back-btn" @click="goHome">
+            <el-icon><ArrowLeft /></el-icon>
+            返回
+          </el-button>
+          <span v-if="tenantName" class="tenant-name">
+            <el-icon><OfficeBuilding /></el-icon>
+            {{ tenantName }}
+          </span>
+        </div>
+        <div class="toolbar-right">
+          <el-button link @click="ordersVisible = true">我的订单</el-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="page-body">
+      <el-skeleton v-if="loading" :rows="8" animated />
+
+      <div v-else-if="!product" class="empty-state">
+        <el-icon :size="64"><Box /></el-icon>
+        <p class="empty-text">该产品暂未发布定价</p>
+        <p class="empty-tip">请联系平台管理员配置产品与价格后购买</p>
+        <el-button type="primary" @click="goHome">返回首页</el-button>
+      </div>
+
+      <template v-else>
+        <!-- 产品头部 -->
+        <section class="hero">
+          <div class="hero-main">
+            <h1 class="hero-title">{{ product.name }}</h1>
+            <p class="hero-code">产品编码：{{ product.code }}</p>
+          </div>
+          <div class="hero-price">
+            <span class="price-symbol">¥</span>
+            <span class="price-value">{{ Number(product.price || 0).toFixed(2) }}</span>
+          </div>
+        </section>
+
+        <!-- 功能节点树 -->
+        <section v-if="featureTree.length > 0" class="section">
+          <h2 class="section-title">功能清单</h2>
+          <div class="feature-box">
+            <el-tree
+              :data="featureTree"
+              :props="{ label: 'title', children: 'children' }"
+              node-key="key"
+              default-expand-all
+            >
+              <template #default="{ data }">
+                <div class="tree-node">
+                  <span class="node-title">{{ data.title }}</span>
+                  <span v-if="data.description" class="node-desc">{{ data.description }}</span>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+        </section>
+
+        <!-- 结算区 -->
+        <section class="section">
+          <div class="checkout">
+            <div class="checkout-info">
+              <span class="checkout-label">应付金额：</span>
+              <span class="checkout-amount">¥{{ Number(product.price || 0).toFixed(2) }}</span>
+            </div>
+            <div v-if="channels.length > 0" class="checkout-pay">
+              <span class="checkout-label">支付方式：</span>
+              <el-radio-group v-model="channel">
+                <el-radio v-for="c in channels" :key="c.channel" :value="c.channel">
+                  {{ c.name || c.channel }}
+                </el-radio>
+              </el-radio-group>
+            </div>
+            <el-button type="primary" size="large" :loading="submitting" @click="handleBuy">
+              立即购买
+            </el-button>
+          </div>
+          <p v-if="channels.length === 0" class="checkout-tip">
+            平台暂未配置在线支付渠道，点击「立即购买」将提交购买申请，由平台确认后开通。
+          </p>
+        </section>
+      </template>
+    </div>
+
+    <!-- 支付弹窗 -->
+    <el-dialog v-model="payVisible" title="扫码支付" width="420px" :close-on-click-modal="false">
+      <div v-if="payParams?.code_url" class="pay-body">
+        <canvas ref="qrRef" class="pay-qr"></canvas>
+        <p class="pay-tip">请使用{{ currentChannelName }}扫码支付</p>
+        <p class="pay-amount">¥{{ Number(product?.price || 0).toFixed(2) }}</p>
+      </div>
+      <div v-else-if="payParams?.redirect_url" class="pay-body">
+        <p class="pay-tip">正在跳转{{ currentChannelName }}收银台…</p>
+        <el-button type="primary" @click="openPayUrl(payParams.redirect_url)">重新打开支付页</el-button>
+      </div>
+      <div v-else class="pay-body">
+        <el-icon :size="48" color="#67c23a"><CircleCheckFilled /></el-icon>
+        <p class="pay-tip">购买申请已提交，请等待平台确认开通</p>
+      </div>
+      <p class="pay-status">{{ payStatusText }}</p>
+      <template #footer>
+        <el-button @click="handleCancelPay">取消支付</el-button>
+        <el-button type="primary" :loading="checking" @click="checkOrder">我已完成支付</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 我的订单 -->
+    <el-dialog v-model="ordersVisible" title="我的订单" width="720px">
+      <el-table :data="myOrders" size="small" v-loading="ordersLoading">
+        <el-table-column prop="order_no" label="订单号" min-width="160" show-overflow-tooltip />
+        <el-table-column prop="product_name" label="产品" min-width="160" show-overflow-tooltip />
+        <el-table-column label="金额" width="100" align="center">
+          <template #default="{ row }">¥{{ Number(row.amount || 0).toFixed(2) }}</template>
+        </el-table-column>
+        <el-table-column label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="orderStatusType(row.status)" size="small">
+              {{ orderStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="create_time" label="下单时间" width="170" align="center" />
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, nextTick } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { ArrowLeft, OfficeBuilding, Box, CircleCheckFilled } from "@element-plus/icons-vue";
+import QRCode from "qrcode";
+import {
+  getProductDetailByCode,
+  createProductOrder,
+  getProductOrderStatus,
+  getMyProductOrders,
+  getPaymentChannels,
+} from "@/api/product";
+import { useAuthStore } from "@/stores/auth";
+
+interface FeatureNode {
+  key: number;
+  title: string;
+  description: string;
+  children?: FeatureNode[];
+}
+
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+
+const loading = ref(false);
+const product = ref<any>(null);
+const channels = ref<any[]>([]);
+const channel = ref("");
+const submitting = ref(false);
+
+const payVisible = ref(false);
+const payParams = ref<any>(null);
+const orderNo = ref("");
+const checking = ref(false);
+const payStatusText = ref("");
+const qrRef = ref<HTMLCanvasElement | null>(null);
+let pollTimer: any = null;
+
+const ordersVisible = ref(false);
+const myOrders = ref<any[]>([]);
+const ordersLoading = ref(false);
+
+const tenantName = computed(() => authStore.user?.tenant_name || "");
+
+/** 扁平功能节点 -> 树 */
+const featureTree = computed<FeatureNode[]>(() => {
+  const list: any[] = product.value?.features || [];
+  const map = new Map<number, FeatureNode>();
+  const roots: FeatureNode[] = [];
+  list.forEach((f) =>
+    map.set(Number(f.id), {
+      key: Number(f.id),
+      title: f.title || "",
+      description: f.description || "",
+      children: [],
+    })
+  );
+  list.forEach((f) => {
+    const node = map.get(Number(f.id))!;
+    const parent = f.pid ? map.get(Number(f.pid)) : undefined;
+    if (parent) parent.children!.push(node);
+    else roots.push(node);
+  });
+  return roots;
+});
+
+const currentChannelName = computed(() => {
+  const c = channels.value.find((x) => x.channel === channel.value);
+  return c?.name || channel.value;
+});
+
+const orderStatusText = (s: string) =>
+  ({ pending: "待支付", paid: "已支付", activated: "已开通", closed: "已关闭" }[s] || s);
+const orderStatusType = (s: string) =>
+  ({ pending: "warning", paid: "primary", activated: "success", closed: "info" }[s] || "info");
+
+const goHome = () => router.push("/home");
+
+const loadProduct = async () => {
+  const code = String(route.params.code || "").trim();
+  if (!code) {
+    product.value = null;
+    return;
+  }
+  loading.value = true;
+  try {
+    const res = await getProductDetailByCode(code);
+    product.value = res.code === 200 && res.data ? res.data : null;
+  } catch {
+    product.value = null;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadChannels = async () => {
+  try {
+    const res = await getPaymentChannels();
+    if (res.code === 200) {
+      channels.value = res.data?.list || [];
+      if (channels.value.length > 0) channel.value = channels.value[0].channel;
+    }
+  } catch {
+    channels.value = [];
+  }
+};
+
+const openPayUrl = (url: string) => {
+  if (url) window.open(url, "_blank", "noopener,noreferrer");
+};
+
+const renderQR = async () => {
+  if (!payParams.value?.code_url) return;
+  await nextTick();
+  if (!qrRef.value) return;
+  try {
+    await QRCode.toCanvas(qrRef.value, payParams.value.code_url, { width: 200, margin: 1 });
+  } catch (e) {
+    console.error("二维码生成失败:", e);
+  }
+};
+
+const handleBuy = async () => {
+  if (!product.value) return;
+  submitting.value = true;
+  try {
+    const res = await createProductOrder({
+      product_code: product.value.code,
+      channel: channels.value.length > 0 ? channel.value : "",
+      pay_type: "",
+    });
+    if (res.code !== 200) {
+      ElMessage.error(res.msg || "下单失败");
+      return;
+    }
+    orderNo.value = res.data?.order_no || "";
+    payParams.value = res.data?.pay_params || null;
+    payStatusText.value = res.data?.offline
+      ? "购买申请已提交，请等待平台确认开通"
+      : "请在有效期内完成支付，支付成功后由平台开通功能";
+    payVisible.value = true;
+    await renderQR();
+    if (payParams.value?.redirect_url) openPayUrl(payParams.value.redirect_url);
+    if (!res.data?.offline) startPolling();
+  } catch (e: any) {
+    ElMessage.error(e?.message || "下单失败");
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const startPolling = () => {
+  stopPolling();
+  pollTimer = setInterval(() => checkOrder(true), 5000);
+};
+
+const stopPolling = () => {
+  if (pollTimer) {
+    clearInterval(pollTimer);
+    pollTimer = null;
+  }
+};
+
+const checkOrder = async (silent = false) => {
+  if (!orderNo.value) return;
+  checking.value = true;
+  try {
+    const res = await getProductOrderStatus(orderNo.value);
+    if (res.code === 200 && res.data) {
+      const status = res.data.status;
+      if (status === "activated") {
+        stopPolling();
+        ElMessage.success("购买成功，功能已开通");
+        payVisible.value = false;
+        loadMyOrders();
+        return;
+      }
+      if (status === "paid") {
+        payStatusText.value = "已支付，等待平台开通…";
+        return;
+      }
+      payStatusText.value = silent
+        ? payStatusText.value || "等待支付…"
+        : "尚未检测到支付成功，请确认已完成支付";
+      if (!silent) ElMessage.info("尚未检测到支付成功");
+    }
+  } catch {
+    if (!silent) ElMessage.error("查询订单失败");
+  } finally {
+    checking.value = false;
+  }
+};
+
+const handleCancelPay = () => {
+  stopPolling();
+  payVisible.value = false;
+  ElMessage.info("已取消，订单仍可在「我的订单」中查看");
+};
+
+const loadMyOrders = async () => {
+  ordersLoading.value = true;
+  try {
+    const res = await getMyProductOrders();
+    if (res.code === 200) myOrders.value = res.data?.list || [];
+  } catch {
+    myOrders.value = [];
+  } finally {
+    ordersLoading.value = false;
+  }
+};
+
+watch(ordersVisible, (v) => {
+  if (v) loadMyOrders();
+});
+
+watch(payVisible, (v) => {
+  if (!v) stopPolling();
+});
+
+onMounted(() => {
+  loadProduct();
+  loadChannels();
+});
+</script>
+
+<style scoped lang="less">
+.product-page {
+  min-height: 100vh;
+  background: #f5f7fa;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-top {
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+
+  .toolbar {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 10px 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .toolbar-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .tenant-name {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 14px;
+        color: #606266;
+      }
+    }
+  }
+}
+
+.page-body {
+  flex: 1;
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 14px;
+  padding: 28px;
+  color: #fff;
+
+  .hero-title {
+    margin: 0 0 8px;
+    font-size: 26px;
+    font-weight: 700;
+  }
+
+  .hero-code {
+    margin: 0;
+    font-size: 13px;
+    opacity: 0.85;
+  }
+
+  .hero-price {
+    display: flex;
+    align-items: baseline;
+    gap: 2px;
+
+    .price-symbol {
+      font-size: 18px;
+    }
+
+    .price-value {
+      font-size: 34px;
+      font-weight: 700;
+    }
+  }
+}
+
+.section {
+  margin-top: 28px;
+
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1a1a2e;
+    margin: 0 0 16px;
+    padding-left: 8px;
+    border-left: 4px solid #667eea;
+  }
+}
+
+.feature-box {
+  background: #fff;
+  border-radius: 10px;
+  border: 1px solid #ebeef5;
+  padding: 16px 18px;
+
+  .tree-node {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    flex-wrap: wrap;
+
+    .node-title {
+      font-size: 14px;
+      color: #1a1a2e;
+    }
+
+    .node-desc {
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+}
+
+.checkout {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  flex-wrap: wrap;
+  background: #fff;
+  border-radius: 12px;
+  padding: 18px 22px;
+  border: 1px solid #ebeef5;
+
+  .checkout-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .checkout-amount {
+      color: #f56c6c;
+      font-size: 24px;
+      font-weight: 700;
+    }
+  }
+
+  .checkout-pay {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .checkout-label {
+    color: #909399;
+  }
+}
+
+.checkout-tip {
+  margin: 10px 0 0;
+  font-size: 12px;
+  color: #909399;
+}
+
+.pay-body {
+  text-align: center;
+
+  .pay-qr {
+    width: 200px;
+    height: 200px;
+  }
+
+  .pay-tip {
+    font-size: 14px;
+    color: #606266;
+    margin: 12px 0 4px;
+  }
+
+  .pay-amount {
+    font-size: 20px;
+    font-weight: 700;
+    color: #f56c6c;
+    margin: 0;
+  }
+}
+
+.pay-status {
+  text-align: center;
+  font-size: 13px;
+  color: #909399;
+  margin: 10px 0 0;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 80px 20px;
+  color: #c0c4cc;
+
+  .empty-text {
+    font-size: 18px;
+    color: #606266;
+  }
+
+  .empty-tip {
+    font-size: 14px;
+    color: #909399;
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-body {
+    padding: 16px 12px;
+  }
+
+  .hero {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px;
+  }
+
+  .checkout {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>