和普通群聊不同，开启一个图文会话聊天，必须先选择患者、团队、医生。
原来是集成到腾讯IM当中，现在需要单独写一个页面
原来的代码在这里：
const handleShow = () => {uni.navigateTo({url: '/pageB/active-home/active-home'})};是否挪动一个位置呢 引入IM后代码体积大，不满足微信小程序要求，所以得分包。
另外一个问题是 原来用的vant,我觉得重了。干脆逐步换掉它。
步骤条实现：
<template><view class="content"><van-steps :steps="steps" :active="activeIndex" @change="handleChange"><template v-for="(step, index) in steps" :key="index"><van-step title="aa" :description="step.description" @next="handleNext(index + 1)"></van-step></template></van-steps><view class="contentItem"><view v-if="activeIndex === 0"><!-- <van-search placeholder="请输入患者" v-model="searchText" shape="round" @search="onSearch" /> --><uni-search-bar @confirm="onSearch" :focus="true" v-model="searchText" @blur="blur" @focus="focus"@input="input" @cancel="cancel" @clear="clear"></uni-search-bar><van-checkbox-group :value="result" @change="onChange"><van-cell-group><van-cell v-for="(item, index) in patients" :key="index" :title="item.patientName":label="item.disease"><van-checkbox :name="item.id" class="cell_checkbox" /></van-cell></van-cell-group></van-checkbox-group></view><view v-if="activeIndex === 1">...</view><view v-if="activeIndex === 2">...</view><van-row><van-col span="12"><van-button @click="handlePrevious" :disabled="activeIndex === 0" shape="round" block="true"size="small">上一步</van-button></van-col><van-col span="12"><van-button v-if="activeIndex !== steps.length - 1" @click="handleNext" shape="round" type="primary"block size="small">下一步</van-button><van-button v-if="activeIndex === steps.length - 1" @click="handleCreateMeet" shape="round"type="primary" block size="small">新建活动</van-button></van-col></van-row><van-dialog use-slot title="新建活动信息" :show="show" show-cancel-button @close="onClose_dialog"@confirm="createActivity"><van-cell-group><van-field value="" placeholder="请输入活动名" :border="false" @change="onChange_meetName" /></van-cell-group></van-dialog></view>
</template>这个Vue模板定义了一个具有多个步骤的表单界面，通常用于引导用户逐步完成一系列任务或填写信息。界面使用了uniapp框架和Vant UI库中的组件。下面是对模板中各个部分的解释说明：
- 步骤条 (
<van-steps>):- 显示一个步骤条，通过
:steps="steps"绑定步骤数据，:active="activeIndex"表示当前激活的步骤。 @change="handleChange"监听步骤变化事件。- 内部的
<template v-for="...">循环用于渲染每个步骤的具体内容，但在这个例子中，步骤的具体内容似乎没有在循环中自定义，而是统一使用了<van-step>组件的默认内容（标题被硬编码为"aa"）。
- 显示一个步骤条，通过
- 搜索栏和日历 (
<uni-search-bar>和<van-calendar>):- 当
activeIndex === 0时，显示搜索栏（<uni-search-bar>），这是一个uniapp提供的搜索组件，用于搜索患者。 - 同时显示一个日期选择器（
<van-calendar>），类型为范围选择（type="range"），用于选择日期区间。 - 搜索栏和日历下方是一个复选框组（
<van-checkbox-group>），用于选择患者和疾病。
- 当
- 团队选择 (
<van-radio-group>):- 当
activeIndex === 1时，显示一个单选按钮组（<van-radio-group>），用于从团队列表中选择一个团队。 - 每个选项都是一个
<van-cell>，内部包含一个<van-radio>。
- 当
- 医生选择 (
<van-checkbox-group>):- 当
activeIndex === 2时，显示另一个复选框组，用于从医生列表中选择医生。 - 每个选项显示医生的用户名和职位。
- 当
- 导航按钮 (
<van-button>):- 在底部，有两个按钮：“上一步”和“下一步”（或“新建活动”，如果是最后一步）。
- “上一步”按钮在第一步时被禁用。
- “下一步”按钮在最后一步时变为“新建活动”按钮。
- 对话框 (
<van-dialog>):- 显示一个对话框，用于输入新建活动的信息。
- 对话框内有一个输入框（
<van-field>），用于输入活动名称。 - 对话框有取消和确认按钮，分别触发
onClose_dialog和createActivity方法。
搜索框实现：
搜索组件在uni扩展组件当中。ps:uni-app
<uni-search-bar @confirm="onSearch" :focus="true" v-model="searchText" @blur="blur" @focus="focus" @input="input"@cancel="cancel" @clear="clear"></uni-search-bar>...onSearch(searchText) {this.getAllPatinet(searchText.value)},// 获取患者信息getAllPatinet(searchText) {uni.request({url: loginRequest.baseURL + 'getAllPatient',method: 'POST',data: {doctorId: wx.getStorageSync("userInfo").id,searchText: searchText},header: {'auth-token': wx.getStorageSync("token")},success: (res) => {if (res.data.code === 200) {this.patients = res.data.data} else {uni.showToast({title: res.data.msg,duration: 300})}}});},
实现选择患者功能：
<view class="uni-list"><checkbox-group @change="checkboxChange"><label class="uni-list-cell uni-list-cell-pd" v-for="item in patients" :key="item.id"><view><checkbox :value="item.id" :checked="isSelected(item.id)" /></view><view>{{item.patientName}}--{{item.disease}}</view></label></checkbox-group></view>...data() {return {steps: [{text: '选择患者',description: '请选择您的患者信息',},{text: '选择团队',description: '请选择您的团队信息',},{text: '选择专家',description: '请选择您的专家信息',},],activeIndex: 0, // 初始步骤索引searchText: '',patients: [],doctors: [],// result: [],result_doctor: [], //选中的医生date: '',show: false,result_group: [], // 用于存储选中的值 groupdoctorGroups: [],memberList: [],//用于展示对话框meetName: null,teamList: [],postList: [],selectedPatientIds: [], // 存储选中的患者ID}},.....checkboxChange(e) {// 更新选中的患者ID数组this.selectedPatientIds = e.detail.value;},isSelected(id) {// 检查某个患者ID是否被选中return this.selectedPatientIds.includes(id);},代码说明：
代码片段中，展示了一个Vue组件的模板部分和数据逻辑部分，主要用于处理一个患者选择界面的功能。
模板部分 (<template>)
<view class="uni-list">：定义了一个容器，用于包裹整个复选框组。<checkbox-group @change="checkboxChange">：定义了一个复选框组，当组内复选框的选中状态发生变化时，会触发checkboxChange方法。<label>：每个label代表一个患者选项，通过v-for指令遍历patients数组生成。<checkbox :value="item.id" :checked="isSelected(item.id)" />：复选框，其value属性绑定到患者的id，checked属性根据isSelected(item.id)方法的返回值来确定是否选中。<view>{{item.patientName}}--{{item.disease}}</view>：显示患者的姓名和疾病信息。
数据逻辑部分 (data 和 methods)
data()：定义了组件的数据属性，其中patients数组存储了所有患者的信息，selectedPatientIds数组用于存储当前选中的患者ID。checkboxChange(e)：当复选框组的选中状态发生变化时，此方法会被调用。它通过e.detail.value获取到所有被选中的复选框的value值（即患者ID），并将这些ID存储到selectedPatientIds数组中。isSelected(id)：此方法用于检查某个特定的患者ID是否已经被选中。它通过判断selectedPatientIds数组是否包含该ID来实现。
工作流程
- 用户看到患者列表，每个患者旁边都有一个复选框。
- 用户可以通过点击复选框来选择或取消选择患者。
- 当用户选择或取消选择患者时，
checkboxChange方法被触发，更新selectedPatientIds数组。 isSelected方法用于在模板中动态地显示复选框的选中状态。
注意点
- 确保
patients数组在组件创建或某个适当的时机被正确初始化，并包含所有需要显示的患者信息。 selectedPatientIds数组应该是一个响应式属性，以便Vue能够检测到其变化并更新DOM。isSelected方法通过检查selectedPatientIds数组来返回复选框的选中状态，这是Vue中处理这类问题的常见模式。
还没测试，有点担心反复进入的时候，状态是否应该清除的问题，这个要测试。今天晚了 明天把选择团队及医生补充上~~~~
附：我们全局变量用的下面文章中第一种方式
