群聊前选择患者功能的实现

和普通群聊不同，开启一个图文会话聊天，必须先选择患者、团队、医生。

原来是集成到腾讯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: [], // 用于存储选中的值  group
				doctorGroups: [],
				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来实现。