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>
|