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