427 lines
14 KiB
Vue
427 lines
14 KiB
Vue
<template>
|
|
<div class="editorUserDataV2">
|
|
<div style='height: 1px'></div>
|
|
<div class='editor_box'>
|
|
<div class='font16 bold color3 editor_basic_Data'>期望对方</div>
|
|
<div class='editor_basic_Data alignment' v-for='(item,index) in basicData' :key='index'>
|
|
<div class='font14 color3 bold'>{{item.name}}</div>
|
|
<div class='alignment_right basic_Data'>
|
|
<img class='triangle_icon' src='https://image.fulllinkai.com/202112/01/8db487ddb31c58454c5cd1ae462c9ce7.png' alt=''>
|
|
<van-field class="inputBox input_r" type="text" readonly v-model="fromData[item.parameter]" :placeholder="item.prompt" @click='showChoose(item,index)'/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='editor_expect_box' style='margin-top: 10px'>
|
|
<div class='font16 bold color3'>对另一半的期待</div>
|
|
<div class="expect_input">
|
|
<van-field v-model="fromData.expect" rows="5" type="textarea" autosize placeholder="具体描述你的性格特点等，让别人更了解你"/>
|
|
</div>
|
|
</div>
|
|
<div class='colorff font16 bold next_button alignment_center' @click='save'>完成</div>
|
|
<div style='height: 30px;background: #f5f5f5'></div>
|
|
<div class='editor_choose_box'>
|
|
<van-popup v-model="showBirthday" round position="bottom" :lock-scroll="true">
|
|
<van-picker show-toolbar :columns="ageList" @change='ageChange' @cancel="showBirthday = false" @confirm="onConfirm" title="请选择年龄" ref='pickerAge' />
|
|
</van-popup>
|
|
<van-popup v-model="showStature" round position="bottom" :lock-scroll="true">
|
|
<van-picker show-toolbar :columns="statureList" @change='statureChange' @cancel="showStature = false" @confirm="onConfirm" title="请选择身高" ref='pickerStature' />
|
|
</van-popup>
|
|
<van-popup v-model="showResident" round position="bottom" :lock-scroll="true">
|
|
<van-picker show-toolbar :columns="cityList" @cancel="showResident = false" @confirm="onConfirm" title="请选择所在地" ref='pickerResident' />
|
|
</van-popup>
|
|
<van-popup v-model="showEducation" round position="bottom" :lock-scroll="true">
|
|
<van-picker show-toolbar :columns="educationList" @cancel="showEducation = false" @confirm="onConfirm" title="请选择学历" ref='pickerEducation' />
|
|
</van-popup>
|
|
<van-popup v-model="showFaith" round position="bottom" :lock-scroll="true">
|
|
<van-picker show-toolbar :columns="faithList" @cancel="showFaith = false" @confirm="onConfirm" title="请选择信仰" ref='pickerFaith' />
|
|
</van-popup>
|
|
<van-popup v-model="showIncome" round position="bottom" :lock-scroll="true">
|
|
<van-picker show-toolbar :columns="incomeList" @cancel="showIncome = false" @confirm="onConfirm" title="请选择收入" ref='pickerIncome' />
|
|
</van-popup>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script type='text/javascript'>
|
|
import service from '@/utils/request'
|
|
import { $toastClear, $toastLoading, $toastText } from '@/config/toast'
|
|
import { $toastSuccess } from '../../config/toast'
|
|
|
|
export default {
|
|
computed: {},
|
|
components: {},
|
|
data() {
|
|
return {
|
|
id: '',
|
|
faithList: ['不限', '基督教', '佛教', '伊斯兰教'],
|
|
educationList: ['不限', '大专', '本科', '硕士以上'],
|
|
incomeList: ['不限', '4千-6千', '6千-1万', '1万-2万', '2万以上'],
|
|
statureList: [
|
|
{ values: ['不限'], defaultIndex: 0 },
|
|
{ values: [], defaultIndex: 0 }
|
|
], // 身高数据
|
|
ageList: [
|
|
{ values: ['不限'], defaultIndex: 0 },
|
|
{ values: [], defaultIndex: 0 }
|
|
], // 年龄数据
|
|
cityList: ['不限', '距离优先'], // 所有城市数据
|
|
chooseSIndex: '',
|
|
chooseState: '',
|
|
love_user: false,
|
|
throttle: true,
|
|
showResident: false, // 显示选择常居地弹框
|
|
showBirthday: false, // 显示选择年龄弹框
|
|
showFaith: false, // 显示选择信仰弹框
|
|
showStature: false, // 显示选择身高弹框
|
|
showEducation: false, // 显示选择最低学历弹框
|
|
showIncome: false, // 显示选择最低月收入
|
|
basicData: [
|
|
{ name: '年龄', prompt: '添加年龄', parameter: 'birthday', show: 'showBirthday' },
|
|
{ name: '身高', prompt: '添加身高信息', parameter: 'stature', show: 'showStature' },
|
|
{ name: '所在地', prompt: '添加所在地', parameter: 'resident', show: 'showResident' },
|
|
{ name: '学历', prompt: '添加最高学历', parameter: 'education', show: 'showEducation' },
|
|
{ name: '信仰', prompt: '添加所属信仰', parameter: 'faith', show: 'showFaith' },
|
|
{ name: '最低月收入', prompt: '添加最低与收入', parameter: 'income', show: 'showIncome' }
|
|
],
|
|
fromData: {
|
|
birthday: '', // 年龄
|
|
stature: '', // 身高
|
|
resident: '', // 所在地
|
|
education: '', // 学历
|
|
faith: '', // 信仰
|
|
income: '', // 收入
|
|
expect: ''
|
|
},
|
|
mobile: '',
|
|
min_age: '', // 回填最小年龄
|
|
max_age: '', // 回填最大年龄
|
|
min_stature: '', // 回填最小身高
|
|
max_stature: '', // 回填最大身高
|
|
detection: {
|
|
birthday: '请选择年龄', // 年龄
|
|
stature: '请选择身高', // 身高
|
|
resident: '请选择所在地', // 所在地
|
|
education: '请选择学历', // 学历
|
|
faith: '请选择信仰', // 信仰
|
|
income: '请选择收入', // 收入
|
|
expect: '请填写对另一半的期待'
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
},
|
|
methods: {
|
|
// 获取所有城市
|
|
getCity() {
|
|
$toastLoading('加载中...')
|
|
const url = 's/h5/user/info/options'
|
|
service.get(url).then(data => {
|
|
data.address_arr.forEach((item) => {
|
|
this.cityList.push(item.text)
|
|
})
|
|
$toastClear()
|
|
}).catch(error => {
|
|
$toastClear()
|
|
console.log(error)
|
|
})
|
|
},
|
|
// 获取用户详情
|
|
getData() {
|
|
const vm = this
|
|
const url = 's/h5/merchant/user/profile'
|
|
service.get(url).then(data => {
|
|
const dataV2 = data.mate_conditon
|
|
if (dataV2) {
|
|
vm.fromData = {
|
|
birthday: dataV2.age, // 年龄
|
|
stature: dataV2.stature, // 身高
|
|
resident: dataV2.location, // 所在地
|
|
education: dataV2.degree, // 学历
|
|
faith: dataV2.belief, // 信仰
|
|
income: dataV2.income, // 信仰
|
|
expect: data.ideal_mate
|
|
}
|
|
if (dataV2.age !== '年龄不限') {
|
|
vm.min_age = dataV2.age.split(/[- 岁]/)[0] // 回填最小年龄
|
|
vm.max_age = dataV2.age.split(/[- 岁]/)[1] // 回填最大年龄
|
|
// // 年龄
|
|
for (let age = 19; age < 75; age++) {
|
|
this.ageList[1].values.push(`${age}`)
|
|
}
|
|
} else {
|
|
vm.min_age = dataV2.age
|
|
}
|
|
if (dataV2.stature !== '身高不限') {
|
|
vm.min_stature = dataV2.stature.split(/[- cm]/)[0] // 回填最小身高
|
|
vm.max_stature = dataV2.stature.split(/[- cm]/)[1] // 回填最大身高
|
|
// 身高
|
|
for (let num = 140; num < 202; num++) {
|
|
this.statureList[1].values.push(`${num}`)
|
|
}
|
|
} else {
|
|
vm.min_stature = dataV2.stature
|
|
}
|
|
vm.location = dataV2.location
|
|
}
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
showChoose(item, index) {
|
|
const vm = this
|
|
vm[item.show] = true
|
|
vm.$nextTick(() => { // 数据回填
|
|
if (index === 0) {
|
|
vm.$refs.pickerAge.setColumnValue(0, vm.min_age || '不限')
|
|
vm.$refs.pickerAge.setColumnValue(1, vm.max_age || '')
|
|
} else if (index === 1) {
|
|
vm.$refs.pickerStature.setColumnValue(0, vm.min_stature || '不限')
|
|
vm.$refs.pickerStature.setColumnValue(1, vm.max_stature || '')
|
|
} else if (index === 2) {
|
|
vm.$refs.pickerResident.setColumnValue(0, vm.fromData.resident || '不限')
|
|
} else if (index === 3) {
|
|
vm.$refs.pickerEducation.setColumnValue(0, vm.fromData.education || '不限')
|
|
} else if (index === 4) {
|
|
vm.$refs.pickerFaith.setColumnValue(0, vm.fromData.faith || '不限')
|
|
} else if (index === 5) {
|
|
vm.$refs.pickerIncome.setColumnValue(0, vm.fromData.income || '不限')
|
|
}
|
|
})
|
|
vm.chooseState = item.show
|
|
vm.chooseSIndex = index
|
|
},
|
|
onConfirm(val, index) {
|
|
if (this.chooseSIndex === 0) {
|
|
if (val[0] === '不限') {
|
|
this.fromData.birthday = '年龄' + val[0]
|
|
} else {
|
|
this.min_age = val[0]
|
|
if (!val[1]) {
|
|
this.max_age = parseInt(val[0]) + 1
|
|
} else {
|
|
this.max_age = val[1]
|
|
}
|
|
this.fromData.birthday = this.min_age + '-' + this.max_age + '岁'
|
|
}
|
|
} else if (this.chooseSIndex === 1) {
|
|
if (val[0] === '不限') {
|
|
this.fromData.stature = '身高' + val[0]
|
|
} else {
|
|
this.min_stature = val[0]
|
|
if (!val[1]) {
|
|
this.max_stature = parseInt(val[0]) + 1
|
|
} else {
|
|
this.max_stature = val[1]
|
|
}
|
|
this.fromData.stature = this.min_stature + '-' + this.max_stature + 'cm'
|
|
}
|
|
} else if (this.chooseSIndex === 2) {
|
|
if (val === '不限') {
|
|
this.fromData.resident = '所在地' + val
|
|
} else {
|
|
this.fromData.resident = val
|
|
}
|
|
} else if (this.chooseSIndex === 3) {
|
|
if (val === '不限') {
|
|
this.fromData.education = '学历' + val
|
|
} else {
|
|
this.fromData.education = val
|
|
}
|
|
} else if (this.chooseSIndex === 4) {
|
|
if (val === '不限') {
|
|
this.fromData.faith = '信仰' + val
|
|
} else {
|
|
this.fromData.faith = val
|
|
}
|
|
} else if (this.chooseSIndex === 5) {
|
|
if (val === '不限') {
|
|
this.fromData.income = '月收入' + val
|
|
} else {
|
|
this.fromData.income = val
|
|
}
|
|
}
|
|
this[this.chooseState] = false
|
|
},
|
|
// 年龄最小值改变时
|
|
ageChange(e, index) {
|
|
this.ageList[1].values = []
|
|
if (index[0] === '不限') {
|
|
this.max_age = ''
|
|
console.log('1111111111')
|
|
return
|
|
}
|
|
for (let age = parseInt(index[0]) + 1; age < 75; age++) {
|
|
this.ageList[1].values.push(`${age}`)
|
|
console.log('22222')
|
|
}
|
|
},
|
|
statureChange(e, index) {
|
|
this.statureList[1].values = []
|
|
if (index[0] === '不限') {
|
|
this.max_stature = ''
|
|
return
|
|
}
|
|
for (let age = parseInt(index[0]) + 1; age < 202; age++) {
|
|
this.statureList[1].values.push(`${age}`)
|
|
}
|
|
},
|
|
save() {
|
|
const vm = this
|
|
for (const i in vm.detection) {
|
|
if (vm.fromData[i] === '') {
|
|
return $toastText(vm.detection[i])
|
|
}
|
|
}
|
|
this.complete()
|
|
},
|
|
// 完成
|
|
complete() {
|
|
const vm = this
|
|
const mate_conditon = {
|
|
age: vm.fromData.birthday === '年龄不限' ? vm.fromData.birthday : vm.min_age + '-' + vm.max_age + '岁',
|
|
belief: vm.fromData.faith,
|
|
degree: vm.fromData.education,
|
|
income: vm.fromData.income,
|
|
location: vm.fromData.resident,
|
|
stature: vm.fromData.stature === '身高不限' ? vm.fromData.stature : vm.min_stature + '-' + vm.max_stature + 'cm'
|
|
}
|
|
if (vm.fromData.birthday !== '年龄不限' && vm.min_age >= vm.max_age) {
|
|
$toastText('最小年龄不能大于等于最大年龄')
|
|
return
|
|
}
|
|
if (vm.fromData.stature !== '身高不限' && vm.min_stature >= vm.max_stature) {
|
|
$toastText('最小身高不能大于等于最大身高')
|
|
return
|
|
}
|
|
const dataV2 = {
|
|
ideal_mate: vm.fromData.expect,
|
|
mate_conditon: mate_conditon
|
|
}
|
|
if (vm.throttle) {
|
|
vm.throttle = false
|
|
service.put(`s/h5/merchant/user/profile`, dataV2).then(data => {
|
|
vm.throttle = true
|
|
if (data.code !== 1) {
|
|
$toastSuccess('保存成功')
|
|
setTimeout(() => {
|
|
vm.$router.replace({
|
|
name: 'information'
|
|
})
|
|
}, 1000)
|
|
}
|
|
}).catch(error => {
|
|
vm.throttle = true
|
|
console.log(error)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
this.getCity()
|
|
this.getData()
|
|
// 身高
|
|
for (let num = 139; num < 202; num++) {
|
|
this.statureList[0].values.push(`${num}`)
|
|
}
|
|
for (let age = 18; age < 75; age++) {
|
|
this.ageList[0].values.push(`${age}`)
|
|
}
|
|
const ScrollTop = document.getElementById('app')
|
|
ScrollTop.scrollTop = 0
|
|
this.id = this.$route.params.id
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.editorUserDataV2 {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
}
|
|
.editor_box{
|
|
margin: 14px 15px 0 15px;
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
.editor_basic_Data{
|
|
padding: 15px 15px 5px 15px;
|
|
.basic_Data{
|
|
position: relative;
|
|
width: 74%
|
|
}
|
|
.inputBox{
|
|
width: 100%;
|
|
outline: none;
|
|
appearance: none;
|
|
border: none;
|
|
border-radius: 4px;
|
|
}
|
|
.input_r{
|
|
margin-right: 16px;
|
|
}
|
|
.triangle_icon{
|
|
width: 12px;
|
|
height: 12px;
|
|
display: block;
|
|
margin-left: 4px;
|
|
right: 0;
|
|
z-index: 22;
|
|
position: absolute;
|
|
}
|
|
}
|
|
.editor_basic_Data:last-child{
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
.editor_expect_box{
|
|
padding: 15px;
|
|
margin: 0 15px;
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
.expect_input{
|
|
margin-top: 10px;
|
|
.van-cell {
|
|
border-radius: 12px;
|
|
border: 1px dashed #cccccc;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
}
|
|
}
|
|
.next_button{
|
|
width: 260px;
|
|
height: 44px;
|
|
border-radius: 30px;
|
|
margin: 30px auto 0 auto;
|
|
background: linear-gradient(90deg, #8c9bff 0%, #707ffa 100%);
|
|
}
|
|
</style>
|
|
<style lang='scss'>
|
|
.editor_basic_Data{
|
|
.van-field__control{
|
|
text-align: right;
|
|
}
|
|
.van-cell{
|
|
padding: initial;
|
|
}
|
|
}
|
|
.expect_input{
|
|
textarea::-webkit-input-placeholder {
|
|
color: #999999;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.editor_choose_box{
|
|
.van-picker__title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
.van-popup{
|
|
top: initial!important;
|
|
}
|
|
}
|
|
</style>
|