1

pages/blindDate/components/range-slider.vue

+<template>
+	<view class="range-slider" :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
+		<view class="range-bar" :style="'width:100%;height:' + barHeight + 'rpx'">
+			<view class="range-bar-bg" :style="'background-color:' + backgroundColor + ''"></view>
+			<view class="range-bar-progress" :style="'margin-left:' + progressBarLeft + 'rpx;width:' + progressBarWidth + 'rpx;background-color:' + activeColor + ''"></view>
+		</view>
+
+		<view
+			class="block"
+			:class="{ active: isMinActive }"
+			:style="'width:' + blockSize + 'rpx;height:' + blockSize + 'rpx;margin-left:' + minBlockLeft + 'rpx;'"
+			@touchstart="_onBlockTouchStart"
+			@touchmove.stop="_onBlockTouchMove"
+			@touchend="_onBlockTouchEnd"
+			:data-left="minBlockLeft"
+			data-tag="minBlock"
+		>
+			<slot name="minBlock"></slot>
+		</view>
+		<view
+			class="block"
+			:class="{ active: isMaxActive }"
+			:style="'width:' + blockSize + 'rpx;height:' + blockSize + 'rpx;margin-left:' + maxBlockLeft + 'rpx;'"
+			@touchstart="_onBlockTouchStart"
+			@touchmove.stop="_onBlockTouchMove"
+			@touchend="_onBlockTouchEnd"
+			:data-left="maxBlockLeft"
+			data-tag="maxBlock"
+		>
+			<slot name="maxBlock"></slot>
+		</view>
+	</view>
+</template>
+<script>
+/**
+ * range-slider v1.0.6
+ */
+const _windowWidth = uni.getSystemInfoSync().windowWidth;
+
+export default {
+	data() {
+		return {
+			isMinActive: false,
+			isMaxActive: false,
+
+			//#ifdef H5
+			MAX_LENGTH: 294,
+			maxBlockLeft: 300,
+			//#endif
+
+			// #ifndef H5
+			MAX_LENGTH: 700,
+			maxBlockLeft: 350,
+			// #endif
+
+			minBlockLeft: 0,
+			progressBarLeft: 0,
+			progressBarWidth: 350,
+
+			originalMinValue: 0,
+			originalMaxValue: 0
+		};
+	},
+	components: {},
+	props: {
+		//组件宽度
+		width: {
+			type: Number,
+			default: 750
+		},
+		//组件高度
+		height: {
+			type: Number,
+			default: 100
+		},
+		//滑块大小
+		blockSize: {
+			type: Number,
+			default: 50
+		},
+		//区间进度条高度
+		barHeight: {
+			type: Number,
+			default: 5
+		},
+		//背景条颜色
+		backgroundColor: {
+			type: String,
+			default: '#e9e9e9'
+		},
+		//已选择的颜色
+		activeColor: {
+			type: String,
+			default: '#1aad19'
+		},
+		//最小值
+		min: {
+			type: Number,
+			default: 0
+		},
+		//最大值
+		max: {
+			type: Number,
+			default: 100
+		},
+		//设置初始值
+		values: {
+			type: Array,
+			default: function() {
+				return [0, 100];
+			}
+		},
+		//步长值
+		step: {
+			type: Number,
+			default: 1
+		},
+		//live模式，是否动态更新
+		liveMode: {
+			type: Boolean,
+			default: true
+		}
+	},
+	created: function() {
+		//使用自定义组件编译模式时，支持生命周期为：created
+		this._refresh();
+	},
+	onLoad: function(option) {
+		//不使用自定义组件编译模式时，支持生命周期为：onload
+		this._refresh();
+	},
+	onUnload: function() {},
+	watch: {
+		//组件宽度
+		width: function(newVal, oldVal, changedPath) {
+			var that = this;
+			if (newVal != that.width) {
+				this._refresh();
+			}
+		},
+		//滑块大小
+		blockSize: function(newVal, oldVal, changedPath) {
+			var that = this;
+			if (newVal != that.blockSize) {
+				this._refresh();
+			}
+		},
+		//最小值
+		min: function(newVal, oldVal, changedPath) {
+			var that = this;
+			if (newVal != that.min) {
+				that._refresh();
+			}
+		},
+		//最大值
+		max: function(newVal, oldVal, changedPath) {
+			var that = this;
+			if (newVal != that.max) {
+				that._refresh();
+			}
+		},
+		//设置初始值
+		values: function(newVal, oldVal, changedPath) {
+			var that = this;
+			var values = that.values;
+			console.log('refresh', newVal, oldVal);
+			if (that._isValuesValid(newVal) && that._isValuesValid(values)) {
+				if (values[0] != oldVal[0] || values[1] != oldVal[1]) that._refresh();
+			}
+		}
+	},
+	methods: {
+		//补0
+		_pad: function(num, n) {
+			return Array(n - ('' + num).length + 1).join(0) + num;
+		},
+		_pxToRpx: function(px) {
+			return (750 * px) / _windowWidth;
+		},
+		_onBlockTouchStart: function(e) {
+			let tag = e.target.dataset.tag;
+			if (tag == 'minBlock' || tag == 'maxBlock') {
+				this.isMinActive = tag == 'minBlock';
+				this.isMaxActive = tag == 'maxBlock';
+
+				//兼容h5平台及某版本微信
+				if (e.hasOwnProperty('changedTouches')) {
+					this._blockDownX = e.changedTouches[0].pageX;
+				} else {
+					this._blockDownX = e.pageX;
+				}
+
+				//#ifdef H5
+				this._blockLeft = parseFloat(e.target.dataset.left);
+				//#endif
+				// #ifndef H5
+				this._blockLeft = e.target.dataset.left;
+				// #endif
+
+				this._curBlock = e.target.dataset.tag;
+			}
+		},
+		_onBlockTouchMove: function(e) {
+			let tag = e.target.dataset.tag;
+			if (tag == 'minBlock' || tag == 'maxBlock') {
+				var that = this;
+				var values = that._calculateValues(e);
+				that._refreshProgressBar(values[2], values[3]);
+				that._refreshBlock(values[2], values[3]);
+				//拖动时也触发事件
+				var eventDetail = {
+					minValue: this.formatNumber(values[0], this.step),
+					maxValue: this.formatNumber(values[1], this.step),
+					fromUser: true,
+					originalValue: {
+						minValue: values[0],
+						maxValue: values[1]
+					}
+				};
+
+				this.originalMinValue = values[0];
+				this.originalMaxValue = values[1];
+				var eventOption = {};
+				//
+				if (this.liveMode) that.$emit('rangechange', eventDetail, eventOption);
+			}
+		},
+		_onBlockTouchEnd: function(e) {
+			let tag = e.target.dataset.tag;
+			this.isMinActive = false;
+			this.isMaxActive = false;
+			if (tag == 'minBlock' || tag == 'maxBlock') {
+				var that = this;
+				var values = that._calculateValues(e.mp.changedTouches[0]);
+				that._refreshProgressBar(values[2], values[3]);
+				that._refreshBlock(values[2], values[3]);
+				var eventDetail = {
+					minValue: this.formatNumber(values[0], this.step),
+					maxValue: this.formatNumber(values[1], this.step),
+					fromUser: true,
+					originalValue: {
+						minValue: values[0],
+						maxValue: values[1]
+					}
+				};
+				this.originalMinValue = values[0];
+				this.originalMaxValue = values[1];
+				var eventOption = {};
+				that.$emit('rangechange', eventDetail, eventOption);
+			}
+		},
+		_isValuesValid: function(values) {
+			return values != null && values != undefined && values.length == 2;
+		},
+		/**
+		 * 根据手势计算相关数据
+		 */
+		_calculateValues: function(e) {
+			var pageX = e.pageX;
+			//兼容h5平台
+			if (e.hasOwnProperty('changedTouches')) {
+				pageX = e.changedTouches[0].pageX;
+			}
+
+			var that = this;
+			var moveLength = pageX - that._blockDownX;
+			var left = that._blockLeft + that._pxToRpx(moveLength);
+			left = Math.max(0, left);
+			left = Math.min(left, that.MAX_LENGTH);
+			var minBlockLeft = that.minBlockLeft;
+			var maxBlockLeft = that.maxBlockLeft;
+			if (that._curBlock == 'minBlock') {
+				minBlockLeft = left;
+			} else {
+				maxBlockLeft = left;
+			}
+			var range = that.max - that.min;
+			var minLeft = Math.min(minBlockLeft, maxBlockLeft);
+			var maxLeft = Math.max(minBlockLeft, maxBlockLeft);
+			var minValue = (minLeft / that.MAX_LENGTH) * range + that.min;
+			var maxValue = (maxLeft / that.MAX_LENGTH) * range + that.min;
+			return [minValue, maxValue, minLeft, maxLeft];
+		},
+		/**
+		 * 计算滑块坐标
+		 */
+		_calculateBlockLeft: function(minValue, maxValue) {
+			var that = this;
+			var blockSize = that.blockSize;
+			var range = that.max - that.min;
+			var minLeft = ((minValue - that.min) / range) * that.MAX_LENGTH;
+			var maxLeft = ((maxValue - that.min) / range) * that.MAX_LENGTH;
+			return [minLeft, maxLeft];
+		},
+		/**
+		 * 刷新进度条视图
+		 */
+		_refreshProgressBar: function(minBlockLeft, maxBlockLeft) {
+			var that = this;
+			var blockSize = that.blockSize;
+			that.progressBarLeft = minBlockLeft + blockSize / 2;
+			that.progressBarWidth = Math.abs(maxBlockLeft - minBlockLeft);
+		},
+		/**
+		 * 刷新滑块视图
+		 */
+		_refreshBlock: function(minBlockLeft, maxBlockLeft) {
+			var that = this;
+			that.minBlockLeft = minBlockLeft;
+			that.maxBlockLeft = maxBlockLeft;
+		},
+		/**
+		 * 刷新整个视图
+		 */
+		_refresh: function() {
+			var that = this;
+			var MAX_LENGTH = that.width - that.blockSize;
+			that.MAX_LENGTH = MAX_LENGTH;
+			that.maxBlockLeft = MAX_LENGTH;
+			that.progressBarWidth = MAX_LENGTH;
+			var values = that.values;
+			if (this.originalMinValue && this.originalMinValue) {
+				values = [this.originalMinValue || values[0], this.originalMaxValue || values[1]];
+			}
+
+			if (that._isValuesValid(values)) {
+				values[0] = Math.max(that.min, values[0]);
+				values[0] = Math.min(values[0], that.max);
+				values[1] = Math.max(that.min, values[1]);
+				values[1] = Math.min(values[1], that.max);
+				var leftValues = that._calculateBlockLeft(values[0], values[1]);
+				that._refreshProgressBar(leftValues[0], leftValues[1]);
+				that._refreshBlock(leftValues[0], leftValues[1]);
+			}
+		},
+		formatNumber(num, step) {
+			//格式化数字，保留几位小数
+			let stepStr = '' + step;
+			let index = stepStr.indexOf('.');
+			let len = index > -1 ? stepStr.length - index - 1 : 0;
+			let offestNum = parseInt(1 + Array(('' + len).length + 1).join(0)) * 0.1;
+			let tmpNum = num * offestNum;
+			return ((parseInt(tmpNum / step + (step > 1 ? 1 : step) * 0.5) * step) / offestNum).toFixed(len);
+		}
+	}
+};
+</script>
+
+<style>
+.range-slider {
+	position: relative;
+}
+
+.range-bar {
+	position: absolute;
+}
+
+.range-bar {
+	position: absolute;
+	top: 50%;
+	transform: translate(0, -50%);
+	border-radius: 10000rpx;
+}
+
+.range-bar-bg {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	border-radius: 10000rpx;
+}
+
+.range-bar-progress {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: blueviolet;
+}
+
+.block {
+	position: absolute;
+	top: 50%;
+	transform: translate(0, -50%);
+	background: #fff;
+	border-radius: 50%;
+	box-shadow: 0rpx 0rpx 6rpx #ccc;
+}
+
+.block.active {
+	transform: translate(0, -50%) scale(1.5);
+}
+</style>

