基本完成图文会诊前选择患者与医生的功能

 

改写原代码的原因:

1、 更换掉腾讯IM集成。

2、更换掉vant,项目中原来同时使用uniapp的组件 与vant组件 ,搞得小程序各个页面风格不一致;

3、修改bug

4、总体采取flex布局;

5、用到的uniapp组件 包括 seach、step、scroll-view、checkbox-group、radio-group、uni-popup组件等

本文主要描述uniapp编写的小程序端代码。

发起图文会诊的准备有四个步骤为 :发起图文-->选择患者->选择团队->选择医生,

 -->   -->-->

 template代码如下:

<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> -->

		<!-- 		    <uni-steps :active="activeIndex" >
		      <uni-step v-for="(step, index) in steps" :key="index" :title="step.text" :description="step.description">
		      </uni-step>
		    </uni-steps> -->

		<uni-steps :options="steps" :active="activeIndex" />

		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="contentItem" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">



			<!-- 		<view class="contentItem"> -->
			<view v-if="activeIndex === 0" class="view_right">
				<!-- <van-search placeholder="请输入患者" v-model="searchText" shape="round" @search="onSearch" /> -->
				<uni-search-bar @confirm="onSearch" :focus="true" v-model="searchText" @input="input" @cancel="cancel"
					@clear="clear">
				</uni-search-bar>



				<!-- <van-cell title="选择日期区间" :value="date" @click="onDisplay" /> -->
				<!-- 			<van-calendar :show="show" type="range" @close="onClose" @confirm="onConfirm" /> -->

				<!-- 				<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 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="this.isSelected(item.id)" />
							</view>
							<view>{{ item.patientName }}--{{ item.disease }}</view>
						</label>
					</checkbox-group>
				</view>

			</view>

			<view v-if="activeIndex === 1" class="view_right">
				<!--<van-radio-group v-model="result_group">
					<van-cell-group>
						<van-cell v-for="(item, index) in teamList" :key="index" :title="item.name">
							<van-radio slot="right-icon" :name="item.id" />
						</van-cell>
					</van-cell-group>
				</van-radio-group> -->
				<view class="uni-list">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in teamList"
							:key="item.value">
							<view>
								<radio :value="item.value" :checked="index === current" />
							</view>
							<view>{{ item.name }}</view>
						</label>
					</radio-group>
				</view>


			</view>

			<view v-if="activeIndex === 2" class="view_right">
				<!-- 				<van-checkbox-group :value="result_doctor" @change="onChange_doctor">
					<van-cell-group>
						<van-cell v-for="(item, index) in doctors" :key="index" :title="item.userName"
							:label="postList.find(o => o.value === item.positionName).text">
							<van-checkbox :name="item.id" class="cell_checkbox" />
						</van-cell>
					</van-cell-group>
				</van-checkbox-group> -->

				<view class="uni-list">
					<checkbox-group @change="onChange_doctor">
						<view class="uni-list-cell-group" style="margin-right: 30rpx;">
							<label v-for="(item, index) in doctors" :key="item.id"
								class="uni-list-cell uni-list-cell-pd">
								<view>
									<checkbox :value="item.id" :checked="this.isDoctorSelected(item.id)" />
								</view>
								<view class="cell-content">
									<text>{{ item.userName }}</text>
									<text>(</text>
									<text>{{ postList.find(o => o.value === item.positionName).text }}</text>
									<text>)</text>
								</view>
							</label>
						</view>
					</checkbox-group>
				</view>

			</view>
			<!-- 	</view> -->
		</scroll-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> -->


		<!-- 		<uni-row>
			<uni-col span="21">
				<uni-button @click="handlePrevious" :disabled="activeIndex === 0" type="default" shape="round"
					block>上一步</uni-button>
			</uni-col>
			<uni-col span="12">
				<uni-button v-if="activeIndex !== steps.length - 1" @click="handleNext" type="primary" shape="round"
					block>下一步</uni-button>
				<uni-button v-if="activeIndex === steps.length - 1" @click="handleCreateMeet" type="primary"
					shape="round" block>新建活动</uni-button>
			</uni-col>
		</uni-row> -->

		<uni-row class="demo-uni-row" :width="nvueWidth">
			<uni-col :span="12">
				<view class="demo-uni-col ">
					<button @click="handlePrevious" :disabled="activeIndex === 0" type="primary"
						shape="round">上一步</button>

				</view>
			</uni-col>
			<uni-col :span="12">
				<view class="demo-uni-col">

					<button v-if="activeIndex !== steps.length - 1" @click="handleNext" type="primary"
						shape="round">下一步</button>
					<button v-if="activeIndex === steps.length - 1" @click="handleCreateMeet" type="primary"
						shape="round">新建活动</button>
				</view>
			</uni-col>
		</uni-row>




		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="新建活动信息" value="图文会诊" placeholder="请输入活动名"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>



		<!-- 		<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组件的模板部分,它使用了Uni-app框架(一个使用Vue.js开发所有前端应用的框架,可以编译到iOS、Android、Web(包括微信小程序)等多个平台)。这个组件展示了一个多步骤表单,用于收集和处理用户输入的信息,比如患者信息、团队信息和医生信息。以下是对模板中各个部分的详细说明:

  1. <uni-steps> 组件:
    • 用于显示一个步骤条,options属性绑定了steps数据,active属性指示当前激活的步骤。
    • 这允许用户看到整个流程的概览,并知道他们当前所处的步骤。
  2. <scroll-view> 组件:
    • 提供了一个可滚动的视图区域,scroll-y="true"允许用户在垂直方向上滚动。
    • 绑定了scrollTop属性来控制滚动位置,并监听了scrolltoupperscrolltolowerscroll事件来处理滚动时的逻辑。
  3. 条件渲染 (v-if):
    • 根据activeIndex的值(当前激活的步骤索引),动态显示不同的表单部分。
    • activeIndex为0时,显示患者选择表单;为1时,显示团队选择表单;为2时,显示医生选择表单。
  4. 表单元素:
    • 搜索栏 (<uni-search-bar>): 用于搜索患者。
    • 复选框组 (<checkbox-group>): 在患者和医生选择表单中使用,允许用户选择多个选项。
    • 单选按钮组 (<radio-group>): 在团队选择表单中使用,允许用户选择一个选项。
  5. 按钮:
    • 使用了<uni-row><uni-col>组件来布局“上一步”和“下一步”按钮,以及在最后一步中的“新建活动”按钮。
    • 按钮的显示和禁用状态根据当前步骤(activeIndex)来动态调整。
  6. 弹出框 (<uni-popup> 和 <uni-popup-dialog>):
    • 用于显示一个对话框,允许用户输入活动名称。这是一个模态对话框,会阻止用户与对话框之外的其他界面元素交互,直到用户完成输入并确认或取消。
  7. 注释和未使用的代码:
    • 模板中包含了一些被注释掉的代码,这些代码可能是早期的实现或者备选方案。
    • 例如,使用了<van-*>组件的部分被注释掉了,这些组件来自于Vant Weapp(一个轻量、可靠的移动端Vue组件库),但在当前实现中被<uni-*>组件替代。

