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