uniapp-app/pages_app/groupEdit/groupEdit.vue

<template>
	<view class="group-edit-page">
        <uni-nav-bar
			left-icon="left"
			title="编辑分组"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eee"
		>
			<template #right>
				<text class="save-text" @click="saveGroup">保存</text>
			</template>
		</uni-nav-bar>
		
		<!-- 分组名称 -->
		<view class="section-header">分组名称</view>
		<view class="name-row">
			<input class="name-input" v-model.trim="groupName" placeholder="请输入分组名称" maxlength="20" />
			<view class="icon-btn" v-if="groupName" @click="clearName">
				<up-image :src="delImg" width="48rpx" height="48rpx" />
			</view>
		</view>

		<!-- 分组成员 -->
		<view class="section-header">分组成员</view>
		<view class="add-member" @click="addMember">
			<view class="add-circle">
				<up-icon name="plus" size="34" color="#bfbfbf" />
			</view>
			<text class="add-text">添加组患者</text>
		</view>

		<view class="member-list">
			<view class="member-item" v-for="(m, idx) in members" :key="m.uuid || idx">
				<image class="avatar" :src="docUrl + (m.photo || '')" mode="aspectFill" />
				<text class="member-name">{{ m.realName || '未知' }}</text>
				<view class="remove-btn" @click="removeMember(idx)">
					<view class="remove-circle">
						<up-icon name="minus" color="#fff" size="28rpx" bold></up-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部删除按钮 -->
		<view class="bottom-danger">
			<button class="danger-btn" @click="deleteGroup">删除分组</button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import navTo from '@/utils/navTo.js'
	import docUrl from '@/utils/docUrl.js'
    import delImg from "@/static/iv_delete.png"

	const groupUuid = ref('')
	const groupName = ref('')
	const members = ref([])

	onLoad((query) => {
		groupUuid.value = query?.uuid || ''
		// TODO: 根据 uuid 拉取分组详情
		// 预置示例
		groupName.value = '看看'
		members.value = [
			{ uuid: 'u1', realName: '测试', photo: '' }
		]
	})

	onShow(() => {
		// 兜底读取从选择页写入的缓存
		try {
			const cached = uni.getStorageSync('patientsSelectedPayload')
			if (cached && Array.isArray(cached.list) && cached.list.length) {
				mergeSelected(cached.list)
				uni.removeStorageSync('patientsSelectedPayload')
			}
		} catch (e) {}
	})

	const goBack = () => uni.navigateBack()
	const clearName = () => { groupName.value = '' }

	const saveGroup = () => {
		// TODO: 调用保存接口: { uuid: groupUuid, name: groupName, members }
		uni.showToast({ title: '已保存', icon: 'success' })
	}
	const addMember = () => {
		// 跳转选择患者页并监听事件通道返回
		uni.navigateTo({
			url: '/pages_app/selectPatient/selectPatient',
			events: {
				onPatientsSelected: ({ ids, list }) => {
					if (Array.isArray(list)) mergeSelected(list)
				}
			}
		})
	}
	const removeMember = (idx) => {
		members.value.splice(idx, 1)
	}
	const deleteGroup = () => {
		uni.showModal({
			title: '删除分组',
			content: '确定要删除该分组吗？',
			success: (res) => {
				if (res.confirm) {
					// TODO: 调用删除接口
					uni.showToast({ title: '已删除', icon: 'success' })
					setTimeout(() => goBack(), 700)
				}
			}
		})
	}

	// 将选择结果合并到成员列表，按 uuid 去重
	const mergeSelected = (selectedList) => {
		const existIds = new Set(members.value.map(m => m.uuid))
		selectedList.forEach(s => {
			if (!existIds.has(s.uuid)) {
				existIds.add(s.uuid)
				members.value.push({ uuid: s.uuid, realName: s.realName, photo: s.photo || '' })
			}
		})
	}
</script>

<style lang="scss" scoped>
	.group-edit-page{
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 160rpx;
	}
	.save-text{ color:#8B2316; font-size: 30rpx; }

	.section-header{
		background:#d9d9d9;
		color:#333;
		padding: 22rpx 30rpx;
		font-size: 30rpx;
	}
	.name-row{
		background:#fff;
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #eee;
		.name-input{
			flex:1;
			font-size: 32rpx;
			color:#333;
		}
		.icon-btn{ padding-left: 20rpx; }
	}

	.add-member{
		background:#fff;
		display:flex;
		align-items:center;
		gap:20rpx;
		padding: 26rpx 30rpx;
		border-bottom: 1rpx solid #eee;
		.add-circle{
			width: 96rpx; height: 96rpx; border-radius: 50%;
			border: 4rpx solid #e5e5e5;
			display:flex; align-items:center; justify-content:center;
			background:#fff;
		}
		.add-text{ font-size: 32rpx; color:#666; }
	}

	.member-list{
		background:#fff;
		.member-item{
			display:flex; align-items:center; justify-content:space-between;
			padding: 26rpx 30rpx; border-bottom: 1rpx solid #eee;
			.avatar{ width: 100rpx; height: 100rpx; border-radius: 16rpx; background:#ffe; }
			.member-name{ flex:1; margin-left: 20rpx; font-size: 32rpx; color:#333; }
			.remove-btn{ padding-left: 20rpx; }
			.remove-circle{ width: 48rpx; height:48rpx; background:#8B2316; border-radius:50%; display:flex; align-items:center; justify-content:center; }
		}
	}

	.bottom-danger{
		position: fixed; left:30rpx; right:30rpx; bottom: 30rpx;
		background:#fff; border-top: 1rpx solid #eee;
		.danger-btn{ width:100%; height: 96rpx; background:#8B2316; color:#fff; border:none; border-radius: 12rpx; font-size: 32rpx;display: flex; align-items: center; justify-content: center; }
	}
</style>