383 lines
8.4 KiB
Vue
383 lines
8.4 KiB
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> |