Merge branch 'master' of http://47.92.161.104:10080/zkx/JP-ChargeTeam51

components/Chargermap.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<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>
@@ -159,6 +159,48 @@
 					console.log(error)
 				})
 			},
+			calculateDistance(startLngLat,endLngLat){
+				
+				var _this = this;
+				//var endLngLat = [item.longitude,item.latitude];
+				return new Promise((resolve, reject) => {
+					AMap.plugin('AMap.Driving', function() {
+					  var driving = new AMap.Driving({
+						// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
+						policy: AMap.DrivingPolicy.LEAST_TIME
+					  })
+					  
+					 //var startLngLat = [116.379028, 39.865042]
+					 //var endLngLat = [116.427281, 39.903719]
+					 
+					  driving.search(startLngLat, endLngLat, function (status, result) {
+							//console.log(result)
+							//console.log(result.routes[0].time)//秒
+							//console.log(result.routes[0].distance)//米
+							//item.distance = result.routes[0].distance/1000;
+							//item.time = result.routes[0].time/60;
+							/*uni.showToast({
+								title:result.routes[0].time+"秒，"+result.routes[0].distance+"米"
+							})*/
+							resolve(result.routes[0])
+					  })
+					  /*
+					  var startLngLat2 = [_this.longitude, _this.latitude]
+					  var endLngLat2 = [_this.longitude2, _this.latitude2]
+					
+					  
+					  driving.search(startLngLat2, endLngLat2, function (status, result) {
+												console.log(result)
+												console.log(result.routes[0].time)//秒
+												console.log(result.routes[0].distance)//米
+												uni.showToast({
+													title:result.routes[0].time+"秒，"+result.routes[0].distance+"米"
+												})
+					  })*/
+					})
+				})
+			 
+			},
 			searchBtn(startLngLat,endLst){
 				var _this = this;
 				
@@ -204,9 +246,8 @@
 				 
 				}) 
 			},
-			updateCharger(pos){
-//				console.log('更新充电桩'+JSON.stringify(this.chargerList.length) ) 
-//				console.log('更新充电桩1'+JSON.stringify(pos) ) 
+			updateCharger(pos){ 
+				console.log('更新充电桩1'+JSON.stringify(pos) ) 
 //				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));
 				let index = this.chargerList.findIndex(item => item.info.id === pos.id);
@@ -217,8 +258,8 @@
 				}else if(this.chargerList[index].info.type =='慢充'){
 					colorBg = '#9d9fff'
 				} 
-				console.log('colorBg'+colorBg)
-				console.log('更新充电桩2'+JSON.stringify(this.chargerList[index].info)) 
+//				console.log('colorBg'+colorBg)
+//				console.log('更新充电桩2'+JSON.stringify(this.chargerList[index].info)) 
 				
 				if(index>=0){
 					let station_icon2 = "width: 100px;height: 36px;line-height: 20px;border-radius: 50px;background-color: " + colorBg +";text-align: center;display: flex;";
@@ -229,10 +270,17 @@
 					content+="<div style='color: #ffffff;line-height: 14px;padding: 4px;'>";
 					content+="<div style='"+corner2+"'></div>";
 					content+="<div class=''>";
-					content+= "￥" + pos.price.toString();
+					if(pos.price != null)
+						content+= "￥" + pos.price.toString();
+					if(pos.costPrice != null)
+						content+= "￥" + pos.costPrice.toString();
+						
 					content+="</div>";
 					content+="<div class=''>";
-					content+="空闲" + pos.idleNum.toString();
+					if(pos.idleNum != null)
+						content+="空闲" + pos.idleNum.toString();
+					if(pos.availableNum != null)
+						content+="空闲" + pos.availableNum.toString();
 					content+="</div>"
 					content+="</div>";
 					content+="</div>";
@@ -288,6 +336,7 @@
 				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({
@@ -301,7 +350,7 @@
 				marker.setMap(this.mapcharger);
 				this.myEmit("person",marker,pos)
 				//this.chargerList.push(marker)
-			},
+			},*/
 			/*
 			addPosition() {
 				console.log('addPosition'+JSON.stringify(pos))
@@ -317,8 +366,7 @@
 				//this.myEmit("person",marker,pos)
 				//this.chargerList.push(marker)
 			},*/
-			setChargerList(sz){
-					
+			setChargerList(sz){ 
 					if(this.AMap==null){
 						return
 					}
@@ -371,16 +419,18 @@
 			setMyStyle(s){
 				this.myStyle=s;
 			},			 
-			setCenter(item){
+			setCenter(item){ 
+				console.log('setCenter'+JSON.stringify(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))
+				console.log('setPerson1'+JSON.stringify(ob))
 				if(this.AMap==null){
 					return
 				}
@@ -411,10 +461,10 @@
 					}
 				
 				
-			},
+			},*/
 			logMapInfo() {
 			  var posCenter = this.mapcharger.getCenter();
-			  //console.log('center'+JSON.stringify(posCenter));
+			  console.log('center'+JSON.stringify(posCenter));
 			  var limitBounds = this.mapcharger.getBounds();
  			  let pos = {center:posCenter,bounds:limitBounds};
 			  return pos;
@@ -499,6 +549,7 @@
 						_this.$emit('onClicked',e);
 						console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
 					};
+					
 					_this.mapcharger.on('click', clickHandler); 
 					_this.$emit('onload')
 					//_this.addPosition();
@@ -519,6 +570,7 @@
 				}
 				var mapMoveend = function(){
 					let pos = _this.logMapInfo();
+					 
 					_this.$emit('onMoveEnd',pos);
 //						console.log('mapMoveend')
 				}

pages.json

@@ -349,9 +349,12 @@
                 
                 "enablePullDownRefresh": false
             }
-            
-        }
-		
+        },{
+			"path": "pages/user/cropImage",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		}
     ],
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏

pages/searchPile/searchPile.vue

@@ -175,7 +175,7 @@
 				
 				
 			</view>
-			<view v-show="viewMode" >					
+			<view v-show="viewMode">					
 				<view>
 					<Chargermap @onMoveStart="moveStart"   @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked" @onload="mapdown" @clickMap="clickMap"></Chargermap>
 					<!--@location="location"-->
@@ -228,7 +228,7 @@
 									</view>
 								</view>
 								<view class="card_item" style="padding-bottom: 20rpx;">
-									<u-button shape='circle' style="color: #00B962;" @click="getScanCode">
+									<u-button shape='circle' style="color: #00B962;" @click="getScanCode" >
 										<u-icon name="scan" size="26" color="#00B962" style="margin-right: 20rpx;"></u-icon>
 										<label>扫码充电</label></u-button>
 									<view class="round" > 
