348 lines
10 KiB
Plaintext
348 lines
10 KiB
Plaintext
<style lang="less" scoped>
|
||
@import url(../../styles/theme.less);
|
||
page {
|
||
background-color: #ffffff;
|
||
}
|
||
.ui-otherHalfDemand{
|
||
padding-bottom: 200rpx;
|
||
}
|
||
.ui-top-tips{
|
||
background: #f8f8f8;
|
||
padding: 20rpx 0
|
||
}
|
||
.ui-demand_box{
|
||
margin: 34rpx 50rpx 0 50rpx;
|
||
.demand_item_box{
|
||
padding-bottom: 50rpx;
|
||
.demand_item_title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.m_tsc {
|
||
flex-wrap: wrap;
|
||
.u_tsc_bu {
|
||
padding: 12rpx 26rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 100rpx;
|
||
background-color: #F8F8F8;
|
||
margin-right: 46rpx;
|
||
margin-bottom: 30rpx;
|
||
.u_add_img {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.u_del_img {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
.u_tsc_bu.sel {
|
||
color: #F33B6C;
|
||
background-color: #FFF4F7;
|
||
}
|
||
}
|
||
}
|
||
.m_sub {
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 90rpx;
|
||
left: 0;
|
||
.saveButton{
|
||
width: 520rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(270deg, #FF85A5 0%, #FF5380 100%);
|
||
border-radius: 44px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
.prompt_box{
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
width: 600rpx;
|
||
max-width: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
margin-top: -8vh;
|
||
.promptTitle{
|
||
padding: 40rpx 0;
|
||
}
|
||
.promptSubTitle{
|
||
margin: 0 56rpx
|
||
}
|
||
.give_up_button{
|
||
width: 320rpx;
|
||
height: 68rpx;
|
||
line-height: 68rpx;
|
||
border-radius: 34rpx;
|
||
background: #ff5380;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 60rpx auto 0 auto;
|
||
}
|
||
}
|
||
// 互动条的粗细
|
||
wx-slider .wx-slider-handle-wrapper{
|
||
height: 12rpx;
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="ui-otherHalfDemand" v-if="loading">
|
||
<view class="ui-top-tips">
|
||
<view class="font_24 ui-mr-30 ui-ml-30">
|
||
我们将根据你设置的条件优先给你推荐用户，当满足要求用户不足时，可能会自动放宽匹配条件。规则设置后第二天匹配生效。
|
||
</view>
|
||
</view>
|
||
<view class="ui-demand_box">
|
||
<view class="demand_item_box">
|
||
<view class="demand_item_title font_30 color333 bold">
|
||
你希望Ta的年龄是
|
||
<view class="color999 bold">{{hopeAgeData.min}}<span class="ui-ml-4 ui-mr-4">-</span>{{hopeAgeData.max}}</view>
|
||
</view>
|
||
<bothwaySlider :sliderData.sync="hopeAgeData" @compontpass="changeAge" :sliderType="'age'"></bothwaySlider>
|
||
</view>
|
||
<view class="demand_item_box">
|
||
<view class="demand_item_title font_30 color333 bold">
|
||
你希望Ta的身高是
|
||
<view class="color999 bold">{{hopeStatureData.min}}<span class="ui-ml-4 ui-mr-4">-</span>{{hopeStatureData.max}}</view>
|
||
</view>
|
||
<bothwaySlider :sliderData.sync="hopeStatureData" @compontpass="changeStature" :sliderType="'stature'"></bothwaySlider>
|
||
</view>
|
||
<view class="demand_item_box">
|
||
<view class="font_30 color333 bold f-fc ui-pb-32">你希望Ta所在的城市 <text class="font_24 color666">（自定义最多选择7个）</text></view>
|
||
<view class="f-fc m_tsc" style="overflow: hidden">
|
||
<view class="u_tsc_bu f-fcc font_28 color666 {{tscListLength == 0 ? 'sel' : ''}}" @tap="wholeDelete">同城优先</view>
|
||
<view class="u_tsc_bu f-fcc font_28 color666 sel" v-for="(item,index) in tscList" :key="index" @tap="deleteTsc(index)">
|
||
<view>{{item}}</view>
|
||
<image class="u_del_img" src="https://images.ufutx.com/202106/18/cda8d68011fec82c2672ce5a4ff48a6d.png" mode="aspectFit" lazy-load="false"></image>
|
||
</view>
|
||
<view class="u_tsc_bu f-fcc" v-if="tscList.length < 7">
|
||
<selectCity :multiIndex.sync="multiIndex" @selectCity="selectCity">
|
||
<view class="f-fc">
|
||
<image class="u_add_img" src="https://images.ufutx.com/202106/18/2cafc8a1ceb30f23ec10438478d78706.png" mode="aspectFit" lazy-load="false"></image>
|
||
<view class=" font_28 color666">自定义</view>
|
||
</view>
|
||
</selectCity>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="demand_item_box">
|
||
<view class="font_30 color333 bold ui-pb-32">你希望Ta的情感状态是</view>
|
||
<view class="f-fc m_tsc" style="overflow: hidden">
|
||
<view v-for="(item,index) in stateList" :key="index" @tap="hopeState(item)" class="u_tsc_bu f-fcc font_28 color666 {{state == item ? 'sel' : ''}}">{{item == '情感不限' ? '都可以' : item}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="demand_item_box">
|
||
<view class="font_30 color333 bold ui-pb-32">你希望Ta是</view>
|
||
<view class="f-fc m_tsc" style="overflow: hidden">
|
||
<view @tap="hopeCertification('1')" class="u_tsc_bu f-fcc font_28 color666 {{ selectCertification == 1 ? 'sel' : ''}}">都可以</view>
|
||
<view @tap="hopeCertification('2')" class="u_tsc_bu f-fcc font_28 color666 {{ selectCertification == 2 && approveState ? 'sel' : ''}}">认证用户</view>
|
||
</view>
|
||
</view>
|
||
<view class="m_sub f-fcc">
|
||
<view class="saveButton font_32 white bold" @tap="save">保存</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cu-modal {{modalName == 'certification' ? 'show' : ''}}">
|
||
<view class="prompt_box ui-pb-30">
|
||
<view class="promptTitle font_36 color-333 bold">提示</view>
|
||
<view class="font_32 color333 promptSubTitle">为了保证用户的优质和真实，请先成为认证用户</view>
|
||
<view class="give_up_button font_32 white" @tap="jumpPath">认证</view>
|
||
<view class="font_28 color999 ui-mt-28" @tap="modalName = ''">取消</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import wepy from '@wepy/core'
|
||
import https from '../../mixins/https'
|
||
import base from '../../mixins/base'
|
||
import {service} from '../../config'
|
||
|
||
wepy.page({
|
||
config: {},
|
||
mixins: [https, base],
|
||
|
||
computed: {
|
||
tscListLength() {
|
||
return this.tscList.length
|
||
}
|
||
},
|
||
data: {
|
||
loading: false,
|
||
modalName: '',
|
||
approveState: 0, // 用户的认证状态
|
||
hopeAgeData: {
|
||
min: 22,
|
||
max: 75
|
||
},
|
||
hopeStatureData: {
|
||
min: 140,
|
||
max: 200
|
||
},
|
||
tscList: [], // 自定义所在的城市
|
||
multiIndex: [0, 18, 2], // 自定义所在的城市默认下标
|
||
state: '情感不限', // 选中的情感状态
|
||
stateList: ['情感不限', '单身', '离异', '丧偶'], // 希望Ta的情感状态类型
|
||
selectCertification: '1' // 希望Ta是都可以还是认证用户
|
||
},
|
||
methods: {
|
||
getInfo() {
|
||
let vm = this
|
||
vm.$showLoading('加载中...')
|
||
vm.$get({url: `${service.host}/moment/home`}).then(({code, data}) => {
|
||
if (code === 0) {
|
||
vm.approveState = data.is_real_approved
|
||
}
|
||
wx.hideLoading()
|
||
}).catch(err => {
|
||
wx.hideLoading()
|
||
console.log(err)
|
||
})
|
||
},
|
||
getData() {
|
||
let vm = this
|
||
vm.$get({url: `${service.host}/preferences`}).then(({code, data}) => {
|
||
if (code === 0) {
|
||
if (data.city_list_claim) {
|
||
vm.tscList = data.city_list_claim.replace(/市/g, '').split(',')
|
||
}
|
||
vm.hopeAgeData = {
|
||
min: data.min_age ? data.min_age : 22,
|
||
max: data.max_age ? data.max_age : 75
|
||
}
|
||
vm.hopeStatureData = {
|
||
min: data.min_height ? data.min_height : 140,
|
||
max: data.max_height ? data.max_height : 200
|
||
}
|
||
vm.state = data.mate_conditon.state ? data.mate_conditon.state : '情感不限'
|
||
vm.selectCertification = data.approve_claim
|
||
}
|
||
vm.loading = true
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
// 保存
|
||
save() {
|
||
let vm = this
|
||
let tscListJoint = ''
|
||
if (vm.tscList.length > 0) {
|
||
tscListJoint = vm.tscList.join(',')
|
||
}
|
||
let data = {
|
||
min_age: vm.hopeAgeData.min,
|
||
max_age: vm.hopeAgeData.max,
|
||
min_height: vm.hopeStatureData.min,
|
||
max_height: vm.hopeStatureData.max,
|
||
city_claim: vm.tscList.length == 0 ? 1 : 3,
|
||
city_list_claim: tscListJoint,
|
||
state: vm.state,
|
||
approve_claim: vm.selectCertification
|
||
}
|
||
console.log(data, '888')
|
||
vm.$showLoading('保存中...')
|
||
vm.$post({url: `${service.host}/preference`, data}).then(({code, data}) => {
|
||
if (code == 0) {
|
||
vm.$showToast('保存成功')
|
||
setTimeout(() => {
|
||
wx.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 1200)
|
||
}
|
||
wx.hideLoading()
|
||
}).catch(() => {
|
||
wx.hideLoading()
|
||
})
|
||
},
|
||
// 滑动条年龄数值
|
||
changeAge(e) {
|
||
let vm = this
|
||
vm.hopeAgeData.min = e.slider1Value
|
||
vm.hopeAgeData.max = e.slider2Value
|
||
},
|
||
// 滑动条身高数值
|
||
changeStature(e) {
|
||
let vm = this
|
||
vm.hopeStatureData.min = e.slider1Value
|
||
vm.hopeStatureData.max = e.slider2Value
|
||
},
|
||
// 删除自定义希望Ta所在的城市
|
||
deleteTsc(index) {
|
||
let vm = this
|
||
vm.tscList.splice(index, 1)
|
||
},
|
||
// 选择同城优先后清空自定义
|
||
wholeDelete() {
|
||
let vm = this
|
||
vm.tscList = []
|
||
},
|
||
// 组件调用此方法返回选中希望Ta所在的城市
|
||
selectCity(e, index) {
|
||
let vm = this
|
||
let exist = false
|
||
vm.tscList.forEach((item) => {
|
||
if (e[2].replace(/市/g, '') == item) {
|
||
exist = true
|
||
}
|
||
})
|
||
if (exist) {
|
||
return
|
||
}
|
||
vm.tscList.push(e[2].replace(/市/g, ''))
|
||
console.log(vm.tscList.length, '787777')
|
||
},
|
||
// 希望Ta的情感状态
|
||
hopeState(e) {
|
||
let vm = this
|
||
vm.state = e
|
||
},
|
||
// 希望Ta的认证状态
|
||
hopeCertification(e) {
|
||
let vm = this
|
||
if (!vm.approveState) {
|
||
vm.modalName = 'certification'
|
||
return
|
||
}
|
||
vm.selectCertification = e
|
||
},
|
||
jumpPath() {
|
||
wx.navigateTo({url: `/pages/users/realName`})
|
||
}
|
||
},
|
||
onShow() {
|
||
let vm = this
|
||
vm.getInfo()
|
||
},
|
||
onLoad() {
|
||
let vm = this
|
||
vm.getData()
|
||
}
|
||
})
|
||
</script>
|
||
<config>
|
||
{
|
||
navigationBarTitleText: '对另一半要求',
|
||
enablePullDownRefresh: false,
|
||
backgroundColorTop: '#ffffff',
|
||
backgroundColorBottom: '#ffffff',
|
||
usingComponents: {
|
||
bothwaySlider: '~@/components/bothwaySlider',
|
||
selectCity: '~@/components/selectCity'
|
||
}
|
||
}
|
||
</config>
|