主题
首页列表与云开发环境（三）
本页对应 首页列表与云开发环境，共 6 段视频，约 57 分钟。
学习目标
- 能独立实现“关注医生”交互：监听未关注按钮点击、调用关注接口并传递医生
id与默认type，成功后更新对应项的关注状态与按钮文案/样式。 - 能按问诊业务创建
subpkg_consult分包及quickly、department等页面文件，并在pages.json中正确注册分包与页面路径。 - 能完成极速问诊参数传递：通过路由
query传递并接收type、医院类型参数，且在页面跳转时动态拼接参数而非写死。 - 能封装问诊科室接口并在一级科室页面加载时请求、接收和渲染一级科室列表。
- 能实现一级科室 Tab 切换高亮：定义当前索引，结合
:class与点击事件切换active状态。 - 能使用计算属性根据当前一级科室索引获取对应二级科室列表，并通过可选链处理初始空数组导致的取值异常。
知识点
功能目标与整体思路
关注医生这一节要实现的效果很直观：医生列表里有一个“关注”按钮，点击后调用后端接口，把这位医生关注上；接口成功后，按钮文字和样式要变成“已关注”。转写稿把思路拆成三步：第一，监听点击事件；第二，调用关注接口；第三，改变按钮文字和状态。
这里的关键不是“点一下变个文字”，而是要把“用户操作、服务端数据、页面状态”串起来。为什么需要先分析再写？因为如果直接改文字，刷新后状态就丢了；如果只调接口不改页面，用户会以为没成功。怎么想？先明确点击发生在哪个按钮上，再明确接口需要什么参数，最后明确成功后改哪个数据。怎么做？先封装接口，再绑事件，再处理返回结果。易错点是：已经关注过的医生不应再次关注，所以点击事件不能同时绑在“已关注”和“未关注”两个按钮上。
先封装关注医生接口
关注医生仍然属于医生相关业务，所以转写稿把它放到 doctor.js 中封装。接口要求用 POST 方式，参数有两个：type 和 id。id 用来区分关注的是哪位医生；type 用来区分关注的是医生、疾病还是文章。当前关注医生，所以 type 取 DOC。
为什么要把 type 做成默认值？因为当前业务固定关注医生，调用时不必每次都传；而 id 是必传的，没有它接口就不知道关注谁。怎么想？把必传参数放前面，把有默认值的参数放后面。怎么做？可以按转写稿整理成下面的关键代码：
js
// doctor.js
import http from '@/utils/http'
export const followDoctor = (id, type = 'DOC') => {
return http.post('/like', {
id,
type
})
}易错点有两个：一是 POST 参数要放在请求体对象里；二是不要把 type 和 id 的顺序写反后还漏传 id。转写稿调试时就出现过“请求发出去了，但提示 ID 必传”的问题，原因就是只传了 type，没有把医生的 id 传进去。
点击事件只绑定未关注按钮
页面里根据 item.flag 判断状态：flag === 1 表示已关注，显示“已关注”；否则表示未关注，显示“关注”。为什么点击事件只绑未关注按钮？因为已经关注了再点“关注”没有业务意义。怎么想？把 @click 放在未关注按钮上，已关注按钮只展示状态。怎么做？可以写成：
html
<button v-if="item.flag === 1" class="follow">已关注</button>
<button v-else @click="handleFollow(item)">关注</button>易错点是事件绑错位置：如果两个按钮都绑，已关注状态仍可能重复调接口。转写稿特别强调“已经关注的无需再关注”，所以监听要写到下面那个未关注按钮上。
调用接口与错误处理
点击后要调用刚封装的 followDoctor。这里要注意：页面方法接收的是整个 item，不是只接收 id。为什么？因为接口需要 item.id，而成功后还要修改 item.flag，只传 id 就改不了当前这条数据的状态。怎么想？一个参数同时服务“调接口”和“改状态”。怎么做？
js
const handleFollow = async (item) => {
const { code, data, message } = await followDoctor(item.id)
if (code !== 10000) {
// 给用户提示，后面不再执行
return
}
item.flag = 1
}易错点：调用接口时写成 followDoctor(item)，导致后端拿不到 id；或者只传 item.id，成功后无法修改列表项状态。转写稿调试时先看 Network 请求有没有发出，再看参数里有没有 id，这是很实用的排查顺序。
成功后切换关注状态
接口成功后，把 item.flag 改成 1。为什么改 flag 就能切换？因为模板里用 v-if/v-else 根据 flag 决定显示哪个按钮。怎么想？不要直接操作 DOM 改文字，而是改数据，让模板重新渲染。怎么做？item.flag = 1 后，未关注按钮隐藏，已关注按钮显示。转写稿还提到已关注按钮要加 follow 类名，否则样式不对。易错点是：只改文字不加类名，视觉状态不完整；或者改错字段名，例如把 flag 写成别的名字。
调试过程与易错点复盘
转写稿中的调试过程很值得复盘：点击后先确认请求是否发出；发现接口报错，检查参数发现漏了医生 id；补上 item.id 后请求正常；再看页面状态是否变化；最后补上已关注按钮的类名。这个顺序就是“先请求、再参数、再状态、再样式”。易错点总结：已关注按钮不要绑点击；接口 type 默认 DOC；id 必须传；方法要接收整个 item；成功判断 code；成功后改 item.flag = 1；样式类名别漏。按这个思路写，关注医生功能就能稳定完成。
（本节笔记未附图片与完整代码，以下按转写稿整理；不擅自补写未出现的图片和代码，只保留转写稿明确出现的关键标识。）
一、关注医生：点击、接口、状态三步
为什么需要：关注医生不是只改按钮文字，还要让服务端记录关注关系；同时已关注后不应再次关注，否则会重复请求。
怎么想：转写稿把流程拆成“监听点击→调用接口→改变文字/状态”。真正决定页面显示的是 likeFlag：为 1 显示“已关注”，否则显示“关注”。因此点击事件只应绑在“未关注”的按钮上。
怎么做：在 doctor.js 中封装关注接口，按文档用 POST，参数为 id 和 type；type 可默认 DOC，表示关注医生，id 传当前医生 ID。页面点击时把整个 item 传给方法，await 后解构 code/date/message；code !== 10000 提示 message 并返回；成功后执行 item.likeFlag = 1，并补上 follow 等样式类名。
易错点：监听错按钮；只传列表不传 item，导致改不到当前项；忘记传 doctor.id，接口报 ID 必传；字段 likeFlag 拼错；只改数据忘加类名。调试时先看请求有没有发出，再看请求参数是否完整，最后看 likeFlag 是否变化。
二、问诊分包与页面模板
为什么需要：急速问诊是新模块，放进独立分包可避免主包过大，也让页面路径更清晰。
怎么想：转写稿新建 subpkg_consult 分包，下面放 quickly、department、description、patient 等页面；每个页面一个文件夹，内含 index.vue 与 index.scss。页面路径必须和模板里的跳转链接一致。
怎么做：先建目录和文件，再在 pages.json 的 subPackages 数组里增加分包配置。转写稿建议从已有分包配置复制，粘到数组合适位置并补逗号；首页“急速问诊”链接指向 quickly 页面，确认能跳转后再粘静态模板和样式。
易错点：分包名、页面名与链接不一致会跳不过去；配置粘错层级或漏逗号；页面未保存导致看不到效果；模板代码未保存时页面仍显示空白。转写稿中的“急素问诊”应理解为“急速问诊”，“科适/课室”应理解为“科室”。
三、问诊类型与医院类型参数传递
为什么需要：后续页面要知道用户来自“急速问诊”还是“问医生”，还要知道选的是三甲还是普通门诊。
怎么想：转写稿明确 type=2 表示急速问诊；医院类型参数取 1 表示三甲、0 表示普通（具体参数名以接口文档/代码为准，转写稿未清晰读出）。quickly 页不能把 type 写死为 2，而应接收上一页传来的 type 再拼到 department 链接上。
怎么做：首页急速问诊链接加 ?type=2；quickly 页通过 props 定义 type: String，两个入口分别拼医院类型 1 和 0，并用模板字符串把 props.type 拼进去。
易错点：只给第一页传 type，跳到 department 时丢了；把 type 写死成 2，将来问医生无法复用；参数名拼错；拼接时忘加表达式冒号。调试时看地址栏参数：三甲应为医院类型 1，普通为 0，同时 type 仍为 2。
四、一级科室与 tab 切换
为什么需要：进入选择科室页要展示一级科室，点击后高亮当前项，并据此切换二级科室。
怎么想：页面加载先调一级科室接口；接口只需登录态，不需要额外参数。高亮只允许一个，所以用 typeIndex 记录当前索引，初始为 0；类名 active 由 typeIndex === index 决定。
怎么做：在 consult.js 中封装 GET 科室列表接口；页面 await 调用，解构 code/date/message，失败提示并返回；成功把 date 赋给 ref([]) 的 departmentList；v-for 渲染，点击传 index，执行 typeIndex.value = index。
易错点：请求成功但没存到 ref；类名写死导致全部高亮；索引变量名拼错；失败后未 return；数据没出来先怀疑接口，实际是页面没保存或调试插件卡顿，刷新后确认 departmentList 有 29 条数据。
五、二级科室与可选链
为什么需要：二级科室数据在每项一级科室的 child 中，点击一级后要显示对应二级。
怎么想：转写稿选择“一次请求取完一级和二级”的方案，优点是请求少，缺点是数据量大、更新不及时；若接口分开提供，也可点击时再请求。当前接口已返回 child，所以用计算属性根据 typeIndex 取 departmentList.value[typeIndex].child。
怎么做：定义 computed 的 childDepartmentList，用 departmentList.value[typeIndex]?.child 取数据；页面 v-for 渲染二级科室。
易错点：初始 departmentList 是空数组，直接访问 [0].child 会报 undefined 的 child 读取错误；转写稿中的“安例范德/氨基范德”应纠正为 undefined，“跳的/叉的”应纠正为 child。加可选链 ?. 后，刷新页面不再报错，切换一级科室时二级列表随之变化。
一、先看清业务线：极速问诊为什么要传参数
为什么需要：首页有“问医生、极速问诊、开药门诊”等入口，进入后续页面后，程序必须知道用户到底选的是哪一种；到了极速问诊页，还要继续区分“三甲”和“普通门诊”。这些信息不能靠页面猜，必须通过地址参数带过去。
怎么想：转写稿里接口约定：type=2 表示极速问诊；另一个参数值为 1 表示三甲，0 表示普通。注意，第二个参数名转写稿没有读出，实际开发必须从接口文档复制，不能自己编。
怎么做：先建好 subpkg_consult 分包，以及 quickly、department 等页面模板；跳转时在 URL 后拼 query 参数。分包名和页面路径要与模板一致，否则链接跳不过去。
易错点：参数名、分包名、页面路径都不能凭感觉写；模板里写的是 quickly，就不要写成 quick。
二、首页入口：先把 type=2 传进 quickly 页面
为什么需要：用户点“极速问诊”时，要明确告诉后续页面“我选的是极速问诊”，否则后面无法区分问医生、开药门诊。
怎么想：最直接的方式是在跳转地址后加 ?type=2。转写稿中保存后地址栏能看到 2 被带过去，说明参数已经进入 URL。
怎么做：
text
/subpkg_consult/quickly/index?type=2把首页“极速问诊”的跳转地址改成上面这样。将来“问医生”可传 type=1，“开药门诊”可传 type=3，但当前只实现极速问诊。
易错点：不要只写路径不写参数；问号、参数名、等号、值要完整；参数名大小写要与接口一致。
三、quickly 页面：用 props 接住 type
为什么需要：首页把 type=2 传过来后，quickly 页面要读出来，并在跳科室页时继续往下传，否则参数会在页面切换时丢失。
怎么想：地址参数有两种常见取法：onLoad 生命周期里取，或用自定义属性 props 接收。转写稿选择 props，因为模板里使用更方便。
怎么做：按项目实际写法声明 type 为 String，核心代码类似：
js
const props = defineProps({
type: String
})模板里用 ${props.type} 拼接地址。注意 props 名和 query 参数名要一致。
易错点：参数名写成 types、Type 都接不到；类型写 String 而不是 sringing；不要把 props.type 写成未定义变量。
四、跳转科室页：type 要继续拼，不能丢
为什么需要：从 quickly 跳到 department 时，如果只传“三甲/普通”，type 就丢了，到了科室页就不知道用户是极速问诊还是问医生。
怎么想：两个入口——三甲、普通——都要拼两个参数：type=${props.type} 和医院类型 1/0。转写稿中第二个参数名未读出，下面用 xxx 占位，实际必须按接口文档复制。
怎么做：
text
`/subpkg_consult/department/index?type=${props.type}&xxx=1`
`/subpkg_consult/department/index?type=${props.type}&xxx=0`把这两个字符串分别放到“三甲”和“普通”的跳转链接上。调试时看地址栏：点三甲应出现 type=2&xxx=1，点普通应出现 type=2&xxx=0。
易错点：只给一个链接加参数；第二个参数名自己编；& 写成 ?；拼接时漏掉反引号或 ${}。
五、调试与重构：不要把 type 写死成 2
为什么需要：转写稿先写死 type=2 验证跳转，但这样将来问医生、开药门诊就无法复用。写死只能支持极速问诊。
怎么想：先写死验证链路，再把写死的 2 替换成 props.type。这样首页传 2 就是极速问诊，传 1 就是问医生，页面逻辑不用改。
怎么做：调试顺序是：点首页极速问诊 → 看 URL 是否有 type=2 → 点三甲/普通 → 看 department 地址是否同时有 type 和医院类型 → 最后把写死的值改成 ${props.type}。
易错点：只改一个链接；改完不重新编译；参数名与接口文档不一致；把“医院类型参数”误当成 type。
六、延伸到科室列表的提醒
参数传到 department 后，页面加载时取一级科室；点击一级科室再展示对应二级科室。转写稿提到二级数据可能放在一级数据的 child 里，也可能点击时单独请求，取决于接口。若用计算属性按索引取 child，初始列表为空数组时直接取第 0 项会得到 undefined，要加可选链 ?. 规避报错。这个错误是后续实现科室列表时的调试点，不是参数传递本身，但说明参数到达页面后还要继续驱动数据逻辑。
代码示例
示例 1：关注医生（接口封装 + 组件内点击关注）
services/doctor.js
js
import http from '@/utils/http'
/**
* 关注操作（通用接口：既能关注医生，也能关注疾病/文章）
* @param {String} id 要关注的医生 id（必传）
* @param {String} type 关注类型，默认 'doc' 表示关注医生（可选，放后面给默认值）
*/
export const followDoctorAPI = (id, type = 'doc') => {
return http.post('/patient/favorite', { id, type })
}components/doctor-list/doctor-list.vue
vue
<template>
<view class="doctor-list">
<view class="doctor-item" v-for="item in list" :key="item.id">
<view class="info">
<view class="name">{{ item.name }}</view>
<view class="title">{{ item.title }}</view>
</view>
<!-- 已关注：只展示文字，不再监听点击（无需重复关注） -->
<view v-if="item.likeFlag === 1" class="btn follow">已关注</view>
<!-- 未关注：监听点击，传整个 item 过去 -->
<view v-else class="btn" @click="onFollow(item)">+ 关注</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { followDoctorAPI } from '@/services/doctor'
const list = ref([])
// 点击关注：调接口 -> 判断 code -> 改状态
const onFollow = async (doctor) => {
const { code, message } = await followDoctorAPI(doctor.id)
if (code !== 10000) {
// 失败提示，后面不再执行
return uni.showToast({ title: message, icon: 'none' })
}
// 关键：拿到的是整个 item，直接改它的 likeFlag，页面由 v-if 自动切换
doctor.likeFlag = 1
}
</script>
<style lang="scss">
.doctor-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx;
}
.btn {
padding: 8rpx 24rpx;
border: 1rpx solid #16c2a3;
border-radius: 32rpx;
color: #16c2a3;
font-size: 26rpx;
// 已关注状态：样式类名 follow 一定要加上
&.follow {
color: #999;
border-color: #ddd;
}
}
</style>要点解释
followDoctorAPI(id, type = 'doc')：必传的id写在前面，可选的type放后面并给默认值，调用时就能少传一个参数。- 文档里
type是通用关注接口的类型标识，关注医生传'doc'；id就是被关注医生的 id。 - 事件只绑在“未关注”的那个按钮上：已关注的无需再关注，绑在上面是错的。
- 成功后不是重新请求列表，而是
doctor.likeFlag = 1，因为传进来的是整个item，改完v-if自动让“已关注”显示出来。 - 易错点：① 忘记传
doctor.id，接口报“id 必传”；② 忘记给已关注按钮加follow类名，文字变了样式没变；③ 只传id不传item，回来就改不了状态。
示例 2：极速问诊分包与参数传递（type 必须动态拼接）
pages.json（新增分包，注意与已有分包平级、逗号别漏）
json
{
"subPackages": [
{
"root": "subpkg_consult",
"pages": [
{ "path": "quickly/index", "style": { "navigationBarTitleText": "极速问诊" } },
{ "path": "department/index", "style": { "navigationBarTitleText": "选择科室" } },
{ "path": "description/index", "style": { "navigationBarTitleText": "病情描述" } },
{ "path": "patient/index", "style": { "navigationBarTitleText": "选择患者" } }
]
}
]
}pages/index/index.vue（首页：点极速问诊带 type=2）
vue
<template>
<view class="home">
<!-- 问医生：type=1；急速问诊：type=2；开药门诊：type=3 -->
<navigator url="/subpkg_consult/quickly/index?type=2" class="entry">
<text>急速问诊</text>
</navigator>
</view>
</template>subpkg_consult/quickly/index.vue（接收 type，再动态拼给下一页）
vue
<template>
<view class="quickly">
<!-- 三甲：参数值 1；普通：参数值 0 -->
<navigator :url="`/subpkg_consult/department/index?type=${type}&illnessType=1`">
<view class="item">三甲门诊</view>
</navigator>
<navigator :url="`/subpkg_consult/department/index?type=${type}&illnessType=0`">
<view class="item">普通门诊</view>
</navigator>
</view>
</template>
<script setup>
// 页面通过 props 接收地址栏参数，属性名必须和参数名一致
defineProps({
type: {
type: String,
default: '2' // 默认极速问诊
}
})
</script>subpkg_consult/department/index.vue（接收两个参数）
vue
<template>
<view class="department">
<view>当前问诊类型 type：{{ type }}</view>
<view>医院级别 illnessType：{{ illnessType }}</view>
</view>
</template>
<script setup>
defineProps({
type: { type: String, default: '2' },
illnessType: { type: String, default: '0' }
})
</script>要点解释
- 分包
root名和页面路径必须和链接里写的一致，否则点了跳不过去。 - 首页链接里
?type=2告诉下一页“我选的是急速问诊”；下一层再往下跳时必须继续把type拼上，否则参数会丢，后面就分不清是问医生还是急速问诊。 - 关键一行是
:url="`...?type=${type}&illnessType=1`"：type用变量拼，不能写死成 2。写死后将来接入“问医生（type=1）”“开药门诊（type=3）”时逻辑就得重写。 - 因为是模板字符串拼接，
url前必须加:变表达式，并注意反引号配对。 - 用
defineProps接收参数，属性名 = 地址栏参数名；illnessType的参数名以接口文档为准，1 = 三甲、0 = 普通。
示例 3：一级科室列表 + tab 高亮 + 二级科室（计算属性 + 可选链）
services/consult.js
js
import http from '@/utils/http'
// 获取科室列表（无需额外参数，登录态由请求拦截器带上）
export const departmentListAPI = () => {
return http.get('/dep/department/list')
}subpkg_consult/department/index.vue
vue
<template>
<view class="department">
<!-- 左侧一级科室：点谁谁高亮 -->
<scroll-view scroll-y class="left">
<view
v-for="(item, index) in departmentList"
:key="item.id"
class="left-item"
:class="{ active: typeIndex === index }"
@click="onClickDepartment(index)"
>
{{ item.name }}
</view>
</scroll-view>
<!-- 右侧二级科室：来自计算属性 -->
<scroll-view scroll-y class="right">
<navigator
v-for="item in childDepartmentList"
:key="item.id"
class="right-item"
>
{{ item.name }}
</navigator>
</scroll-view>
</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { departmentListAPI } from '@/services/consult'
// 一级科室数据
const departmentList = ref([])
// 当前高亮（选中）的科室索引，默认第 0 个
const typeIndex = ref(0)
// 二级科室：根据高亮索引，从一级科室的 child 里取
const childDepartmentList = computed(() => {
// 可选链：初始 departmentList 为空数组，[0] 是 undefined，直接 .child 会报错
return departmentList.value[typeIndex.value]?.child || []
})
// 页面加载即取一级科室（接口已把 child 一起返回）
const getDepartmentList = async () => {
const { code, data, message } = await departmentListAPI()
if (code !== 10000) {
return uni.showToast({ title: message, icon: 'none' })
}
departmentList.value = data
}
// 点击一级科室：只改索引，高亮和右侧二级科室都会自动更新
const onClickDepartment = (index) => {
typeIndex.value = index
}
onMounted(() => {
getDepartmentList()
})
</script>
<style lang="scss">
.department {
display: flex;
height: 100vh;
}
.left {
width: 200rpx;
background: #f7f8fa;
.left-item {
padding: 30rpx 20rpx;
font-size: 28rpx;
&.active {
background: #fff;
color: #16c2a3;
font-weight: bold;
}
}
}
.right {
flex: 1;
.right-item {
padding: 30rpx 20rpx;
font-size: 28rpx;
border-bottom: 1rpx solid #eee;
}
}
</style>要点解释
:class="{ active: typeIndex === index }"：高亮只能有一个，所以用索引对比，不能写死true。- 点击只做一件事：
typeIndex.value = index，高亮和右侧数据都跟着变，不要再去手动操作 DOM。 - 二级科室用
computed从一级科室的child里取，不用再发一次请求（接口一次性把一级和二级都给了）；如果后端单独提供二级接口，则改成点击时请求。 - 最大的坑：初始
departmentList是[]，[0]是undefined，再访问.child就会报“读取不到属性”。必须用?.可选链兜底|| []。 - 渲染列表时保留最后一个空元素是为了留出底部间距，不影响数据。
- 如果点击后页面不更新，先确认
typeIndex是否真的被改（是否漏了@click或方法名写错）。
常见错误
- 现象：关注按钮点击后请求发出但报缺少 ID；原因：调用关注接口时只传了
type或默认值，未传当前医生 ID；修法：从传入的item/doctor中取id一并提交。 - 现象：点击关注后文字/按钮状态不变；原因：接口成功后未修改当前项的关注标记，或修改的不是传入的
item；修法：点击时传整条item，成功后把该项flag改为已关注状态。 - 现象：已关注按钮仍可再次点击关注；原因：点击事件绑定到了已关注按钮，或未按
flag区分显示与监听；修法：只给未关注按钮绑定关注事件，已关注状态不再触发关注。 - 现象：从极速问诊跳到选择科室后，后续页面丢失问诊类型；原因：跳转时只传了医院类型参数，没有把
type继续拼到下一个链接；修法：每次跳转都保留并继续传递type。 - 现象：科室页刷新时报“读取 undefined 的属性 child”；原因：一级科室初始为空数组，
typeIndex初始为 0，直接取list[0].child；修法：取二级数据前加可选链或判空，等一级数据有值后再取。 - 现象：科室 tab 高亮不切换或多个同时高亮；原因：类名判断未使用当前索引，或点击后未更新高亮索引；修法：用当前索引与选中索引比较，点击时把选中索引改为所点项索引。
练习
- 完成关注医生功能：点击未关注按钮调用接口，成功后当前医生显示为已关注，并验证不会重复关注。
- 检查关注接口封装：确认
type有默认值、医生id必传，并说明参数顺序这样安排的原因。 - 从首页极速问诊进入选择科室页，补全跳转参数，确保医院类型和问诊类型都能传到后续页面。
- 实现一级科室列表渲染与点击高亮：默认第 1 项高亮，点击任意项后仅该项高亮。
- 实现二级科室展示：根据当前一级科室索引取对应二级数据，并处理首次加载空数组导致的报错。
课堂画面
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 优医咨询-关注医生 | 11:03 |
| 2 | 优医咨询-问诊分包及页面模板 | 06:36 |
| 3 | 优医咨询-极速问诊传递参数 | 14:28 |
| 4 | 优医咨询-一级科室列表 | 10:29 |
| 5 | 优医咨询-科室tab切换交互 | 05:02 |
| 6 | 优医咨询-二级科室列表 | 10:13 |
小结
- 关注医生不是只调接口，必须同时处理按钮状态和重复关注问题。
- 关注成功后要修改传入的当前项数据，不能只改局部变量。
- 分包页面路径和跳转参数要保持一致，否则页面能跳但业务参数会丢。
- 跨页面参数不要写死，应从上个页面动态取出并继续拼接传递。
- 科室列表的核心是“一级索引驱动二级数据”，高亮和二级展示都依赖当前索引。
- 初始空数据访问深层属性前必须判空，否则刷新时容易报运行时错误。
- 接口一次返回一级和二级，还是点击后再请求二级，取决于后端接口设计，不要脱离接口自定方案。