490 lines
15 KiB
Plaintext
490 lines
15 KiB
Plaintext
<style lang="less" scoped>
|
|
@import url(../../styles/theme.less);
|
|
page {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.ui-top-box{
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 0 24rpx 24rpx 24rpx;
|
|
background: #ffffff;
|
|
z-index: 99;
|
|
.ui-user-pic{
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
box-shadow: 1rpx 1rpx 12rpx #e7e7e7;
|
|
border: 4rpx solid #e7e7e7;
|
|
border-radius: 50%;
|
|
animation: myMove 2.5s .15s linear infinite;
|
|
}
|
|
.ui-search-icon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
position: absolute;
|
|
top: 30rpx;
|
|
left: 36rpx;
|
|
}
|
|
.ui-search-box{
|
|
width: 76vw;
|
|
height: 56rpx;
|
|
padding: 0 60rpx;
|
|
margin: 18rpx;
|
|
border: none;
|
|
background: #f5f5f5;
|
|
border-radius: 40rpx;
|
|
}
|
|
.ui-close-search-icon{
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
position: absolute;
|
|
right: 40rpx;
|
|
top: 34rpx;
|
|
}
|
|
}
|
|
|
|
.ui-item-Tab{
|
|
width: 25%;
|
|
height: 46rpx;
|
|
padding-top: 12rpx;
|
|
.ui-triangle-icon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.ui-placeholder{
|
|
width: 100vw;
|
|
height: 180rpx;
|
|
}
|
|
|
|
.ui-no-data-icon{
|
|
width: 250rpx;
|
|
height: 250rpx;
|
|
display: block;
|
|
vertical-align: top;
|
|
margin: 26vh auto 0 auto;
|
|
}
|
|
|
|
.love_user_list_1{
|
|
margin: 0 30rpx 34rpx 30rpx;
|
|
box-shadow: 6rpx 6rpx 40rpx rgba(0, 0, 0, 0.08);
|
|
border-radius: 24rpx;
|
|
.love_user_photo_1{
|
|
width: 100%;
|
|
height: 100vw;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
display: block;
|
|
}
|
|
.user_data_box_1{
|
|
padding: 24rpx;
|
|
.text{
|
|
span{
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
.user_data_name_1{
|
|
display: flex;
|
|
align-items: center;
|
|
.name_1{
|
|
max-width: 300rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.vipIcon_1{
|
|
width: 32rpx;
|
|
height: 28rpx;
|
|
vertical-align: middle;
|
|
margin-left: 6rpx;
|
|
}
|
|
.realNameIcon_1{
|
|
width: 104rpx;
|
|
height: 36rpx;
|
|
vertical-align: middle;
|
|
margin-left: 8rpx;
|
|
}
|
|
.m_rpe {
|
|
margin-left: 8rpx;
|
|
.u_rpe_img {
|
|
width: 80rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
.m_edu {
|
|
margin-left: 8rpx;
|
|
.u_edu_img {
|
|
width: 80rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
.m_rpeAdd {
|
|
.u_rpeAdd_img {
|
|
width: 20rpx;
|
|
height: 24rpx;
|
|
margin-right: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.user_data_age_1{
|
|
width: 100%;
|
|
margin-top: 12rpx;
|
|
text-align: initial;
|
|
}
|
|
.introduce_1{
|
|
width: 100%;
|
|
margin-top: 12rpx;
|
|
text-align: initial;
|
|
}
|
|
}
|
|
.love_user_list_1:nth-of-type(1){
|
|
margin: 50rpx 30rpx 34rpx 30rpx;
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="ui-searchUsers">
|
|
<view class="ui-top-box">
|
|
<view class="f-fcl">
|
|
<image :src="userInfo.avatar" mode="aspectFill" class="ui-user-pic" @tap="jumpDetailPath(userInfo)"></image>
|
|
<view class="ui-relative">
|
|
<image class="ui-search-icon" src="https://image.fulllinkai.com/202405/13/629916bd281b7afa1a61ed099db182cf.png" mode="widthFix"></image>
|
|
<input type="text" placeholder="搜索昵称" class="text-left ui-search-box" confirm-type="search" v-model="inputVal" focus="{{inputShowed}}" @confirm="initData" />
|
|
<image v-if="inputVal" class="ui-close-search-icon" src="https://image.fulllinkai.com/202307/04/a7f548083c45667843828e7fccef7d8c.png" mode="widthFix" @tap="inputVal = ''"></image>
|
|
</view>
|
|
</view>
|
|
<view class="f-fbc">
|
|
<view class="ui-item-Tab text-center">
|
|
<picker :value="sexIndex" range="{{sexList}}" bindchange="sexChange" range-key="title">
|
|
<view class="title ellipsis_1">
|
|
{{sexIndex > 0 ? sexList[sexIndex].title : sexText}}
|
|
<image src="https://images.ufutx.com/202005/18/1a4515381adacd1fca67b3633320fb57.png" class="ui-triangle-icon" mode="aspectFit"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="ui-item-Tab text-center">
|
|
<picker mode="multiSelector" value="{{ageIndex}}" range="{{ageList}}" bindchange="ageChange" bindcolumnchange="ageColumnChange">
|
|
<view class="ellipsis_1">
|
|
<block v-if="!ageIndex">{{ageText}}</block>
|
|
<block v-else>{{ageList[0][ageIndex[0]]}}-{{ageList[1][ageIndex[1]]}}岁</block>
|
|
<image src="https://images.ufutx.com/202005/18/1a4515381adacd1fca67b3633320fb57.png" class="ui-triangle-icon" mode="aspectFit"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="ui-item-Tab text-center">
|
|
<selectCity :selfTextareaShow.sync="'1'" :multiIndex.sync="[0, 18, 2]" @selectCity="selectCity" style="height: 32rpx">
|
|
<view class="ellipsis_1">
|
|
<block v-if="region[2]">{{region[2]}}</block>
|
|
<block v-else>{{cityText}}</block>
|
|
<image src="https://images.ufutx.com/202005/18/1a4515381adacd1fca67b3633320fb57.png" class="ui-triangle-icon" mode="aspectFit"></image>
|
|
</view>
|
|
</selectCity>
|
|
</view>
|
|
<view class="ui-item-Tab text-center" @tap.stop="jumpPath">
|
|
<view class="ellipsis_1">
|
|
筛选
|
|
<image src="https://images.ufutx.com/202005/18/006685ede8d6fa8f965a4d4aaf12d469.png" class="ui-triangle-icon" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ui-placeholder"></view>
|
|
<image v-if="list.length == 0 && loading" class="ui-no-data-icon" src="https://images.ufutx.com/202104/13/1737964f7c98cbf65d728137dc2792eb.png" mode="aspectFill"></image>
|
|
<block v-else>
|
|
<view class="love_user_list_1" v-for="(item,index) in list" :key="index" @tap="jumpDetailPath(item)">
|
|
<view>
|
|
<image class="love_user_photo_1" :src="item.photo" mode="aspectFill"></image>
|
|
<view class="user_data_box_1">
|
|
<view class="user_data_name_1 f-fbc">
|
|
<view class="f-fc">
|
|
<view class="font_32 bold color333 name_1">{{item.nickname}}</view>
|
|
<image v-if="!item.is_rank" class="vipIcon_1" src="https://images.ufutx.com/202103/17/bfad7e2a8e86cf7912ff280234a35606.png" mode="widthFix"></image>
|
|
<image v-else class="vipIcon_1" src="https://images.ufutx.com/202103/17/d0913df8b234057229ab3dd102497a50.png" mode="widthFix"></image>
|
|
<view class="m_rpe f-fcc">
|
|
<image class="u_rpe_img" v-if="item.is_approved == 1" src="https://images.ufutx.com/202105/26/17b7eec949ba18e576d5de67bca00d94.png" mode="widthFix"></image>
|
|
<image class="u_rpe_img" v-else src="https://images.ufutx.com/202105/26/a221872980386016cabfa7b85a14daca.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="m_edu f-fcc">
|
|
<image class="u_edu_img" v-if="item.is_real_approved == 1" src="https://images.ufutx.com/202105/26/2213da011dbaa1dab3ed16bc623c56ce.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<view class="m_rpeAdd f-fc" v-if="item.city">
|
|
<image class="u_rpeAdd_img" src="https://images.ufutx.com/202106/28/817a393539ee854226eef79defef2fc4.png" mode="widthFix"></image>
|
|
<view class="font_24 color333">{{item.city}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="user_data_age_1 font_28 color333 text ellipsis_1">
|
|
<span v-if="item.year">{{item.year || '未填写'}}</span>
|
|
<span v-if="item.stature" class="ui-ml-4 ui-mr-4">·</span>
|
|
<span v-if="item.stature">{{item.stature || '未填写'}}</span>
|
|
<span v-if="item.degree" class="ui-ml-4 ui-mr-4">·</span>
|
|
<span v-if="item.degree">{{item.degree || '未填写'}}</span>
|
|
<span v-if="item.industry_sub" class="ui-ml-4 ui-mr-4">·</span>
|
|
<span v-if="item.industry_sub">{{item.industry_sub || '未填写'}}</span>
|
|
</view>
|
|
<view class="introduce_1 ellipsis_1 font_26 color999">{{item.introduction || '未填写'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<pageScroll ref="pageScroll"></pageScroll>
|
|
</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],
|
|
|
|
data: {
|
|
userInfo: {},
|
|
inputVal: '',
|
|
sexIndex: 1,
|
|
sexList: [
|
|
{title: '不限', value: '', active: true},
|
|
{title: '只看男', value: '1', active: false},
|
|
{title: '只看女', value: '2', active: false}
|
|
],
|
|
approveList: [
|
|
{title: '不限', value: '', active: true},
|
|
{title: '已认证', value: '已认证', active: false},
|
|
{title: '未认证', value: '未认证', active: false}
|
|
],
|
|
region: ['', '', ''],
|
|
region_id: ['', '', ''],
|
|
ageIndex: [5, 9],
|
|
ageList: [],
|
|
sexText: '性别',
|
|
ageText: '年龄',
|
|
cityText: '城市',
|
|
searchList: [
|
|
{title: '不限', value: '', active: true},
|
|
{title: '超级VIP', value: '超级VIP', active: false},
|
|
{title: '普通会员', value: '普通会员', active: false}
|
|
],
|
|
beliefList: [
|
|
{title: '不限', value: '', active: true},
|
|
{title: '基督教', value: '基督教', active: false},
|
|
{title: '其他', value: '其他', active: false}
|
|
],
|
|
is_approved: '',
|
|
is_VIP: '',
|
|
is_degree: '', // 选择的学历
|
|
is_industry: '', // 选择的行业
|
|
is_industry_sub: '', // 选择的副行业(传值)
|
|
multiIndex: [0, 0],
|
|
is_income: '', // 选择的年收入
|
|
realNameIndex: 2, // 实名认证
|
|
vipIndex: 2, // VIP会员
|
|
educateIndex: 3, // 学历
|
|
beliefIndex: 0, // 信仰
|
|
incomeIndex: 0, // 收入
|
|
|
|
timer: null,
|
|
no_more: false,
|
|
loading: false,
|
|
page: 1,
|
|
list: [] // 列表数据
|
|
},
|
|
methods: {
|
|
getList() {
|
|
let vm = this
|
|
let data = {
|
|
page: vm.page,
|
|
min_age: vm.ageIndex ? vm.ageList[0][vm.ageIndex[0]] : '',
|
|
max_age: vm.ageIndex ? vm.ageList[1][vm.ageIndex[1]] : '',
|
|
province: vm.region[1] ? vm.region[1] : '',
|
|
city: vm.region[2] ? vm.region[2] : '',
|
|
sex: vm.sexList[vm.sexIndex].value,
|
|
is_approved: vm.is_approved ? vm.is_approved : '',
|
|
is_rank: vm.is_VIP ? vm.is_VIP : '',
|
|
degree: vm.is_degree ? vm.is_degree : '',
|
|
belief: vm.belief ? vm.belief : '',
|
|
industry: vm.is_industry ? vm.is_industry : '',
|
|
industry_sub: vm.is_industry_sub ? vm.is_industry_sub : '',
|
|
income: vm.is_income ? vm.is_income : ''
|
|
}
|
|
console.log(data, '*/**********')
|
|
vm.$showLoading('加载中...')
|
|
vm.$get({url: `${service.host}/other/user/list?keyword=${vm.inputVal}`, data}).then(({code, data}) => {
|
|
if (code === 0) {
|
|
if (vm.list.length === 0 || vm.page === 1) {
|
|
vm.list = data.data
|
|
} else {
|
|
data.data.map(function (item) {
|
|
vm.list.push(item)
|
|
})
|
|
}
|
|
if (vm.list.length < 15 || data.data.length < 15) {
|
|
vm.no_more = true
|
|
}
|
|
setTimeout(() => {
|
|
vm.loading = true
|
|
}, 500)
|
|
vm.page++
|
|
}
|
|
wx.hideLoading()
|
|
}).catch(err => {
|
|
wx.hideLoading()
|
|
console.log(err)
|
|
})
|
|
},
|
|
// 初始化列表数据
|
|
initData() {
|
|
let vm = this
|
|
vm.page = 1
|
|
vm.list = []
|
|
vm.loading = false
|
|
vm.getList()
|
|
},
|
|
// 选中性别
|
|
sexChange(e) {
|
|
let vm = this
|
|
vm.sexIndex = e.$wx.detail.value
|
|
vm.initData()
|
|
},
|
|
// 选中年龄
|
|
ageChange(e) {
|
|
let vm = this
|
|
vm.ageIndex = e.$wx.detail.value
|
|
console.log(vm.ageIndex, 'vm.ageIndex')
|
|
vm.initData()
|
|
},
|
|
// 滑动年龄后计算最小或最大年龄
|
|
ageColumnChange (e) {
|
|
let vm = this
|
|
let heightPickerArr = []
|
|
if (e.$wx.detail.column == 0) {
|
|
for (let i = +vm.ageList[0][e.$wx.detail.value] + 1; i < 76; i++) {
|
|
heightPickerArr.push(i)
|
|
}
|
|
vm.ageList = [vm.ageList[0], heightPickerArr]
|
|
}
|
|
},
|
|
// 年龄
|
|
getAgeList() {
|
|
let vm = this
|
|
let list = [[], []]
|
|
for (let num = 20; num < 75; num++) {
|
|
list[0].push(num)
|
|
list[1].push(num + 1)
|
|
}
|
|
vm.ageList = list
|
|
},
|
|
// 组件调用此方法返回选中的居住地
|
|
selectCity(e, index) {
|
|
let vm = this
|
|
vm.region = e
|
|
vm.initData()
|
|
console.log(e, index)
|
|
},
|
|
// 跳转筛选页面
|
|
jumpPath() {
|
|
let vm = this
|
|
let data = {
|
|
sexIndex: vm.sexIndex,
|
|
ageIndex: vm.ageIndex,
|
|
region: vm.region,
|
|
realNameIndex: vm.realNameIndex,
|
|
vipIndex: vm.vipIndex,
|
|
educateIndex: vm.educateIndex,
|
|
beliefIndex: vm.beliefIndex,
|
|
industry: vm.is_industry,
|
|
industry_sub: vm.is_industry_sub,
|
|
multiIndex: vm.multiIndex,
|
|
incomeIndex: vm.incomeIndex,
|
|
keyword: vm.inputVal
|
|
}
|
|
let url = `/pages/home/searchCondition?params=${JSON.stringify(data)}`
|
|
wx.redirectTo({url: url})
|
|
},
|
|
// 跳转用户详情
|
|
jumpDetailPath(e) {
|
|
wx.navigateTo({url: `/pages/home/information?id=${e.id}`})
|
|
}
|
|
},
|
|
watch: {
|
|
inputVal () {
|
|
let vm = this
|
|
clearTimeout(vm.timer)
|
|
vm.timer = setTimeout(() => {
|
|
vm.page = 1
|
|
vm.no_more = false
|
|
vm.getList()
|
|
}, 800)
|
|
}
|
|
},
|
|
// 上拉获取更多数据
|
|
onReachBottom() {
|
|
let vm = this
|
|
if (!vm.no_more) {
|
|
vm.getList()
|
|
}
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
let vm = this
|
|
vm.page = 1
|
|
vm.no_more = false
|
|
vm.getList()
|
|
},
|
|
onPageScroll(res) {
|
|
let vm = this
|
|
let top = res.scrollTop
|
|
vm.$refs.pageScroll.showBackTopBtn = top > 380
|
|
},
|
|
onShow() {
|
|
},
|
|
onLoad(e) {
|
|
let vm = this
|
|
vm.userInfo = wx.getStorageSync('userInfo')
|
|
if (vm.userInfo.sex == 1) {
|
|
vm.sexIndex = 2
|
|
}
|
|
if (e.params) {
|
|
let params = JSON.parse(e.params)
|
|
vm.inputVal = params.inputVal || ''
|
|
vm.belief = params.belief ? params.belief : ''
|
|
vm.is_approved = params.is_approved ? params.is_approved : ''
|
|
vm.is_VIP = params.is_rank ? params.is_rank : ''
|
|
vm.is_degree = params.degree ? params.degree : ''
|
|
vm.is_industry = params.industry ? params.industry : ''
|
|
vm.is_industry_sub = params.industry_sub ? params.industry_sub : ''
|
|
vm.multiIndex = params.multiIndex
|
|
vm.ageIndex = params.ageIndex
|
|
vm.realNameIndex = params.realNameIndex ? params.realNameIndex : 2
|
|
vm.vipIndex = params.vipIndex ? params.vipIndex : 2
|
|
vm.educateIndex = params.educateIndex ? params.educateIndex : 3
|
|
vm.beliefIndex = params.beliefIndex ? params.beliefIndex : 0
|
|
vm.incomeIndex = params.incomeIndex ? params.incomeIndex : 0
|
|
vm.sexIndex = params.sexIndex ? params.sexIndex : 0
|
|
vm.region = params.region
|
|
}
|
|
vm.getAgeList()
|
|
vm.getList()
|
|
}
|
|
})
|
|
</script>
|
|
<config>
|
|
{
|
|
navigationBarTitleText: '搜索',
|
|
enablePullDownRefresh: true,
|
|
backgroundColorTop: '#ffffff',
|
|
backgroundColorBottom: '#ffffff',
|
|
usingComponents: {
|
|
selectCity: '~@/components/selectCity',
|
|
pageScroll: '~@/components/pageScroll'
|
|
}
|
|
}
|
|
</config>
|