pages/blindDate/userList.vue

 <template>
-	<div :style="{'background-color': '#FFF','height': '100vh','overflow': 'hidden'}">
+	<div :style="{'background-color': '#FFF','height': '100vh','overflow': 'hidden'}" class='userListstyle'>
+		<view style="display: flex; align-items: center;">
+			<view style="flex:1;overflow: hidden;">
+				<u-tabs bg-color="#FFF" :is-scroll="false" name="Name" :list="typeList" :active-color="mainColor"
+					:current="active" @change="changeHandler" :show-bar="true"  height="100"
+					 font-size="28"></u-tabs>
+			</view>
+			<div style="width: 64rpx;height: 48rpx;display: table-cell; vertical-align: middle;text-align: right;" @click="show=true,Styletype = data.listStyle">
+				<u-icon name="filter-o" color="#111" size="42"></u-icon>
+			</div>
+		</view>
 		<u-empty v-if="data.list.length == 0" text="暂无内容" mode="list"></u-empty>
-		<view style="height: 100%;" v-if="data.list.length > 0">
+		
+		<view style="height: calc(100vh - 100rpx)" v-if="data.list.length > 0">
 			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
 				style="height: 100%; padding-bottom: 0px;">
 					<matchmaking :navs="data" ></matchmaking>
