Leadfyy.co
/
blindDate
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[完善] 相亲交友列表筛选功能

master
邓平艺 5 years ago
parent
5372041397
commit
97970e7f0f
2 changed files with 441 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 278
      pages/userList/filter.json
  2. 190
      pages/userList/userList.vue

278
pages/userList/filter.json
View File

@ -0,0 +1,278 @@
{
"gender": {
"name": "性别",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "男生"
},{
"value": "女生"
}]
},
"age": {
"name": "年龄",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "24岁以下"
},{
"value": "24-26岁"
},{
"value": "27-28岁"
},{
"value": "29-30岁"
},{
"value": "31-33岁"
},{
"value": "34-35岁"
},{
"value": "36-38岁"
},{
"value": "38岁以上"
}]
},
"education": {
"name": "学历",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "无"
},{
"value": "小学"
},{
"value": "初中"
},{
"value": "中专"
},{
"value": "高中"
},{
"value": "大专"
},{
"value": "本科"
},{
"value": "硕士"
},{
"value": "博士"
},{
"value": "博士后"
}]
},
"search": {
"name": "搜索",
"search_value": "",
"marriage_history": {
"name": "婚史",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "未婚"
},{
"value": "短婚未育"
},{
"value": "离异"
},{
"value": "丧偶"
}]
},
"annual_salary": {
"name": "年薪",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "4万以内"
},{
"value": "4-6万"
},{
"value": "6-8万"
},{
"value": "8-10万"
},{
"value": "10-15万"
},{
"value": "15-20万"
},{
"value": "50万以上"
}]
},
"unit_nature": {
"name": "单位性质",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "私企"
},{
"value": "国企"
},{
"value": "政府机关"
},{
"value": "事业单位"
},{
"value": "外资企业"
},{
"value": "上市公司"
},{
"value": "世界500强"
},{
"value": "自有公司"
},{
"value": "个体工商户"
},{
"value": "自有职业"
},{
"value": "待业"
}]
},
"housing": {
"name": "住房",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "与父母同住"
},{
"value": "已购房无贷款"
},{
"value": "已购房有贷款"
},{
"value": "婚后购房"
},{
"value": "租房"
},{
"value": "住单位房"
},{
"value": "住亲朋家"
},{
"value": "需要时可购置"
}]
},
"zodiac": {
"name": "属相",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "鼠"
},{
"value": "牛"
},{
"value": "虎"
},{
"value": "兔"
},{
"value": "龙"
},{
"value": "蛇"
},{
"value": "马"
},{
"value": "羊"
},{
"value": "猴"
},{
"value": "鸡"
},{
"value": "狗"
},{
"value": "猪"
}]
},
"constellation": {
"name": "星座",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "白羊座"
},{
"value": "金牛座"
},{
"value": "双子座"
},{
"value": "巨蟹座"
},{
"value": "狮子座"
},{
"value": "处女座"
},{
"value": "天秤座"
},{
"value": "天蝎座"
},{
"value": "射手座"
},{
"value": "摩羯座"
},{
"value": "水瓶座"
},{
"value": "双鱼座"
}]
},
"household_register": {
"name": "户籍",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "良庆区"
},{
"value": "江南区"
},{
"value": "青秀区"
},{
"value": "兴宁区"
},{
"value": "西乡塘区"
},{
"value": "武鸣区"
},{
"value": "空港经济区"
},{
"value": "五象新区"
},{
"value": "其他地区"
}]
},
"place_residence": {
"name": "居住地区",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "良庆区"
},{
"value": "江南区"
},{
"value": "青秀区"
},{
"value": "兴宁区"
},{
"value": "西乡塘区"
},{
"value": "武鸣区"
},{
"value": "空港经济区"
},{
"value": "五象新区"
},{
"value": "其他地区"
}]
},
"photo": {
"name": "有无照片",
"selected": "",
"data": [{
"value": "不限"
},{
"value": "有照片"
},{
"value": "无照片"
}]
}
}
}

190
pages/userList/userList.vue
View File