@@ -462,6 +462,8 @@ export default {
 //			console.log('setCenter')
 		},
 		getScanCode() {
+			if(!this.isEnabled())
+				return;
 			if (this.userId) {
 				WxJsApi.scanQRCode(1).then(res => {
 					if(res) {
@@ -511,7 +513,7 @@ export default {
 									longitude: longitude,
 									latitude: latitude
 								};
-					this.$refs.amap.setPerson(obj);	
+					this.$refs.amap.setCenter(obj);	
 					//let data = {latitude:latitude,longtitude:longitude};
 					//this.getChargingStationData(data);
 					this.getNearbyStationInfo();
@@ -550,10 +552,26 @@ export default {
 		  // 众所周知，定时器返回一个随机整数，用于表示定时器的编号，后面通过名字可以取消这个定时器的执行。
 		  console.log(this.timer);
 		},
+		isEnabled(){
+			if(this.viewMode)
+			{
+				if(this.show)
+					return false;
+			}
+			return true;
+		},
 		stationDetail(item){
+			if(!this.isEnabled())
+				return;
+			console.log('stationDetail'+JSON.stringify(item))
+			uni.navigateTo({
+				url:'stationAndPile/stationDetails?id='+item.id
+			})
+				/*
 			uni.navigateTo({
 				url:'stationAndPile/stationDetails?station='+encodeURIComponent(JSON.stringify(item))
 			})
+			*/
 //			console.log('stationDetail'+JSON.stringify(item))
 		},
 		location(e){
@@ -613,7 +631,7 @@ export default {
 
 				if(data1.findType == "0")
 				{					
-					console.log('getChargingStationData res1'+JSON.stringify(res));
+//					console.log('getChargingStationData res1'+JSON.stringify(res));
 					_self.stationsmap = [];
 					for(let i = 0;i<items.length;i++)
 					{
@@ -683,7 +701,7 @@ export default {
 				}else if(data1.findType == "1")
 				{
 					_self.stationslist = [];
-					console.log('getChargingStationData res2'+JSON.stringify(res));
+//					console.log('getChargingStationData res2'+JSON.stringify(res));
 					for(let i = 0;i<items.length;i++)
 					{
 						
@@ -765,9 +783,10 @@ export default {
 			 })
 			
 		},	*/	
-		moveEnd(e){
+		moveEnd(e){ 
 			this.close_all();
-//			console.log('moveEnd'+JSON.stringify(e))			
+			let posCenter = this.$refs.amap.logMapInfo();
+			//console.log('posCenter'+JSON.stringify(posCenter))			
 			let data = {latitude:e.center.lat,longtitude:e.center.lng};
 			this.getChargingStationData(data);
 		},
@@ -908,7 +927,7 @@ export default {
 				);
 			}
 		},
-		mapdown() {
+		mapdown() { 
 			//console.log('this'+JSON.stringify(this))
 //			console.log('longitude1  ' + this.longitude);
 //			console.log('latitude1  ' + this.latitude);
@@ -930,13 +949,15 @@ export default {
 					console.log('window width'+state.status_width);*/
 					
 					let scrollH = res.windowHeight;// - uni.upx2px(88) - navbarH
-	//				console.log('布局结果'+ JSON.stringify(res));
-	//				console.log('scrollH'+scrollH)
+					let scrollW = res.windowWidth;
+ 	//				console.log('布局结果'+ JSON.stringify(res));
+					console.log('scrollW'+scrollW)
 					//#ifdef MP-WEIXIN
 					const {
 						statusBarHeight,
 						windowWidth,
 					} = uni.getSystemInfoSync();
+					scrollW = windowWidth;
 	//				console.log('height ' + statusBarHeight);
 					//this.status_height = uni.getStatusbarHeight();
 					let res1 =  uni.getMenuButtonBoundingClientRect()
@@ -944,7 +965,7 @@ export default {
 					//state.selectHeight = (res1.top-res.statusBarHeight)*2+ res1.height;
 					//#endif
 					//console.log('status height'+state.status_height)
-					_self.$refs.amap.setMyStyle("height:"+(scrollH-88-50)+ "px;width:100%;");
+					_self.$refs.amap.setMyStyle("height:"+(scrollH-88-50)+ "px;width:"+scrollW+"px;");
 				}
 			})
 			

pages/searchPile/stationAndPile/stationDetails.vue

@@ -195,6 +195,33 @@
 			_self.processStationsInfo();
 				 
 			if(op!=null){
+				if(op.id != null){
+					let data = {stationId:op.id};
+						//if(station.distance != null)
+						//	_self.stationDetail.station.distance = station.distance;
+						//console.log('station'+JSON.stringify(station))
+						//_self.station = station; 
+						api.getChargingStationDetail(data).then(function(res){
+//							console.log('站点详情'+JSON.stringify(res))
+							//this.info.st
+							if(res && res.result)
+							{
+								if(res.data){
+									let data = res.data;
+									//data.station.distance = station.distance;
+									
+									_self.stationDetail = data;
+									_self.processStationsInfo();							
+									if(_self.stationDetail.station.distance == null){
+										_self.getPoint();
+									}
+	//								console.log('data'+JSON.stringify(data)); 
+								}
+								
+							}
+							
+						})
+				}
 				if(op.station != null){
 					let station = JSON.parse(decodeURIComponent(op.station))
 					let data = {stationId:station.id};
@@ -246,7 +273,6 @@
 					console.log('stationDetail onLoad'+JSON.stringify(station))					
 				} 
 			}
-			_self = this;
 		},
 		onReady(){
 			if (this.carhelp.getPersonInfo()) {
@@ -261,6 +287,82 @@
 			 
 		},
 		methods:{
+			getPoint() {
+				 
+	//			console.log('getPoint')
+				WxJsApi.getLocation().then((res) => {
+					
+					var latitude = parseFloat(res.latitude);
+					var longitude = parseFloat(res.longitude);
+					var startLngLat = [longitude,latitude];
+					var endLngLat = [_self.stationDetail.station.longitude,_self.stationDetail.station.latitude];
+					_self.calculateDistance(startLngLat,endLngLat);
+					
+					
+					console.log('当前位置' +JSON.stringify(data))
+					
+					//this.latitude2 = latitude;
+					//this.longitude2 = longitude;
+					/*uni.showToast({
+						title:JSON.stringify(res)
+					})*/
+					//this.message=JSON.stringify(res)
+				}).catch(error => {
+					uni.showToast({
+						title:JSON.stringify(error)
+					})					
+				})
+			},
+			calculateDistance(startLngLat,endLngLat){
+				var _this = this;
+				MapLoader().then(AMap1 => {
+					
+					this.AMap=AMap;
+				
+					var map=new AMap.Map("container", {
+						center: [116.397559, 39.89621],
+						zoom: 14
+					});  
+					AMap.plugin('AMap.Driving', function() {
+					  var driving = new AMap.Driving({
+					    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
+					    policy: AMap.DrivingPolicy.LEAST_TIME
+					  })
+					  
+					 //var startLngLat = [116.379028, 39.865042]
+					 //var endLngLat = [116.427281, 39.903719]
+					 
+					  driving.search(startLngLat, endLngLat, function (status, result) {
+							console.log(result)
+							console.log(result.routes[0].time)//秒
+							console.log(result.routes[0].distance)//米
+							_self.stationDetail.station.distance = result.routes[0].distance/1000;
+							_self.stationDetail.station.time = result.routes[0].time/60;
+							/*uni.showToast({
+								title:result.routes[0].time+"秒，"+result.routes[0].distance+"米"
+							})*/
+					  })
+					  /*
+					  var startLngLat2 = [_this.longitude, _this.latitude]
+					  var endLngLat2 = [_this.longitude2, _this.latitude2]
+					
+					  
+					  driving.search(startLngLat2, endLngLat2, function (status, result) {
+					  							console.log(result)
+					  							console.log(result.routes[0].time)//秒
+					  							console.log(result.routes[0].distance)//米
+					  							uni.showToast({
+					  								title:result.routes[0].time+"秒，"+result.routes[0].distance+"米"
+					  							})
+					  })*/
+					})
+					
+				
+				}, e => {
+					//_this.mui.toast('地图加载失败');
+					console.log('地图加载失败', e)
+				})
+			},
 			getScanCode() {
 				if (this.userId) {
 					WxJsApi.scanQRCode(1).then(res => {
@@ -336,7 +438,7 @@
 			map(){
 				console.log('map'+JSON.stringify(_self.station))
 				_self.station.address = 'xxxxxxxxxxxxx'
-				this.carhelp.set(_self.stationDetail.station.id,_self.station);
+				//this.carhelp.set(_self.stationDetail.station.id,_self.station);
 				uni.navigateTo({
 					url:'stationDetailsMap?stationId='+_self.stationDetail.station.id
 					//url:'stationDetailsMap?station='+encodeURIComponent(JSON.stringify(_self.station))

pages/searchPile/stationAndPile/stationDetailsMap.vue

@@ -21,12 +21,12 @@
 					</view>
 				</view>		
 				<view class="card_item" style="color:#8898A9;font-size: 15rpx;">
-					{{item.position}}
+					{{item.address}}
 				</view>
 				
 				<view class="card_item2" >
 					<view style="color:#FF6573;font-size:45rpx;margin-right: 10rpx;">
-						{{item.price}}
+						{{item.costPrice}}
 					</view>
 					<view style="display: flex; justify-content: center;align-items: center">
 					起 元/度										
@@ -41,11 +41,11 @@
 					</view>
 					<view style="display: flex;flex-direction: row;">
 						<view style="color: #00B962;">
-							空闲{{item.idleNum}}
+							空闲{{item.availableNum}}
 						</view>
 						
 				 			<view>
-				 				/总数{{item.total}}
+				 				/总数{{item.totalNum}}
 				 			</view>
 				 		</view>
 				 	</view>
@@ -104,10 +104,49 @@
 			}
 		},
 		methods:{
+			getPoint() {
+				 
+				console.log('getPoint')
+				WxJsApi.getLocation().then((res) => {
+					
+					_self.latitude = parseFloat(res.latitude);
+					_self.longitude  = parseFloat(res.longitude);
+					var startLngLat = [_self.longitude ,_self.latitude ];
+					var endLngLat = [_self.item.longitude,_self.item.latitude];
+					//_self.calculateDistance(startLngLat,endLngLat);
+					//let posCenter= {longitude: _self.longitude,latitude: _self.latitude};
+					
+					_self.$refs.amap.calculateDistance(startLngLat,endLngLat).then(function(res){
+						
+						_self.item.distance = res.distance/1000;
+						_self.item.time = res.time/60;
+						//console.log(result)
+						//console.log(result.routes[0].time)//秒
+						//console.log(result.routes[0].distance)//米
+						
+						console.log('距离'+JSON.stringify(res))
+					})
+					
+					console.log('当前位置' +JSON.stringify(data))
+					
+					//this.latitude2 = latitude;
+					//this.longitude2 = longitude;
+					/*uni.showToast({
+						title:JSON.stringify(res)
+					})*/
+					//this.message=JSON.stringify(res)
+				}).catch(error => {
+					uni.showToast({
+						title:JSON.stringify(error)
+					})					
+				})
+			},
+			
 			stationDetail(item){
 				console.log('item'+JSON.stringify(item))
 				uni.navigateTo({
-					url:'stationDetails?station='+encodeURIComponent(JSON.stringify(this.item))
+					url:'stationDetails?id='+this.item.id
+					//url:'stationDetails?station='+encodeURIComponent(JSON.stringify(this.item))
 				})
 			},
 			setCenter(){
@@ -127,118 +166,7 @@
 				})
 				
 	//			console.log('setCenter')
-			},
-			getChargingStationData(pos){
-						//return;
-				if(pos == null)
-					return ;		 
-				let data1 = { pageIndex:0,pageSize:20};
-				if(pos.longtitude != null)
-					data1.longitude = pos.longtitude.toString();
-				if(pos.latitude != null)
-					data1.latitude = pos.latitude.toString(); 
-				//data1.findType = "0";
-				//data1.type = "1";
-				data1.online = "0";
-/*				if(this.info.obc_type[this.preference.obc_type_index].text.indexOf('直流快充')>=0)
-					data1.type = "1";
-				else if(this.info.obc_type[this.preference.obc_type_index].text.indexOf('交流慢充')>=0)
-					data1.type = "2";
-				
-				if(this.info.miles_type[this.preference.miles_index].distance!=null)
-					data1.radius = this.info.miles_type[this.preference.miles_index].distance.toString();
-				data1.online = "0";//在线	
-				if(pos.findType != null)
-					data1.findType = pos.findType;
-				else
-					data1.findType = "0";
-				
-				if(this.preference.obc_power.minValue!=null)
-					data1.powerStart = this.preference.obc_power.minValue.toString();
-				if(this.preference.obc_power.maxValue!=null)
-					data1.powerEnd = this.preference.obc_power.maxValue.toString();
-				*/
-				console.log('data1'+JSON.stringify(data1))
-				api.searchStationData(data1).then(function(res){
-					
-					console.log('getChargingStationData'+JSON.stringify(res))
-					if(!res.result || !res.data || !res.data.data)
-					{
-						console.log('getChargingStationData res nulll')
-						return;					
-					}
-					let items = res.data.data;
-					 
-					_self.stations_filter = [];
-					for(let i = 0;i<items.length;i++)
-					{
-						let obj = {
-									name:'',
-									position:'',
-									price:1.2,
-									idleNum:10,
-									total:10,									
-									type: data1.type == "2" ? '慢充':'快充',
-									id: i,									
-									distance:0.9,
-									time:9,
-									park: '以实际费用为准',
-//									longitude: 112.28541 + i * 0.001,
-//									latitude: 30.308354 + i * 0.01
-									};
-						if(items[i].id != null)
-							obj.id = items[i].id;
-						else
-							continue;
-						if(items[i].name!=null)
-							obj.name = items[i].name;
-						if(items[i].address!=null)
-							obj.position = items[i].address;
-						if(items[i].coostPrice!=null)
-							obj.price = items[i].coostPrice;
-						if(items[i].availableNum!=null)
-							obj.idleNum = items[i].availableNum;
-						if(items[i].totalNum!=null)
-							obj.total = items[i].totalNum;
-						if(items[i].longitude!=null)
-							obj.longitude = items[i].longitude;
-						if(items[i].latitude!=null)
-							obj.latitude = items[i].latitude;
-						if(items[i].distance!=null)
-							obj.distance = items[i].distance;
-						if(items[i].time != null){
-							obj.time = items[i].time;
-						}
-						if(items[i].park != null)
-							obj.park = items[i].park;
-						/*
-						let obj = {name:items[i].name,
-									position:items[i].address,
-									price:items[i].coostPrice,									
-									idleNum:items[i].availableNum,
-									total:items[i].totalNum,
-									distance:0.1,
-									time:1,
-									type:'慢充',
-									id: items[i].id,
-									park: i%2 == 0? '以实际费用为准':'2小时免费停车',
-									longitude: items[i].longitude,
-									latitude: items[i].latitude
-									};*/
-						_self.stations.push(obj);						
-					}
-					_self.stations_filter = _self.stations;
-					//_self.$refs.amap.searchBtn([_self.longitude, _self.latitude],_self.stationsmap)
-					//_self.$refs.amap.setChargerList(_self.stationsmap);
-					//if(_self.stationsmap.length>0)
-					//	_self.$refs.amap.updateCharger(_self.stationsmap[0]);
-					 
-				},function(err){
-					console.log('getChargingStationData err'+JSON.stringify(err))
-				}
-				)
-				console.log('getChargingStationData end')
-			},	
+			},			 
 			getScanCode() {
 				if (this.userId) {
 					WxJsApi.scanQRCode(1).then(res => {
@@ -262,21 +190,68 @@
 				}
 			},
 			mapdown() { 
-						var obj = {
-							longitude: _self.longitude,
-							latitude: _self.latitude
-						}; 
-						this.$refs.amap.setCenter(obj) 
-						this.stations = [];
-						  
-					   this.stations.push(this.item);
-//					   console.log('stations1'+JSON.stringify(this.stations[0]))
-//					   console.log('stations2'+JSON.stringify(this.item))
-						this.$refs.amap.setChargerList(this.stations);
-						console.log('item'+JSON.stringify(this.item))
-						this.$refs.amap.updateCharger(this.stations[0]) 
+				let data = {stationId:this.id};
+				  
+				api.getChargingStationDetail(data).then(function(res){
+//					console.log('站点详情'+JSON.stringify(res))
+					//this.info.st
+					if(res && res.result)
+					{
+						if(res.data){
+							let data = res.data;
+							data.station.time = 0;
+							_self.item = data.station;
+							if(_self.item.park == null)
+								_self.item.park = '以实际费用为准'
+							if(_self.item.type == '2')
+								_self.item.type = '慢充'
+							else if(_self.item.type == '1')
+								_self.item.type = '快充'
+							else {
+								_self.item.type = '快/慢'
+							}
+							if(_self.item.costPrice == null){
+								if(data.fastPrice != null){
+									_self.item.costPrice = data.fastPrice.costPrice;
+									if(data.slowPrice != null){
+										if(_self.item.costPrice> data.slowPrice.costPrice){
+											_self.item.costPrice = data.slowPrice.costPrice;
+										}
+									}
+								}else if(data.slowPrice != null){ 
+									_self.item.costPrice = data.slowPrice.costPrice; 
+								}
+							}
+							
+							
+							if(_self.item.distance == null){
+								_self.getPoint();
+							} 
+							 
+							var obj = {
+								longitude: _self.item.longitude,
+								latitude: _self.item.latitude
+							}; 
+							
+							
+							_self.$refs.amap.setCenter(obj) 
+ 							_self.stations = [];
+							  
+						   _self.stations.push(_self.item);
+	//					   console.log('stations1'+JSON.stringify(this.stations[0]))
+	//					   console.log('stations2'+JSON.stringify(this.item))
+							_self.$refs.amap.setChargerList(_self.stations);
+							console.log('item'+JSON.stringify(_self.item))
+							_self.$refs.amap.updateCharger(_self.stations[0]) 
+							//_self.stationDetail = data;
+							//_self.processStationsInfo();							
+								console.log('data'+JSON.stringify(_self.item )); 
+						}
 						
-					},
+					}
+					
+				})
+			}
 		},
 		onLoad(op) {
 				_self = this;
@@ -284,32 +259,10 @@
 //				console.log('longitude0  ' + _self.longitude);
 				if (op != null) {
 					if(op.stationId != null){
-						    _self.item =  this.carhelp.get(op.stationId);
-							return;
-							/*let data = {stationId:op.stationId};
-//							if(station.distance != null)
-//								_self.stationDetail.station.distance = station.distance;
-							//console.log('station'+JSON.stringify(station))
-							//_self.station = station; 
-							console.log('stationId'+JSON.stringify(data));
-							api.getChargingStationDetail(data).then(function(res){
-								console.log('站点详情'+JSON.stringify(res))
-								//this.info.st
-								if(res && res.result)
-								{
-									if(res.data){
-										let data = res.data;
-										data.station.time = 0;
-										_self.item = data.station;
-										//data.station.distance = station.distance;
-										//_self.stationDetail = data;
-										//_self.processStationsInfo();							
-											console.log('data'+JSON.stringify(_self.item )); 
-									}
-									
-								}
-								
-							})*/
+						    //_self.item =  this.carhelp.get(op.stationId);
+							//return;
+							this.id = op.stationId;							
+							
 							return;
 					}
 					if(op.station!=null){
@@ -341,7 +294,7 @@
 				})
 				this.isReady = true;
 				this.$refs.amap.init();
-				 
+				
 				//let state = {};
 				uni.getSystemInfo({
 					success: (res) => {

pages/user/cropImage.vue

@@ -0,0 +1,38 @@
+<template>
+	<view class="content" >
+		<limeClipper :width="options.width" :scale-ratio="2" :is-lock-width="false" :is-lock-height="false" :height="options.height" :image-url="path"  
+			@success="successFn" @cancel="cancel"  />
+	</view>
+</template>
+<script>
+import limeClipper from './limeClipper/limeClipper.vue';
+export default {
+	components: {limeClipper},
+	data() {return {path: '',options:{"width":600,"height":600}}},
+	onLoad({path,options}) {
+		this.path = path
+		console.log('path-path-path-path',path);
+		if(options){
+			this.options = JSON.parse(options)
+		}
+	},
+	methods:{
+		successFn(e){
+			this.getOpenerEventChannel().emit('success',e.url)
+			uni.navigateBack()
+		},
+		cancel(){
+			uni.navigateBack()
+		}
+	}
+}
+</script>
+
+<style>
+	.box{
+		width: 400rpx;
+	}
+	.mt{
+		margin-top: -10px;
+	}
+</style>

pages/user/data.vue

@@ -55,36 +55,77 @@
 				})
 			},
 			uploadPhoto() {
-				// 上传图片
 				let _self = this;
+				
+				const crop = {
+					quality: 100,
+					width: 600,
+					height: 600,
+					resize: true
+				};
+				
+				// 上传图片
 				uni.chooseImage({
-					count: 1, //默认9
-					sourceType: ['album', 'camera'], //从相册选择
-					success: (res) => {
-						let imgFile = res.tempFilePaths;
-
-						var token = this.carhelp.getToken()
-						for (let i = 0; i < imgFile.length; i++) {
-			
-							wx.uploadFile({
-								url: process.car.BASE_URL + "uploadPicture",	
-								name: 'photoFile',
-								header: {		 
-									'Authorization': token,	 
-									'accept': 'application/json',
-									//#ifdef MP-WEIXIN
-									"Content-Type": "multipart/form-data", //记得设置
-									//#endif
-			
-								},
-								filePath: imgFile[0],
-								success: function(result) {
-									let imgUrls = JSON.parse(result.data)
-									_self.form.headImg = imgUrls.data;
+					count: 1,
+					crop,
+					success: async (res) => {
+						console.log(res);
+						let tempFile = res.tempFiles[0],
+							avatar_file = {
+								// #ifdef H5
+								extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
+								// #endif
+								// #ifndef H5
+								extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
+								// #endif
+							},
+							filePath = res.tempFilePaths[0]
+							
+						// #ifndef APP-PLUS
+						console.log(`filePath=${filePath}`)
+						
+						//非app端用前端组件剪裁头像，app端用内置的原生裁剪
+						let fileData = await new Promise((callback) => {
+							uni.navigateTo({
+								url: '/pages/user/cropImage?path=' + filePath +
+									`&options=${JSON.stringify(crop)}`,
+								animationType: "fade-in",
+								events: {
+									success: url => {
+										callback(url)
+									}
 								}
-							})
-						}
-					},
+							});
+						})
+						// #endif
+						
+						//返回 base64 图片
+						console.log(fileData);
+						
+						var token = _self.carhelp.getToken()
+						
+						uni.showLoading({
+							title: '上传中'
+						});
+						
+						uni.request({
+						    url: process.car.BASE_URL + "uploadBase64",
+							method: 'POST',
+						    data: {
+						        photoBase64Data: fileData
+						    },
+						    header: {
+						        'Authorization': token,
+								'content-type': 'application/x-www-form-urlencoded'
+						    },
+						    success: (res) => {
+								let jsonData = res.data;
+						        _self.form.headImg = jsonData.data;
+								
+								uni.hideLoading();
+						    }
+						});
+					}
 				});
 			},
 			submit() {

pages/user/finance/refundDet.vue

@@ -46,6 +46,7 @@
 			_self = this;
 			if(op.id){
 				let data ={id:op.id};
+				console.log('data'+JSON.stringify(data))
 					api.personAccountRefundDetail(data).then(function(res){
 						console.log('res'+JSON.stringify(res));
 						if(res.result){

pages/user/finance/refundList.vue

@@ -81,7 +81,7 @@
 		onReady(){
 			if (this.carhelp.getPersonInfo()) {
 				this.userId = this.carhelp.getPersonInfo().id;
-						
+				console.log('userId'+this.userId)
 			}
  
 			api.personAccount().then(function(res){
@@ -90,14 +90,14 @@
 					_self.account = res.data;
 					
 				}
-//				console.log('个人余额信息'+JSON.stringify(res));
+				console.log('个人余额信息'+JSON.stringify(res));
 			},function(err){
 				console.log('个人信息余额错误'+JSON.stringify(err));
 			});
 			let data = {pageIndex:1,pageSize:10};
 			api.personAccountRefundList(data).then(function(res){
 				if(res.result){
-//					console.log('res'+JSON.stringify(res));
+					console.log('res'+JSON.stringify(res));
 					_self.items = res.data.data;
 					for(let i = 0;i< _self.items.length;i++){
 						if(_self.items[i].refundChannel == 'wechat')
@@ -127,7 +127,7 @@
 				
 			},
 			confirm(){
-				let data = {amount:_self.account.availableAmount,refundChannel:'wechat'}
+				let data = {amount:_self.account.totalAmount,refundChannel:'wechat'}
 				api.personAccountRefundApplication(data).then(function(res){
 					if(res.result){
 						

pages/user/limeClipper/README.md

@@ -0,0 +1,227 @@
+> 插件来源：[https://ext.dcloud.net.cn/plugin?id=3594](https://ext.dcloud.net.cn/plugin?id=3594)
+##### 以下是作者写的插件介绍：
+
+# Clipper 图片裁剪
+> uniapp 图片裁剪，可用于图片头像等裁剪处理
+> [查看更多](http://liangei.gitee.io/limeui/#/clipper) <br>
+> Q群：458377637
+
+
+## 平台兼容
+
+| H5  | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
+| --- | ---------- | ------------ | ---------- | ---------- | --------- | --- |
+| √   | √          | √         | 未测       | √          | √      | √   |
+
+
+## 代码演示
+### 基本用法
+`@success` 事件点击 👉 **确定** 后会返回生成的图片信息，包含 `url`、`width`、`height`
+
+```html
+<image :src="url" v-if="url" mode="widthFix"></image>
+<l-clipper v-if="show" @success="url = $event.url; show = false" @cancel="show = false"  ></l-clipper>
+<button @tap="show = true">裁剪</button>
+```
+
+```js
+// 非uni_modules引入
+import lClipper from '@/components/lime-clipper/'
+// uni_modules引入
+import lClipper from '@/uni_modules/lime-clipper/components/lime-clipper/'
+export default {
+	components: {lClipper},
+    data() {
+        return {
+            show: false,
+			url: '',
+        }
+    }
+}
+```
+
+
+### 传入图片
+`image-url`可传入**相对路径**、**临时路径**、**本地路径**、**网络图片**<br>
+
+* **当为网络地址时**
+* H5：👉 需要解决跨域问题。 <br>
+* 小程序：👉 需要配置 downloadFile 域名 <br>
+
+
+```html
+<image :src="url" v-if="url" mode="widthFix"></image>
+<l-clipper v-if="show" :image-url="imageUrl"  @success="url = $event.url; show = false" @cancel="show = false"  ></l-clipper>
+<button @tap="show = true">裁剪</button>
+```
+
+```js
+export default {
+	components: {lClipper},
+    data() {
+        return {
+			imageUrl: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/97205/26/1142/87801/5dbac55aEf795d962/48a4d7a63ff80b8b.jpg',
+            show: false,
+			url: '',
+        }
+    }
+}
+```
+
+
+### 确定按钮颜色
+样式变量名：`--l-clipper-confirm-color`
+可放到全局样式的 `page` 里或节点的 `style`
+```html
+<l-clipper class="clipper" style="--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)"  ></l-clipper>
+```
+```css
+// css 中为组件设置 CSS 变量
+.clipper {
+	--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)
+}
+// 全局
+page {
+	--l-clipper-confirm-color: linear-gradient(to right, #ff6034, #ee0a24)
+}
+```
+
+
+### 使用插槽
+共五个插槽 `cancel` 取消按钮、 `photo` 选择图片按钮、 `rotate` 旋转按钮、 `confirm` 确定按钮和默认插槽。
+
+```html
+<image :src="url" v-if="url" mode="widthFix"></image>
+<l-clipper 
+	v-if="show" 
+	:isLockWidth="isLockWidth"
+	:isLockHeight="isLockHeight"
+	:isLockRatio="isLockRatio"
+	:isLimitMove="isLimitMove"
+	:isDisableScale="isDisableScale"
+	:isDisableRotate="isDisableRotate"
+	:isShowCancelBtn="isShowCancelBtn"
+	:isShowPhotoBtn="isShowPhotoBtn"
+	:isShowRotateBtn="isShowRotateBtn"
+	:isShowConfirmBtn="isShowConfirmBtn"
+	@success="url = $event.url; show = false" 
+	@cancel="show = false" >
+	<!-- 四个基本按钮插槽 -->
+	<view slot="cancel">取消</view>
+	<view slot="photo">选择图片</view>
+	<view slot="rotate">旋转</view>
+	<view slot="confirm">确定</view>
+	<!-- 默认插槽 -->
+	<view class="tools">
+		<view>显示取消按钮
+			<switch :checked="isShowCancelBtn" @change="isShowCancelBtn = $event.target.value" ></switch>
+		</view>
+		<view>显示选择图片按钮
+			<switch :checked="isShowPhotoBtn" @change="isShowPhotoBtn = $event.target.value" ></switch>
+		</view>
+		<view>显示旋转按钮
+			<switch :checked="isShowRotateBtn" @change="isShowRotateBtn = $event.target.value" ></switch>
+		</view>
+		<view>显示确定按钮
+			<switch :checked="isShowConfirmBtn" @change="isShowConfirmBtn = $event.target.value" ></switch>
+		</view>
+		<view>锁定裁剪框宽度
+			<switch :checked="isLockWidth" @change="isLockWidth = $event.target.value" ></switch>
+		</view>
+		<view>锁定裁剪框高度
+			<switch :checked="isLockHeight" @change="isLockHeight = $event.target.value" ></switch>
+		</view>
+		<view>锁定裁剪框比例
+			<switch :checked="isLockRatio" @change="isLockRatio = $event.target.value" ></switch>
+		</view>
+		<view>限制移动范围
+			<switch :checked="isLimitMove" @change="isLimitMove = $event.target.value" ></switch>
+		</view>
+		<view>禁止缩放
+			<switch :checked="isDisableScale" @change="isDisableScale = $event.target.value" ></switch>
+		</view>
+		<view>禁止旋转
+			<switch :checked="isDisableRotate" @change="isDisableRotate = $event.target.value" ></switch>
+		</view>
+	</view>
+</l-clipper>
+<button @tap="show = true">裁剪</button>
+```
+
+```js
+export default {
+	components: {lClipper},
+    data() {
+        return {
+            show: false,
+            url: '',
+            isLockWidth: false,
+            isLockHeight: false,
+            isLockRatio: true,
+            isLimitMove: false,
+            isDisableScale: false,
+            isDisableRotate: false,
+            isShowCancelBtn: true,
+            isShowPhotoBtn: true,
+            isShowRotateBtn: true,
+            isShowConfirmBtn: true
+        }
+    }
+}
+```
+
+
+## API
+
+### Props
+
+| 参数           | 说明         | 类型             | 默认值       |
+| ------------- | ------------ | ---------------- | ------------ |
+| image-url     | 图片路径     | <em>string</em>   |              |
+| quality       | 图片的质量，取值范围为 [0, 1]，不在范围内时当作1处理   | <em>number</em>  |    `1`      |
+| source       | `{album: '从相册中选择'}`key为图片来源类型，value为选项说明   | <em>Object</em>  |         |
+| width | 裁剪框宽度，单位为 `rpx` | <em>number</em> | `400`      |
+| height | 裁剪框高度 | <em>number</em> | `400`      |
+| min-width | 裁剪框最小宽度 | <em>number</em> | `200`      |
+| min-height |裁剪框最小高度 | <em>number</em> | `200`  |
+| max-width | 裁剪框最大宽度 | <em>number</em> | `600`  |
+| max-height | 裁剪框最大宽度 | <em>number</em> | `600`  |
+| min-ratio | 图片最小缩放比 | <em>number</em> | `0.5`  |
+| max-ratio | 图片最大缩放比 | <em>number</em> | `2`  |
+| rotate-angle | 旋转按钮每次旋转的角度 | <em>number</em> | `90`  |
+| scale-ratio | 生成图片相对于裁剪框的比例， **比例越高生成图片越清晰**	 | <em>number</em> | `1`  |
+| is-lock-width | 是否锁定裁剪框宽度 | <em>boolean</em> | `false`  |
+| is-lock-height | 是否锁定裁剪框高度上 | <em>boolean</em> | `false`  |
+| is-lock-ratio | 是否锁定裁剪框比例 | <em>boolean</em> | `true`  |
+| is-disable-scale | 是否禁止缩放 | <em>boolean</em> | `false`  |
+| is-disable-rotate | 是否禁止旋转 | <em>boolean</em> | `false`  |
+| is-limit-move | 是否限制移动范围 | <em>boolean</em> | `false`  |
+| is-show-photo-btn | 是否显示选择图片按钮 | <em>boolean</em> | `true`  |
+| is-show-rotate-btn | 是否显示转按钮 | <em>boolean</em> | `true`  |
+| is-show-confirm-btn | 是否显示确定按钮 | <em>boolean</em> | `true`  |
+| is-show-cancel-btn | 是否显示关闭按钮 | <em>boolean</em> | `true`  |
+
+
+
+### 事件 Events
+
+| 事件名  | 说明         | 回调           |
+| ------- | ------------ | -------------- |
+| success | 生成图片成功 | {`width`, `height`, `url`} |
+| fail | 生成图片失败 | `error` |
+| cancel | 关闭 | `false` |
+| ready   | 图片加载完成 | {`width`, `height`, `path`, `orientation`, `type`} |
+| change | 图片大小改变时触发 | {`width`, `height`} |
+| rotate | 图片旋转时触发 | `angle` |
+
+## 常见问题
+> 1、H5端使用网络图片需要解决跨域问题。<br>
+> 2、小程序使用网络图片需要去公众平台增加下载白名单！二级域名也需要配！<br>
+> 3、H5端生成图片是base64，有时显示只有一半可以使用原生标签`<IMG/>`<br>
+> 4、IOS APP 请勿使用HBX2.9.3.20201014的版本！这个版本无法生成图片。<br>
+> 5、APP端无成功反馈、也无失败反馈时，请更新基座和HBX。<br>
+
+
+## 打赏
+如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。<br>
+![输入图片说明](https://images.gitee.com/uploads/images/2020/1122/222521_bb543f96_518581.jpeg "微信图片编辑_20201122220352.jpg")

pages/user/limeClipper/images/photo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#606060;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st2" d="M11.6,11c0.4,0.4,0.6,0.9,0.6,1.5c0,0.6-0.2,1.1-0.6,1.4c-0.4,0.4-0.9,0.6-1.5,0.6c-0.6,0-1.1-0.2-1.5-0.6
+		c-0.4-0.4-0.6-0.9-0.6-1.4s0.2-1.1,0.6-1.5c0.4-0.4,0.9-0.6,1.5-0.6C10.8,10.4,11.2,10.6,11.6,11z M24.6,18.4V6.7H5.4v12l1.8-1.8
+		c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.7,0.1,1,0.4l1.8,1.8l5.8-7c0.3-0.3,0.6-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5
+		C18.8,11.6,24.6,18.4,24.6,18.4z M25.6,5.7C25.9,6,26,6.3,26,6.7v16.1c0,0.4-0.1,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4H5.4
+		c-0.4,0-0.7-0.1-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V6.7c0-0.4,0.1-0.7,0.4-1c0.3-0.3,0.6-0.4,1-0.4h19.3C25,5.3,25.3,5.4,25.6,5.7z"/>
+	<path class="st1" d="M24.3,21.5H5.7c-0.2,0-0.3-0.2-0.3-0.3V7c0-0.2,0.2-0.3,0.3-0.3h18.6c0.2,0,0.3,0.2,0.3,0.3v14.2
+		C24.6,21.3,24.5,21.5,24.3,21.5z"/>
+</g>
+</svg>

pages/user/limeClipper/images/rotate.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M17.1,24.2h-12c-0.2,0-0.3-0.2-0.3-0.3v-9.3c0-0.2,0.2-0.3,0.3-0.3h12c0.2,0,0.3,0.2,0.3,0.3v9.3
+		C17.5,24.1,17.3,24.2,17.1,24.2z"/>
+	<path class="st0" d="M16.6,5.4c4.8,0,8.7,3.9,8.7,8.7"/>
+	<polyline class="st0" points="19.3,10.1 14.9,5.6 19.3,1.2 	"/>
+</g>
+</svg>

pages/user/limeClipper/index.css

@@ -0,0 +1,160 @@
+.flex-auto {
+  flex: auto;
+}
+.bg-transparent {
+  background-color: rgba(0,0,0,0.9);
+  transition-duration: 0.35s;
+}
+.l-clipper {
+  width: 100vw;
+  height: calc(100vh - var(--window-top));
+  background-color: rgba(0,0,0,0.9);
+  position: fixed;
+  top: var(--window-top);
+  left: 0;
+  z-index: 1;
+}
+.l-clipper-mask {
+  position: relative;
+  z-index: 2;
+  pointer-events: none;
+}
+.l-clipper__content {
+  pointer-events: none;
+  position: absolute;
+  border: 1rpx solid rgba(255,255,255,0.3);
+  box-sizing: border-box;
+  box-shadow: rgba(0,0,0,0.5) 0 0 0 80vh;
+  background: transparent;
+}
+.l-clipper__content::before,
+.l-clipper__content::after {
+  content: '';
+  position: absolute;
+  border: 1rpx dashed rgba(255,255,255,0.3);
+}
+.l-clipper__content::before {
+  width: 100%;
+  top: 33.33%;
+  height: 33.33%;
+  border-left: none;
+  border-right: none;
+}
+.l-clipper__content::after {
+  width: 33.33%;
+  left: 33.33%;
+  height: 100%;
+  border-top: none;
+  border-bottom: none;
+}
+.l-clipper__edge {
+  position: absolute;
+  width: 34rpx;
+  height: 34rpx;
+  border: 6rpx solid #fff;
+  pointer-events: auto;
+}
+.l-clipper__edge::before {
+  content: '';
+  position: absolute;
+  width: 40rpx;
+  height: 40rpx;
+  background-color: transparent;
+}
+.l-clipper__edge:nth-child(1) {
+  left: -6rpx;
+  top: -6rpx;
+  border-bottom-width: 0 !important;
+  border-right-width: 0 !important;
+}
+.l-clipper__edge:nth-child(1):before {
+  top: -50%;
+  left: -50%;
+}
+.l-clipper__edge:nth-child(2) {
+  right: -6rpx;
+  top: -6rpx;
+  border-bottom-width: 0 !important;
+  border-left-width: 0 !important;
+}
+.l-clipper__edge:nth-child(2):before {
+  top: -50%;
+  left: 50%;
+}
+.l-clipper__edge:nth-child(3) {
+  left: -6rpx;
+  bottom: -6rpx;
+  border-top-width: 0 !important;
+  border-right-width: 0 !important;
+}
+.l-clipper__edge:nth-child(3):before {
+  bottom: -50%;
+  left: -50%;
+}
+.l-clipper__edge:nth-child(4) {
+  right: -6rpx;
+  bottom: -6rpx;
+  border-top-width: 0 !important;
+  border-left-width: 0 !important;
+}
+.l-clipper__edge:nth-child(4):before {
+  bottom: -50%;
+  left: 50%;
+}
+.l-clipper-image {
+  width: 100%;
+  border-style: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  transform-origin: center;
+}
+.l-clipper-canvas {
+  position: fixed;
+  z-index: 10;
+  left: -200vw;
+  top: -200vw;
+  pointer-events: none;
+}
+.l-clipper-tools {
+  position: fixed;
+  left: 0;
+  bottom: 10px;
+  width: 100%;
+  z-index: 99;
+  color: #fff;
+}
+.l-clipper-tools__btns {
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 20rpx 40rpx;
+  box-sizing: border-box;
+}
+.l-clipper-tools__btns .cancel {
+  width: 112rpx;
+  height: 60rpx;
+  text-align: center;
+  line-height: 60rpx;
+}
+.l-clipper-tools__btns .confirm {
+  width: 112rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  background-color: #07c160;
+  border-radius: 6rpx;
+  text-align: center;
+}
+.l-clipper-tools__btns image {
+  display: block;
+  width: 60rpx;
+  height: 60rpx;
+}
+.l-clipper-tools__btns {
+  flex-direction: row;
+}

pages/user/limeClipper/limeClipper.vue

@@ -0,0 +1,816 @@
+<template>
+	<view class="l-clipper" :class="{open: value}" disable-scroll :style="'z-index: ' + zIndex + ';' + customStyle">
+		<view class="l-clipper-mask" @touchstart.stop.prevent="clipTouchStart" @touchmove.stop.prevent="clipTouchMove" @touchend.stop.prevent="clipTouchEnd">
+			<view class="l-clipper__content" :style="clipStyle"><view class="l-clipper__edge" v-for="(item, index) in [0, 0, 0, 0]" :key="index"></view></view>
+		</view>
+		<image
+			class="l-clipper-image"
+			@error="imageLoad"
+			@load="imageLoad"
+			@touchstart.stop.prevent="imageTouchStart"
+			@touchmove.stop.prevent="imageTouchMove"
+			@touchend.stop.prevent="imageTouchEnd"
+			:src="image"
+			:mode="imageWidth == 'auto' ? 'widthFix' : ''"
+			v-if="image"
+			:style="imageStyle"
+		/>
+		<canvas
+			:canvas-id="canvasId"
+			id="l-clipper"
+			disable-scroll
+			:style="'width: ' + canvasWidth * scaleRatio + 'px; height:' + canvasHeight * scaleRatio + 'px;'"
+			class="l-clipper-canvas"
+		></canvas>
+		<view class="l-clipper-tools">
+			<view class="l-clipper-tools__btns">
+				<view v-if="isShowCancelBtn" @tap="cancel">
+					<slot name="cancel" v-if="$slots.cancel" />
+					<view v-else class="cancel">取消</view>
+				</view>
+				<view v-if="isShowPhotoBtn" @tap="uploadImage">
+					<slot name="photo" v-if="$slots.photo" />
+					<image v-else src="@/static/limeClipper/photo.svg" />
+				</view>
+				<view v-if="isShowRotateBtn" @tap="rotate">
+					<slot name="rotate" v-if="$slots.rotate" />
+					<image v-else src="@/static/limeClipper/rotate.svg" data-type="inverse" />
+				</view>
+				<view v-if="isShowConfirmBtn" @tap="confirm">
+					<slot name="confirm" v-if="$slots.confirm" />
+					<view v-else class="confirm">确定</view>
+				</view>
+			</view>
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+import { determineDirection, calcImageOffset, calcImageScale, calcImageSize, calcPythagoreanTheorem, clipTouchMoveOfCalculate, imageTouchMoveOfCalcOffset } from './utils';
+const cache = {}
+export default {
+	// version: '0.6.3',
+	name: 'l-clipper',
+	props: {
+		value: {
+			type: Boolean,
+			default: true
+		},
+		// #ifdef MP-WEIXIN
+		type: {
+			type: String,
+			default: '2d'
+		},
+		// #endif
+		customStyle: {
+			type: String,
+		},
+		canvasId: {
+			type: String,
+			default: 'l-clipper'
+		},
+		zIndex: {
+			type: Number,
+			default: 99
+		},
+		imageUrl: {
+			type: String
+		},
+		fileType: {
+			type: String,
+			default: 'png'
+		},
+		quality: {
+			type: Number,
+			default: 1
+		},
+		width: {
+			type: Number,
+			default: 400
+		},
+		height: {
+			type: Number,
+			default: 400
+		},
+		minWidth: {
+			type: Number,
+			default: 200
+		},
+		maxWidth: {
+			type: Number,
+			default: 600
+		},
+		minHeight: {
+			type: Number,
+			default: 200
+		},
+		maxHeight: {
+			type: Number,
+			default: 600
+		},
+		isLockWidth: {
+			type: Boolean,
+			default: false
+		},
+		isLockHeight: {
+			type: Boolean,
+			default: false
+		},
+		isLockRatio: {
+			type: Boolean,
+			default: true
+		},
+		scaleRatio: {
+			type: Number,
+			default: 1
+		},
+		minRatio: {
+			type: Number,
+			default: 0.5
+		},
+		maxRatio: {
+			type: Number,
+			default: 2
+		},
+		isDisableScale: {
+			type: Boolean,
+			default: false
+		},
+		isDisableRotate: {
+			type: Boolean,
+			default: false
+		},
+		isLimitMove: {
+			type: Boolean,
+			default: false
+		},
+		isShowPhotoBtn: {
+			type: Boolean,
+			default: true
+		},
+		isShowRotateBtn: {
+			type: Boolean,
+			default: true
+		},
+		isShowConfirmBtn: {
+			type: Boolean,
+			default: true
+		},
+		isShowCancelBtn: {
+			type: Boolean,
+			default: true
+		},
+		rotateAngle: {
+			type: Number,
+			default: 90
+		},
+		source: {
+			type: Object,
+			default: () => ({
+					album: '从相册中选择',
+					camera: '拍照',
+					// #ifdef MP-WEIXIN
+					message: '从微信中选择'
+					// #endif
+				})
+		}
+	},
+	data() {
+		return {
+			canvasWidth: 0,
+			canvasHeight: 0,
+			clipX: 0,
+			clipY: 0,
+			clipWidth: 0,
+			clipHeight: 0,
+			animation: false,
+			imageWidth: 0,
+			imageHeight: 0,
+			imageTop: 0,
+			imageLeft: 0,
+			scale: 1,
+			angle: 0,
+			image: this.imageUrl,
+			sysinfo: {},
+			throttleTimer: null,
+			throttleFlag: true,
+			timeClipCenter: null,
+			flagClipTouch: false,
+			flagEndTouch: false,
+			clipStart: {},
+			animationTimer: null,
+			touchRelative: [{x: 0,y: 0}],
+			hypotenuseLength: 0,
+			ctx: null
+		};
+	},
+	computed: {
+		clipStyle() {
+			const {clipWidth, clipHeight, clipY, clipX, animation} = this
+			return  `
+			width: ${clipWidth}px;
+			height:${clipHeight}px;
+			transition-property: ${animation ? '' : 'background'};
+			left: ${clipX}px;
+			top: ${clipY}px
+			`
+		},
+		imageStyle() {
+			const {imageWidth, imageHeight, imageLeft, imageTop, animation, scale, angle} = this
+			return `
+				width: ${imageWidth ? imageWidth + 'px' : 'auto'};
+				height: ${imageHeight ? imageHeight + 'px' : 'auto'};
+				transform: translate3d(${imageLeft - imageWidth / 2}px, ${imageTop - imageHeight / 2}px, 0) scale(${scale}) rotate(${angle}deg);
+				transition-duration: ${animation ? 0.35 : 0}s
+			`
+		},
+		clipSize() {
+			const { clipWidth, clipHeight } = this;
+			return { clipWidth, clipHeight };
+		},
+		clipPoint() {
+			const { clipY, clipX } = this;
+			return { clipY, clipX };
+		}
+	},
+	watch: {
+		value(val) {
+			if(!val) {
+				this.animation = 0
+				this.angle = 0
+			} else {
+				if(this.imageUrl) {
+					const {imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight, path} = cache?.[this.imageUrl] || {}
+					if(path != this.image) {
+						this.image = this.imageUrl;
+					} else {
+						this.setDiffData({imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight})
+					}
+					
+				}
+				
+			}
+		},
+		imageUrl(url) {
+			this.image = url
+		},
+		image:{
+			handler: async function(url) {
+				this.getImageInfo(url)
+			},
+			// immediate: true,
+		},
+		clipSize({ widthVal, heightVal }) {
+			let { minWidth, minHeight } = this;
+			minWidth = minWidth / 2;
+			minHeight = minHeight / 2;
+			if (widthVal < minWidth) {
+				this.setDiffData({clipWidth: minWidth})
+			}
+			if (heightVal < minHeight) {
+				this.setDiffData({clipHeight: minHeight})
+			}
+			this.calcClipSize();
+		},
+		angle(val) {
+			this.animation = true;
+			this.moveStop();
+			const { isLimitMove } = this;
+			if (isLimitMove && val % 90) {
+				this.setDiffData({
+					angle: Math.round(val / 90) * 90
+				})
+			}
+			this.imgMarginDetectionScale();
+		},
+		animation(val) {
+			clearTimeout(this.animationTimer);
+			if (val) {
+				let animationTimer = setTimeout(() => {
+					this.setDiffData({
+						animation: false
+					})
+				}, 260);
+				this.setDiffData({animationTimer})
+				this.animationTimer = animationTimer;
+			}
+		},
+		isLimitMove(val) {
+			if (val) {
+				if (this.angle % 90) {
+					this.setDiffData({
+						angle : Math.round(this.angle / 90) * 90
+					})
+				}
+				this.imgMarginDetectionScale();
+			}
+		},
+		clipPoint() {
+			this.cutDetectionPosition();
+		},
+		width(width, oWidth) {
+			if (width !== oWidth) {
+				this.setDiffData({
+					clipWidth:  width / 2
+				})
+			}
+		},
+		height(height, oHeight) {
+			if (height !== oHeight) {
+				this.setDiffData({
+					clipHeight:  height / 2
+				})
+			}
+		}
+	},
+	mounted() {
+		const sysinfo = uni.getSystemInfoSync();
+		this.sysinfo = sysinfo;
+		this.setClipInfo();
+		if(this.image) {
+			this.getImageInfo(this.image)
+		}
+		this.setClipCenter();
+		this.calcClipSize();
+		this.cutDetectionPosition();
+	},
+	methods: {
+		setDiffData(data) {
+			Object.keys(data).forEach(key => {
+			  if (this[key] !== data[key]) {
+				this[key] = data[key];
+			  }
+			});
+		},
+		getImageInfo(url) {
+			if (!url) return;
+			if(this.value) {
+				uni.showLoading({
+					title: '请稍候...',
+					mask: true
+				});
+			}
+			uni.getImageInfo({
+				src: url,
+				success: res => {
+					this.imgComputeSize(res.width, res.height);
+					this.image = res.path;
+					if (this.isLimitMove) {
+						this.imgMarginDetectionScale();
+						this.$emit('ready', res);
+					}
+					const {imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight} = this
+					cache[url] = Object.assign(res, {imageWidth, imageHeight, imageLeft, imageTop, scale, clipX, clipY, clipWidth, clipHeight});
+				},
+				fail: (err) => {
+					this.imgComputeSize();
+					if (this.isLimitMove) {
+						this.imgMarginDetectionScale();
+					}
+				}
+			});
+			
+		},
+		setClipInfo() {
+			const { width, height, sysinfo, canvasId } = this;
+			const clipWidth = width / 2;
+			const clipHeight = height / 2;
+			const clipY = (sysinfo.windowHeight - clipHeight) / 2;
+			const clipX = (sysinfo.windowWidth - clipWidth) / 2;
+			const imageLeft = sysinfo.windowWidth / 2;
+			const imageTop = sysinfo.windowHeight / 2;
+			this.ctx = uni.createCanvasContext(canvasId, this);
+			this.clipWidth = clipWidth;
+			this.clipHeight = clipHeight;
+			this.clipX = clipX;
+			this.clipY = clipY;
+			this.canvasHeight = clipHeight;
+			this.canvasWidth = clipWidth;
+			this.imageLeft = imageLeft;
+			this.imageTop = imageTop;
+		},
+		setClipCenter() {
+			const { sysInfo, clipHeight, clipWidth, imageTop, imageLeft } = this;
+			let sys = sysInfo || uni.getSystemInfoSync();
+			let clipY = (sys.windowHeight - clipHeight) * 0.5;
+			let clipX = (sys.windowWidth - clipWidth) * 0.5;
+			this.imageTop = imageTop - this.clipY + clipY;
+			this.imageLeft = imageLeft - this.clipX + clipX;
+			this.clipY = clipY;
+			this.clipX = clipX;
+		},
+		calcClipSize() {
+			const { clipHeight, clipWidth, sysinfo, clipX, clipY } = this;
+			if (clipWidth > sysinfo.windowWidth) {
+				this.setDiffData({
+					clipWidth:  sysinfo.windowWidth
+				})
+			} else if (clipWidth + clipX > sysinfo.windowWidth) {
+				this.setDiffData({
+					clipX: sysinfo.windowWidth - clipX
+				})
+			}
+			if (clipHeight > sysinfo.windowHeight) {
+				this.setDiffData({
+					clipHeight: sysinfo.windowHeight
+				})
+			} else if (clipHeight + clipY > sysinfo.windowHeight) {
+				this.clipY = sysinfo.windowHeight - clipY;
+				this.setDiffData({
+					clipY: sysinfo.windowHeight - clipY
+				})
+			}
+		},
+		cutDetectionPosition() {
+			const { clipX, clipY, sysinfo, clipHeight, clipWidth } = this;
+			let cutDetectionPositionTop = () => {
+					if (clipY < 0) {
+						this.setDiffData({clipY: 0})
+					}
+					if (clipY > sysinfo.windowHeight - clipHeight) {
+						this.setDiffData({clipY: sysinfo.windowHeight - clipHeight})
+					}
+				},
+				cutDetectionPositionLeft = () => {
+					if (clipX < 0) {
+						this.setDiffData({clipX: 0})
+					}
+					if (clipX > sysinfo.windowWidth - clipWidth) {
+						this.setDiffData({clipX: sysinfo.windowWidth - clipWidth})
+					}
+				};
+			if (clipY === null && clipX === null) {
+				let newClipY = (sysinfo.windowHeight - clipHeight) * 0.5;
+				let newClipX = (sysinfo.windowWidth - clipWidth) * 0.5;
+				this.setDiffData({
+					clipX: newClipX,
+					clipY: newClipY
+				})
+			} else if (clipY !== null && clipX !== null) {
+				cutDetectionPositionTop();
+				cutDetectionPositionLeft();
+			} else if (clipY !== null && clipX === null) {
+				cutDetectionPositionTop();
+				this.setDiffData({
+					clipX: (sysinfo.windowWidth - clipWidth) / 2
+				})
+			} else if (clipY === null && clipX !== null) {
+				cutDetectionPositionLeft();
+				this.setDiffData({
+					clipY: (sysinfo.windowHeight - clipHeight) / 2
+				})
+			}
+		},
+		imgComputeSize(width, height) {
+			const { imageWidth, imageHeight } = calcImageSize(width, height, this);
+			this.imageWidth = imageWidth;
+			this.imageHeight = imageHeight;
+		},
+		imgMarginDetectionScale(scale) {
+			if (!this.isLimitMove) return;
+			const currentScale = calcImageScale(this, scale);
+			this.imgMarginDetectionPosition(currentScale);
+		},
+		imgMarginDetectionPosition(scale) {
+			if (!this.isLimitMove) return;
+			const { scale: currentScale, left, top } = calcImageOffset(this, scale);
+			this.setDiffData({
+				imageLeft: left,
+				imageTop: top,
+				scale: currentScale
+			})
+		},
+		throttle() {
+			this.setDiffData({
+				throttleFlag: true
+			})
+		},
+		moveDuring() {
+			clearTimeout(this.timeClipCenter);
+		},
+		moveStop() {
+			clearTimeout(this.timeClipCenter);
+			const timeClipCenter = setTimeout(() => {
+				if (!this.animation) {
+					this.setDiffData({animation: true})
+				}
+				this.setClipCenter();
+			}, 800);
+			this.setDiffData({timeClipCenter})
+		},
+		clipTouchStart(event) {
+			// #ifdef H5
+			event.preventDefault()
+			// #endif
+			if (!this.image) {
+				uni.showToast({
+					title: '请选择图片',
+					icon: 'none'
+				});
+				return;
+			}
+			const currentX = event.touches[0].clientX;
+			const currentY = event.touches[0].clientY;
+			const { clipX, clipY, clipWidth, clipHeight } = this;
+			const corner = determineDirection(clipX, clipY, clipWidth, clipHeight, currentX, currentY);
+			this.moveDuring();
+			if(!corner) {return}
+			this.clipStart = {
+				width: clipWidth,
+				height: clipHeight,
+				x: currentX,
+				y: currentY,
+				clipY,
+				clipX,
+				corner
+			};
+			this.flagClipTouch = true;
+			this.flagEndTouch = true;
+		},
+		clipTouchMove(event) {
+			// #ifdef H5
+			event.stopPropagation()
+			event.preventDefault()
+			// #endif
+			if (!this.image) {
+				uni.showToast({
+					title: '请选择图片',
+					icon: 'none'
+				});
+				return;
+			}
+			// 只针对单指点击做处理
+			if (event.touches.length !== 1) {
+				return;
+				
+			}
+			const { flagClipTouch, throttleFlag } = this;
+			if (flagClipTouch && throttleFlag) {
+				const { isLockRatio, isLockHeight, isLockWidth } = this;
+				if (isLockRatio && (isLockWidth || isLockHeight)) return;
+				this.setDiffData({
+					throttleFlag: false
+				})
+				this.throttle();
+				const clipData = clipTouchMoveOfCalculate(this, event);
+				if(clipData) {
+					const { width, height, clipX, clipY } = clipData;
+					if (!isLockWidth && !isLockHeight) {
+						this.setDiffData({
+							clipWidth: width,
+							clipHeight: height,
+							clipX,
+							clipY
+						})
+					} else if (!isLockWidth) {
+						this.setDiffData({
+							clipWidth: width,
+							clipX
+						})
+					} else if (!isLockHeight) {
+						this.setDiffData({
+							clipHeight: height,
+							clipY
+						})
+					}
+					this.imgMarginDetectionScale();
+				}
+
+			}
+		},
+		clipTouchEnd() {
+			this.moveStop();
+			this.flagClipTouch = false;
+		},
+		imageTouchStart(e) {
+			// #ifdef H5
+			event.preventDefault()
+			// #endif
+			this.flagEndTouch = false;
+			const { imageLeft, imageTop } = this;
+			const clientXForLeft = e.touches[0].clientX;
+			const clientYForLeft = e.touches[0].clientY;
+
+			let touchRelative = [];
+			if (e.touches.length === 1) {
+				touchRelative[0] = {
+					x: clientXForLeft - imageLeft,
+					y: clientYForLeft - imageTop
+				};
+				this.touchRelative = touchRelative;
+			} else {
+				const clientXForRight = e.touches[1].clientX;
+				const clientYForRight = e.touches[1].clientY;
+				let width = Math.abs(clientXForLeft - clientXForRight);
+				let height = Math.abs(clientYForLeft - clientYForRight);
+				const hypotenuseLength = calcPythagoreanTheorem(width, height);
+
+				touchRelative = [
+					{
+						x: clientXForLeft - imageLeft,
+						y: clientYForLeft - imageTop
+					},
+					{
+						x: clientXForRight - imageLeft,
+						y: clientYForRight - imageTop
+					}
+				];
+				this.touchRelative = touchRelative;
+				this.hypotenuseLength = hypotenuseLength;
+			}
+		},
+		imageTouchMove(e) {
+			// #ifdef H5
+			event.preventDefault()
+			// #endif
+			const { flagEndTouch, throttleFlag } = this;
+			if (flagEndTouch || !throttleFlag) return;
+			const clientXForLeft = e.touches[0].clientX;
+			const clientYForLeft = e.touches[0].clientY;
+			this.setDiffData({throttleFlag: false})
+			this.throttle();
+			this.moveDuring();
+			if (e.touches.length === 1) {
+				const { left: imageLeft, top:  imageTop} = imageTouchMoveOfCalcOffset(this, clientXForLeft, clientYForLeft);
+				this.setDiffData({
+					imageLeft,
+					imageTop
+				})
+				this.imgMarginDetectionPosition();
+			} else {
+				const clientXForRight = e.touches[1].clientX;
+				const clientYForRight = e.touches[1].clientY;
+				let width = Math.abs(clientXForLeft - clientXForRight),
+					height = Math.abs(clientYForLeft - clientYForRight),
+					hypotenuse = calcPythagoreanTheorem(width, height),
+					scale = this.scale * (hypotenuse / this.hypotenuseLength);
+				if (this.isDisableScale) {
+
+					scale = 1;
+				} else {
+					scale = scale <= this.minRatio ? this.minRatio : scale;
+					scale = scale >= this.maxRatio ? this.maxRatio : scale;
+					this.$emit('change', {
+						width: this.imageWidth * scale,
+						height: this.imageHeight * scale
+					});
+				}
+
+				this.imgMarginDetectionScale(scale);
+				this.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+				this.scale = scale;
+			}
+		},
+		imageTouchEnd() {
+			this.setDiffData({
+				flagEndTouch: true
+			})
+			this.moveStop();
+		},
+		uploadImage() {
+			const itemList = Object.entries(this.source)
+			const sizeType = ['original', 'compressed']
+			const success = ({tempFilePaths:a, tempFiles: b}) => {
+				this.image = a ? a[0] : b[0].path
+			};
+			const _uploadImage = (type) => {
+				if(type !== 'message') {
+					uni.chooseImage({
+						count: 1,
+						sizeType,
+						sourceType: [type],
+						success
+					});
+				}
+				// #ifdef MP-WEIXIN
+				if(type == 'message') {
+					wx.chooseMessageFile({
+					  count: 1,
+					  type: 'image',
+					  success
+					})
+				}
+				// #endif
+			}
+			if(itemList.length > 1) {
+				uni.showActionSheet({
+					itemList: itemList.map(v => v[1]),
+					success: ({tapIndex: i}) => {
+						_uploadImage(itemList[i][0])
+					}
+				})
+			} else {
+				_uploadImage(itemList[0][0])
+			}
+		},
+		imageReset() {
+			const sys = this.sysinfo || uni.getSystemInfoSync();
+			this.scale = 1;
+			this.angle = 0;
+			this.imageTop = sys.windowHeight / 2;
+			this.imageLeft = sys.windowWidth / 2;
+		},
+		imageLoad(e) {
+			this.imageReset();
+			uni.hideLoading();
+			this.$emit('ready', e.detail);
+		},
+		rotate(event) {
+			if (this.isDisableRotate) return;
+			if (!this.image) {
+				uni.showToast({
+					title: '请选择图片',
+					icon: 'none'
+				});
+				return;
+			}
+			const { rotateAngle } = this;
+			const originAngle = this.angle
+			const type = event.currentTarget.dataset.type;
+			if (type === 'along') {
+				this.angle = originAngle + rotateAngle
+			} else {
+				this.angle = originAngle - rotateAngle
+			}
+			this.$emit('rotate', this.angle);
+		},
+		confirm() {
+			if (!this.image) {
+				uni.showToast({
+					title: '请选择图片',
+					icon: 'none'
+				});
+				return;
+			}
+			uni.showLoading({
+				title: '加载中'
+			});
+			const { canvasHeight, canvasWidth, clipHeight, clipWidth, ctx, scale, imageLeft, imageTop, clipX, clipY, angle, scaleRatio: dpr, image, quality, fileType, type: imageType, canvasId } = this;
+			const draw = () => {
+				const imageWidth = this.imageWidth * scale * dpr;
+				const imageHeight = this.imageHeight * scale * dpr;
+				const xpos = imageLeft - clipX;
+				const ypos = imageTop - clipY;
+				ctx.translate(xpos * dpr, ypos * dpr);
+				ctx.rotate((angle * Math.PI) / 180);
+				ctx.drawImage(image, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight);
+				ctx.draw(false, () => {
+					const width = clipWidth * dpr
+					const height = clipHeight * dpr
+					let params = {
+						x: 0,
+						y: 0,
+						width,
+						height,
+						destWidth: width,
+						destHeight: height,
+						canvasId: canvasId,
+						fileType,
+						quality,
+						success: (res) => {
+							data.url = res.tempFilePath;
+							uni.hideLoading();
+							this.$emit('success', data);
+							this.$emit('input', false)
+						},
+						fail: (error) => {
+							console.error('error', error)
+							this.$emit('fail', error);
+							this.$emit('input', false)
+						}
+					};
+
+					let data = {
+						url: '',
+						width,
+						height
+					};
+					uni.canvasToTempFilePath(params, this)
+				});
+			};
+
+			if (canvasWidth !== clipWidth || canvasHeight !== clipHeight) {
+				this.canvasWidth = clipWidth;
+				this.canvasHeight = clipHeight;
+				ctx.draw();
+				this.$nextTick(() => {
+					setTimeout(() => {
+						draw();
+					}, 100);
+				})
+			} else {
+				draw();
+			}
+		},
+		cancel() {
+			this.$emit('cancel', false)
+			this.$emit('input', false)
+		},
+	}
+};
+</script>
+
+<style scoped>
+@import './index'
+</style>

pages/user/limeClipper/utils.js

@@ -0,0 +1,244 @@
+/**
+ * 判断手指触摸位置
+ */
+export function determineDirection(clipX, clipY, clipWidth, clipHeight, currentX, currentY) {
+	/*
+	 * (右下>>1 右上>>2 左上>>3 左下>>4)
+	 */
+	let corner;
+	/**
+	 * 思路：（利用直角坐标系）
+	 *  1.找出裁剪框中心点
+	 *  2.如点击坐标在上方点与左方点区域内，则点击为左上角
+	 *  3.如点击坐标在下方点与右方点区域内，则点击为右下角
+	 *  4.其他角同理
+	 */
+	const mainPoint = [clipX + clipWidth / 2, clipY + clipHeight / 2]; // 中心点
+	const currentPoint = [currentX, currentY]; // 触摸点
+
+	if (currentPoint[0] <= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
+		corner = 3; // 左上
+	} else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
+		corner = 2; // 右上
+	} else if (currentPoint[0] <= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
+		corner = 4; // 左下
+	} else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
+		corner = 1; // 右下
+	}
+
+	return corner;
+}
+
+/**
+ * 图片边缘检测检测时，计算图片偏移量
+ */
+export function calcImageOffset(data, scale) {
+	let left = data.imageLeft;
+	let top = data.imageTop;
+	scale = scale || data.scale;
+	
+	let imageWidth = data.imageWidth;
+	  let imageHeight = data.imageHeight;
+	  if ((data.angle / 90) % 2) {
+	    imageWidth = data.imageHeight;
+	    imageHeight = data.imageWidth;
+	  }
+	  const {
+	      clipX,
+	      clipWidth,
+	      clipY,
+	      clipHeight
+	    } = data;
+
+	// 当前图片宽度/高度
+	const currentImageSize = (size) => (size * scale) / 2;
+	const currentImageWidth = currentImageSize(imageWidth);
+	const currentImageHeight = currentImageSize(imageHeight);
+
+	left = clipX + currentImageWidth >= left ? left : clipX + currentImageWidth;
+	left = clipX + clipWidth - currentImageWidth <= left ? left : clipX + clipWidth - currentImageWidth;
+	top = clipY + currentImageHeight >= top ? top : clipY + currentImageHeight;
+	top = clipY + clipHeight - currentImageHeight <= top ? top : clipY + clipHeight - currentImageHeight;
+	return {
+		left,
+		top,
+		scale
+	};
+}
+
+/**
+ * 图片边缘检测时，计算图片缩放比例
+ */
+export function calcImageScale(data, scale) {
+	scale = scale || data.scale;
+	let {
+		imageWidth,
+		imageHeight,
+		clipWidth,
+		clipHeight,
+		angle
+	} = data
+	if ((angle / 90) % 2) {
+		imageWidth = imageHeight;
+		imageHeight = imageWidth;
+	}
+	if (imageWidth * scale < clipWidth) {
+		scale = clipWidth / imageWidth;
+	}
+	if (imageHeight * scale < clipHeight) {
+		scale = Math.max(scale, clipHeight / imageHeight);
+	}
+	return scale;
+}
+
+/**
+ * 计算图片尺寸
+ */
+export function calcImageSize(width, height, data) {
+	let imageWidth = width,
+		imageHeight = height;
+	let {
+		clipWidth,
+		clipHeight,
+		sysinfo,
+		width: originWidth,
+		height: originHeight
+	} = data
+	if (imageWidth && imageHeight) {
+		if (imageWidth / imageHeight > (clipWidth || originWidth) / (clipWidth || originHeight)) {
+			imageHeight = clipHeight || originHeight;
+			imageWidth = (width / height) * imageHeight;
+		} else {
+			imageWidth = clipWidth || originWidth;
+			imageHeight = (height / width) * imageWidth;
+		}
+	} else {
+		let sys = sysinfo || uni.getSystemInfoSync();
+		imageWidth = sys.windowWidth;
+		imageHeight = 0;
+	}
+	return {
+		imageWidth,
+		imageHeight
+	};
+}
+
+/**
+ * 勾股定理求斜边
+ */
+export function calcPythagoreanTheorem(width, height) {
+	return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+}
+
+/**
+ * 拖动裁剪框时计算
+ */
+export function clipTouchMoveOfCalculate(data, event) {
+	const clientX = event.touches[0].clientX;
+	const clientY = event.touches[0].clientY;
+
+	let {
+		clipWidth,
+		clipHeight,
+		clipY: oldClipY,
+		clipX: oldClipX,
+		clipStart,
+		isLockRatio,
+		maxWidth,
+		minWidth,
+		maxHeight,
+		minHeight
+	} = data;
+	maxWidth = maxWidth / 2;
+	minWidth = minWidth / 2;
+	minHeight = minHeight / 2;
+	maxHeight = maxHeight / 2;
+
+	let width = clipWidth,
+		height = clipHeight,
+		clipY = oldClipY,
+		clipX = oldClipX,
+		// 获取裁剪框实际宽度/高度
+		// 如果大于最大值则使用最大值
+		// 如果小于最小值则使用最小值
+		sizecorrect = () => {
+			width = width <= maxWidth ? (width >= minWidth ? width : minWidth) : maxWidth;
+			height = height <= maxHeight ? (height >= minHeight ? height : minHeight) : maxHeight;
+		},
+		sizeinspect = () => {
+			sizecorrect();
+			if ((width > maxWidth || width < minWidth || height > maxHeight || height < minHeight) && isLockRatio) {
+				return false;
+			} else {
+				return true;
+			}
+		};
+	//if (clipStart.corner) {
+	height = clipStart.height + (clipStart.corner > 1 && clipStart.corner < 4 ? 1 : -1) * (clipStart.y - clientY);
+	//}
+	switch (clipStart.corner) {
+		case 1:
+			width = clipStart.width - clipStart.x + clientX;
+			if (isLockRatio) {
+				height = width / (clipWidth / clipHeight);
+			}
+			if (!sizeinspect()) return;
+			break;
+		case 2:
+			width = clipStart.width - clipStart.x + clientX;
+			if (isLockRatio) {
+				height = width / (clipWidth / clipHeight);
+			}
+			if (!sizeinspect()) {
+				return;
+			} else {
+				clipY = clipStart.clipY - (height - clipStart.height);
+			}
+
+			break;
+		case 3:
+			width = clipStart.width + clipStart.x - clientX;
+			if (isLockRatio) {
+				height = width / (clipWidth / clipHeight);
+			}
+			if (!sizeinspect()) {
+				return;
+			} else {
+				clipY = clipStart.clipY - (height - clipStart.height);
+				clipX = clipStart.clipX - (width - clipStart.width);
+			}
+
+			break;
+		case 4:
+			width = clipStart.width + clipStart.x - clientX;
+			if (isLockRatio) {
+				height = width / (clipWidth / clipHeight);
+			}
+			if (!sizeinspect()) {
+				return;
+			} else {
+				clipX = clipStart.clipX - (width - clipStart.width);
+			}
+			break;
+		default:
+			break;
+	}
+	return {
+		width,
+		height,
+		clipX,
+		clipY
+	};
+}
+
+/**
+ * 单指拖动图片计算偏移
+ */
+export function imageTouchMoveOfCalcOffset(data, clientXForLeft, clientYForLeft) {
+	let left = clientXForLeft - data.touchRelative[0].x,
+		top = clientYForLeft - data.touchRelative[0].y;
+	return {
+		left,
+		top
+	};
+}

static/limeClipper/photo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#606060;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st2" d="M11.6,11c0.4,0.4,0.6,0.9,0.6,1.5c0,0.6-0.2,1.1-0.6,1.4c-0.4,0.4-0.9,0.6-1.5,0.6c-0.6,0-1.1-0.2-1.5-0.6
+		c-0.4-0.4-0.6-0.9-0.6-1.4s0.2-1.1,0.6-1.5c0.4-0.4,0.9-0.6,1.5-0.6C10.8,10.4,11.2,10.6,11.6,11z M24.6,18.4V6.7H5.4v12l1.8-1.8
+		c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.7,0.1,1,0.4l1.8,1.8l5.8-7c0.3-0.3,0.6-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5
+		C18.8,11.6,24.6,18.4,24.6,18.4z M25.6,5.7C25.9,6,26,6.3,26,6.7v16.1c0,0.4-0.1,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4H5.4
+		c-0.4,0-0.7-0.1-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V6.7c0-0.4,0.1-0.7,0.4-1c0.3-0.3,0.6-0.4,1-0.4h19.3C25,5.3,25.3,5.4,25.6,5.7z"/>
+	<path class="st1" d="M24.3,21.5H5.7c-0.2,0-0.3-0.2-0.3-0.3V7c0-0.2,0.2-0.3,0.3-0.3h18.6c0.2,0,0.3,0.2,0.3,0.3v14.2
+		C24.6,21.3,24.5,21.5,24.3,21.5z"/>
+</g>
+</svg>

static/limeClipper/rotate.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M17.1,24.2h-12c-0.2,0-0.3-0.2-0.3-0.3v-9.3c0-0.2,0.2-0.3,0.3-0.3h12c0.2,0,0.3,0.2,0.3,0.3v9.3
+		C17.5,24.1,17.3,24.2,17.1,24.2z"/>
+	<path class="st0" d="M16.6,5.4c4.8,0,8.7,3.9,8.7,8.7"/>
+	<polyline class="st0" points="19.3,10.1 14.9,5.6 19.3,1.2 	"/>
+</g>
+</svg>