@@ -16,26 +27,112 @@
 				
 			</scroll-view>
 		</view>
+		<u-popup v-model="show"
+			mode="right"
+			length="90%"
+			height='100%'
+		>
+				<view class="popupbox">
+					
+					<text class="popupbox_text" style="margin-top: 15px;">布局模式</text>
+					<view class="popup_item">
+						<u-radio-group v-model="Styletype">
+							<u-radio 
+								shape="circle"
+								v-for="(item, index) in Stylelist" :key="index" 
+								:name="item.Id"
+								:disabled="item.disabled"
+								:active-color='mainColor'
+							>
+								{{item.Name}}
+							</u-radio>
+						</u-radio-group>
+					</view>
+					<text class="popupbox_text" style="margin-top: 15px;">年龄
+						<text style="margin-left: 15px;">{{msg.Age}}~{{msg.EndAge}}</text>
+					</text>
+					<!-- 区间滑块 -->
+					<view class="popup_item" style="margin-top: 0;">
+						<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
+							:block-size="36" :active-color="mainColor" min="0" max="100" @rangechange="rangechange"
+							:values="ages"></rangeSlider>
+					</view>
+					
+					<text class="popupbox_text" style="margin-top: 0px;">身高
+						<text style="margin-left: 15px;">{{msg.Height}}~{{msg.EndHeight}}cm</text>
+					</text>
+					<!-- 区间滑块 -->
+					<view class="popup_item" style="margin-top: 0;">
+						<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
+							:block-size="36" :active-color="mainColor" min="0" max="230" @rangechange="rangechange2"
+							:values="Heights"></rangeSlider>
+					</view>
 					
