From 97970e7f0f2f5fe77a57e0d8ce682ddf03eb6979 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Wed, 18 Aug 2021 17:52:12 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20=E7=9B=B8=E4=BA=B2?=
 =?UTF-8?q?=E4=BA=A4=E5=8F=8B=E5=88=97=E8=A1=A8=E7=AD=9B=E9=80=89=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/userList/filter.json  | 278 ++++++++++++++++++++++++++++++++++++
 pages/userList/userList.vue | 190 ++++++++++++++++++++----
 2 files changed, 441 insertions(+), 27 deletions(-)
 create mode 100644 pages/userList/filter.json

diff --git a/pages/userList/filter.json b/pages/userList/filter.json
new file mode 100644
index 0000000..bfacf53
--- /dev/null
+++ b/pages/userList/filter.json
@@ -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": "无照片"
+			}]
+		}
+	}
+}
\ No newline at end of file
diff --git a/pages/userList/userList.vue b/pages/userList/userList.vue
index 969d0f2..23cdf70 100644
--- a/pages/userList/userList.vue
+++ b/pages/userList/userList.vue
@@ -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>