405 lines
9.8 KiB
Vue
405 lines
9.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="apply-page">
|
|||
|
|
<view class="form-container">
|
|||
|
|
<view class="form-header">
|
|||
|
|
<text class="header-title">加盟申请</text>
|
|||
|
|
<text class="header-subtitle">请填写以下信息，我们将尽快与您联系</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-content">
|
|||
|
|
<!-- 基本信息 -->
|
|||
|
|
<view class="form-section">
|
|||
|
|
<view class="section-title">基本信息</view>
|
|||
|
|
|
|||
|
|
<view class="form-item required">
|
|||
|
|
<text class="label">姓名</text>
|
|||
|
|
<input
|
|||
|
|
class="input"
|
|||
|
|
v-model="formData.name"
|
|||
|
|
placeholder="请输入您的姓名"
|
|||
|
|
maxlength="20"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item required">
|
|||
|
|
<text class="label">联系电话</text>
|
|||
|
|
<input
|
|||
|
|
class="input"
|
|||
|
|
v-model="formData.phone"
|
|||
|
|
type="number"
|
|||
|
|
placeholder="请输入您的手机号"
|
|||
|
|
maxlength="11"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label">电子邮箱</text>
|
|||
|
|
<input
|
|||
|
|
class="input"
|
|||
|
|
v-model="formData.email"
|
|||
|
|
placeholder="请输入您的邮箱（选填）"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 地区信息 -->
|
|||
|
|
<view class="form-section">
|
|||
|
|
<view class="section-title">意向地区</view>
|
|||
|
|
|
|||
|
|
<view class="form-item required">
|
|||
|
|
<text class="label">省份</text>
|
|||
|
|
<picker mode="selector" :range="provinces" @change="onProvinceChange">
|
|||
|
|
<view class="picker">
|
|||
|
|
<text>{{ formData.province || '请选择省份' }}</text>
|
|||
|
|
<text class="arrow">></text>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item required">
|
|||
|
|
<text class="label">城市</text>
|
|||
|
|
<picker mode="selector" :range="cities" @change="onCityChange">
|
|||
|
|
<view class="picker">
|
|||
|
|
<text>{{ formData.city || '请选择城市' }}</text>
|
|||
|
|
<text class="arrow">></text>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label">区县</text>
|
|||
|
|
<input
|
|||
|
|
class="input"
|
|||
|
|
v-model="formData.district"
|
|||
|
|
placeholder="请输入区县（选填）"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label">详细地址</text>
|
|||
|
|
<textarea
|
|||
|
|
class="textarea"
|
|||
|
|
v-model="formData.address"
|
|||
|
|
placeholder="请输入详细地址（选填）"
|
|||
|
|
maxlength="200"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 投资信息 -->
|
|||
|
|
<view class="form-section">
|
|||
|
|
<view class="section-title">投资信息</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label">预计投资金额</text>
|
|||
|
|
<picker mode="selector" :range="investmentRanges" @change="onInvestmentChange">
|
|||
|
|
<view class="picker">
|
|||
|
|
<text>{{ formData.investmentAmount || '请选择投资金额' }}</text>
|
|||
|
|
<text class="arrow">></text>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label">经营经验</text>
|
|||
|
|
<textarea
|
|||
|
|
class="textarea"
|
|||
|
|
v-model="formData.businessExperience"
|
|||
|
|
placeholder="请简要描述您的经营经验（选填）"
|
|||
|
|
maxlength="500"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label">加盟意向说明</text>
|
|||
|
|
<textarea
|
|||
|
|
class="textarea"
|
|||
|
|
v-model="formData.intentionDescription"
|
|||
|
|
placeholder="请描述您的加盟意向和想法（选填）"
|
|||
|
|
maxlength="500"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 协议 -->
|
|||
|
|
<view class="agreement-section">
|
|||
|
|
<checkbox-group @change="onAgreementChange">
|
|||
|
|
<label class="agreement-label">
|
|||
|
|
<checkbox value="agree" :checked="agreed" />
|
|||
|
|
<text class="agreement-text">
|
|||
|
|
我已阅读并同意
|
|||
|
|
<text class="link" @click.stop="viewAgreement">《加盟协议》</text>
|
|||
|
|
</text>
|
|||
|
|
</label>
|
|||
|
|
</checkbox-group>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 提交按钮 -->
|
|||
|
|
<button class="submit-btn" @click="submitForm" :disabled="submitting">
|
|||
|
|
{{ submitting ? '提交中...' : '提交申请' }}
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formData: {
|
|||
|
|
name: '',
|
|||
|
|
phone: '',
|
|||
|
|
email: '',
|
|||
|
|
province: '',
|
|||
|
|
city: '',
|
|||
|
|
district: '',
|
|||
|
|
address: '',
|
|||
|
|
investmentAmount: '',
|
|||
|
|
businessExperience: '',
|
|||
|
|
intentionDescription: ''
|
|||
|
|
},
|
|||
|
|
provinces: ['浙江省', '江苏省', '上海市', '广东省', '北京市'],
|
|||
|
|
cities: [],
|
|||
|
|
investmentRanges: ['10-20万', '20-50万', '50-100万', '100万以上'],
|
|||
|
|
agreed: false,
|
|||
|
|
submitting: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
onProvinceChange(e) {
|
|||
|
|
this.formData.province = this.provinces[e.detail.value]
|
|||
|
|
this.formData.city = ''
|
|||
|
|
// TODO: 根据省份加载城市列表
|
|||
|
|
this.cities = ['杭州市', '宁波市', '温州市', '绍兴市']
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onCityChange(e) {
|
|||
|
|
this.formData.city = this.cities[e.detail.value]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onInvestmentChange(e) {
|
|||
|
|
this.formData.investmentAmount = this.investmentRanges[e.detail.value]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onAgreementChange(e) {
|
|||
|
|
this.agreed = e.detail.value.includes('agree')
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
viewAgreement() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/franchise/agreement'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
validateForm() {
|
|||
|
|
if (!this.formData.name) {
|
|||
|
|
uni.showToast({ title: '请输入姓名', icon: 'none' })
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.formData.phone) {
|
|||
|
|
uni.showToast({ title: '请输入联系电话', icon: 'none' })
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
|
|||
|
|
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.formData.province) {
|
|||
|
|
uni.showToast({ title: '请选择省份', icon: 'none' })
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.formData.city) {
|
|||
|
|
uni.showToast({ title: '请选择城市', icon: 'none' })
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.agreed) {
|
|||
|
|
uni.showToast({ title: '请阅读并同意加盟协议', icon: 'none' })
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async submitForm() {
|
|||
|
|
if (!this.validateForm()) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.submitting = true
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// TODO: 调用API提交申请
|
|||
|
|
// await this.$api.franchise.submitApplication(this.formData)
|
|||
|
|
|
|||
|
|
// 模拟提交
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, 1500))
|
|||
|
|
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提交成功',
|
|||
|
|
content: '您的加盟申请已提交，我们将在3个工作日内与您联系',
|
|||
|
|
showCancel: false,
|
|||
|
|
success: () => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('提交申请失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '提交失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
} finally {
|
|||
|
|
this.submitting = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.apply-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #f0f9f7;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-container {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-header {
|
|||
|
|
padding: 40rpx 30rpx;
|
|||
|
|
background: linear-gradient(135deg, #7dd3c0 0%, #5fb8a8 100%);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-title {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #ffffff;
|
|||
|
|
margin-bottom: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-subtitle {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: rgba(255, 255, 255, 0.9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-content {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-section {
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
border-left: 6rpx solid #7dd3c0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item {
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
|
|||
|
|
&.required .label::before {
|
|||
|
|
content: '*';
|
|||
|
|
color: #ff6b6b;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
margin-bottom: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input, .textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
border: 2rpx solid transparent;
|
|||
|
|
|
|||
|
|
&:focus {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-color: #7dd3c0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.textarea {
|
|||
|
|
min-height: 150rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.arrow {
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-section {
|
|||
|
|
margin: 40rpx 0;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
background: #f0f9f7;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-label {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.link {
|
|||
|
|
color: #7dd3c0;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.submit-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
background: linear-gradient(135deg, #7dd3c0 0%, #5fb8a8 100%);
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border: none;
|
|||
|
|
|
|||
|
|
&[disabled] {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|