+					<text class="popupbox_text" style="margin-top: 0px;">体重
+						<text style="margin-left: 15px;">{{msg.Weight}}~{{msg.EndWeight}}kg</text>
+					</text>
+					<!-- 区间滑块 -->
+					<view class="popup_item" style="margin-top: 0;">
+						<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
+							:block-size="36" :active-color="mainColor" min="0" max="200" @rangechange="rangechange3"
+							:values="Weights"></rangeSlider>
+					</view>
+					
+					<text class="popupbox_text" style="margin-top: 0px;">年收入
+						<text style="margin-left: 15px;">{{msg.YearMoney}}~{{msg.EndYearMoney}}万</text>
+					</text>
+					<!-- 区间滑块 -->
+					<view class="popup_item">
+						<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
+							:block-size="36" :active-color="mainColor" min="0" max="500" @rangechange="rangechange4"
+							:values="YearMoeys"></rangeSlider>
+					</view>
+					
+					
+					
+					<view class="popup_b" :style="{height:cHeight+'px'}">
+						<view class="popup_b_item" style="background: #FAF8F9;color: #000000;" @click="goreset()">
+							<text>重置</text>
+						</view>
+						<view class="popup_b_item" :style="{background:mainColor }" @click="determine()">
+							<text>确定</text>
+						</view>
+					</view>
+				</view>
+		</u-popup>
 	</div>
 </template>
 
 <script>
 	import matchmaking from "@/components/matchmaking/index"
