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.schoolName" closable size="large"></u-tag>
            </view>
        </view>

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

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

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

// 学校列表
const schoolList = ref([])
// 获取学校列表
const getSchoolList = () => {
    uni.$u.http.get('/app/appConf/getPadSchoolBroadcast').then(res => {
        if (res.code == 200) {
            schoolList.value = res.data
        }
    })
}
getSchoolList()

// 保存学校
const handleSubmit = () => {
    if (schoolList.value.length === 0) {
        uni.$u.toast('请至少添加一所学校')
        return
    }
    uni.$u.http.post('/app/appConf/setPadSchoolBroadcast', schoolList.value).then(res => {
        if (res.code == 200) {
            uni.showToast({
                title: '设置成功',
                icon: 'success'
            })
        }
    })
}

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

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

// 移除学校
const handleRemoveSchool = (index) => {
    schoolList.value.splice(index, 1)
}
</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>