群聊前选择患者功能的实现
和普通群聊不同，开启一个图文会话聊天，必须先选择患者、团队、医生。
原来是集成到腾讯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来实现。
工作流程
- 用户看到患者列表，每个患者旁边都有一个复选框。
- 用户可以通过点击复选框来选择或取消选择患者。
- 当用户选择或取消选择患者时，
checkboxChange方法被触发，更新selectedPatientIds数组。 isSelected方法用于在模板中动态地显示复选框的选中状态。
注意点
- 确保
patients数组在组件创建或某个适当的时机被正确初始化，并包含所有需要显示的患者信息。 selectedPatientIds数组应该是一个响应式属性，以便Vue能够检测到其变化并更新DOM。isSelected方法通过检查selectedPatientIds数组来返回复选框的选中状态，这是Vue中处理这类问题的常见模式。
还没测试，有点担心反复进入的时候，状态是否应该清除的问题，这个要测试。今天晚了 明天把选择团队及医生补充上~~~~
附：我们全局变量用的下面文章中第一种方式