恢复

apis/site.js

@@ -0,0 +1,19 @@
+import request from '../utils/request.js';
+import Qs from 'qs';
+
+export function getChargerInfoById(data) {
+	//var url='/mobile/regUser/findByOpenId';
+	/*return requestWhite({
+		method: 'get',
+		data: data,
+		url: url
+	})*/
+	
+	var p = new Promise(function(resolve,rejct){
+		if(data != null)
+			resolve(data)
+		reject(data);
+			
+	})
+	return p;
+}

components/Chargermap.vue

@@ -0,0 +1,500 @@
+<template>
+	<view>
+		<view id="container" :style="myStyle"></view>
+	
+			<u-icon name="map-fill" v-if="false" class="input-card"  style="width: 24rem;top: 130px;width: 20px;height: 20px;" color="#999" size="40"></u-icon>
+			
+	</view>
+</template>
+
+<script>
+		import MapLoader from '@/utils/AMap'
+	export default {
+		name:"Chargermap",
+		
+		data() {
+			return {
+				myStyle:"width: 100%; height: 1200rpx;",
+				chargerIcon:'',
+				chargerSelectedIcon:'',
+				personIcon:'',
+				longitude: 112.276527,
+				latitude: 30.306427,
+				AMap:null,
+				//车的位置
+				car: {
+					obj:null,
+					longitude: '',
+					latitude: '',
+				},
+				down: {
+					obj:null,
+					longitude: '',
+					latitude: '',
+				},
+				up: {
+					obj:null,
+					longitude: '',
+					latitude: '',
+				},
+				//个人
+				info: {
+					obj:null,
+					init: false,
+					longitude: '',
+					latitude: '',
+				},
+				mapcharger:null,
+				startend: [{
+					longitude:112.279274,
+					latitude:30.303273,
+					name:''
+				}, {
+					longitude:112.273867,
+					latitude:30.309817,
+					name:''
+				}], 				
+				start:{},
+				end:{}, 
+				chargerList:[],
+				covers: [
+					{
+						longitude:112.273867,
+						latitude:30.309817,
+					},{
+						longitude:112.280261,
+						latitude:30.3041,
+					},{
+						longitude:112.279274,
+						latitude:30.303273,
+					}
+				]
+			};
+		},
+		methods:{
+			getLocation () {
+			  const self = this;
+			  AMap.plugin('AMap.Geolocation', function () {
+				var geolocation = new AMap.Geolocation({
+				  // 是否使用高精度定位，默认：true
+				  enableHighAccuracy: true,
+				  // 设置定位超时时间，默认：无穷大
+				  timeout: 10000
+				});
+				 
+				geolocation.getCurrentPosition();
+				AMap.event.addListener(geolocation, 'complete', onComplete);
+				AMap.event.addListener(geolocation, 'error', onError);
+				 
+				function onComplete (data) {
+				  // data是具体的定位信息
+				  console.log('定位成功信息：', data.addressComponent.city);
+				  self.city = data.addressComponent.city;
+				}
+				 
+				function onError (data) {
+				  // 定位出错
+				  console.log('定位失败错误：', data);
+				  // 调用IP定位
+				  self.getLngLatLocation();
+				}
+			  });
+			}, 
+			// 通过IP获取当前位置
+			getLngLatLocation () {
+			  AMap.plugin('AMap.CitySearch', function () {
+				var citySearch = new AMap.CitySearch();
+				citySearch.getLocalCity(function (status, result) {
+				  if (status === 'complete' && result.info === 'OK') {
+					// 查询成功，result即为当前所在城市信息
+					console.log('通过ip获取当前城市：', result);
+					// 逆向地理编码
+					AMap.plugin('AMap.Geocoder', function () {
+					  var geocoder = new AMap.Geocoder({
+						// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+						city: result.adcode
+					  });
+		 
+					  var lnglat = result.rectangle.split(';')[0].split(',');
+					  geocoder.getAddress(lnglat, function (status, data) {
+						if (status === 'complete' && data.info === 'OK') {
+						  // result为对应的地理位置详细信息
+						  console.log(data);
+						}
+					  });
+					});
+				  }
+				});
+			  });
+			}, 
+			updateCharger(pos){
+//				console.log('更新充电桩1'+JSON.stringify(pos)) 
+//				console.log('更新充电桩2'+JSON.stringify(this.chargerList[0].info)) 
+				let index = this.chargerList.findIndex(item => item.info.latitude === pos.latitude && item.info.longitude === pos.longitude);
+				//let index = this.chargerList.findIndex(item => (Math.abs(item.info.longitude-pos.longitude)<0.000001 && Math.abs(item.info.longitude - pos.latitude)<0.000001));
+				
+				if(index>=0){
+					let station_icon2 = "width: 100px;height: 36px;line-height: 20px;border-radius: 50px;background-color: rgba(0, 185, 98, 100);text-align: center;display: flex;";
+					let corner2=" width: 0;height: 0;position: absolute;top: 36px;left: 0;right: 0;margin: auto;border-bottom: 6px solid transparent;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 8px solid #00b962 ;";
+					
+					let content = "<div style='" + station_icon2 + "'>";
+					content+="<div style='width: 36px;height: 36px;line-height: 36px;text-align: center;border: 1px solid rgba(0, 185, 98, 100);border-radius: 999px;background-color: #fff;color: #00b962;' class='iconfont'>&#xe606;</div>";
+					content+="<div style='color: #ffffff;line-height: 14px;padding: 4px;'>";
+					content+="<div style='"+corner2+"'></div>";
+					content+="<div class=''>";
+					content+= "￥" + pos.price.toString();
+					content+="</div>";
+					content+="<div class=''>";
+					content+="空闲" + pos.idleNum.toString();
+					content+="</div>"
+					content+="</div>";
+					content+="</div>";
+					
+ 					console.log('找到充电桩[]'+content)
+					//let content = "<div  style='height: 40px;width: 100px;display: flex;flex-direction: row;   flex-wrap: wrap; background-color: #00B962!important;border-radius: 20px;'>		    <div><img src='"+this.chargerSelectedIcon+"' style='idth: 40px;height: 40px'></div><div style='display: flex;flex-direction:column;color:#FFFFFF;'><div style='margin-left:10px'>¥"+ pos.price +"</div><div style='margin-left:10px'>空闲"+pos.idleNum + "</div> </div></div>";
+					this.chargerList[index].info.selected = true;
+					this.chargerList[index].marker.setContent(content);						
+				} 
+				for(let i = 0;i < this.chargerList.length;i++){
+					if(index == i)
+						continue;
+					if(this.chargerList[i].info.selected != null && 
+						this.chargerList[i].info.selected)
+						{
+							let station_icon = "width: 36px;height: 36px;line-height: 36px;text-align: center;border: 1px solid rgba(133, 140, 255, 100);	color: #b58cff;	border-radius: 999px;";
+							let corner =  "width: 0;height: 0;position: absolute;top: 34px;left: 0;right: 0;margin: auto;border-bottom: 4px solid transparent;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 6px solid #b58cff ;";
+							let  content = "<div style='"+station_icon+"'><text class='iconfont'>&#xe606;</text><div style='" + corner+"'></div></div>"
+							
+							//let content = "<img src='"+this.chargerIcon+"' style='height: 40px;width: 40px' />";
+							this.chargerList[i].marker.setContent(content);
+							this.chargerList[i].info.selected = false;
+							console.log('restore'+JSON.stringify(this.chargerList[i].info))
+						}
+				}
+				
+				
+			},
+ 		    addCharger(pos) {
+//				console.log('添加充电桩'+JSON.stringify(pos))
+				//let content = "<div  style='height: 40px;width: 100px;display: flex;flex-direction: row;   flex-wrap: wrap; background-color: #00B962!important;border-radius: 20px;'>		    <div><img src='"+this.chargerIcon+"' style='idth: 40px;height: 40px'></div><div style='display: flex;flex-direction:column;color:#FFFFFF'><div>¥1.5</div><div>空闲10</div> </div></div>";
+				let station_icon = "width: 36px;height: 36px;line-height: 36px;text-align: center;border: 1px solid rgba(133, 140, 255, 100);	color: #b58cff;	border-radius: 999px;";	
+				let corner =  "width: 0;height: 0;position: absolute;top: 34px;left: 0;right: 0;margin: auto;border-bottom: 4px solid transparent;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 6px solid #b58cff ;";
+				let  content = "<div style='"+station_icon+"'><text class='iconfont'>&#xe606;</text><div style='" + corner+"'></div></div>"
+				
+				let marker = new AMap.Marker({
+					content: content,//"<img src='"+this.chargerIcon+"' style='height: 40px;width: 40px' />",
+					//icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+					position: [pos.longitude,pos.latitude],
+					offset: new AMap.Pixel(-13, -30),
+					zIndex:900,
+					autoRotation: true,
+				});
+				marker.setMap(this.mapcharger);
+				this.myEmit("charger",marker,pos)
+				this.chargerList.push({marker:marker,info:pos});
+			},
+			addPerson(pos) {
+				console.log('addPerson'+JSON.stringify(pos))
+				let marker = new AMap.Marker({
+					content: "<img src='"+this.personIcon+"' style='height: 40px;width: 40px' />",
+					//icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+					position: [pos.longitude,pos.latitude],
+					offset: new AMap.Pixel(-13, -30),
+					zIndex:900,
+					autoRotation: true,
+				});
+				marker.setMap(this.mapcharger);
+				this.myEmit("person",marker,pos)
+				//this.chargerList.push(marker)
+			},
+			setChargerList(sz){
+					
+					if(this.AMap==null){
+						return
+					}
+					//this.getLocation();
+					for(var i in this.chargerList){
+						this.mapcharger.remove(this.chargerList[i]);
+					}
+					 
+					this.chargerList=[]
+					for(var i in sz){
+						var ob=sz[i];
+						this.addCharger(ob);
+						/*var ob1 = new AMap.Marker({
+						    position: new AMap.LngLat(ob.longitude,ob.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+						    title: '北京'
+						});
+						this.mapcharger.add(ob1);*/
+						/*
+						var ob1=new AMap.Marker({
+							map: this.mapcharger,
+							position: [ob.longitude,ob.latitude],
+							//offset: new AMap.Pixel(-5, -5),
+							//offset: new AMap.Pixel(-18, -40),
+							content:"<img src='"+icon0+"' style='height: 40px;width: 40px' />",
+							title:'test111111111111111',
+							zIndex:900,
+							autoRotation: true,
+						});
+						this.myEmit("car",ob1,ob)
+						
+						*/
+						//this.mapcharger.add(ob1);
+						 
+					}
+					
+			},
+			myEmit(type,ob1,obj){
+				var _this=this;
+				AMap.event.addListener(ob1, 'click', function(e) {
+					_this.$emit('clickMap',{
+						type:type,
+						obj:obj
+					})						
+				})
+				
+			},
+			setMyStyle(s){
+				this.myStyle=s;
+			},			 
+			setCenter(item){
+				if(this.mapcharger){
+					this.mapcharger.setCenter([item.longitude,item.latitude]);
+					return true
+				}else{
+					return false
+				}
+			},			
+			setPerson(ob,bl){
+//				console.log('setPerson1'+JSON.stringify(ob))
+				if(this.AMap==null){
+					return
+				}
+//				console.log('setPerson2')
+				
+					this.info.longitude=ob.longitude
+					this.info.latitude=ob.latitude
+					if(!this.info.ob){
+						//this.addPerson(ob)
+						 
+						
+						//this.info.ob.setMap(this.mapcharger);
+						//console.log('setMap  xxx ')
+						//this.mapbus.setCenter([this.info.longitude,this.info.latitude]); //设置地图中心点
+						if(!bl){
+							let posCenter= [ this.info.longitude,this.info.latitude];
+//							console.log('center'+JSON.stringify(posCenter))
+							//this.mapcharger.setZoom(9)
+							//this.mapcharger.setCenter([112.28541,30.308354])
+							//this.mapcharger.setCenter([121.504919,31.351083])
+							this.mapcharger.setCenter(posCenter); //设置地图中心点
+						}
+			
+					}else{
+					//	this.info.ob.setPosition( [this.info.longitude,this.info.latitude]);
+					}
+				
+				
+			},
+			
+			init(){
+				console.log('init')
+				var _this = this;
+//				this.personIcon = require("@/static/img/charger_selected.png")
+				// this.chargerIcon = require("@/static/img/charger.png");
+				// this.chargerSelectedIcon =  require("@/static/img/charger_selected_circle.png");
+				
+				MapLoader().then(AMap => {
+					
+					this.AMap=AMap;
+					_this.mapcharger && _this.mapcharger.destroy();
+					//使用地图容器ID创建
+					_this.mapcharger=new AMap.Map("container", {
+						resizeEnable: true,
+						center: [this.longitude, this.latitude],
+						zoom: 14
+					});
+					 
+					var clickHandler = function(e) {
+					  alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
+					};
+					_this.mapcharger.on('click', clickHandler); 
+					_this.$emit('onload')
+				}, e => {
+					//_this.mui.toast('地图加载失败');
+					console.log('地图加载失败', e)
+				})
+			},
+			initMap(point,stationList,startend){
+				console.log('初始化地图'+this.longitude+this.latitude)
+				var _this = this;
+				this.covers=point;
+				this.startend=startend;
+				MapLoader().then(AMap => {
+					
+					this.AMap=AMap;
+					_this.mapcharger && _this.mapcharger.destroy();
+				
+					_this.mapcharger=new AMap.Map("container", {
+						resizeEnable: true,
+						center: [this.longitude, this.latitude],
+						//center: [116.397428, 39.90923],
+						zoom: 14
+					});
+					var lineArr=[]
+					//var icon0 = require("@/static/img/map_0.png");
+					//var icon1 = require("@/static/img/map_1.png");
+					//var icon2 = require("@/static/img/map_2.png");
+					/*this.start=new AMap.Marker({
+						map: _this.mapcharger,
+						position: [_this.startend[0].longitude,_this.startend[0].latitude],
+						content:"<img src='"+icon0+"' style='height: 30px;width: 30px' />",
+						offset: new AMap.Pixel(-15, -30),
+						zIndex:99,
+						autoRotation: true,
+					});
+					this.end=new AMap.Marker({
+						map: _this.mapcharger,
+						position: [_this.startend[1].longitude,_this.startend[1].latitude],
+					content:"<img src='"+icon2+"' style='height: 30px;width: 30px' />",
+					offset: new AMap.Pixel(-15, -30),
+					zIndex:99,
+						autoRotation: true,
+					});
+					for(var i in _this.covers){
+						var point=_this.covers[i]
+						lineArr.push([point.longitude,point.latitude])
+						
+					}
+					
+					for(var i in stationList){
+						var point=stationList[i]
+						var ob_point =new AMap.Marker({
+							map: _this.mapcharger,
+							position: [point.longitude,point.latitude],
+							offset: new AMap.Pixel(-5, -7),
+							content:"<img src='"+icon1+"' style='height: 10px;width: 10px' />",
+							zIndex:99,
+							autoRotation: true,
+						});
+						this.myEmit("point",ob_point,point)
+					}
+					var polyline = new AMap.Polyline({
+						map: _this.mapcharger,
+						path: lineArr,
+						showDir: true,
+						strokeColor: "#28F", //线颜色
+						// strokeOpacity: 1,     //线透明度
+						strokeWeight: 3, //线宽
+						//strokeStyle: "solid"  //线样式
+					});*/
+					
+					this.$emit('onload')
+				}, e => {
+					//_this.mui.toast('地图加载失败');
+					console.log('地图加载失败', e)
+				})
+			},
+		}
+	}
+</script>
+
+<style scoped>
+/*去除下标*/
+.amap-logo{
+display: none;
+}
+.amap-copyright{
+opacity:0;
+    font-size: 1px;
+}
+
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: .25rem;
+  width: 22rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 0.75rem;
+}
+
+.station-icon {
+	width: 36px;
+	height: 36px;
+	line-height: 36px;
+	text-align: center;
+	border: 1px solid rgba(133, 140, 255, 100);
+	color: #b58cff;
+	border-radius: 999px;
+	position: absolute;
+	top: 89px;
+	left: 38px;
+	.corner{
+	   width: 0;
+	   height: 0;
+		position: absolute;
+		top: 34px;
+		left: 0;
+		right: 0;
+		margin: auto;
+		border-bottom: 4px solid transparent;
+		border-left: 4px solid transparent;
+		border-right: 4px solid transparent;
+		border-top: 6px solid #b58cff ;
+	}
+}
+
+.station-icon2 {
+	width: 100px;
+	height: 36px;
+	line-height: 20px;
+	border-radius: 50px;
+	background-color: rgba(0, 185, 98, 100);
+	text-align: center;
+	display: flex;
+	position: absolute;
+	top: 191px;
+	left: 168px;
+	.icon2-left{
+		width: 36px;
+		height: 36px;
+		line-height: 36px;
+		text-align: center;
+		border: 1px solid rgba(0, 185, 98, 100);
+		border-radius: 999px;
+		background-color: #fff;
+		color: #00b962;
+	}
+	.icon2-right{
+		color: #ffffff;
+		line-height: 14px;
+		padding: 4px;
+	}
+}
+.corner2{
+   width: 0;
+   height: 0;
+	position: absolute;
+	top: 36px;
+	left: 0;
+	right: 0;
+	margin: auto;
+	border-bottom: 6px solid transparent;
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	border-top: 8px solid #00b962 ;
+	
+}
+</style>