整体上,这个组件通过步骤条、表单元素和按钮的组合,为用户提供了一个结构化的、多步骤的数据输入流程。通过条件渲染和事件处理,实现了动态的用户界面交互和数据处理逻辑。

script代码如下:

<script>
	import {
		loginRequest
	} from '@/api/request.js'
	import {
		imgUrl
	} from '/common/config.js'
	export default {
		data() {
			return {
				steps: [{
						title: '选择患者',
						description: '请选择您的患者信息',
					},
					{
						title: '选择团队',
						description: '请选择您的团队信息',
					},
					{
						title: '选择专家',
						description: '请选择您的专家信息',
					},
				],
				activeIndex: 0, // 初始步骤索引
				searchText: '',
				patients: [],
				doctors: [],
				// result: [],
				result_doctor: {}, //选中的医生
				date: '',
				show: false,
				result_group: [], // 用于存储选中的值  group
				doctorGroups: [],
				memberList: [],
				//用于展示对话框
				meetName: null,

				teamList: [],
				postList: [], //职位
				selectedPatientIds: {}, // 存储选中的患者ID

				current: 0, //当前团队index

				gutter: 0,
				nvueWidth: 730

			}
		},
		onLoad() {
			this.activeIndex == 0
			this.getAllPatients();
			// this.queryDept();
			this.getTeamList();
			this.getPostList()

		},

		computed: {
			// isSelected(id) {
			// 	// 检查某个患者ID是否被选中
			// 	//let b=this.selectedPatientIds.includes(id);
			// 	return this.selectedPatientIds.includes(id);;
			// },
		},
		// 在会话框中 点击按钮事件触发的
		methods: {
			getPostList() {
				uni.request({
					url: loginRequest.baseURL + 'dict/data/Title',
					method: 'GET',
					success: (res) => {
						if (res.data.code == 200) {
							this.postList = res.data.data
						}
					}
				})
			},
			getTeamList() {
				let ui = wx.getStorageSync("userInfo");
				console.log(ui)
				uni.request({
					url: loginRequest.baseURL + 'getTeamList/' + ui.id,
					method: 'GET',
					success: (res) => {
						if (res.data.code == 200) {
							this.teamList = res.data.data.map(item => {
								return {
									value: item.id,
									name: item.name
								}
							})
							console.log("teamList", this.teamList);
						}
					}
				})
			},

			onSearch(searchText) {
				this.getAllPatients(searchText.value)
			},

			// 获取患者信息	
			getAllPatients(searchText) {
				// 注意函数名拼写错误,已更正为 getAllPatients
				uni.request({
					url: loginRequest.baseURL + 'getAllPatient',
					method: 'POST',
					data: {
						doctorId: wx.getStorageSync("userInfo").id,
						searchText: searchText
					},
					header: {
						'auth-token': wx.getStorageSync("token")
					},
					success: (res) => {
						// 使用 switch 语句处理不同的错误码
						switch (res.data.code) {
							case 200:
								// 成功获取数据
								this.patients = res.data.data;
								break;
							case 400:
								// 客户端错误,例如请求参数不正确
								uni.showToast({
									title: '请求参数错误,请重试!',
									duration: 300
								});
								break;
							case 401:
								// 未授权
								uni.showToast({
									title: '未授权,请重新登录!',
									duration: 300
								});
								// 可以在这里添加重新登录的逻辑
								break;
							case 404:
								// 资源未找到
								uni.showToast({
									title: '资源未找到,请检查URL!',
									duration: 300
								});
								break;
							case 500:
								// 服务器内部错误
								uni.showToast({
									title: '服务器内部错误,请稍后再试!',
									duration: 300
								});
								break;
							default:
								// 未知错误码
								uni.showToast({
									title: res.data.msg || '未知错误',
									duration: 300
								});
								break;
						}
					},
					fail: (error) => {
						// 处理网络请求失败的情况
						uni.showToast({
							title: '网络请求失败,请检查网络连接!',
							duration: 300
						});
						console.error('请求失败:', error);
					}
				});
			},




			// 查询部门数据
			// queryDept() {
			// 	uni.request({
			// 		url: loginRequest.baseURL + 'dept',
			// 		header: {
			// 			'auth-token': wx.getStorageSync("token")
			// 		},
			// 		success: (res) => {
			// 			if (res.data.code === 200) {
			// 				// this.deptRange = res.data.data

			// 				const newArr = []
			// 				const dataList = res.data.data;

			// 				dataList.forEach(ite => {
			// 					console.log('ite: ', ite)
			// 					const _item = JSON.parse(JSON.stringify(ite).replace(
			// 						'name', 'text').replace('id',
			// 						'value'));
			// 					console.log('_item: ', _item)
			// 					newArr.push(_item)
			// 				})

			// 				console.log('deptrange: ', newArr)
			// 				this.doctorGroups = newArr
			// 			} else {
			// 				uni.showToast({
			// 					title: res.data.msg || '未知',
			// 					duration: 300
			// 				})
			// 			}
			// 		}
			// 	});
			// },
			queryDoctorList(deptId) {
				console.log('dept', deptId);
				uni.request({
					url: loginRequest.baseURL + 'getAllDoctor/' + deptId + "/" + wx.getStorageSync('userInfo').id,
					header: {
						'auth-token': wx.getStorageSync("token")
					},
					success: (res) => {
						switch (res.data.code) {
							case 200:
								if (res.data.data.length === 0) {
									uni.showToast({
										title: "团队下无专家数据,请联系管理员!",
										duration: 300
									});
								} else {
									this.doctors = res.data.data;
								}
								break;
							case 401: // 示例错误码,表示未授权
								uni.showToast({
									title: "未授权,请重新登录!",
									duration: 300
								});
								// 可以在这里添加重新登录的逻辑
								break;
							case 404: // 示例错误码,表示资源未找到
								uni.showToast({
									title: "找不到请求的资源!",
									duration: 300
								});
								break;
							case 500: // 示例错误码,表示服务器内部错误
								uni.showToast({
									title: "服务器内部错误,请稍后再试!",
									duration: 300
								});
								break;
							default:
								uni.showToast({
									title: res.data.msg || '未知错误',
									duration: 300
								});
								break;
						}
					},
					fail: (error) => {
						// 处理网络请求失败的情况
						uni.showToast({
							title: '网络请求失败,请检查网络连接!',
							duration: 300
						});
						console.error('请求失败:', error);
					}
				});
			},
			// onChange_group(value) {
			// 	// 更新选中的值
			// 	this.result_group = value;
			// 	console.log('选中的值:', value);
			// },
			handleChange(index) {
				// 处理步骤变更的逻辑,例如更新数据或展示相应的内容
				console.log('Step changed to: ' + index);
				//this.activeIndex = event.detail.index;
			},
			handleNext() {
				console.log('aaa:', this.activeIndex)
				// 处理点击下一步的逻辑,例如更新步骤索引或执行其他操作
				if (this.activeIndex === 0) {
					console.log('result:', this.selectedPatientIds)
					if (this.isSelectedPatientIdsEmpty()) {
						uni.showToast({
							title: '请先选择患者',
							duration: 500
						})
						return;
					}
				} else if (this.activeIndex === 1) {
					if (this.teamList.length == 0) {
						uni.showToast({
							title: '请选择团队',
							duration: 500
						})
						return;
					}
					//判断current是否为空  且是否小于0 是否大于teamList的长度
					if (this.current == null || this.current < 0 || this.current >= this.teamList.length) {
						uni.showToast({
							title: '请选择团队',
							duration: 500
						})
						return;
					}
					let deptId = this.teamList[this.current].value;
					this.queryDoctorList(deptId);
				}
				this.activeIndex = this.activeIndex === this.steps.length - 1 ? 0 : this.activeIndex + 1;
			},
			handlePrevious() {
				// 处理点击上一步的逻辑,例如更新步骤索引或执行其他操作
				this.activeIndex = this.activeIndex === 0 ? this.steps.length - 1 : this.activeIndex - 1;
				//console 输出selectedPatientIds
				console.log('selectedPatientIds:', this.selectedPatientIds)
				//console 输出selectedPatientIds 的类型 与长度
				console.log('selectedPatientIds:', typeof this.selectedPatientIds, this.selectedPatientIds.length)
			},
			//选择患者、医生后 准备创建腾讯会议会话
			handleCreateMeet() {
				if (this.isSelectedDoctorIdsEmpty()) {

					uni.showToast({
						title: '没有选择医生',
						duration: 500
					})

				} else {
					// this.show = true;
					this.inputDialogToggle();
				}
			},
			createActivity() {
				console.log('uni.$chat_isSDKReady', uni.$chat_isSDKReady)
				console.log('createActivity 方法被触发' + this.meetName);
				console.log("meetName:", this.meetName);
				let meetName = this.meetName;

				if (meetName == '' || meetName == null) {
					uni.showToast({
						title: '名称不能为空!',
						duration: 500
					})
					return;
				}

				// todo xj  2024-12-1
				// this.show = false;
				// //创建tim  group
				// // let doctorId = this.result_doctor.join()
				// this.doctors.forEach(item => {
				// 	if (this.result_doctor.indexOf(item.id) != -1) {
				// 		this.memberList.push({
				// 			userID: item.phone
				// 		})
				// 	}
				// });
				////////todo let deptId = this.result_group;
				// let patineIds = this.result.join();
				// let patineIds = this.selectedPatientIds.join();

				// let doctorIds = this.result_doctor.join();
				// // 创建好友工作群


				// let promise = uni.$TUIKit.createGroup({
				// 	type: uni.$TIM.TYPES.GRP_MEETING,
				// 	name: meetName,
				// 	//医生的账号集合--腾讯IM
				// 	memberList: this.memberList
				// 	// 如果填写了 memberList,则必须填写 userID
				// });
				// let _this = this;
				// promise.then(function(imResponse) { // 创建成功
				// 	console.log('imResponse', imResponse.data); // 创建的群的资料
				// 	console.log('imResponse.group', imResponse.data.group); // 创建的群的资料
				// 	let groupID = imResponse.data.group.groupID
				// 	uni.request({
				// 		url: loginRequest.baseURL + 'active/insert',
				// 		method: 'POST',
				// 		header: {
				// 			'auth-token': wx.getStorageSync("token")
				// 		},
				// 		data: {
				// 			deptId: deptId,
				// 			activeName: meetName,
				// 			patineIds: patineIds,
				// 			doctorIds: doctorIds,
				// 			imGroupId: groupID
				// 		},
				// 		success: (res) => {
				// 			if (res.data.code === 200) {
				// 				// 创建群时指定了成员列表,但是成员中存在超过了“单个用户可加入群组数”限制的情况
				// 				// 一个用户 userX 最多允许加入 N 个群,如果已经加入了 N 个群,此时创建群再指定 userX 为群成员,则 userX 不能正常加群
				// 				// SDK 将 userX 的信息放入 overLimitUserIDList,供接入侧处理
				// 				console.log(imResponse.data
				// 					.overLimitUserIDList); // 超过了“单个用户可加入群组数”限制的用户列表
				// 				//跳转到会话列表页面
				// 				uni.navigateTo({
				// 					url: '/pageB/TUIKit/TUIPages/TUIConversation/index'
				// 				});
				// 			} else {
				// 				uni.showToast({
				// 					title: res.data.msg || '未知',
				// 					duration: 300
				// 				})
				// 			}
				// 		}
				// 	});
				// }).catch(function(imError) {
				// 	console.warn('createGroup error:', imError); // 创建群组失败的相关信息
				// });
			},
			// 是否应该放到某个公共模块中加以引用?

			onClose_dialog() {
				// 关闭对话框的逻辑处理
				console.log(this.meetName)
				this.show = false;
			},

			onChange_meetName(val) {
				console.log("meetName 变更:", val.detail);
				this.meetName = val.detail;
			},

			toggleCheckbox(index) {
				this.patients[index].checked = !this.patients[index].checked;
			},


			// onDisplay() {
			// 	this.show = true;
			// },
			// onClose() {
			// 	this.show = false;
			// },
			formatDate(date) {
				date = new Date(date);
				return `${date.getMonth() + 1}/${date.getDate()}`;
			},
			onConfirm(event) {
				const [start, end] = event.detail;
				this.show = false;
				this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
			},
			// onChange(event) {
			// 	this.result = event.detail;
			// },

			onChange_doctor(event) {
				// 更新选中医生ID数组
				this.result_doctor = event.detail.value;
			},

			toggle(event) {
				const {
					index
				} = event.currentTarget.dataset;
				const checkbox = this.selectComponent(`.checkboxes-${index}`);
				checkbox.toggle();
			},


			checkboxChange(e) {
				// 更新选中的患者ID数组
				this.selectedPatientIds = e.detail.value;
			},

			radioChange: function(evt) {
				for (let i = 0; i < this.teamList.length; i++) {
					if (this.teamList[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},

			isSelected(id) {
				// 检查某个患者ID是否被选中
				//return this.selectedPatientIds.includes(id);
				const patientIdStr = id.toString();
				return Object.values(this.selectedPatientIds).includes(patientIdStr)

			},

			isDoctorSelected(id) {
				// 检查某个患者ID是否被选中
				//return this.selectedPatientIds.includes(id);
				const idStr = id.toString();
				return Object.values(this.result_doctor).includes(idStr);
			},


			isSelectedPatientIdsEmpty() {
				return Object.keys(this.selectedPatientIds).length === 0;
			},

			isSelectedDoctorIdsEmpty() {
				return Object.keys(this.result_doctor).length === 0;
			},

			upper: function(e) {
				console.log(e)
			},

			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},


			dialogInputConfirm(val) {
				// uni.showLoading({
				// 	title: '3秒后会关闭'
				// })

				// setTimeout(() => {
				// 	uni.hideLoading()
				// 	console.log(val)
				// 	this.value = val
				// 	// 关闭窗口后,恢复默认内容
				// 	this.$refs.inputDialog.close()
				// }, 3000)

				this.meetName = val
				// 关闭窗口后,恢复默认内容
				this.$refs.inputDialog.close()

			},

		}
	}
</script>

方法说明

  1. getPostList()
    • 发送GET请求获取医生职称列表。
    • 成功时,将返回的数据赋值给this.postList
  2. getTeamList()
    • 从本地存储获取用户信息,然后发送GET请求获取团队列表。
    • 成功时,将返回的数据处理成特定格式后赋值给this.teamList
  3. onSearch(searchText)
    • 调用getAllPatinet方法,传入搜索文本。
  4. getAllPatients(searchText)
    • 发送POST请求获取患者信息。
    • 请求中包含医生ID和搜索文本。
    • 成功时,将返回的数据赋值给this.patients;失败时显示错误消息。
  5. queryDoctorList(deptId)
    • 根据部门ID和当前用户ID发送GET请求获取医生列表。
    • 成功时,将返回的数据赋值给this.doctors;失败时显示错误消息。
  6. handleChange(index)
    • 处理步骤变更的逻辑,例如更新数据或展示相应的内容。
    • 目前仅打印了步骤索引。
  7. handleNext()
    • 处理点击下一步的逻辑。
    • 根据当前步骤索引执行不同的逻辑,如验证患者和团队选择。
  8. handlePrevious()
    • 处理点击上一步的逻辑。
    • 更新步骤索引,并打印选中的患者ID。
  9. handleCreateMeet()
    • 检查是否选择了医生,如果选择了则准备创建会议。
  10. createActivity()
    • 打印一些日志信息,并检查会议名称是否为空。
  11. onClose_dialog()
    • 关闭对话框的逻辑处理。
  12. onChange_meetName(val)
    • 更新会议名称。
  13. toggleCheckbox(index)
    • 切换患者的选中状态。
  14. formatDate(date)
    • 格式化日期。
  15. onChange_doctor(event)
    • 更新选中的医生ID数组。
  16. toggle(event)
    • 切换复选框的选中状态。
  17. checkboxChange(e)
    • 更新选中的患者ID数组。
  18. radioChange(evt)
    • 根据选中的团队值更新当前团队索引。
  19. isSelected(id)
    • 检查某个患者ID是否被选中。

样式代码如下:


<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/**主轴对齐方式**/
		/* 		background-color: #8f8f94; */
		height: 100vh;
		align-items: stretch
			/**交叉轴对齐方式**/
	}

	.contentItem {
		flex: 1 1 auto;
		margin-left: 20rpx;
		/* 设置外边距 */
		margin-right: 20rpx;
		height: 1rpx;
	}



	.uni-list-cell {
		justify-content: flex-start
	}


	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.btnClass {
		margin-left: 10pt;
		margin-right: 10pt;
	}


	.value-class {
		flex: none !important;
	}

	.cell_checkbox {
		float: right
	}

	.uni-steps {
		margin-bottom: 20px;
	}

	.uni-button {
		margin-top: 10px;
	}


	.demo-uni-row {
		margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host,但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点,没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 5px;
	}


	.view_right {
		margin-right: 40rpx;
	}
</style>

.content 类中的 Flexbox 布局

  1. display: flex;

    • 这行代码将 .content 元素的显示类型设置为 Flex 容器。Flex 容器是一个能够使用 Flexbox 布局模型的容器,它允许其子元素以灵活的方式排列和布局。
  2. flex-direction: column;

    • 通过这行代码,Flex 容器的主轴方向被设置为列方向(垂直方向)。这意味着 .content 内的子元素将沿着垂直方向排列。
  3. justify-content: center;

    • 这行代码决定了 Flex 容器内的子元素如何沿着主轴(在这个例子中是垂直方向)分布和对齐。center 值表示子元素将在主轴方向上居中对齐。
  4. align-items: stretch;

  5. height: 100vh;

    • 这行代码将 .content 元素的高度设置为视口高度的 100%。vh 是一个相对单位,表示视口高度的百分比。在这个例子中,.content 将占据其父元素(通常是页面的整个高度)的全部空间。

.contentItem 类中的 Flex 属性

  • flex: 1 1 auto;
    • 这行代码为 .contentItem 元素设置了 Flex 属性。flex 属性是 flex-growflex-shrink 和 flex-basis 的简写。在这个例子中,flex-grow 和 flex-shrink 都被设置为 1,表示子元素可以根据需要增长或缩小;flex-basis 被设置为 auto,表示子元素的默认大小基于其宽度或高度属性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值