@ -1,35 +1,47 @@
<template>
<view>
<view class="head">
<button class="sign-in-btn" @click="$url('/pages/signIn/signIn')">签到</button>
<view class="filter-item" @click="show_filter = true">
<text>女生</text>
<text class="lf-iconfont icon-iconfront-"></text>
<button class="sign-in-btn">最新</button>
<!-- tabs -->
<view class="filter-item" v-for="(value, key) in filter" :key="key" @click="switchFilter(key)">
<text>{{ value.selected || value.name }}</text>
<text class="lf-iconfont icon-iconfront-" :class="{'tab-active': show_filter && filter_key == key}"></text>
</view>
<view class="filter-item" @click="show_filter = true">
<text>年龄</text>
<text class="lf-iconfont icon-iconfront-"></text>
</view>
<view class="filter-item" @click="show_filter = true">
<text>学历</text>
<text class="lf-iconfont icon-iconfront-"></text>
</view>
<view class="filter-item" @click="show_filter = true">
<text>搜索</text>
<text class="lf-iconfont icon-iconfront-"></text>
</view>
<view class="filter-modal" v-if="show_filter" @click="show_filter = false">
<!-- 普通列表文字选择 -->
<view class="filter-modal" v-if="show_filter && filter_key != 'search'" @click="show_filter = false">
<view class="filter-content">
<view @click="show_filter = false">不限</view>
<view @click="show_filter = false">20~25岁</view>
<view @click="show_filter = false">25~30岁</view>
<view @click="show_filter = false">30~35岁</view>
<view @click="show_filter = false">35~40岁</view>
<view @click="show_filter = false">40~45岁</view>
<view @click="show_filter = false">45岁以上</view>
<view v-for="(item, index) in filter[filter_key].data" :key="index" @click="activeItem(item.value)">{{ item.value }}</view>
</view>
</view>
<!-- 多条件搜索 -->
<view class="filter-modal" v-else-if="show_filter && filter_key == 'search'" @click="show_filter = false">
<view class="filter-many" @click.stop>
<view class="filter-main">
<view v-for="(value, key) in filter[filter_key]" :key="key" v-if="key != 'name'">
<block v-if="key == 'search_value'">
<view class="filter-title">会员编号搜索</view>
<input class="input-search" placeholder="请输入会员编号" :value="value" @blur="inputBlur(key, $event)" />
</block>
<block v-else>
<view class="filter-title">{{ value.name }}</view>
<view class="lf-flex-wrap">
<view class="filter-capsule"
:class="{'filter-active': item.value == value.selected}"
v-for="(item, index) in value.data" :key="index"
@click="switchCondition(key, item.value)"
>{{ item.value }}</view>
</view>
</block>
</view>
</view>
<view class="filter-foot">
<button class="filter-btn" @click="reset">重置条件</button>
<button class="filter-btn solid-btn" @click="comfirm">确定</button>
</view>
</view>
</view>
</view>
<!-- head end -->
<view style="height: 104rpx;"></view>
<lf-user-list></lf-user-list>
<!-- 加载 -->
@ -43,18 +55,58 @@
<script>
import lfUserList from '@/components/lf-userList/lf-userList.vue'
var filterObj = require('./filter.json');
export default {
components: { lfUserList },
data(){
return {
show_filter: false
show_filter: false,
filter: this.productionObj(),
filter_key: ''
}
},
onLoad(){
console.log(this.filter)
},
methods: {
// 引入数据，并序列化，避免数据引用
productionObj(){
return JSON.parse( JSON.stringify(filterObj) );
},
// 切换显示隐藏筛选
switchFilter(key){
if(this.filter_key != key){
this.show_filter = true;
}else{
this.show_filter = !this.show_filter;
}
this.filter_key = key;
},
// 选中筛选条件
activeItem(value){
this.filter[this.filter_key].selected = value;
// TODO 接口请求
},
// 切换筛选条件
switchCondition(key, value){
this.filter[this.filter_key][key].selected = value;
},
// 输入框失去焦点事件
inputBlur(key, event){
this.filter[this.filter_key][key] = event.detail.value;
},
// 重置筛选条件
reset(){
this.filter = this.productionObj();
this.show_filter = false;
},
// 确定筛选
comfirm(){
this.$msg('筛选成功！');
this.show_filter = false;
console.log(this.filter);
}
}
}
</script>
@ -90,6 +142,11 @@
text-align: right;
font-size: 28rpx;
color: #222222;
.tab-active{
display: inline-block;
transform: rotate(180deg);
color: #E21196 !important;
}
}
.filter-modal{
position: absolute;
@ -116,6 +173,85 @@
line-height: 60rpx;
}
}
.filter-many{
position: absolute;
width: 100%;
height: 806rpx;
background-color: #FFFFFF;
left: 0;
z-index: 14;
.filter-main{
height: 675rpx;
overflow-y: scroll;
box-sizing: border-box;
padding: 32rpx;
.filter-title{
font-size: 28rpx;
color: #222222;
font-weight: bold;
margin-bottom: 20rpx;
}
.filter-capsule{
width: 163rpx;
height: 62rpx;
border-radius: 31rpx;
border: 1rpx solid #999999;
font-size: 28rpx;
color: #999999;
text-align: center;
line-height: 62rpx;
margin-right: 12rpx;
&:nth-child(4n){
margin-right: 0rpx;
}
&:nth-child(n+5){
margin-top: 12rpx;
}
}
.filter-active{
border-color: #E21196;
color: #E21196;
}
.input-search{
width: 686rpx;
height: 62rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
border: 1rpx solid #DDDDDD;
box-sizing: border-box;
padding: 0 15rpx;
font-size: 28rpx;
margin-bottom: 50rpx;
}
}
.filter-main>view:nth-child(n+3){
margin-top: 40rpx;
}
.filter-foot{
height: 130rpx;
border-top: 1rpx solid #e5e5e5;
padding: 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
.filter-btn{
width: 332rpx;
height: 90rpx;
border-radius: 10rpx;
border: 1rpx solid #555555;
background-color: #FFFFFF;
line-height: 88rpx;
font-size: 32rpx;
color: #555555;
margin: 0;
}
.solid-btn{
background-color: #E21196;
color: #FFFFFF;
border: none;
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save