+	import rangeSlider from "./components/range-slider.vue"
 	export default {
 		components:{
-			matchmaking
+			matchmaking,
+			rangeSlider
 		},
 		data() {
 			return {
+				show:false,
 				mainColor: '',
 				active: 0,
 				searchKey:"",
-				typeList: [],
+				typeList: [{'Name':'男神',Id:1},{'Name':'女神',Id:2}],
+				Stylelist:[{Name:'列表模式',Id:-1},{Name:'瀑布流',Id:1}],
+				Styletype:-1,
 				msg:{
 					pageIndex:1,
 					pageSize:20,
 					Sex:0,
+					
+					Age:0,
+					EndAge:100,
+					Height:0,
+					EndHeight:230,
+					Weight:0,
+					EndWeight:200,
+					YearMoney:0,
+					EndYearMoney:500,
 				},
 				loadText: {
 					loadmore: "轻轻上拉，加载更多",
@@ -47,7 +144,13 @@
 				data:{
 					listStyle:-1,
 					list:[],
-				}
+				},
+				width:0,//滑块的高度
+				cHeight:0,
+				ages:[0,100],//年龄
+				Heights:[0,230],//身高
+				Weights:[0,200],//体重
+				YearMoeys:[0,500],//年收入
 				
 			};
 		},	
@@ -58,10 +161,17 @@
 			if(options && options.Sex){
 				this.msg.Sex = options.Sex
 			}
+			this.cHeight = this.$uiConfig.is_bang ? 60 : 52;
 			this.init();
+			this.getEnumList();
+			this.getMarriage();
+			// 4-14
+			this.GetHouseList()//获取房屋枚举 
+			this.GetCarList()//获取车辆枚举 
 		},
 		created() {
 			this.mainColor = this.$uiConfig.mainColor;
+			this.width = this.$utils.SystemInfo().windowWidth*0.9;
 		},
 		mounted() {
 			uni.setNavigationBarTitle({
@@ -101,17 +211,97 @@
 			},
 			changeHandler(i) {
 				this.active = i;
-				this.msg.BrandClassId = this.typeList[i].ID;
+				this.msg.Sex = this.typeList[i].Id;
 				this.msg.pageIndex = 1;
 				this.data.list= [];
 				this.init();
 			},
+			determine(){//确定
+				console.log(this.Styletype)
+			},
+			rangechange(e){//年龄
+				this.msg.Age = e.minValue;
+				this.msg.EndAge = e.maxValue;
+			},
+			rangechange2(e){//体重
+				this.msg.Height = e.minValue;
+				this.msg.EndHeight = e.maxValue;
+			},
+			rangechange3(e){//身高
+				this.msg.Weight = e.minValue;
+				this.msg.EndWeight = e.maxValue;
+			},
+			rangechange4(e){//年收入
+				this.msg.YearMoney = e.minValue;
+				this.msg.EndYearMoney = e.maxValue;
+			},
+			getEnumList(){//学历
+				this.request2(
+					{
+						url: '/api/AppletMiai/GetEducationTypeEnumList',
+						data: {}
+					},
+					res => {
+						if(res.resultCode==1){
+							if(res.data.length > 0){
+								
+							}
+						}
+					}
+				);
+			},
+			getMarriage(){
+				this.request2(
+					{
+						url: '/api/AppletMiai/GetMarriageEnumList',
+						data: {}
+					},
+					res => {
+						if(res.resultCode==1){
+							if(res.data.length > 0){
+								
+							}
+						}
+					}
+				);
+			},
+			GetHouseList(){
+				this.request2(
+					{
+						url: '/api/AppletMiai/GetHouseInfoEnumList',
+						data: {}
+					},
+					res => {
+						if(res.resultCode==1){
+							if(res.data.length > 0){
+								
+							}
+						}
+					}
+				);
+			},
+			GetCarList(){
+				this.request2(
+					{
+						url: '/api/AppletMiai/GetCarInfoEnumList',
+						data: {}
+					},
+					res => {
+						if(res.resultCode==1){
+							if(res.data.length > 0){
+								
+							}
+						}
+					}
+				);
+			},
+			
 		}
 	};
 </script>
 
 <style>
