⏳ 前情回顾

在第03讲中，我们接入了企业微信机器人。当管理员在后台“发号施令”后，销售们的手机里就会叮当作响：“新线索来了，快去抢！”

但问题来了：销售点开消息后，去哪里抢？

目前的系统里，只有一个管理员用的“线索管理”页面。如果让销售也进这个页面，不仅权限乱套，还可能发生“误删数据”的惨剧。

因此，我们需要给前线的战士们打造一个专属的作战指挥部——销售工作台。

🎯 本节目标

1. 门户入口：实现基于角色的统一办公门户，分流不同职能人员。
2. 阵地建设：搭建 PC 端“销售工作台”页面。
3. 身份核验：实现“手机号反查身份”，给登录用户发“数字工牌”。

第一步：构建统一办公门户

在深入具体的业务模块之前，我们需要一个全局的入口来“分发流量”。
并不是所有员工一登录都应该看到复杂的后台菜单。我们采用**“角色卡片”**的设计，让不同岗位的员工快速进入属于自己的工作台。

1. 门户设计理念
摒弃传统的“所有功能一把抓”，采用场景化分流：

• 校长：关注经营数据 -> 进入仪表盘 (Dashboard)
• 销售：关注线索转化 -> 进入招生中心 (Enrollment)
• 教务：关注排课消课 -> 进入教务中心 (Academic)
• 财务：关注收支流水 -> 进入财务中心 (Finance)
• 管理员：系统配置 -> 进入系统管理 (Admin)

2. 核心逻辑实现
在首页 (page.tsx) 中，我们定义了角色与路由的映射关系。当用户点击相应卡片时，系统将其路由至对应的业务模块。

交互体验：
这是一个极其简洁的“落地页”。没有侧边栏，没有干扰信息，只有清晰的角色入口。
这给了员工一种强烈的“归属感”——系统知道我是谁，也知道我要干什么。

1.1 创建应用

各类角色我们要单独创建一个应用，为什么要单独创建呢？因为我们的小程序和PC端都要通过手机号登录，这种属于外部账号，和我们前边的管理员端是有区分的。

切换到web应用，点击从空白创建

1.2 搭建页面

创建应用后，点击页面设计，开始搭建页面

修改页面的名称改为欢迎页

在页面中添加一个普通容器，将网格布局移入

设置普通容器的样式

:root{background-image: linear-gradient(to bottom right,#eff6ff,#f8fafc,#eef2ff);min-height: 100vh;}

在列里添加两个文本组件，填写对应的内容

然后继续在列里添加卡片布局，搭建一个角色说明

按照同样的方式配置其他卡片

第二步：身份核验——颁发“数字工牌”

这是低代码开发中最经典的场景。
微搭的登录体系是基于手机号，而我们的业务体系是基于Employee表的。
我们需要在两者之间架起一座桥梁。

2.1. 原理分析

当用户登录时，系统只知道他的手机号。我们需要拿着这个手机号，去Employee表里查：

• “你是我们公司的员工吗？”
• “你是哪个部门的？”
• “你的员工ID是多少？”

查到了，就发一张“数字工牌”（存入全局变量）；查不到，就拒之门外。

2.2. 编写核验逻辑 (自定义方法)

先创建一个全局变量用来保存员工的身份信息

点击左侧代码区，新建一个自定义方法checkIdentity。

exportdefaultasyncfunction({params,context}){// 1. 获取当前登录用户的手机号 (依赖微搭的登录机制)constuserPhone=$w.auth.currentUser.phone||"15533445566";if(!userPhone){return{success:false,msg:"无法获取手机号，请先登录"};}// 2. 去员工表里“捞人”// 使用 wedaGetRecordsV2 查询 Employee 表try{constresult=await$w.cloud.callDataSource({dataSourceName:'Employee',methodName:'wedaGetRecordsV2',params:{filter:{where:{$and:[{phone:{$eq:userPhone}},// 核心：手机号匹配{status:{$eq:'1'}}// 可选：状态必须正常]}},pageSize:1}});// 3. 发放工牌if(result.records&&result.records.length>0){// 找到了，赋值给全局变量$w.app.dataset.state.currentEmp=result.records[0];}else{// 没找到$w.utils.showToast({title:"非内部员工，禁止访问",icon:"error",duration:2000});}}catch(err){console.error("核验失败",err);$w.utils.showToast({title:"系统异常",icon:"error"});}}

2.3. 页面加载时验票

选中页面组件，在页面加载时调用我们的方法

2.4.页面路由

得到身份后，我们点击对应的卡片就要跳转到具体的页面，新建一个javascript方法

exportdefaultfunction({event, data}){const{role, pageId}=data.target;// 传入角色和目标页面ID const currentEmp=$w.app.dataset.state.currentEmp;// 全局工牌信息if(currentEmp&&currentEmp.role===role){// 角色匹配，跳转到对应页面$w.utils.navigateTo({pageId});}else{// 不匹配，提示无权限$w.utils.showToast({title:'无权限访问', icon:'error', duration:2000});}}

给销售卡片的点击按钮绑定点击事件，传入对应的参数

({role:"2",pageId:"u_xiao_shou_gong_zuo_"})

2.5.搭建销售工作台

点击创建页面的图标，创建销售的工作台

切换到页面布局，新建一个销售的布局

将我们刚才创建的页面的布局改为销售工作台布局

🚀 总体效果

访问统一办公门户

点击销售卡片的进入，跳转到销售的工作台

🌟 总结与预告

本讲我们完成了从“游客”到“正规军”的身份转变，并搭建了统一办公门户。

现在，不同的角色都有了各自的工作台，就可以各司其职了。

下一讲：《销售闭环——打造“我的线索”》。

顺便插播一个小请求：我正在参加 CSDN 2025 博客之星评选，如果这些实战文章对你有帮助，欢迎花 10 秒钟帮我投一票：

👉 帮我投票

你的支持，是我持续更新这一整套《教培管家》实战教程的最大动力 🙏