components/double-slider/DoubleSlider.vue

@@ -0,0 +1,437 @@
+<template>
+	<view class="double-slider" :style="{
+		width: `calc(${sliderWidth} - ${blockSize})`,
+		height: sliderHeight,//`calc(${sliderHeight}+3*${borderRadius})`,
+		background: `${indicatorColor}`,
+		borderRadius: `${radius}`,
+		margin: `calc(${blockSize} / 2) 0`,
+	}">
+		<view class="active-slider" :style="{
+			width: `${xWidth - activeX}px`,
+			height: sliderHeight,//`calc(${sliderHeight}+3*${borderRadius})`,
+			background: `${disabled || (leftBlockDisabled && rightBlockDisabled)? disabledIndicatorColor:activeColor}`,
+			transform: `translateX(${activeX}px)`,
+			left: `calc(${blockSize} / 2)`
+		}">
+			<view class="block1" :style="[getLeftBlockStyle]"  @touchstart="blockStart1"
+				@touchmove.stop.parevent="blockMove1">
+				<label style="position: relative; " :style="[getLableStyle]">{{currentMinValue}}</label>
+			</view>
+			<view class="block2"  :style="[getRightBlockStyle]" @touchstart="blockStart2"
+				@touchmove.stop.parevent="blockMove2" @touchend="isLeft = false">
+				<view style="position: relative;" :style="[getLableStyle]">
+					<label >{{currentMaxValue}}</label>									
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: { 
+			labelColor:{
+				type:String,
+				default:'#000000'
+			},
+			sliderExtendHeight:{
+				type:String,
+				default:'30rpx'
+			},
+			sliderWidth: {
+				type: String,
+				default: "100%"
+			},
+			sliderHeight: {
+				type: String,
+				default: "15rpx"
+			},
+			indicatorColor: {
+				type: String,
+				default: "#FF0000"//"#EFEFEF"
+			},
+			activeColor: {
+				type: String,
+				default: "skyblue"
+			},
+			borderStyle:{
+				type: String,
+				default: "solid"
+			},
+			borderColor:{
+				type:String,
+				default: "#00B962"
+			},
+			borderWidth:{
+				type:String,
+				default:'1rpx'
+			},
+			borderRadius:{
+				type: String,
+				default:'20rpx'
+			},
+//			style="border-radius: 25rpx;border-style:solid ; border-color: blue;border-width: 1rpx; "
+			radius: {
+				type: String,
+				default: "20rpx"
+			},
+			blockSize: {
+				type: String,
+				default: "36rpx"
+			},
+			blockColor: {
+				type: String,
+				default: "#3489F8"
+			},
+			/*
+			currentValue: {
+				type: Array,
+				default: [20, 80]
+			},*/
+			currentMinValue:{
+				type:Number,
+				default:0
+			},
+			currentMaxValue:{
+				type:Number,
+				defult:100
+			},
+			minValue: {
+				type: Number,
+				default: 0
+			},
+			maxValue: {
+				type: Number,
+				default: 100
+			},
+			step: {
+				type: Number,
+				default: 0
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			leftBlockDisabled: {
+				type: Boolean,
+				default: false
+			},
+			rightBlockDisabled: {
+				type: Boolean,
+				default: false
+			},
+			disabledIndicatorColor: {
+				type: String,
+				default: "#bababa"
+			},
+			disabledBlockColor: {
+				type: String,
+				default: "#8b8b8b"
+			},
+			blockStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			}
+		},
+		mounted() {
+			console.log('mounted')
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.double-slider').boundingClientRect(res => {
+				this.width = res.width;
+
+				const cMinP = this.currentMinValue/ this.maxValue * 100;
+				const cMaxP = this.currentMaxValue / this.maxValue * 100;
+
+				this.activeX = this.width * (cMinP * 0.01);
+				this.xWidth = this.width * (cMaxP * 0.01);
+				
+				//this.currentMaxValue = this.currentValue[1];
+				//this.currentMinValue = this.currentValue[0];
+				//console.log('value '+this.currentMaxValue)
+				this.minStepValue = this.currentMinValue;
+				this.maxStepValue = this.maxValue * (cMaxP * 0.01);
+				console.log('mounted 1')
+			}).exec();
+
+			query.select('.block1').boundingClientRect(res => {
+				this.blockWidth = res.width;
+				console.log('mounted2 ' + this.blockWidth)
+			}).exec();
+
+		},
+		data() {
+			return {
+				width: 0,
+				xWidth: 0,
+				activeX: 0,
+				blockWidth: 0, // 块宽度
+				blockX1: 0,
+				blockX2: 0,
+				overlap: false,
+				isLeft: false,
+				minStepValue: 0,
+				maxStepValue: 0
+			}
+		},
+		computed: {
+/*			currentMinValue(){
+				return currentValue[0];
+			},
+			currentMaxValue(){
+				return currentValue[1];
+			},*/
+			stepValueW() {
+				const stepP = this.step / this.maxValue * 100;
+				return this.width * stepP * 0.01;
+			},
+			getBlockStyle() {
+				this.blockStyle = {
+					width: this.blockSize,
+					height: this.blockSize,
+					...this.blockStyle,
+				}
+				return this.blockStyle;
+			},
+			getLableStyle(){
+				const styleObj = Object.assign({}, this.getBlockStyle);
+				if(this.borderRadius)
+				{
+					styleObj.top =  this.borderRadius;
+				}
+				if(this.labelColor){
+					styleObj.color = this.labelColor;
+				}
+				
+				return styleObj;
+			},
+			getLeftBlockStyle() {
+				const styleObj = Object.assign({}, this.getBlockStyle);
+				styleObj.background = styleObj.backgroundImage || styleObj.background ? styleObj.background :
+					`${this.disabled || this.leftBlockDisabled ? this.disabledBlockColor : this.blockColor}`;
+				if(this.borderStyle)
+					styleObj.borderStyle = this.borderStyle;
+				if(this.blockColor)
+					styleObj.borderColor = this.borderColor;
+				if(this.borderWidth)
+					styleObj.borderWidth = this.borderWidth;
+				if(this.borderRadius)
+					styleObj.borderRadius = this.borderRadius;
+				 
+				return styleObj;
+			},
+			getRightBlockStyle() {
+				const styleObj = Object.assign({}, this.getBlockStyle);
+				styleObj.background = styleObj.backgroundImage || styleObj.background ? styleObj.background :
+					`${this.disabled || this.rightBlockDisabled ? this.disabledBlockColor : this.blockColor}`;
+			if(this.borderStyle)
+				styleObj.borderStyle = this.borderStyle;
+			if(this.blockColor)
+				styleObj.borderColor = this.borderColor;
+			if(this.borderWidth)
+				styleObj.borderWidth = this.borderWidth;
+			if(this.borderRadius)
+				styleObj.borderRadius = this.borderRadius;
+			 
+				return styleObj;
+			}
+
+		},
+		methods: {
+			reset(e){
+				console.log('e'+JSON.stringify(e))
+				this.activeX = this.width * (e.minP * 0.01);
+				this.xWidth = this.width * (e.maxP * 0.01);
+				 
+				this.value[0] = e.minValue;
+				this.value[1] = e.maxValue;
+			},
+			// 记录一个块位置
+			blockStart1(e) {
+				if (this.disabled || this.leftBlockDisabled) {
+					return;
+				}
+				this.blockX1 = e.touches[0].clientX;
+			},
+			// 记录第二个块位置
+			blockStart2(e) {
+				this.blockX2 = e.touches[0].clientX;
+				if (Math.round(this.activeX) == Math.round(this.xWidth)) {
+					this.overlap = true;
+				} else {
+					this.overlap = false;
+				}
+			},
+			// 第一个块移动
+			blockMove1(e) {
+				if (this.disabled || this.leftBlockDisabled) {
+					return;
+				}
+				let x = (this.blockX1 + (e.touches[0].clientX - this.blockX1)) - this.blockWidth;
+				// 如果设置了步长
+				if (this.step > 0) {
+					// 移动的数值
+					let cValue = this.maxValue * (x / this.width * 100 * 0.01);
+
+					if (cValue >= this.minStepValue + this.step && Math.round(this.activeX) < Math.round(this.xWidth)) {
+						this.minStepValue += this.step;
+						this.activeX += this.stepValueW;
+						this.sendEmit();
+					} else if (cValue <= this.minStepValue - this.step && Math.round(this.activeX) > 0) {
+						this.minStepValue -= this.step;
+						this.activeX -= this.stepValueW;
+						this.sendEmit();
+					}
+					return;
+				}
+
+				// 如果本次移动的x值超过最大的值或小于最小值
+				if (x > this.xWidth) {
+					x = this.xWidth;
+				} else if (x <= 0) {
+					x = 0;
+				}
+				this.activeX = x;
+				this.sendEmit();
+			},
+			// 第二个块移动
+			blockMove2(e) {
+				const activeX = this.activeX;
+				let x = (this.blockX2 + (e.touches[0].clientX - this.blockX2)) - this.blockWidth;
+				// 如果是重叠, 并且只对左边生效
+				if (this.overlap && (x - this.step) <= this.xWidth) {
+					if (this.disabled || this.leftBlockDisabled) {
+						return;
+					}
+					this.isLeft = true;
+					let cValue = this.maxValue * (x / this.width * 100 * 0.01);
+					// 如果有步长
+					if (this.step > 0) {
+						if (cValue >= this.minStepValue + this.step && Math.round(this.activeX) < Math.round(this
+							.xWidth)) {
+							this.minStepValue += this.step;
+							this.activeX += this.stepValueW;
+							this.sendEmit();
+						} else if (cValue <= this.minStepValue - this.step && Math.round(this.activeX) > 0) {
+							this.minStepValue -= this.step;
+							this.activeX -= this.stepValueW;
+							this.sendEmit();
+						}
+						return;
+					}
+					// 移动超出设置
+					if (x <= 0) {
+						x = 0;
+					} else if (x >= this.xWidth) { // 如果移动的值大于最大值
+						x = this.xWidth;
+					}
+					this.activeX = x;
+					this.sendEmit();
+				} else {
+					if (this.disabled || this.rightBlockDisabled) {
+						return;
+					}
+					// 重叠之后，第一次拖动是往左边的话将无法超出右边
+					if (this.isLeft) {
+						this.activeX = this.xWidth;
+						this.sendEmit();
+						return;
+					}
+
+					// 不重叠正常设置
+					this.overlap = false;
+					// 如果设置步长
+					if (this.step > 0) {
+						// 移动的数值
+						let cValue = this.maxValue * (x / this.width * 100 * 0.01);
+						// 判断移动方向
+						if (cValue >= this.maxStepValue + this.step && Math.round(this.xWidth) < Math.round(this.width)) {
+							this.maxStepValue += this.step;
+							this.xWidth += this.stepValueW;
+							this.sendEmit();
+						} else if (cValue <= this.maxStepValue - this.step && Math.round(this.xWidth) > Math.round(this
+								.activeX)) {
+							this.maxStepValue -= this.step;
+							this.xWidth -= this.stepValueW;
+							this.sendEmit();
+						}
+
+						return;
+					}
+
+					// 移动超出设置
+					if (x <= this.activeX) {
+						x = this.activeX;
+					} else if (x >= this.width) { // 如果移动的值大于最大值
+						x = this.width;
+					}
+					// 正常设置
+					this.xWidth = x;
+				}
+				this.sendEmit();
+			},
+			calc_position(){
+				
+			},
+			sendEmit() {
+				// 最小百分比
+				let minP = Math.floor(this.activeX / this.width * 100);
+				// 最小值
+				let minValue = Math.floor((this.maxValue * (minP * 0.01)) * 100) / 100;
+
+				// 最大百分比
+				let maxP = Math.floor(this.xWidth / this.width * 100);
+				// 最大值
+				let maxValue = Math.floor((this.maxValue * (maxP * 0.01)) * 100) / 100;
+
+				this.currentMinValue = minValue;
+				this.currentMaxValue = maxValue;
+				//console.log('min value'+this.currentMinValue)
+				//console.log('max value'+this.currentMaxValue)
+								
+				// console.log("最小百分比",minP);
+				// console.log("最小值",minValue);
+
+				// console.log("最大百分比",maxP);
+				// console.log("最大值",maxValue);
+
+				this.$emit("change", {
+					minValue,
+					maxValue,
+					minP,
+					maxP
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.double-slider {
+		margin: 0 auto;
+
+		.active-slider {
+			position: relative;
+
+			.block1,
+			.block2 {
+				border-radius: 50%;
+				position: absolute;
+				top: 50%;
+				transition: all 0.05s;
+			}
+
+			.block1 {
+				left: 0;
+				transform: translate(-50%, -50%);
+			}
+
+			.block2 {
+				right: 0;
+				transform: translate(50%, -50%);
+				z-index: 1;
+			}
+		}
+	}
+</style>