THE ORDER

isSupported ref响应变量 =》true 授权支持 | false 未授权不支持。copy 函数=》使用：copy(复制文本)=》copy方法会把传入的文本存储到系统粘贴板。copied ref响应变量 =》true 复制成功 | false 复制失败。父传子订单ID：子组件解构orderId失去响应式解决。目标：配置详情路由，分析组件结构，渲染详情数据。实现：使用useClipboard复制订单号。实现：封装可复用的支付抽屉组件。说明❓：api接口已定义。1）分析结构和路由配置。

已完成：更多菜单=> 查看处方(如果开了)+删除订单 + 问诊记录+去评价。实现：查看处方逻辑复用，提取一个hook函数。咨询中：查看处方(如果开了) + 继续沟通。目标：了解问诊订单状态和对应业务功能。已取消：删除订单+咨询其他医生。待接诊：取消问诊+继续沟通。待支付：取消问诊+去支付。2）取消订单逻辑函数。2）删除订单逻辑函数。4）父组件进行删除数据。实现：取消问诊订单功能。2）使用hook函数。

目标：定义接口参数类型和api函数定义接口参数类型订单状态枚举单个问诊订单类型带分页问诊订单类型定义查询API函数代码：1）定义接口参数类型// 根据通用分页类型定义2）订单状态枚举(已定义)// 问诊订单状态// ----------------问诊订单------------------// 待支付// 待接诊// 咨询中// 已完成// 已取消// ----------------药品订单------------------// 待支付// 待发货。

1 问诊室-查看处方2 问诊室-购买药品3 问诊室-评价医生。

1）医生接单后，会触发ws的statusChange事件，更新订单状态。底部操作组件，可以调用后台api函数上传图片，触发。实现：点击图片icon上传图片，成功后发送图片消息。7）医生未接诊，不是咨询中状态禁用消息输入框。实现：可以发送文字消息，可以接收文字消息。1）底部操作组件，可以输入文字，触发。1）底部操作组件，可以上传图片，触发。抢单前需要，监听超级医生订单状态变更。需求❓：ws连接建立后，通过监听。事件接收图片对象，通过。2）问诊室组件，监听。3）获取订单详情，需要。2）问诊室组件，监听。

1 问诊室-路由与组件2 问诊室-消息卡片3 问诊室-websocket介绍4 问诊室-socket.io使用5 问诊室-通讯规则6 问诊室-建立连接目标：认识websocket什么是 websocket?是一种网络通信协议，和 HTTP 协议 一样。为什么需要websocket?因为 HTTP 协议有一个缺陷：通信只能由客户端发起。理解 websokect 通讯过程了解 websocket api含义// 创建ws实例，建立连接// 连接成功事件// 发送消息");

说明❓：订单创建成功后，清除store中数据，刷新页面接口请求异常，可以try/catch捕获跳回首页。实现：问诊页面路由配置，获取问诊预支付信息并渲染。使用支付宝APP支付（在手机上且安装沙箱支付宝）1）生成订单后不可回退（点击浏览器回退按钮测试）说明❓：选择继续浏览器支付，使用账号密码登录即可。实现：打开弹层选择支付方式，创建订单，进行支付。4）点击抽屉支付按钮，跳转到支付宝页面。实现：获取支付地址，进行订单支付。2）生成订单后不可关闭支付抽屉。，打开选择支付方式对话框。支付成功回跳到问诊室页面。

实现：路由配置，了解组件以及页面的基础布局（医生提示，描述，症状时间，是否已问诊）3）支持双向数据绑定，支持选择图片后触发函数，支持点击删除事件函数。实现：进入页面时候提示用户是否回显之前填写的病情描述信息。实现：按钮点亮，提交校验，保存数据，跳转选择患者。说明❓：回退页面时，确认框会自动关闭，需要设置。1）进入页面，如果有记录数据，弹出确认框。1）添加vant按钮，实现按钮点亮交互。2）提交校验 保存数据，跳转选择患者。2）准备病情描述类型和表单数据。实现：上传图片与删除图片功能。，进行样式和功能配置。

