wanzai_school_app/pages/change/change.vue

<template>
	<view class="container">
		<view class="body">
			<!-- 每一个小孩区域 -->
			<view class="body_box" v-for="item in list" :key="item.id" @click="change(item)">
				<radio class="box_radio" :checked="item.isCheck" color="#1E7DFB" />
				<view class="box_info">
					<view class="">{{ item.name }}</view>
					<view class="">{{ item.number }}</view>
				</view>
			</view>

			<!-- 确认按钮区域 -->
			<view class="body_btn">确认</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

onLoad(() => {})

// 小孩列表数据
const list = ref([
	{ id: 1, name: '张三', number: '26105615262', isCheck: false },
	{ id: 2, name: '李四', number: '26105615262', isCheck: false },
	{ id: 3, name: '王五', number: '26105615262', isCheck: false }
])

const change = (item) => {
	list.value.forEach((ele) => {
		ele.isCheck = false
	})
	item.isCheck = !item.isCheck
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f1f6fe;

	.body {
		padding-left: 20rpx;
		margin-top: 20rpx;
		height: calc(100vh - 20rpx);
		background-color: #fff;

		.body_box {
			display: flex;
			align-items: center;
			height: 170rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.box_radio {
				margin-left: 20rpx;
			}

			.box_info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 40rpx;
				height: 95rpx;
			}
		}

		.body_btn {
			margin: auto;
			margin-top: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 297rpx;
			height: 100rpx;
			color: #fff;
			font-size: 32rpx;
			border-radius: 8rpx;
			background-color: #1e7dfb;
		}
	}
}
</style>