394 lines
9.1 KiB
Vue
394 lines
9.1 KiB
Vue
<template>
|
||
<view class="provider-apply">
|
||
<view class="header">
|
||
<text class="title">🏢 专业服务商注册</text>
|
||
<text class="subtitle">提供专业服务，共创美好未来</text>
|
||
</view>
|
||
|
||
<!-- 服务商类型选择 -->
|
||
<view class="type-section">
|
||
<text class="section-title">选择服务类型</text>
|
||
<view class="type-grid">
|
||
<view
|
||
v-for="(type, index) in serviceTypes"
|
||
:key="index"
|
||
class="type-item"
|
||
:class="{ active: form.serviceType === type.value }"
|
||
@tap="form.serviceType = type.value"
|
||
>
|
||
<text class="type-icon">{{ type.icon }}</text>
|
||
<text class="type-name">{{ type.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 申请表单 -->
|
||
<view class="form-section">
|
||
<text class="section-title">基本信息</text>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">机构名称 *</text>
|
||
<input v-model="form.orgName" class="form-input" placeholder="请输入机构全称" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">统一社会信用代码 *</text>
|
||
<input v-model="form.creditCode" class="form-input" placeholder="请输入18位信用代码" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">法人代表 *</text>
|
||
<input v-model="form.legalPerson" class="form-input" placeholder="请输入法人姓名" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">联系人 *</text>
|
||
<input v-model="form.contactPerson" class="form-input" placeholder="请输入联系人姓名" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">联系电话 *</text>
|
||
<input
|
||
v-model="form.phone"
|
||
class="form-input"
|
||
type="number"
|
||
placeholder="请输入手机号码"
|
||
/>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">机构地址 *</text>
|
||
<input v-model="form.address" class="form-input" placeholder="请输入详细地址" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">服务区域 *</text>
|
||
<input v-model="form.serviceArea" class="form-input" placeholder="如：北京市海淀区" />
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">机构简介 *</text>
|
||
<textarea
|
||
v-model="form.introduction"
|
||
class="form-textarea"
|
||
placeholder="请介绍您的机构背景、服务特色等（200字以内）"
|
||
maxlength="200"
|
||
/>
|
||
<text class="char-count">{{ form.introduction.length }}/200</text>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">服务项目 *</text>
|
||
<textarea
|
||
v-model="form.services"
|
||
class="form-textarea"
|
||
placeholder="请详细描述您可以提供的服务项目"
|
||
/>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">营业执照</text>
|
||
<view class="upload-section">
|
||
<view v-if="form.license" class="image-preview">
|
||
<image :src="form.license" mode="aspectFill" />
|
||
<view class="delete-btn" @tap="form.license = ''">✕</view>
|
||
</view>
|
||
<view v-else class="upload-btn" @tap="uploadLicense">
|
||
<text class="upload-icon">📷</text>
|
||
<text class="upload-text">上传营业执照</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-section">
|
||
<button class="submit-btn" @tap="submitApplication">提交申请</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
serviceTypes: [
|
||
{ icon: '🎨', name: '艺术培训', value: 'art' },
|
||
{ icon: '⚽', name: '体育运动', value: 'sports' },
|
||
{ icon: '🔬', name: '科学实验', value: 'science' },
|
||
{ icon: '🎵', name: '音乐舞蹈', value: 'music' },
|
||
{ icon: '📚', name: '学科辅导', value: 'tutoring' },
|
||
{ icon: '🎭', name: '其他服务', value: 'other' }
|
||
],
|
||
form: {
|
||
serviceType: '',
|
||
orgName: '',
|
||
creditCode: '',
|
||
legalPerson: '',
|
||
contactPerson: '',
|
||
phone: '',
|
||
address: '',
|
||
serviceArea: '',
|
||
introduction: '',
|
||
services: '',
|
||
license: ''
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
uploadLicense() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (res) => {
|
||
this.form.license = res.tempFilePaths[0]
|
||
}
|
||
})
|
||
},
|
||
submitApplication() {
|
||
// 验证表单
|
||
if (!this.form.serviceType) {
|
||
uni.showToast({ title: '请选择服务类型', icon: 'none' })
|
||
return
|
||
}
|
||
if (!this.form.orgName) {
|
||
uni.showToast({ title: '请输入机构名称', icon: 'none' })
|
||
return
|
||
}
|
||
if (!this.form.phone) {
|
||
uni.showToast({ title: '请输入联系电话', icon: 'none' })
|
||
return
|
||
}
|
||
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
|
||
uni.showToast({ title: '手机号格式不正确', icon: 'none' })
|
||
return
|
||
}
|
||
if (!this.form.address) {
|
||
uni.showToast({ title: '请输入机构地址', icon: 'none' })
|
||
return
|
||
}
|
||
if (!this.form.introduction) {
|
||
uni.showToast({ title: '请填写机构简介', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
uni.showLoading({ title: '提交中...' })
|
||
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
|
||
// 保存申请信息到本地
|
||
const application = {
|
||
...this.form,
|
||
role: 'serviceProvider',
|
||
status: 'pending',
|
||
applyTime: new Date().toISOString(),
|
||
id: Date.now()
|
||
}
|
||
uni.setStorageSync('serviceProviderApplication', application)
|
||
|
||
uni.showModal({
|
||
title: '提交成功',
|
||
content: '您的申请已提交，我们会在5个工作日内完成审核。审核通过后，您可以发布课程和服务。',
|
||
showCancel: false,
|
||
confirmText: '查看审核状态',
|
||
success: () => {
|
||
uni.redirectTo({
|
||
url: '/pages/auth/application-status?role=serviceProvider'
|
||
})
|
||
}
|
||
})
|
||
}, 1000)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.provider-apply {
|
||
min-height: 100vh;
|
||
background: #f0f9f7;
|
||
padding-bottom: 120rpx;
|
||
}
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, #2d9687 0%, #1e7a6d 100%);
|
||
padding: 50rpx 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.title {
|
||
display: block;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.subtitle {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.type-section,
|
||
.form-section {
|
||
background: #ffffff;
|
||
margin: 20rpx;
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.section-title {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
|
||
.type-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.type-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 30rpx 20rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid transparent;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.type-item.active {
|
||
background: #e8f5f3;
|
||
border-color: #2d9687;
|
||
}
|
||
|
||
.type-icon {
|
||
font-size: 50rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.type-name {
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0 25rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
min-height: 150rpx;
|
||
padding: 20rpx 25rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.char-count {
|
||
display: block;
|
||
text-align: right;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.upload-section {
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
.image-preview {
|
||
position: relative;
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
}
|
||
|
||
.image-preview image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.delete-btn {
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: -10rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: #ff4444;
|
||
color: #ffffff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.upload-btn {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
border: 2rpx dashed #cccccc;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 60rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.submit-section {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 20rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.submit-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: #2d9687;
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
border-radius: 44rpx;
|
||
border: none;
|
||
}
|
||
</style>
|