ss-tiku-manage-h5/src/pages/mine/school-info.vue

<template>
  <view class="school-info-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <view class="back-icon">←</view>
      </view>
      <view class="header-title">驾校信息维护</view>
      <view class="header-right" @click="saveInfo">
        <view class="save-btn">保存</view>
      </view>
    </view>
    
    <!-- 驾校信息表单 -->
    <view class="form-section">
      <view class="form-group">
        <view class="form-label">驾校名称</view>
        <view class="form-control">
          <input 
            v-model="schoolInfo.name" 
            class="form-input" 
            placeholder="请输入驾校名称"
            maxlength="50"
          />
        </view>
      </view>
      
      <view class="form-group">
        <view class="form-label">联系人</view>
        <view class="form-control">
          <input 
            v-model="schoolInfo.contact" 
            class="form-input" 
            placeholder="请输入联系人姓名"
            maxlength="20"
          />
        </view>
      </view>
      
      <view class="form-group">
        <view class="form-label">联系电话</view>
        <view class="form-control">
          <input 
            v-model="schoolInfo.phone" 
            class="form-input" 
            placeholder="请输入联系电话"
            maxlength="15"
            type="number"
          />
        </view>
      </view>
      
      <view class="form-group">
        <view class="form-label">地址</view>
        <view class="form-control">
          <input 
            v-model="schoolInfo.address" 
            class="form-input" 
            placeholder="请输入驾校地址"
            maxlength="100"
          />
        </view>
      </view>
      
      <view class="form-group">
        <view class="form-label">邮箱</view>
        <view class="form-control">
          <input 
            v-model="schoolInfo.email" 
            class="form-input" 
            placeholder="请输入邮箱地址"
            maxlength="50"
            type="email"
          />
        </view>
      </view>
      
      <view class="form-group">
        <view class="form-label">经营范围</view>
        <view class="form-control">
          <textarea 
            v-model="schoolInfo.businessScope" 
            class="form-textarea" 
            placeholder="请输入经营范围"
            maxlength="200"
            rows="3"
          ></textarea>
        </view>
      </view>
      
      <view class="form-group">
        <view class="form-label">驾校简介</view>
        <view class="form-control">
          <textarea 
            v-model="schoolInfo.description" 
            class="form-textarea" 
            placeholder="请输入驾校简介"
            maxlength="500"
            rows="4"
          ></textarea>
        </view>
      </view>
    </view>
    
    <!-- 提示信息 -->
    <view class="tips-section">
      <view class="tips-title">注意事项</view>
      <view class="tips-content">
        <view class="tip-item">• 驾校名称、联系人和联系电话为必填项</view>
        <view class="tip-item">• 核心功能开关由平台控制，不可在此修改</view>
        <view class="tip-item">• 修改信息后需点击保存按钮生效</view>
        <view class="tip-item">• 请确保填写的信息真实有效</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from "vue"

  // 驾校信息
  const schoolInfo = ref({
    name: '顺达驾校',
    contact: '张校长',
    phone: '13800138000',
    address: '北京市朝阳区建国路88号',
    email: 'contact@shunda.com',
    businessScope: '机动车驾驶员培训（小型汽车、大型货车）',
    description: '顺达驾校成立于2005年，是北京市知名的驾驶员培训机构，拥有专业的教练团队和完善的教学设施，致力于为学员提供优质的驾驶培训服务。'
  })
  
  onMounted(() => {
    // 实际项目中应从接口获取驾校信息
    // loadSchoolInfo()
  })
  
  // 返回上一页
  function goBack() {
    uni.navigateBack({ delta: 1 })
  }
  
  // 保存驾校信息
  function saveInfo() {
    // 表单验证
    if (!schoolInfo.value.name) {
      uni.showToast({ title: '请输入驾校名称', icon: 'none' })
      return
    }
    if (!schoolInfo.value.contact) {
      uni.showToast({ title: '请输入联系人', icon: 'none' })
      return
    }
    if (!schoolInfo.value.phone) {
      uni.showToast({ title: '请输入联系电话', icon: 'none' })
      return
    }
    
    // 实际项目中应调用接口保存信息
    uni.showLoading({ title: '保存中...' })
    
    setTimeout(() => {
      uni.hideLoading()
      uni.showToast({ title: '保存成功', icon: 'success' })
      goBack()
    }, 1000)
  }
</script>

<style lang="scss" scoped>
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #f5f7fa;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }
  /* #endif */

  .school-info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  /* 页面头部 */
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 120rpx;
    background-color: #fff;
    padding: 0 32rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }
  
  .header-left {
    width: 60rpx;
  }
  
  .back-icon {
    font-size: 40rpx;
    color: #303133;
    cursor: pointer;
  }
  
  .header-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
  }
  
  .header-right {
    width: 60rpx;
    text-align: right;
  }
  
  .save-btn {
    font-size: 28rpx;
    color: #409eff;
    font-weight: 600;
    cursor: pointer;
  }
  
  /* 表单区域 */
  .form-section {
    flex: 1;
    padding: 32rpx;
    background-color: #fff;
    margin: 16rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }
  
  .form-group {
    margin-bottom: 32rpx;
  }
  
  .form-label {
    font-size: 28rpx;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12rpx;
    line-height: 1.2;
  }
  
  .form-control {
    position: relative;
  }
  
  .form-input {
    width: 100%;
    height: 80rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #303133;
    border: 1rpx solid #dcdfe6;
    border-radius: 8rpx;
    background-color: #f9f9f9;
    box-sizing: border-box;
  }
  
  .form-input:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
  }
  
  .form-textarea {
    width: 100%;
    min-height: 160rpx;
    padding: 24rpx;
    font-size: 28rpx;
    color: #303133;
    border: 1rpx solid #dcdfe6;
    border-radius: 8rpx;
    background-color: #f9f9f9;
    box-sizing: border-box;
    resize: none;
  }
  
  .form-textarea:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
  }
  
  /* 提示信息 */
  .tips-section {
    padding: 32rpx;
    background-color: #ecf5ff;
    margin: 16rpx;
    border-radius: 16rpx;
    border-left: 8rpx solid #409eff;
  }
  
  .tips-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 16rpx;
    line-height: 1.2;
  }
  
  .tips-content {
    font-size: 24rpx;
    color: #606266;
    line-height: 1.6;
  }
  
  .tip-item {
    margin-bottom: 8rpx;
  }
  
  /* 响应式设计 */
  @media screen and (min-width: 500px) {
    .school-info-container {
      max-width: 900px;
      margin: 0 auto;
    }
    
    .form-section {
      padding: 40rpx;
    }
    
    .form-group {
      margin-bottom: 40rpx;
    }
    
    .form-label {
      font-size: 32rpx;
      margin-bottom: 16rpx;
    }
    
    .form-input {
      height: 100rpx;
      font-size: 32rpx;
      padding: 0 32rpx;
    }
    
    .form-textarea {
      min-height: 200rpx;
      font-size: 32rpx;
      padding: 32rpx;
    }
    
    .tips-section {
      padding: 40rpx;
    }
    
    .tips-title {
      font-size: 32rpx;
      margin-bottom: 24rpx;
    }
    
    .tips-content {
      font-size: 28rpx;
    }
  }
  
  /* 平板和大屏响应式 */
  @media screen and (min-width: 768px) {
    .form-section {
      padding: 50rpx;
    }
    
    .form-input {
      height: 120rpx;
      font-size: 36rpx;
    }
    
    .form-textarea {
      min-height: 240rpx;
      font-size: 36rpx;
    }
  }
</style>