根据api接口，定义问诊订单记录数据相关类型问诊类型枚举患病时间枚举图片数组类型问诊记录类型（创建问诊订单）// 问诊类型：1找医生 2== 极速问诊 == 3开药问诊Fast = 2,// 患病时间：1一周内2一月内3半年内4半年以上Week = 1,Month,HalfYear,More// 图片列表id: string// 问诊记录=> 极速问诊参数type: ConsultType // 问诊类型：1找医生 2极速问诊 3开药问诊。

1 首页模块-关注医生(课堂练习){#home-like}2 首页模块-逻辑复用{#home-like-logic}

介绍 @vueuse/core 组合api库，使用 useXxx 函数获取设备宽度，动态设置滚动距离。4）去除 指示器，关闭 无缝滚动，设置一次滚动一个卡片。实现：在关注医生的文章列表上方加上医生列表。完成关注tab下，推荐关注的医生列表展示。1）在首页关注频道，引入关注医生组件。2）定义 获取推荐关注医生 接口函数。1）定义 医生卡片数据 类型。3）实现 推荐关注的医生展示。适配有问题，切换设备试试。

2）新建 knowledge-list组件展示知识文章列表。3）默认激活 推荐tab , 结合查询列表。实现：tab切换效果，准备知识列表组件。1）给组件传入 type 列表查询类型。实现：知识列表组件滚动加载。2）定义 api 函数。定义数据类型和传参类型。3）实现加载数据和渲染。

校验通过后，调用新增患者api方法新增，成功关闭弹层并刷新患者列表。现在：一个 v-model 指令搞定，不需要记忆两种语法。支持默认选中和点击切换选中，借助v-model做数据同步。复用新增弹层，打开弹层回填数据，显示当前点击编辑患者信息。根据是否有患者ID区分新增或编辑，调用对应api函数。Tips: 这种写法麻烦，知道写法即可，一般使用。由于是比较老的库，没有提供类型，自己定义类型。实现：提交的时候校验表单，身份证需要校验格式。点击删除，弹出确认框，确认删除调用api函数。

目标：首页，健康百科，消息通知，我的，布局容器等静态结构搭建。掌握：Pick 与 Omit 从现有类型中得到可复用类型。说明：练习模板组件(02-其它资源)，重点学习在线医疗。，基本结构都使用vant组件库搭建。实现：需要登录的页面，需要判断是否有。实现：头部个人信息展示与订单卡片布局。-选择问诊科室=>选择问诊患者。实现：切换页面切换标题，扩展。定义api接口返回数据类型。获取用户信息数据渲染显示。说明❓：Dialog需要。实现：底部tab的切换。实现：快捷工具栏目渲染。2）获取数据进行渲染。

定义发送验证码api需要的ts联合类型：‘login’ 登录 | ‘register’ 注册。定时器相关函数是 window 去调用，因为 node 也有定时器返回类型不一样。验证码发送成功后，设置time倒计时60s，使用定时器开启倒计时，结束关闭定时器。组件卸载时，清除定时器（倒计时没有结束，就登录跳转页面情况）实现：添加短信登录与密码登录界面切换，添加code的校验。实现：点击按钮发送验证码功能。封装发送验证码api接口方法。调用发送验证码api接口。实现：通过短信进行登录。1）API 接口函数。

封装需求❓：支持 title rightText 属性，支持 click-right 事件，click-left函数内支持返回上一页或默认首页。实现：组件的返回功能，支持 title rightText 属性，支持 click-right 事件。**前提=》**vant组件库中所有组件用到的颜色、字体大小、间距等，都定义成全局的原生css变量。掌握：van-nav-bar组件的基础使用，封装成 cp-nav-bar 组件，作为项目通用组件。完成：路由规则的配置，基础组件结构，app组件路由出口。

实现：token请求头携带，错误响应处理，401错误处理。测试：封装好的请求工具函数。知道：约定项目的映射规则。

相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。插件，它可以自动引入组件，并按需引入组件的样式。说明❓：有一个控制台警告可忽略，或者使用。的项目中使用 Vant 时，可以使用。注意❓：关闭自动生成类型声明文件。实现：使用 vw 完成移动端适配。实现：完整使用vant组件库。

1 pnpm介绍安装2 项目创建{#create-vue}vscode插件安装{#ext}eslint 预制配置{#eslint}3 项目结构调整{#dir}路由代码解析{#router}4 用户状态仓库{#store}5 数据持久化{#persisted}6 stores统一导出{#stores-export}本质上他是一个包管理工具，和npm/yarn没有区别，主要优势在于包安装速度极快磁盘空间利用效率高npm命令pnpm等效pnpm dev。

2 Pinia 上手3 storeToRefs的使用 {#store-to-refs}4 使用 Pinia 改造头条{#case}

掌握：掌握axios配合泛型设置响应数据类型。优化axios数据获取和类型定义。完成：axios获取数据后。实现：频道切换后列表更新。完成：频道导航切换效果。

知道：TS类型声明文件是什么以及作用项目中安装的第三方库里面都是打包后的JS代码，但是我们使用的时候却有对应的TS类型提示，这是为什么呢？在第三方库中的JS代码都有对应的TS类型声明文件什么是类型什么文件？通俗地来讲，在 TypeScript 中以 .d.ts 为后缀的文件，我们称之为 TypeScript 类型声明文件。它的主要作用是描述 JavaScript 模块内所有导出成员的类型信息。.ts文件.d.ts文件作用是啥？.ts 文件:既包含类型信息又可执行代码。

1 TypeScript 起步TypeScript 介绍{#intro}2 TypeScript 作用{#effect}3 TypeScript 编译{#compile}4类型注解{#annotate}5原始类型{#base}6数组类型{#array}7联合类型{#union}8类型别名{#alias}9函数类型{#fn}基本使用{#fn-base}void 类型{#fn-void}可选参数{#fn-params}10 对象类型{#object}基本使用{#obj-base}扩展用法{#obj-ext}

需求说明，使用组合式API实现。

掌握：在使用reactive创建的响应式数据被展开或解构的时候使用toRefs保持响应式。接下来我们通过一个小案例，运用一下provide和inject函数。元素上使用 ref属性关联响应式数据，获取DOM元素。provide和inject是解决跨级组件通讯的方案。组件上使用 ref属性关联响应式数据，获取组件实例。掌握：使用 computed 函数定义计算属性。目标：能够实现组件通讯中的父传子组件通讯。目标：能够实现组件通讯中的子传父组件通讯。掌握：使用watch函数监听数据的变化。

组合式API介绍{#composition-api}2 setup函数{#setup}3 reactive函数{#reactive}4 ref函数{#ref-fn}5 reactive 与 ref 的选择{#reactive-and-ref}介绍：什么是组合式API，组合式API的特点通过data、methods、watch 等配置选项组织代码逻辑是选项式API写法所有逻辑在setup函数中，使用 ref、watch 等函数组织代码是组合式API写法option api<template>

1 vue3 现状介绍{#now}2 vite 构建工具{#vite}3 vite 创建项目{#vite-create-project}4 安装插件和代码分析{#code-analysis}5 总结了解：vue3 的现状以及它特点Vue3 的现状2020 年 9 月 18 日发布，许多开发者还在观望。2022 年 2 月 7 日称为默认版本，意味着 vue3 是现在也是未来趋势。库名称简介PC 端组件库：Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

npm ERR!npm ERR!清除npm缓存。重新 npm install再 npm run dev如果重新安装一次包还是不行，会有报错的话，那就把之前安装的包都删掉，重新安装rm -rf node_modules 或者 del node_modules。

经过上述三个步骤，则完成了 P2P 通信过程中的媒体协商部分，实际上在呼叫端以及接收端调用setLocalDesccription 同时也开始了收集各端自己的网络信息(candidate)，然后各端通过监听事件 onicecandidate 收集到各自的 candidate 并通过信令服务器传送给对端，进而打通 P2P 通信的网络通道，并通过监听 onaddstream 事件拿到对方的视频流进而完成了整个视频通话过程。因此：参与音视频通讯的双方想要了解对方支持的媒体格式，必须要交换 SDP 信息。

我们就不要把这些大的文件和那些小的文件打包到一起了，像这种xlsx,element这种功能性很全的插件，我们可以放到CDN服务器上，一来，减轻整体包的大小，二来CDN的加速服务可以加快我们对于插件的访问速度。到现在为止，我们已经完成了一个前端工程师的开发流程，按照常规的做法，此时，运维会将我们的代码部署到阿里云的ngix服务上，对于我们而言，我们可以将其部署到本机的nodejs环境中。如图所以，方块越大，说明该文件占用的文件越大，文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向。

此时，element已经变成了zh，也就是中文，但是我们常规的内容怎么根据当前语言类型显示？这里，针对英文和中文，我们可以提供两个不同的语言包 src/lang/zh.js , src/lang/en.js该语言包，我们已经在资源中提供第四步，在index.js中同样引入该语言包import customZH from './zh' // 引入自定义中文包import customEN from './en' // 引入自定义英文包Vue.use(VueI18n) // 全局注册国际化包。

什么是审批流程。

针对英文和中文，一般有两个不同的语言包 src/lang/zh.js , src/lang/en.js。**的方法，它会根据传入的key，自动的去寻找当前语言的文本，我们可以将左侧菜单变成多语言展示文本。在语言包下没有映射关系，在路由切换页面会触发语言包如下代码。当我们全局注册i18n的时候，每个组件都会拥有一个**注意：当文本的值为嵌套时，可以通过**myInfo: ‘我的信息’,

除此之外，我们发现在页面刷新的时候，本来应该拥有权限的页面出现了404，这是因为404的匹配权限放在了静态路由，而动态路由在没有addRoutes之前，找不到对应的地址，就会显示404，所以我们需要将404放置到动态路由的最后。在上面的，我们已经把给用户分配了角色， 给角色分配了权限，那么在用户登录获取资料的时候，会自动查出该用户拥有哪些权限，这个权限需要和我们的菜单还有路由有效结合起来。上小节中，当我们拥有了一个模块，一个页面的访问权限之后，页面中的某些功能，用户可能有，也可能没有，这就是功能权限。

这里有个缺陷，接口中读取的是后端的密文，我们并不能解密，所以当我们没有任何修改就保存时，会校验失败，因为密文超过了规定的12位长度，为了真的修改密码，我们设定了一个临时的字段。我们在fileList中设置了属性为upload为true的属性，表示该图片已经上传成功了，如果fileList还有upload不为true的数据，那就表示该图片还没有上传完毕。注意，上述的参数我们在本次开发过程中，直接将参数放置在前端代码中存储，但是腾讯云本身是不建议这么做的，因为**

vue-element-admin提供了导出的功能模块，在/excel导出目录下，放置到src目录下。

它来自我们登录成功之后的用户资料，所以我们需要在该组件中使用vuex数据。然后，在页面中调用接口获取数据，绑定表格数据 src/views/setting/index.vue。首先，封装读取角色的信息的请求 src/api/setting.js。封装读取公司信息的api src/api/setting.js。根据以上的结构，我们采用element-ui的组件实现。params是查询参数，里面需要携带分页信息。第二个tab页，我们同样需要读取数据。**读取公司角色信息。**实现新增角色功能。

注意：部门名称和部门编码的规则 有两条我们需要通过**自定义校验函数validator**来实现首先，在校验名称和编码时，要获取最新的组织架构，这也是我们这里trigger采用blur的原因，因为change对于访问的频率过高，我们需要控制访问频率// 首先获取最新的组织架构数据部门名称不能和**同级别**的重复，这里注意，我们需要找到所有同级别的数据，进行校验，所以还需要另一个参数pidprops: {// 用来控制窗体是否显示或者隐藏},// 当前操作的节点},

然后，我们需要构建一个新增部门的窗体组件 src/views/department/components/add-dept.vue。然后，在tree-tools组件中，监听下拉菜单的点击事件 src/views/departments/index.vue。通过前一个章节，我们发现，树形的顶级内容实际和子节点的内容是一致的，此时可以将该部分抽提成一个组件，节省代码。注意，点击新增时tree-tools组件，所以这里，我们依然需要子组件调用父组件。然后，我们需要将列表型的数据，转化成树形数据，这里需要用到。

注册自定义指令Vue.directive('指令名称', {// 会在当前指令作用的dom元素 插入之后执行// options 里面是指令的表达式})自定义指令可以采用统一的文件来管理 src/directives/index.js,这个文件负责管理所有的自定义指令首先定义第一个自定义指令 v-imagerror// 指令对象 会在当前的dom元素插入到节点之后执行// options是 指令中的变量的解释 其中有一个属性叫做 value// dom 表示当前指令作用的dom对象。