-	.good_study_two {
+	.userListstyle {
 		position: relative;
 		margin-bottom: 12px;
 		border: 1rpx solid transparent;
@@ -121,7 +311,7 @@
 		background-color: #fff;
 	}
 	
-	.good_study_two .tips {
+	.userListstyle .tips {
 		width: 64rpx;
 		height: 64rpx;
 		position: absolute;
@@ -130,7 +320,7 @@
 		z-index: 4;
 	}
 	
-	.good_study_two .img-box {
+	.userListstyle .img-box {
 		width: 100%;
 		height: 0;
 		padding-top: 100%;
@@ -138,7 +328,7 @@
 		overflow: hidden;
 	}
 	
-	.good_study_two .img-box .img-show {
+	.userListstyle .img-box .img-show {
 		position: absolute;
 		left: 0;
 		top: 0;
@@ -149,11 +339,11 @@
 		overflow: hidden;
 	}
 	
-	.good_study_two .guding {
+	.userListstyle .guding {
 		position: relative;
 	}
 	
-	.good_study_two .guding .img-box {
+	.userListstyle .guding .img-box {
 		position: absolute;
 		left: 0;
 		right: 0;
@@ -161,12 +351,12 @@
 		top: 0;
 	}
 	
-	.good_study_two .good-info {
+	.userListstyle .good-info {
 		padding: 15rpx;
 		height: 112rpx;
 	}
 	
-	.good_study_two .good-info .good-name {
+	.userListstyle .good-info .good-name {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		display: -webkit-box;
@@ -178,7 +368,7 @@
 		font-weight: bold;
 	}
 	
-	.good_study_two .good-info .good-price-info {
+	.userListstyle .good-info .good-price-info {
 		display: flex;
 		color: #999999;
 		overflow: hidden;
@@ -189,7 +379,7 @@
 		font-size: 22rpx;
 	}
 	
-	.good_study_two .good-info .good-price-info .price {
+	.userListstyle .good-info .good-price-info .price {
 		color: #999999;
 		/* flex: 1; */
 		font-size: 11px;
@@ -200,8 +390,57 @@
 		-webkit-box-orient: vertical;
 	}
 	
-	.good_study_two .good-info .good-price-info .buy {
+	.userListstyle .good-info .good-price-info .buy {
 		width: 24px;
 		text-align: right;
 	}
+	.userListstyle .popupbox{
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			position: relative;
+			
+		}
+		.userListstyle .popupbox_text{
+			font-size: 12px;
+			color: #111111;
+			margin-left: 5%;
+		}
+		.userListstyle .popup_item{
+			width: 90%;
+			/* height: 35px; */
+			margin-left: 5%;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			padding: 5px;
+			margin-top: 10px;
+			/* background: #F1F1F1; */
+		}
+		.userListstyle .inputM{
+			width: 100%;
+		}
+		.userListstyle .popup_b{
+			width: 100%;
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			color: #FFFFFF;
+			
+		}
+		.userListstyle .popup_b_item{
+			width: 50%;
+			height: 100%;
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+			justify-content: center;
+			font-size: 14px;
+			padding-top: 15px;
+		}
 </style>