|
|
|
@ -36,25 +36,25 @@ |
|
|
|
</uv-form-item> |
|
|
|
|
|
|
|
<!-- 性别 --> |
|
|
|
<uv-form-item label="性别" prop="gender" borderBottom> |
|
|
|
<uv-form-item label="性别" prop="sex" borderBottom @click="openGenderPicker"> |
|
|
|
<uv-input |
|
|
|
v-model="formData.genderText" |
|
|
|
v-model="formData.sexText" |
|
|
|
placeholder="请选择" |
|
|
|
border="none" |
|
|
|
readonly |
|
|
|
@click="showGenderPicker = true" |
|
|
|
|
|
|
|
suffixIcon="arrow-right" |
|
|
|
></uv-input> |
|
|
|
</uv-form-item> |
|
|
|
|
|
|
|
<!-- 所在地区 --> |
|
|
|
<uv-form-item label="所在地区" prop="region" borderBottom> |
|
|
|
<uv-form-item label="所在地区" prop="area" borderBottom @click="openRegionPicker"> |
|
|
|
<uv-input |
|
|
|
v-model="formData.regionText" |
|
|
|
v-model="formData.areaText" |
|
|
|
placeholder="请选择" |
|
|
|
border="none" |
|
|
|
readonly |
|
|
|
@click="showRegionPicker = true" |
|
|
|
|
|
|
|
suffixIcon="arrow-right" |
|
|
|
></uv-input> |
|
|
|
</uv-form-item> |
|
|
|
@ -70,33 +70,31 @@ |
|
|
|
</uv-form-item> |
|
|
|
|
|
|
|
<!-- 职业类型 --> |
|
|
|
<uv-form-item label="职业类型" prop="profession" borderBottom> |
|
|
|
<uv-form-item label="职业类型" prop="career" borderBottom @click="openProfessionPicker"> |
|
|
|
<uv-input |
|
|
|
v-model="formData.professionText" |
|
|
|
v-model="formData.careerText" |
|
|
|
placeholder="请选择" |
|
|
|
border="none" |
|
|
|
readonly |
|
|
|
@click="showProfessionPicker = true" |
|
|
|
suffixIcon="arrow-right" |
|
|
|
></uv-input> |
|
|
|
</uv-form-item> |
|
|
|
|
|
|
|
<!-- 最高学历 --> |
|
|
|
<uv-form-item label="最高学历" prop="education" borderBottom> |
|
|
|
<uv-form-item label="最高学历" prop="qualifications" borderBottom @click="openEducationPicker"> |
|
|
|
<uv-input |
|
|
|
v-model="formData.educationText" |
|
|
|
v-model="formData.qualificationsText" |
|
|
|
placeholder="请选择" |
|
|
|
border="none" |
|
|
|
readonly |
|
|
|
@click="showEducationPicker = true" |
|
|
|
suffixIcon="arrow-right" |
|
|
|
></uv-input> |
|
|
|
</uv-form-item> |
|
|
|
|
|
|
|
<!-- 技能特长 --> |
|
|
|
<uv-form-item label="技能特长" prop="skills"> |
|
|
|
<uv-form-item label="技能特长" prop="skill"> |
|
|
|
<uv-textarea |
|
|
|
v-model="formData.skills" |
|
|
|
v-model="formData.skill" |
|
|
|
placeholder="请输入您的技能特长" |
|
|
|
border="none" |
|
|
|
:maxlength="200" |
|
|
|
@ -112,9 +110,9 @@ |
|
|
|
|
|
|
|
<uv-form ref="emergencyForm" :model="emergencyData" labelPosition="left" labelWidth="120"> |
|
|
|
<!-- 联系人姓名 --> |
|
|
|
<uv-form-item label="姓名" prop="name" borderBottom> |
|
|
|
<uv-form-item label="姓名" prop="emergencyName" borderBottom> |
|
|
|
<uv-input |
|
|
|
v-model="emergencyData.name" |
|
|
|
v-model="emergencyData.emergencyName" |
|
|
|
placeholder="请输入您的紧急联系人姓名" |
|
|
|
border="none" |
|
|
|
clearable |
|
|
|
@ -122,9 +120,9 @@ |
|
|
|
</uv-form-item> |
|
|
|
|
|
|
|
<!-- 联系人手机号 --> |
|
|
|
<uv-form-item label="手机号" prop="phone" borderBottom> |
|
|
|
<uv-form-item label="手机号" prop="emergencyPhone" borderBottom> |
|
|
|
<uv-input |
|
|
|
v-model="emergencyData.phone" |
|
|
|
v-model="emergencyData.emergencyPhone" |
|
|
|
placeholder="请输入您的紧急联系人手机号" |
|
|
|
border="none" |
|
|
|
clearable |
|
|
|
@ -153,70 +151,62 @@ |
|
|
|
<!-- 性别选择器 --> |
|
|
|
<uv-picker |
|
|
|
ref="genderPicker" |
|
|
|
v-model="showGenderPicker" |
|
|
|
:columns="genderOptions" |
|
|
|
@confirm="onGenderConfirm" |
|
|
|
@cancel="showGenderPicker = false" |
|
|
|
></uv-picker> |
|
|
|
|
|
|
|
<!-- 地区选择器 --> |
|
|
|
<uv-picker |
|
|
|
ref="regionPicker" |
|
|
|
v-model="showRegionPicker" |
|
|
|
:columns="regionOptions" |
|
|
|
@confirm="onRegionConfirm" |
|
|
|
@cancel="showRegionPicker = false" |
|
|
|
:columns="addressList" |
|
|
|
@confirm="onAddressConfirm" |
|
|
|
@change="onAddressChange" |
|
|
|
keyName="name" |
|
|
|
></uv-picker> |
|
|
|
|
|
|
|
<!-- 职业选择器 --> |
|
|
|
<uv-picker |
|
|
|
ref="professionPicker" |
|
|
|
v-model="showProfessionPicker" |
|
|
|
:columns="professionOptions" |
|
|
|
@confirm="onProfessionConfirm" |
|
|
|
@cancel="showProfessionPicker = false" |
|
|
|
></uv-picker> |
|
|
|
|
|
|
|
<!-- 学历选择器 --> |
|
|
|
<uv-picker |
|
|
|
ref="educationPicker" |
|
|
|
v-model="showEducationPicker" |
|
|
|
:columns="educationOptions" |
|
|
|
@confirm="onEducationConfirm" |
|
|
|
@cancel="showEducationPicker = false" |
|
|
|
></uv-picker> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import chinaRegions from '@/static/china-regions.json' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'VolunteerApply', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
submitting: false, |
|
|
|
showGenderPicker: false, |
|
|
|
showRegionPicker: false, |
|
|
|
showProfessionPicker: false, |
|
|
|
showEducationPicker: false, |
|
|
|
|
|
|
|
formData: { |
|
|
|
name: '', |
|
|
|
phone: '', |
|
|
|
gender: '', |
|
|
|
genderText: '', |
|
|
|
region: '', |
|
|
|
regionText: '', |
|
|
|
sex: '', |
|
|
|
sexText: '', |
|
|
|
area: '', |
|
|
|
areaText: '', |
|
|
|
address: '', |
|
|
|
profession: '', |
|
|
|
professionText: '', |
|
|
|
education: '', |
|
|
|
educationText: '', |
|
|
|
skills: '' |
|
|
|
career: '', |
|
|
|
careerText: '', |
|
|
|
qualifications: '', |
|
|
|
qualificationsText: '', |
|
|
|
skill: '' |
|
|
|
}, |
|
|
|
|
|
|
|
emergencyData: { |
|
|
|
name: '', |
|
|
|
phone: '' |
|
|
|
emergencyName: '', |
|
|
|
emergencyPhone: '' |
|
|
|
}, |
|
|
|
|
|
|
|
rules: { |
|
|
|
@ -225,19 +215,20 @@ export default { |
|
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' }, |
|
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' } |
|
|
|
], |
|
|
|
gender: [{ required: true, message: '请选择性别', trigger: 'change' }], |
|
|
|
region: [{ required: true, message: '请选择所在地区', trigger: 'change' }], |
|
|
|
sex: [{ required: true, message: '请选择性别', trigger: 'change' }], |
|
|
|
area: [{ required: true, message: '请选择所在地区', trigger: 'change' }], |
|
|
|
address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }], |
|
|
|
profession: [{ required: true, message: '请选择职业类型', trigger: 'change' }], |
|
|
|
education: [{ required: true, message: '请选择最高学历', trigger: 'change' }] |
|
|
|
career: [{ required: true, message: '请选择职业类型', trigger: 'change' }], |
|
|
|
qualifications: [{ required: true, message: '请选择最高学历', trigger: 'change' }] |
|
|
|
}, |
|
|
|
|
|
|
|
genderOptions: [['男', '女']], |
|
|
|
|
|
|
|
regionOptions: [[ |
|
|
|
'北京市', '上海市', '广州市', '深圳市', '杭州市', '南京市', |
|
|
|
'武汉市', '成都市', '西安市', '长沙市', '湖南省长沙市区' |
|
|
|
]], |
|
|
|
provinces: [], //省 |
|
|
|
citys: [], //市 |
|
|
|
areas: [], //区 |
|
|
|
pickerValue: [0, 0, 0], |
|
|
|
defaultValue: [3442, 1, 2], |
|
|
|
|
|
|
|
professionOptions: [[ |
|
|
|
'学生', '教师', '医生', '工程师', '设计师', '销售', |
|
|
|
@ -249,64 +240,158 @@ export default { |
|
|
|
]] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
addressList() { |
|
|
|
return [this.provinces, this.citys, this.areas]; |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
// 如果是编辑模式,加载已有数据 |
|
|
|
if (options.edit && options.data) { |
|
|
|
this.loadExistingData(JSON.parse(decodeURIComponent(options.data))); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
this.getAddressData() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 加载已有数据(编辑模式) |
|
|
|
loadExistingData(data) { |
|
|
|
this.formData = { |
|
|
|
name: data.name || '李双欢', |
|
|
|
phone: data.phone || '15478451233', |
|
|
|
gender: data.gender || '男', |
|
|
|
genderText: data.gender || '男', |
|
|
|
region: data.region || '湖南省长沙市区', |
|
|
|
regionText: data.region || '湖南省长沙市区', |
|
|
|
sex: data.sex || '男', |
|
|
|
sexText: data.sex || '男', |
|
|
|
area: data.area || '湖南省长沙市区', |
|
|
|
areaText: data.area || '湖南省长沙市区', |
|
|
|
address: data.address || '阳光小区45栋二单元1203', |
|
|
|
profession: data.profession || '专业技术人员', |
|
|
|
professionText: data.profession || '专业技术人员', |
|
|
|
education: data.education || '本科', |
|
|
|
educationText: data.education || '本科', |
|
|
|
skills: data.skills || '计算机、跑步' |
|
|
|
career: data.career || '专业技术人员', |
|
|
|
careerText: data.career || '专业技术人员', |
|
|
|
qualifications: data.qualifications || '本科', |
|
|
|
qualificationsText: data.qualifications || '本科', |
|
|
|
skill: data.skill || '计算机、跑步' |
|
|
|
}; |
|
|
|
|
|
|
|
this.emergencyData = { |
|
|
|
name: data.emergencyName || '李四', |
|
|
|
phone: data.emergencyPhone || '14563236320' |
|
|
|
emergencyName: data.emergencyName || '李四', |
|
|
|
emergencyPhone: data.emergencyPhone || '14563236320' |
|
|
|
}; |
|
|
|
}, |
|
|
|
// 初始化地区数据 |
|
|
|
getAddressData() { |
|
|
|
console.log('开始加载地区数据'); |
|
|
|
try { |
|
|
|
// 直接使用导入的地区数据(已简化,只包含name字段) |
|
|
|
this.provinces = chinaRegions; |
|
|
|
console.log('成功加载地区数据,省份数量:', this.provinces.length); |
|
|
|
this.handlePickValueDefault(); |
|
|
|
uni.showToast({ |
|
|
|
title: '地区数据加载成功', |
|
|
|
icon: 'success' |
|
|
|
}); |
|
|
|
} catch (error) { |
|
|
|
console.error('加载地区数据失败:', error); |
|
|
|
uni.showToast({ |
|
|
|
title: '地区数据加载失败', |
|
|
|
icon: 'error' |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
handlePickValueDefault() { |
|
|
|
if (this.provinces.length > 0) { |
|
|
|
// 设置省(默认选择第一个省份) |
|
|
|
this.pickerValue[0] = 0; |
|
|
|
// 设置市(默认选择第一个市) |
|
|
|
this.citys = this.provinces[0]?.children || []; |
|
|
|
this.pickerValue[1] = 0; |
|
|
|
// 设置区(默认选择第一个区) |
|
|
|
this.areas = this.citys[0]?.children || []; |
|
|
|
this.pickerValue[2] = 0; |
|
|
|
|
|
|
|
console.log('初始化地区数据:', { |
|
|
|
provinces: this.provinces.length, |
|
|
|
citys: this.citys.length, |
|
|
|
areas: this.areas.length |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 打开性别选择器 |
|
|
|
openGenderPicker() { |
|
|
|
// console.log('我点击了性别选择去'); |
|
|
|
|
|
|
|
this.$refs.genderPicker.open(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 打开地区选择器 |
|
|
|
openRegionPicker() { |
|
|
|
this.$refs.regionPicker.open(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 打开职业选择器 |
|
|
|
openProfessionPicker() { |
|
|
|
this.$refs.professionPicker.open(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 打开学历选择器 |
|
|
|
openEducationPicker() { |
|
|
|
this.$refs.educationPicker.open(); |
|
|
|
}, |
|
|
|
|
|
|
|
// 性别选择确认 |
|
|
|
onGenderConfirm(value) { |
|
|
|
this.formData.gender = value[0]; |
|
|
|
this.formData.genderText = value[0]; |
|
|
|
this.showGenderPicker = false; |
|
|
|
this.formData.sex = value[0]; |
|
|
|
this.formData.sexText = value[0]; |
|
|
|
}, |
|
|
|
|
|
|
|
// 地区选择变化(三级联动) |
|
|
|
onAddressChange(e) { |
|
|
|
console.log('地区选择变化:', e); |
|
|
|
const { columnIndex, index, value } = e; |
|
|
|
|
|
|
|
if (columnIndex === 0) { |
|
|
|
// 选择省份时,更新市级数据 |
|
|
|
this.citys = this.provinces[index]?.children || []; |
|
|
|
this.areas = this.citys[0]?.children || []; |
|
|
|
this.pickerValue = [index, 0, 0]; |
|
|
|
} else if (columnIndex === 1) { |
|
|
|
// 选择市时,更新区级数据 |
|
|
|
this.areas = this.citys[index]?.children || []; |
|
|
|
this.pickerValue[1] = index; |
|
|
|
this.pickerValue[2] = 0; |
|
|
|
} else if (columnIndex === 2) { |
|
|
|
// 选择区 |
|
|
|
this.pickerValue[2] = index; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 地区选择确认 |
|
|
|
onRegionConfirm(value) { |
|
|
|
this.formData.region = value[0]; |
|
|
|
this.formData.regionText = value[0]; |
|
|
|
this.showRegionPicker = false; |
|
|
|
onAddressConfirm(e) { |
|
|
|
console.log('确认选择的地区:', e); |
|
|
|
if (e.value && e.value.length >= 3) { |
|
|
|
this.formData.address = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`; |
|
|
|
this.formData.addressText = this.formData.address; |
|
|
|
uni.showToast({ |
|
|
|
icon: 'success', |
|
|
|
title: '地区选择成功' |
|
|
|
}); |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
icon: 'none', |
|
|
|
title: '请选择完整的省市区信息' |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 职业选择确认 |
|
|
|
onProfessionConfirm(value) { |
|
|
|
this.formData.profession = value[0]; |
|
|
|
this.formData.professionText = value[0]; |
|
|
|
this.showProfessionPicker = false; |
|
|
|
this.formData.career = value[0]; |
|
|
|
this.formData.careerText = value[0]; |
|
|
|
}, |
|
|
|
|
|
|
|
// 学历选择确认 |
|
|
|
onEducationConfirm(value) { |
|
|
|
this.formData.education = value[0]; |
|
|
|
this.formData.educationText = value[0]; |
|
|
|
this.showEducationPicker = false; |
|
|
|
this.formData.qualifications = value[0]; |
|
|
|
this.formData.qualificationsText = value[0]; |
|
|
|
}, |
|
|
|
|
|
|
|
// 提交申请 |
|
|
|
@ -317,7 +402,7 @@ export default { |
|
|
|
if (!valid) return; |
|
|
|
|
|
|
|
// 验证紧急联系人信息 |
|
|
|
if (!this.emergencyData.name || !this.emergencyData.phone) { |
|
|
|
if (!this.emergencyData.emergencyName || !this.emergencyData.emergencyPhone) { |
|
|
|
uni.showToast({ |
|
|
|
title: '请填写紧急联系人信息', |
|
|
|
icon: 'none' |
|
|
|
@ -357,7 +442,7 @@ export default { |
|
|
|
setTimeout(() => { |
|
|
|
console.log('志愿者申请数据:', { |
|
|
|
...this.formData, |
|
|
|
emergency: this.emergencyData |
|
|
|
...this.emergencyData |
|
|
|
}); |
|
|
|
resolve(); |
|
|
|
}, 1000); |
|
|
|
|