480 lines
11 KiB
Vue
480 lines
11 KiB
Vue
<template>
|
||
<view class="apply-page">
|
||
<view class="form-container">
|
||
<view class="form-header gradient-bg">
|
||
<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.idCard"
|
||
placeholder="请输入身份证号（选填）"
|
||
maxlength="18"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分销类型 -->
|
||
<view class="form-section">
|
||
<view class="section-title">分销类型</view>
|
||
|
||
<radio-group @change="onTypeChange">
|
||
<view class="type-options">
|
||
<label class="type-option" :class="{ active: formData.type === 'part_time' }">
|
||
<radio value="part_time" :checked="formData.type === 'part_time'" />
|
||
<view class="option-content">
|
||
<text class="option-title">兼职分销员</text>
|
||
<text class="option-desc">灵活时间，自由推广</text>
|
||
</view>
|
||
</label>
|
||
|
||
<label class="type-option" :class="{ active: formData.type === 'full_time' }">
|
||
<radio value="full_time" :checked="formData.type === 'full_time'" />
|
||
<view class="option-content">
|
||
<text class="option-title">全职分销员</text>
|
||
<text class="option-desc">专职推广，更高收益</text>
|
||
</view>
|
||
</label>
|
||
</view>
|
||
</radio-group>
|
||
</view>
|
||
|
||
<!-- 推广经验 -->
|
||
<view class="form-section">
|
||
<view class="section-title">推广经验</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">是否有推广经验</text>
|
||
<radio-group @change="onExperienceChange">
|
||
<view class="radio-group">
|
||
<label class="radio-item">
|
||
<radio value="yes" :checked="formData.hasExperience === 'yes'" />
|
||
<text>有</text>
|
||
</label>
|
||
<label class="radio-item">
|
||
<radio value="no" :checked="formData.hasExperience === 'no'" />
|
||
<text>无</text>
|
||
</label>
|
||
</view>
|
||
</radio-group>
|
||
</view>
|
||
|
||
<view class="form-item" v-if="formData.hasExperience === 'yes'">
|
||
<text class="label">推广经验描述</text>
|
||
<textarea
|
||
class="textarea"
|
||
v-model="formData.experienceDesc"
|
||
placeholder="请简要描述您的推广经验"
|
||
maxlength="500"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 申请理由 -->
|
||
<view class="form-section">
|
||
<view class="section-title">申请理由</view>
|
||
|
||
<view class="form-item">
|
||
<textarea
|
||
class="textarea"
|
||
v-model="formData.applyReason"
|
||
placeholder="请说明您申请成为分销员的理由（选填）"
|
||
maxlength="500"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 佣金说明 -->
|
||
<view class="commission-info">
|
||
<view class="info-title">💰 佣金说明</view>
|
||
<view class="info-item">
|
||
<text class="info-label">一级佣金：</text>
|
||
<text class="info-value">10-15%</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">二级佣金：</text>
|
||
<text class="info-value">5-7%</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">提现门槛：</text>
|
||
<text class="info-value">满100元可提现</text>
|
||
</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: '',
|
||
idCard: '',
|
||
type: 'part_time',
|
||
hasExperience: 'no',
|
||
experienceDesc: '',
|
||
applyReason: ''
|
||
},
|
||
agreed: false,
|
||
submitting: false
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
onTypeChange(e) {
|
||
this.formData.type = e.detail.value
|
||
},
|
||
|
||
onExperienceChange(e) {
|
||
this.formData.hasExperience = e.detail.value
|
||
if (e.detail.value === 'no') {
|
||
this.formData.experienceDesc = ''
|
||
}
|
||
},
|
||
|
||
onAgreementChange(e) {
|
||
this.agreed = e.detail.value.includes('agree')
|
||
},
|
||
|
||
viewAgreement() {
|
||
uni.navigateTo({
|
||
url: '/pages/distributor/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.agreed) {
|
||
uni.showToast({ title: '请阅读并同意分销员协议', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
return true
|
||
},
|
||
|
||
async submitForm() {
|
||
if (!this.validateForm()) {
|
||
return
|
||
}
|
||
|
||
this.submitting = true
|
||
|
||
try {
|
||
// 模拟提交
|
||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||
|
||
// 保存申请信息到本地
|
||
const application = {
|
||
...this.formData,
|
||
role: 'distributor',
|
||
status: 'pending',
|
||
applyTime: new Date().toISOString(),
|
||
id: Date.now()
|
||
}
|
||
uni.setStorageSync('distributorApplication', application)
|
||
|
||
uni.showModal({
|
||
title: '提交成功',
|
||
content: '您的申请已提交，我们将在3个工作日内审核。审核通过后，您将获得分销码和推广权限。',
|
||
showCancel: false,
|
||
confirmText: '查看审核状态',
|
||
success: () => {
|
||
uni.redirectTo({
|
||
url: '/pages/auth/application-status?role=distributor'
|
||
})
|
||
}
|
||
})
|
||
} 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;
|
||
}
|
||
|
||
.gradient-bg {
|
||
background: linear-gradient(135deg, #7dd3c0 0%, #5fb8a8 100%);
|
||
}
|
||
|
||
.form-header {
|
||
padding: 40rpx 30rpx;
|
||
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;
|
||
}
|
||
|
||
.type-options {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.type-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
padding: 30rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid transparent;
|
||
|
||
&.active {
|
||
background: #f0f9f7;
|
||
border-color: #7dd3c0;
|
||
}
|
||
}
|
||
|
||
.option-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.option-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.option-desc {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.radio-group {
|
||
display: flex;
|
||
gap: 40rpx;
|
||
}
|
||
|
||
.radio-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.commission-info {
|
||
padding: 30rpx;
|
||
background: #f0f9f7;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.info-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 15rpx 0;
|
||
border-bottom: 1rpx solid #e0e0e0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #7dd3c0;
|
||
}
|
||
|
||
.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>
|