主题
药品订单与云函数（二）
本页对应 药品订单与云函数，共 8 段视频，约 59 分钟。
学习目标
- 能够完成药品订单详情页的数据渲染，包括实际支付金额、订单状态文字、药品列表、订单金额、运费、优惠券折扣等信息，并能根据订单状态值
11/12条件渲染待发货或待收货相关内容。 - 能够搭建药品订单列表页面模板与样式，并实现从首页快捷入口、我的页面等位置跳转到订单列表，以及从订单列表携带订单 ID 跳转到订单详情。
- 能够按页面壳与
order-list组件拆分问诊订单列表结构，正确配置分包路由、创建页面与组件文件、引入组件并应用样式。 - 能够实现问诊订单列表标签页切换交互：监听标签点击事件，更新当前索引与渲染标记，通过
v-if控制当前组件显示，通过渲染标记保证每个列表组件只加载一次并实现切换缓存。 - 能够封装并调用按类型获取问诊订单列表接口，正确传递
type、current、pageSize参数，并通过props将标签页类型传入列表组件。 - 能够处理问诊订单列表请求结果：校验响应状态、将分页数据追加到已有列表而不是直接覆盖，并按状态值映射“咨询中”等文字及对应样式类名完成列表渲染。
知识点
先明确本节要解决的问题
为什么需要：药品订单详情页要把后端返回的订单数据渲染出来，但讲义里原先准备了一套“状态码 → 状态文字”的映射数据，实际开发时发现后端已经返回了状态文字，前端再做映射就多此一举。
怎么想：先看接口返回里有没有可直接展示的字段；如果有，优先直接渲染，避免前端维护重复映射。转写稿里反复说“我想多了”，原因就是后端返回状态码的同时也给了文字。
怎么做：删除或不再使用原先准备的状态映射数据；在详情模板中直接取实际支付金额和状态文字字段。转写稿口述状态文字取值为 orderDetail.statusText.value，实际支付金额按项目字段名取。
易错点：不要看到状态码就条件反射写映射表；先确认接口是否已经返回展示文字。转写稿里的“违钢艺术/微杠瘦/触了”应分别理解为 v-if、v-show、true，不要被同音字带偏。
实际支付金额与状态文字的渲染
为什么需要：订单详情要展示用户实际支付了多少钱，以及当前订单处于什么状态，这是详情页最基础的信息。
怎么想：金额和状态文字都属于订单详情对象里的字段，不需要额外计算；状态文字既然后端给了，就直接绑定。
怎么做：找到详情模板中对应位置，先加上实际支付金额字段，再把状态文字绑定到 orderDetail.statusText.value 这类字段上。转写稿中说“复制、粘贴过来”，说明是在已有模板结构里补绑定，不是重写页面。
易错点：字段层级不要丢，比如 statusText 和 statusText.value 要按实际数据结构取；不要同时保留旧的映射逻辑，否则容易出现“映射文字”和“后端文字”不一致。
待发货与已发货的条件渲染
为什么需要：订单刚支付完是“待发货”，过几分钟后端会改成“已发货/待收货”。两种状态在详情页展示不同内容：待发货展示收货地址，已发货展示物流入口。
怎么想：用订单状态值做条件判断。转写稿明确：状态值等于 11 时是待发货，等于 12 时是待收货/已发货。
怎么做：在模板中用 v-if 判断 orderDetail.status === 11 展示收货地址区域；再用 v-if 判断等于 12 展示已发货/待收货区域。转写稿里还提到点击物流链接会跳到另一个页面，该页面后续会用地图。
易错点：不要把“已发货”和“待收货”当成两个完全不同的业务状态，转写稿说它们在这里是一个意思；条件值 11、12 要按接口约定写，不要凭感觉改。调试时把值改成 12 刷新，应能看到上方隐藏、下方显示。
药品列表与订单金额信息
为什么需要：详情页还要展示药品清单和费用信息，否则用户看不到买了什么、运费和优惠情况。
怎么想：药品列表字段是 medicine，转写稿说预付订单里已经渲染过一次，可以沿用遍历思路；订单信息里药品金额、运费、优惠券折扣都要展示。
怎么做：遍历 medicine 渲染药品项；订单信息区绑定药品金额、运费、优惠券折扣。转写稿明确运费是 0、优惠券折扣是 0，倒计时是 -1，并说倒计时这一节不用写。
易错点：不要把倒计时 -1 当成需要处理的业务倒计时；药品列表不要重复造新结构，参考已做过的预付订单渲染方式即可。物流信息 expressInfo 也要按转写稿放到对应位置，但本节重点是详情数据渲染。
调试过程与最终检查
为什么需要：状态切换和字段绑定很容易出现“页面没变化”或“字段取不到”的问题，需要按转写稿的调试思路验证。
怎么想：先确认接口返回字段，再改模板绑定；条件渲染则手动改状态值观察上下区域切换。
怎么做：转写稿中把状态值改成 12 后刷新，确认待发货区域不显示、已发货/待收货区域显示；再检查药品列表、运费、优惠券、物流信息是否都有对应数据。
易错点：调试时不要只看控制台，要同时看页面条件区域是否切换；字段名口述可能有同音偏差，以项目实际接口为准。本节没有额外配图，按转写稿保留已有模板与绑定位置即可。
先修正药品订单详情的状态文字
为什么需要：订单详情要显示“待支付、待发货”等状态文字。讲义里原先准备了一套“状态数字→文字”的映射数据，但实际没用上。
怎么想：先看后端返回。转写稿里后端返回状态码的同时，已经把状态文字一起返回了，所以前端不需要再维护映射。
怎么做：实际支付金额直接取详情里的金额字段；状态文字直接取 orderDetail.statusText（按项目实际字段为准），不再用自己定义的状态映射。
易错点：不要“想多了”自己补映射；先确认接口是否已返回展示文字。转写稿里还强调待发货/待收货要按状态值判断：口述为 11 是待发货，12 是待收货/已发货，用 v-if 切换展示内容。
html
<!-- 口述逻辑：状态 11 展示待发货内容，12 展示待收货/已发货链接 -->
<view v-if="orderDetail.status === 11">待发货内容/收货地址</view>
<view v-else-if="orderDetail.status === 12">待收货/已发货链接</view>药品订单列表模板怎么搭
为什么需要：药品订单除了支付、详情，还有订单列表。实际中不一点点写业务，只先把页面模板搭出来。
怎么想：模板是静态拼图，先把结构和样式粘进去，页面不报错，再考虑调接口、遍历列表。
怎么做：在 medicine/order-list 页面下加入模板和样式；列表数据后续调接口得到 orderList，模板里用 v-for 遍历。药品订单本身比较简单，转写稿说主要关注待发货、待收货，且待发货很快会变待收货，所以实际中不展开全部状态逻辑。
易错点：只粘模板不粘样式可能报错；页面路径、文件名要和分包配置一致；列表跳详情时必须带订单 ID，否则详情页取不到数据。
入口链接与页面可达性
为什么需要：页面搭好了必须能从首页和“我的”页面点进去。
怎么想：找现成入口：首页快速入口里的“药品订单”，以及“我的”里的全部订单、待付款、待收货等。
怎么做：在入口处补链接跳转；转写稿里演示了从首页点进订单列表，也检查了“我的”页面链接，发现漏加就补上。
易错点：链接漏加、文字没改（如“待收货”写成“代收货”）；只加一个入口导致另一个入口点不进去。
问诊订单列表：先组件后页面
为什么需要：问诊订单列表比药品列表复杂，后面要复用标签页和列表组件。
怎么想：转写稿纠正了顺序：先建组件，粘组件模板和样式；再建页面，页面里导入组件并使用。分包 pages 配置要先有页面文件，否则会报 not found。
怎么做：在问诊分包下建 order-list、order-detail 等页面；建组件目录和 order-list 组件；页面里导入组件，接收方式用 ref。
易错点：目录少一层、文件名写成 index 导致路径错；先改配置后建页面会报找不到；ref 被写成 reactive 或漏引入 ref，转写稿里就出现了“REF 怎么又丢了”的调试过程。
标签页切换与组件缓存
为什么需要：点不同标签要切换下面的列表组件，并且切换回来不要重复请求。
怎么想：标签组件点击时触发 click 事件，传出索引和标签数据；页面接收后改 typeIndex，并让 render 变 true。遍历 orderTypes 生成多个 order-list，用 v-show 只显示当前索引，用 v-if 保证组件首次只加载一次。
怎么做：口述逻辑整理如下：
js
const onOrderType = ({ index, type }) => {
typeIndex.value = index
render.value = true
}html
<order-list
v-for="(item, index) in orderTypes"
:key="item.label"
v-show="typeIndex === index"
v-if="render"
:type="item.type"
/>易错点：orderTypes、typeIndex 是 ref 时要加 .value；转写稿调试时就是点击不切换，最后发现 orderTypes.value 的 value 丢了。不要用 v-if 做来回显示，否则组件会反复卸载加载，缓存失效。
按类型获取问诊订单列表
为什么需要：不同标签对应不同订单类型，接口要按 type 取数。
怎么想：接口参数口述为 type、current、pageSize；type 为 1/2/3，分别对应问医生、急速问诊、开药问诊，正好和 orderTypes 里的 type 对应。
怎么做：页面切换标签时取当前 orderTypes[typeIndex].type，传给组件；组件用 props 接收 type，默认值可为 1；调用接口时传对象参数：
js
getOrderList({
type: props.type,
current: current.value,
pageSize: pageSize.value
})易错点：不要把标签索引当成接口 type；props 要声明并接收；接口成功判断按项目约定，转写稿里是 code !== 0 时提示 message。
分页数据必须追加
为什么需要：分页加载时第一次 5 条，第二次应变成 10 条，不能只剩第二次的 5 条。
怎么想：不能直接 list.value = data.rows，否则会覆盖旧数据。
怎么做：用展开运算符把新请求的数据追加到原数组；转写稿强调真正的列表数据在 data.rows 里，不是 data 本身。
易错点：直接赋值导致分页覆盖；ref 未引入或 .value 丢失；状态文字和类名不要自己猜，按转写稿说的状态值 1/2/3/4 对照表格处理。
从模板搭建开始：先页面壳，再列表组件
为什么需要：问诊订单列表比药品订单列表更复杂，后面还要做分页、切换、缓存。如果一开始把页面和列表内容混在一起，后续交互会很难维护。怎么想：先把列表页做成“标签页壳”，真正的订单列表抽成 order-list 组件，页面只负责切换。怎么做：在问诊分包下建列表页和详情页；列表页保留标签页区域，下面使用 order-list 组件。转写稿里特别强调：先建组件、粘组件模板和样式，再建页面并引入组件。易错点：不要先把配置写进 pages.json 再建页面，否则会报页面 not found；组件路径不要多一层或少一层，转写稿中就出现过把页面模板粘到 components 下的情况。
模板“有点 bug”的修正：路径、文件名与组件顺序
为什么需要：本节标题写“有点 bug”，主要不是业务逻辑错，而是搭建顺序和路径容易乱。怎么想：先确认 order-list 是组件，index.vue 是页面；页面引入组件，组件内部再渲染列表。怎么做：按转写稿修正为：在 components 下建 order-list，模板和 style.scss 放组件里；页面 index.vue 只保留标签页和组件引入。易错点：样式文件名是 style.scss，不是 styles；引入组件后要用 ref 接收，转写稿里出现过 REF 未引入、reactive 改 ref、引号多写导致语法错误。调试时先看控制台报错，再检查路径和括号位置。
标签页交互：v-show 做切换，v-if 控制只加载一次
为什么需要：点击不同标签时，下面要显示不同订单列表；同时希望加载过的列表不要反复请求。怎么想：标签有几个，就遍历生成几个 order-list；用索引控制显示哪一个，用“是否渲染过”的标记控制组件只创建一次。怎么做：监听封装标签页组件的 click 事件，回调里更新 typeIndex 和 renderer；模板中遍历 orderTypes，用 v-show 根据索引显示，用 v-if 根据 renderer 控制加载。关键逻辑按转写稿可整理为：
js
function onOrderType({ index, item }) {
typeIndex.value = index
renderer.value[item.type] = true
}易错点：typeIndex 是 ref，读取和赋值不要丢 .value；转写稿调试时就是因为漏了 .value，点击后没有按预期切换。还要区分 v-show 和 v-if：前者切换显示，后者决定组件是否创建。
按类型获取问诊订单：type 从页面传到组件
为什么需要：接口需要知道当前取哪类问诊订单。怎么想：接口参数有 type、current、pageSize；type 为 1 是问医生，2 是急速问诊，3 是开药问诊。标签页数据里已经有对应 type，遍历时传给组件即可。怎么做：页面遍历 orderTypes 时把 item.type 传给 order-list；组件用 props 接收 type，请求时拼参数。易错点：不要在组件里凭空写死类型；props 要定义默认值；请求返回的列表在 data.rows，不是直接拿 data。
分页数据要追加，不要覆盖
为什么需要：上拉加载更多时，如果每次都覆盖列表，前面数据会消失。怎么想：第一次请求 5 条，第二次应变成 10 条，所以要把新数据追加到旧数组。怎么做：按转写稿用展开运算符追加：
js
const res = await getOrderList({
type: props.type,
current: current.value,
pageSize: pageSize.value
})
if (res.code !== 200) return
list.value = [...list.value, ...res.data.rows]易错点：不要写 list.value = res.data.rows；先判断接口成功码；current、pageSize 用 ref 管理，后续分页才好做加加操作。
状态文字与样式：按状态值映射
为什么需要：列表里会显示“咨询中”等状态文字，不同状态颜色不同。怎么想：按接口状态值 1、2、3、4 映射文字和类名，不要自己猜。怎么做：转写稿说状态值对应不同文字，颜色通过类名控制，并给了表格参考；渲染时按表格绑定。易错点：状态文字和类名要一起处理；调试时先看网络请求 type 是否分别为 1、2、3，再看切换后是否重复请求。组件里可临时在 mounted 打日志，验证“第一次加载一个组件，切换后只加载新组件，已加载过的不再重复加载”。
代码示例
示例 1：药品订单详情 —— 状态文字 / 金额 / 待发货与待收货的条件渲染
vue
<template>
<view class="order-detail">
<!-- 1. 状态文字：后端已经返回 statusValue，直接渲染，不要再自己做数字映射 -->
<view class="status-bar">{{ orderDetail.statusValue }}</view>
<!-- 2. 实际支付金额 -->
<view class="pay-amount">
实际支付：<text class="price">￥{{ orderDetail.actualPayment }}</text>
</view>
<!-- 3. 待发货(11)：展示收货地址 -->
<view v-if="orderDetail.status === 11" class="address-card">
<view class="title">收货地址</view>
<view class="info">{{ orderDetail.addressInfo }}</view>
</view>
<!-- 4. 待收货 / 已发货(12)：展示发货信息 + 物流跳转链接 -->
<view v-if="orderDetail.status === 12" class="express-card">
<view class="title">发货信息</view>
<view class="info">{{ orderDetail.expressInfo }}</view>
<navigator
class="link"
:url="`/subpkg/logistics/index?id=${orderDetail.id}`"
>
查看物流
</navigator>
</view>
<!-- 5. 药品列表：和预付订单页一样，遍历 medicine -->
<view class="medicine-list">
<view
v-for="item in orderDetail.medicine"
:key="item.id"
class="medicine-item"
>
<image :src="item.avatar" class="avatar" />
<view class="name">{{ item.name }}</view>
<view class="price">￥{{ item.price }}</view>
</view>
</view>
<!-- 6. 订单信息：药品金额 / 运费 / 优惠券折扣（倒计时字段为 -1，不用写） -->
<view class="order-info">
<view class="row"><text>药品金额</text><text>￥{{ orderDetail.medicineAmount }}</text></view>
<view class="row"><text>运费</text><text>￥{{ orderDetail.freight }}</text></view>
<view class="row"><text>优惠券折扣</text><text>￥{{ orderDetail.couponDiscount }}</text></view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
// 实际项目中由订单详情接口返回，字段名与后端保持一致
const orderDetail = ref({
id: '1001',
status: 11, // 11 待发货 / 12 待收货（已发货）
statusValue: '待发货', // 后端直接返回的文字，直接用
actualPayment: '128.00',
expressInfo: '',
addressInfo: '北京市海淀区……',
medicine: [
{ id: 1, name: '感冒灵颗粒', avatar: '/static/1.png', price: '32.00' }
],
medicineAmount: '128.00',
freight: 0,
couponDiscount: 0
})
</script>要点与易错点：
- 状态文字不要自己映射：原本写了一张“状态数字 → 文字”的对照表，后来发现后端连
statusValue文字一起返回了，那张表纯属“想多了”，直接渲染orderDetail.statusValue即可。 - 金额用
actualPayment：这是“实际支付的金额”字段，别写成商品总价。 - 11 / 12 的条件判断是本节重点：订单支付完后是
11（待发货，展示收货地址）；后端过 3 分钟自动改成12（待收货/已发货，展示物流链接）。刷新页面就会切到另一套 UI，所以两个分支都要写。 - 易错：
v-if="orderDetail.status === 11"里的 11 是数字，别写成字符串'11'，否则永远为 false。 - 易错：模板里访问
orderDetail.xxx时不用写.value（Vue 自动解包），但在<script>里赋值时必须写orderDetail.value.xxx。 - 倒计时字段接口返回
-1，本页不用实现倒计时。
示例 2：问诊订单列表页 —— 标签页切换 + 组件缓存（v-if + v-show）
vue
<template>
<view class="order-list-page">
<!-- 封装的标签页组件，点击时触发 click 事件，回传 { index, type, label ... } -->
<tabs :list="orderTypes" @click="onOrderType" />
<!-- 有几个标签页，就渲染几个 order-list 组件 -->
<view v-for="(item, index) in orderTypes" :key="item.label">
<order-list
v-if="render"
v-show="typeIndex === index"
:type="item.type"
/>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import tabs from '@/components/tabs/tabs.vue'
import orderList from './components/order-list.vue'
// type 值与接口文档一致：1 问医生 / 2 急速问诊 / 3 开药问诊
const orderTypes = ref([
{ label: '问医生', type: 1 },
{ label: '急速问诊', type: 2 },
{ label: '开药问诊', type: 3 }
])
const typeIndex = ref(0) // 当前选中的标签索引，决定显示哪个组件
const render = ref(false) // 是否已经渲染过，配合 v-if 实现“只加载一次”
const onOrderType = (e) => {
console.log(e) // 先打印看看标签页回传了什么（index + 标签本身）
typeIndex.value = e.index // 切换显示
render.value = true // 只要点过一次，v-if 永远为 true，组件不再销毁重建
}
</script>要点与易错点：
- 为什么要 v-for：标签页有几个，下面的列表就应该有几个组件，遍历
orderTypes才能生成 3 个order-list。 - v-show 负责切换：
v-show="typeIndex === index"，索引变了就换一个组件显示，保证同一时刻只有一个可见。 - v-if 负责缓存：uni-app 里不支持
keep-alive，所以用v-if="render"让组件只创建一次；之后再切换靠v-show隐藏，切回来不会重复请求接口。这是可以在简历里写的点。 - 易错（当场踩的坑）：
orderTypes.value的.value不能丢，typeIndex.value = e.index的.value也不能丢，丢了就不生效、切不动。 - 易错：组件导入路径要写对，
./components/order-list.vue前面的点、引号都别写错（视频里出现过“多了一个点”“引号写错”的语法错误）。 - 易错：
pages.json里要先建好页面再改配置，顺序反了会报not found，改完记得重启。
示例 3：order-list 组件 —— 按类型取数据 + 分页追加 + 跳详情带 id
vue
<template>
<view class="order-list">
<view
v-for="item in list"
:key="item.id"
class="order-item"
@click="toDetail(item.id)"
>
<view class="head">
<text>{{ item.depName }}</text>
<!-- 状态文字 / 类名按讲义表格映射：status 为 1、2、3、4 时各不相同 -->
<text :class="['status', statusClass[item.status]]">
{{ statusText[item.status] }}
</text>
</view>
<view class="body">{{ item.docInfo?.name }}</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getOrderList } from '@/services/consult'
// 接收页面传进来的订单类型
const props = defineProps({
type: {
type: Number,
default: 1
}
})
const list = ref([])
const current = ref(1) // 页码，做分页时要 ++
const pageSize = ref(5) // 每页条数
// 按讲义表格补全：不同状态对应不同文字与不同颜色的类名
const statusText = { 1: '咨询中' }
const statusClass = { 1: 'primary' }
const getList = async () => {
const res = await getOrderList({
type: props.type,
current: current.value,
pageSize: pageSize.value
})
if (res.code !== 10000) {
return uni.showToast({ title: res.message, icon: 'none' })
}
// 关键：追加，而不是直接赋值覆盖
list.value = [...list.value, ...res.data.rows]
}
// 点订单跳详情，必须把订单 id 带上
const toDetail = (id) => {
uni.navigateTo({ url: `/subpkg/order/detail?id=${id}` })
}
onMounted(() => {
getList()
})
</script>要点与易错点：
- 接口三个参数一个都不能少：
type（1/2/3 与接口文档严格对应）、current（页码）、pageSize（每页条数）。type从父组件通过defineProps接收，模板里用props.type。 - 数据必须追加：
list.value = [...list.value, ...res.data.rows]。如果写成list.value = res.data.rows，第一页 5 条、第二页 5 条，新数据会把旧数据整个覆盖掉，分页就永远只能看到最后一页。 - 真正的列表在
res.data.rows：不是res.data本身。 - 页码要用 ref：
current、pageSize定义成ref，后面做上拉加载时才能current.value++；直接写死数字（1、5）只是临时测试。 - 跳详情必须带 id：详情页靠 id 才能取到数据，
url里拼?id=，漏了详情页就是空白。 - 易错：
import { ref, onMounted } from 'vue'别忘了引ref（视频里就是因为漏引ref报错，称“弱智的错误”）。
常见错误
1. 手写“状态码 → 状态文字”映射表
- 现象：模板里渲染出一串数字或空白，自己维护的 map 和实际状态对不上，还得反复补分支。
- 原因：没先看接口返回体，默认后端只给数字状态码；实际接口已同时返回了状态文字字段。
- 修法：删掉自建映射，状态文字直接绑后端返回的字段，金额同理直接绑实际支付金额字段。
2. 点标签页底下组件不切换
- 现象：控制台能看到点击事件已触发、参数也打印出来了，但当前索引没变，视图不动。
- 原因：索引是
ref定义的，赋值/读取时漏了.value，等于给 ref 对象挂了个属性，模板读到的还是旧值。 - 修法：凡是改
typeIndex、current、list这类 ref，一律带.value；点击回调里先解构出index再赋值。
3. 组件被重复加载 / 想用 keep-alive 缓存
- 现象：来回点标签页，组件反复 mounted，每次都重新发请求；或者写了
keep-alive完全不生效。 - 原因：只用了
v-if按索引切换，切走即销毁；uni-app 不支持keep-alive。 - 修法：
v-show按索引控制显隐 + 每个组件挂一个“是否已渲染”标记，首次点击时置 true 并配v-if，保证每个组件只创建一次。
4. 分包页面 not found / 编译报错
- 现象：
pages.json配好就报某两个页面 not found，或模板里组件引入报语法错误。 - 原因：先加配置后建文件；或引入路径多写了一个点、层级写错（把组件路径写成页面路径）。
- 修法：先建目录和
.vue文件、再补pages.json配置；改完配置重启一次服务；引入语句对照实际目录逐层核对。
5. 分页时列表被覆盖
- 现象：上拉加载后列表只剩最新一页的 5 条，之前的没了。
- 原因：拿到响应直接
list.value = res.data.rows赋值。 - 修法：改成展开追加
list.value = [...list.value, ...res.data.rows]；同时注意真实列表在data.rows里，不在data本身。
6. 详情页拿不到数据
- 现象：从列表点进详情，页面空白或报错。
- 原因：跳转时没带订单 id，详情页请求参数为空。
- 修法：列表项跳转统一拼上订单 id 参数，跳转前在控制台确认 URL 上带上了 id。
7. 接口 type 参数写死
- 现象：三个标签页请求回来的数据永远一样。
- 原因：调接口时 type 直接写常量 1，没从当前标签页取。
- 修法：在标签页切换时按索引取出对应 type，通过 props 传给列表组件，组件内用 props 值拼参数。
练习
把药品订单详情页的状态区改造一遍：先打印一次接口返回，确认状态文字与金额字段名，再删掉模板里多余的映射逻辑，用条件判断（11 / 12）分别渲染收货地址区与物流查询链接，刷新页面验证 3 分钟后状态自动翻转时两块区域能正确切换。
按“先建文件、再改配置”的顺序，把问诊订单的列表页与详情页挂到分包下，运行后确认控制台无 not found；再故意把配置里的路径写错一层，观察报错信息长什么样，然后改回。
在问诊订单列表组件里加一段临时日志（mounted 打印一次），然后：a) 三个标签页各点一次，记录组件创建次数；b) 再回到第一个标签页，确认没有新增创建记录；c) 把渲染标记那行的
.value去掉，重跑一遍，描述现象并改回。给列表接上分页：定义
current与pageSize，首次请求 5 条，再手动触发一次加载，用控制台确认数组长度变成 10 且前 5 条仍在；然后故意改回覆盖式赋值，对比两种写法的数组长度。完成问诊订单列表的数据渲染，重点处理状态列：按接口文档的状态值与类名对照表分别渲染“咨询中”等文字和对应颜色，逐个状态造数据验证四种样式都正确。
课堂画面
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 优医咨询-药品订单详情数据渲染 | 06:10 |
| 2 | 优医咨询-药品订单列表模板 | 05:34 |
| 3 | 优医咨询-问诊订单列表模板（有点bug） | 07:06 |
| 4 | 优医咨询-问诊订单列表模板（修正） | 06:28 |
| 5 | 优医咨询-问诊订单列表组件交互分析 | 03:56 |
| 6 | 优医咨询-问诊订单列表组件交互实现 | 12:32 |
| 7 | 优医咨询-按类型获取问诊订单-1 | 10:00 |
| 8 | 优医咨询-按类型获取问诊订单列表-2 | 07:24 |
小结
- 动手前先看接口返回体，后端给了什么就直接用什么，别急着在前端补映射。
- 订单详情页的核心分支是“待发货 → 展示收货地址”和“已发货 → 展示物流入口”，用状态值判断，别用文案判断。
- 页面与组件要分清：页面负责取 type 并传参，组件负责发请求、渲染列表，职责别混。
- ref 变量一律带
.value，这是本节最高频的翻车点，写完先自查一遍。 - uni-app 没有 keep-alive，缓存只能靠
v-show+ “已渲染”标记这套组合拳。 - 分页必须追加不能覆盖，且要认准
data.rows才是真正的列表数据。 - 分包加页面牢记顺序：先建文件、后写配置、再重启；路径和引号多看一眼。
- 列表到详情的跳转必须带 id，否则详情页无从取数。