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