shuhi-app/pages/my/page/school.vue

<template>
	<view class="school-add">
		<!-- 输入区域 -->
		<view class="input-section">
			<view class="input-header">
				<text class="required">*</text>
				<text class="label">学校名称：</text>
				<u-input v-model="schoolName" placeholder="请输入一个学校名称" border="false" class="input">
					<template #suffix>
						<u-icon name="plus" size="24" color="#666" @click="handleAddSchool"></u-icon>
					</template>
				</u-input>
			</view>
		</view>

		<!-- 学校列表 -->
		<view class="school-list">
			<view class="school-item" v-for="(item, index) in schoolList" :key="index">
				<u-tag :text="item.name" closable></u-tag>
			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="submit-btn">
			<u-button type="success" block @click="handleSubmit">提交</u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 学校名称输入
	const schoolName = ref('')

	// 学校列表
	const schoolList = ref([{
		name: '河南大学'
	}, {
		name: '清华大学'
	}, {
		name: '北京大学'
	}])

	// 添加学校
	const handleAddSchool = () => {
		if (!schoolName.value.trim()) {
			uni.$u.toast('请输入学校名称')
			return
		}

		schoolList.value.push({
			name: schoolName.value
		})
		schoolName.value = ''
	}

	// 移除学校
	const handleRemoveSchool = (index) => {
		schoolList.value.splice(index, 1)
	}

	// 提交
	const handleSubmit = () => {
		if (schoolList.value.length === 0) {
			uni.$u.toast('请至少添加一所学校')
			return
		}

		// 这里处理提交逻辑
		console.log('提交的学校列表:', schoolList.value)
	}
</script>

<style lang="scss" scoped>
	.school-add {
		height: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.input-section {
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.input-header {
				display: flex;
				align-items: center;

				.required {
					color: #FF4D4F;
					font-size: 28rpx;
					margin-right: 4rpx;
				}

				.label {
					font-size: 28rpx;
					color: #333333;
					white-space: nowrap;
				}

				.input {
					flex: 1;
				}
			}
		}

		.school-list {
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;
		}

		.submit-btn {
			padding: 40rpx 0rpx;
			padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
			position: fixed;
			width: calc(100% - 60rpx);
			bottom: 0;
		}
	}
</style>