484 lines
12 KiB
Vue
484 lines
12 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="header">
|
||
<text class="title">管理师注册申请</text>
|
||
<text class="subtitle">请填写以下信息，我们将在1-3个工作日内完成审核</text>
|
||
</view>
|
||
|
||
<view class="form">
|
||
<!-- 基本信息 -->
|
||
<view class="section">
|
||
<view class="section-title">基本信息</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">姓名 <text class="required">*</text></text>
|
||
<input v-model="form.teacherName" placeholder="请输入真实姓名" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">手机号 <text class="required">*</text></text>
|
||
<input v-model="form.phone" type="number" placeholder="请输入手机号" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">性别</text>
|
||
<picker :range="genderOptions" range-key="label" @change="onGenderChange">
|
||
<view class="picker">
|
||
{{ form.gender || '请选择性别' }}
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">出生年月</text>
|
||
<picker mode="date" :value="form.birthDate" @change="onBirthDateChange">
|
||
<view class="picker">
|
||
{{ form.birthDate || '请选择出生年月' }}
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 教育背景 -->
|
||
<view class="section">
|
||
<view class="section-title">教育背景</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">最高学历</text>
|
||
<picker :range="educationOptions" range-key="label" @change="onEducationChange">
|
||
<view class="picker">
|
||
{{ form.education || '请选择学历' }}
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">毕业学校</text>
|
||
<input v-model="form.school" placeholder="请输入毕业学校" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">专业</text>
|
||
<input v-model="form.major" placeholder="请输入专业" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 工作经验 -->
|
||
<view class="section">
|
||
<view class="section-title">工作经验</view>
|
||
|
||
<view class="form-item">
|
||
<textarea
|
||
v-model="form.workExperience"
|
||
placeholder="请简要描述您的工作经验"
|
||
maxlength="500"
|
||
/>
|
||
<view class="count">{{ form.workExperience.length }}/500</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 自我介绍 -->
|
||
<view class="section">
|
||
<view class="section-title">自我介绍</view>
|
||
|
||
<view class="form-item">
|
||
<textarea
|
||
v-model="form.selfIntroduction"
|
||
placeholder="请介绍一下您自己"
|
||
maxlength="500"
|
||
/>
|
||
<view class="count">{{ form.selfIntroduction.length }}/500</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务信息 -->
|
||
<view class="section">
|
||
<view class="section-title">服务信息</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">居住地址</text>
|
||
<input v-model="form.address" placeholder="请输入居住地址" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">可服务区域</text>
|
||
<input v-model="form.serviceArea" placeholder="例如：朝阳区、海淀区" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">可服务时间</text>
|
||
<textarea
|
||
v-model="form.availableTime"
|
||
placeholder="例如：周一至周五 18:00-21:00"
|
||
maxlength="200"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 身份证信息 -->
|
||
<view class="section">
|
||
<view class="section-title">身份证信息</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">身份证号</text>
|
||
<input v-model="form.idCard" placeholder="请输入身份证号" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">身份证照片</text>
|
||
<view class="id-card-upload">
|
||
<view class="upload-item">
|
||
<image
|
||
v-if="form.idCardFront"
|
||
:src="form.idCardFront"
|
||
mode="aspectFill"
|
||
@click="previewImage(form.idCardFront)"
|
||
/>
|
||
<view v-else class="upload-btn" @click="uploadIdCard('front')">
|
||
<text class="iconfont icon-camera"></text>
|
||
<text>上传正面</text>
|
||
</view>
|
||
</view>
|
||
<view class="upload-item">
|
||
<image
|
||
v-if="form.idCardBack"
|
||
:src="form.idCardBack"
|
||
mode="aspectFill"
|
||
@click="previewImage(form.idCardBack)"
|
||
/>
|
||
<view v-else class="upload-btn" @click="uploadIdCard('back')">
|
||
<text class="iconfont icon-camera"></text>
|
||
<text>上传反面</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-btn">
|
||
<button @click="submit" :disabled="!canSubmit">提交申请</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { managerApi } from '@/api/index.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
teacherName: '',
|
||
phone: '',
|
||
gender: '',
|
||
birthDate: '',
|
||
education: '',
|
||
school: '',
|
||
major: '',
|
||
workExperience: '',
|
||
selfIntroduction: '',
|
||
address: '',
|
||
serviceArea: '',
|
||
availableTime: '',
|
||
idCard: '',
|
||
idCardFront: '',
|
||
idCardBack: ''
|
||
},
|
||
genderOptions: [
|
||
{ label: '男', value: '男' },
|
||
{ label: '女', value: '女' }
|
||
],
|
||
educationOptions: [
|
||
{ label: '高中', value: '高中' },
|
||
{ label: '大专', value: '大专' },
|
||
{ label: '本科', value: '本科' },
|
||
{ label: '硕士', value: '硕士' },
|
||
{ label: '博士', value: '博士' }
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
canSubmit() {
|
||
return this.form.teacherName && this.form.phone
|
||
}
|
||
},
|
||
methods: {
|
||
onGenderChange(e) {
|
||
this.form.gender = this.genderOptions[e.detail.value].value
|
||
},
|
||
|
||
onBirthDateChange(e) {
|
||
this.form.birthDate = e.detail.value
|
||
},
|
||
|
||
onEducationChange(e) {
|
||
this.form.education = this.educationOptions[e.detail.value].value
|
||
},
|
||
|
||
uploadIdCard(type) {
|
||
const self = this
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
uni.showLoading({ title: '上传中...' })
|
||
|
||
self.uploadImage(res.tempFilePaths[0]).then(url => {
|
||
if (type === 'front') {
|
||
self.form.idCardFront = url
|
||
} else {
|
||
self.form.idCardBack = url
|
||
}
|
||
uni.hideLoading()
|
||
}).catch(error => {
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '上传失败', icon: 'none' })
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
previewImage(url) {
|
||
uni.previewImage({
|
||
urls: [url],
|
||
current: url
|
||
})
|
||
},
|
||
|
||
uploadImage(filePath) {
|
||
return new Promise((resolve, reject) => {
|
||
uni.uploadFile({
|
||
url: '/api/upload/image',
|
||
filePath: filePath,
|
||
name: 'file',
|
||
success: (res) => {
|
||
const data = JSON.parse(res.data)
|
||
if (data.code === 200) {
|
||
resolve(data.data)
|
||
} else {
|
||
reject(new Error(data.message))
|
||
}
|
||
},
|
||
fail: reject
|
||
})
|
||
})
|
||
},
|
||
|
||
async submit() {
|
||
if (!this.canSubmit) return
|
||
|
||
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
|
||
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
uni.showLoading({ title: '提交中...' })
|
||
|
||
try {
|
||
// 模拟提交
|
||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||
|
||
// 保存申请信息到本地
|
||
const application = {
|
||
...this.form,
|
||
role: 'manager',
|
||
status: 'pending',
|
||
applyTime: new Date().toISOString(),
|
||
id: Date.now()
|
||
}
|
||
uni.setStorageSync('managerApplication', application)
|
||
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
title: '提交成功',
|
||
content: '您的申请已提交，我们将在1-3个工作日内完成审核。审核通过后，您将获得管理权限。',
|
||
showCancel: false,
|
||
confirmText: '查看审核状态',
|
||
success: () => {
|
||
uni.redirectTo({
|
||
url: '/pages/auth/application-status?role=manager'
|
||
})
|
||
}
|
||
})
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: error.message || '提交失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
min-height: 100vh;
|
||
background: #f8f8f8;
|
||
padding-bottom: 120rpx;
|
||
}
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
padding: 60rpx 30rpx 40rpx;
|
||
|
||
.title {
|
||
display: block;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
}
|
||
|
||
.form {
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
.section {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 30rpx;
|
||
padding-left: 20rpx;
|
||
border-left: 6rpx solid #667eea;
|
||
}
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 30rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 16rpx;
|
||
|
||
.required {
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
|
||
input, textarea {
|
||
width: 100%;
|
||
padding: 24rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
textarea {
|
||
min-height: 200rpx;
|
||
}
|
||
|
||
.picker {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
|
||
.arrow {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.count {
|
||
text-align: right;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.id-card-upload {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
.upload-item {
|
||
flex: 1;
|
||
height: 240rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.upload-btn {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f8f8f8;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.iconfont {
|
||
font-size: 60rpx;
|
||
color: #999;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 20rpx 30rpx;
|
||
background: #fff;
|
||
border-top: 1rpx solid #eee;
|
||
|
||
button {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
|
||
&[disabled] {
|
||
background: #ccc;
|
||
}
|
||
}
|
||
}
|
||
</style>
|