JP-ChargeTeam51/pages/bindingHomePile/bindingHomePile.vue

<template>
	<view  >
		<ujp-navbar title="绑定家充桩"  v-if="current!='map'" ></ujp-navbar>
		<ujp-navbar title="绑定家充桩"  v-if="current=='map'" :custom-back="customback" ></ujp-navbar>
		
		<selectMap ref="amap"  @onload="mapdown"
		  @onMoveEnd="moveEnd" @okBtn="okBtn"
		  
		 v-show="current=='map'"  ></selectMap>
			
		<view class="main1" v-if="current==0">
			<view class="steps" >
				<u-steps :list="numList" mode="number" :current="current" un-active-color="#999999"></u-steps>
			</view>
			
			<view class="content" v-if="current==0" >
				<view class="infosGroup">
					<view class="item">
						<view class="itemTitle">
							绑定识别号
						</view>
						<view class="itemValue"  @click="getScanCode"  style="    color: #999999;">
							
							{{subForm.deviceNo?subForm.deviceNo:'请扫码优电设备绑定识别号'}}
						</view>
						<view class="itemIcon"  @click="getScanCode" >
							<img src="../../assets/img/riLine-qr-scan-2-line@3x.png" alt="" />
						</view>
					</view>
				</view>
				<view class="infosGroup">
					<view class="item">
						<view class="itemTitle">
							<span>*</span>桩主姓名
						</view>
						<view class="itemValue">
							<input type="text" @input="userNameInput"
							 v-model="subForm.userName"
							placeholder="请填写桩主真实姓名" />
						</view>
				
					</view>
					<view class="item">
						<view class="itemTitle">
							<span>*</span>联系电话
						</view>
						<view class="itemValue">
							<input type="text" v-model="subForm.phone"
							 placeholder="请填写桩主联系电话" />
						</view>
						<view class="itemIcon" v-if="0">
							<img src="../../assets/img/md-cancel Copy@3x.png" alt="" />
						</view>
					</view>
				</view>
				<view class="infosGroup">
					<view class="item">
						<view class="itemTitle">
							<span>*</span>电桩名称
						</view>
						<view class="itemValue">
							<input type="text"  v-model="subForm.chargingName"
							 placeholder="如:沙市张三的个人桩" />
						</view>
				
					</view>
					<view class="item">
						<view class="itemTitle">
							电桩类型
						</view>
						<view class="itemValue">
							交流慢充
						</view>
						<view class="itemIcon">
							<!-- <u-icon name="arrow-right" color="#b3b3b3"></u-icon> -->
						</view>
					</view>
				
					<view class="item">
						<view class="itemTitle">
							<span>*</span>电桩位置
						</view>
						<view class="itemValue"  >
						
							<textarea  style="width: 100%;"
							v-model="subForm.address"  placeholder="请填写电桩位置"></textarea>
							
						</view>
						 
						<view class="itemIcon"  @click="current='map'">
				
							<img src="../../assets/img/md-my_location@3x.png" alt="" />
						</view>
					</view>
				
					<view class="item">
						<view class="itemTitle">
							车位号
						</view>
						<view class="itemValue">
							<input type="text" v-model="subForm.parkNum" placeholder="请填写车位号(选填)" />
						</view>
				
					</view>
				
					<view class="item">
						<view class="itemTitle">
							位置描述
						</view>
						<view class="itemValue">
							<input type="text" v-model="subForm.remark" placeholder="请详细描述电桩位置信息" />
						</view>
				
					</view>
				
					<view class="pictures" >
						<view class="picturesTitle">
							<span>*</span>充电桩照片
						</view>
						<view class="picturesValue">
							<view class="upload">
								<u-upload  max-count="1" name="photoFile"
								ref="uUpload"
								 :form-data="formData" :header="header" :action="action"
								  :file-list="listPic" ></u-upload>
							</view>
						</view>
					</view>
					
				</view>
				
			</view>
			
			<view class="bottom" @click="submit()" >
				<view class="button" >
					提交申请
				</view>
			</view>
		</view>
		
		<u-modal v-model="show" content="确认是否提交申请?" @confirm="submitApi()" :show-cancel-button="true"
			confirm-color="#00b962"></u-modal>
			
		<view class="main2"  v-if="current==1||current==2" >
			<view class="steps">
				<u-steps :list="numList" mode="number" :current="current" un-active-color="#999999"></u-steps>
			</view>
			
			
			
			<view class="content1" v-if="current==1" >
				<img src="../../assets/img/antFill-clock-circle@3x.png" alt="" />
				<view class="text1">
					等待审核中
				</view>
				<view class="text2">
					绑定申请已提交，等待后台审核完成建站
				</view>
				<view class="button" @click="back()">
					返  回
				</view>
			</view>
			<view class="content1" v-if="current==2" >
				<img src="../../assets/img/antFill-check-circle@3x.png" alt="" />
				<view class="text1">
					完成建站
				</view>
				<view class="text2">
					充电桩安装成功，快来体验充电吧~
				</view>
				<view class="button button2" @click="gotoInfo()">
					前往充电
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import * as API from '@/apis/apply.js'
	import * as WxJsApi from '@/utils/wxJsApi'
	import MapLoader from '@/utils/AMap'
	import selectMap from '@/components/SelectMap.vue';
	
	export default {
		components: {
			selectMap,
		},
		data() {
			return {
				show:false,
				current:0,
				numList: [{
					name: '绑定家桩'
				}, {
					name: '等待审核'
				}, {
					name: '完成建站'
				}],
				listPic: [],
				action:"",
				formData:{
					
				},
				header:{
					
				},
				subForm:{
					longitude: "",
					latitude: "",
					applyType:'1',
					type:"2",
				},
				obj:{
					applyChargingStation:null,
					chargingDevice:{},
					ready:false,
				},
				isReady:false,
				applyList:[],
				gunNo:"",
			
			}
		},
		onLoad() {
			this.action=process.car.BASE_URL+"uploadPicture"
			this.formData.subFolder="/team51/bindingHomePile"
			var token=this.carhelp.getToken()
			
			this.header={
					
				'Authorization':token
			}
			//获取微信配置
			WxJsApi.getWxConfig(['scanQRCode','getLocation','addEventListener']).then((res)=>{
			
				this.isReady=true;
				//(res)
				this.getPoint()
			 
			}).catch(error => {
					//(res)
			})
			
			this.personInfo = this.carhelp.getPersonInfo()
			if(this.personInfo){
				this.subForm.phone=this.personInfo.phone
			}
			this.getList()
		},
		onReady() {
			this.$refs.amap.init();
		},
		methods: {
			userNameInput(e){
				var c=e.detail.value;
				this.subForm.chargingName=c+'的私人充电桩'
				
			},
			customback(){
					this.current=0;
			},
			okBtn(e){
				console.log(e)
				this.subForm.latitude = e.latitude
				this.subForm.longitude = e.longitude
				this.subForm.address=e.address
				this.current=0
				this.$forceUpdate()
			},
			moveEnd(e) {
				//('moveEnd')
				
				let posCenter = this.$refs.amap.logMapInfo();
				////('posCenter'+JSON.stringify(posCenter))		
			
			
			
				if (this.latitude == e.center.lat && this.longitude == e.center.lng) {
					return
				}
				this.subForm.latitude = e.center.lat
				this.subForm.longitude = e.center.lng
				this.getPositionByLonLats()
			},
			
			mapdown() {
				//this.isReady = true;
				//this.$refs.amap.getLocation ();
				//let state = {};
				uni.getSystemInfo({
					success: (res) => {
			
						let scrollH = res.windowHeight; // - uni.upx2px(88) - navbarH
						let scrollW = res.windowWidth;
						this.$refs.amap.setMyStyle("height:" + (scrollH - 88 - 50) + "px;width:" + scrollW +
							"px;");
					}
				})
			
			},
			back(){
				window.history.back()
			},
			submit(){
				
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
					// files = this.$refs.uUpload.lists;
				
				//(files);
					
				var imgUrl=files.map(item=>{
					return item.response.data;
				})
				//(imgUrl);
				this.subForm.imgUrl = imgUrl.join(',');
				
				if(!this.subForm.deviceNo){
					uni.showToast({
						title:"请扫码优电设备绑定识别号"
					})
					 return
				}
				if(!this.subForm.userName){
					uni.showToast({
						title:"请填写桩主真实姓名"
					})
					 return
				}
				
				if(!this.subForm.phone){
					uni.showToast({
						title:"请填写桩主联系电话"
					})
					 return
				}
				if(!this.subForm.chargingName){
					uni.showToast({
						title:"请填写电桩名称"
					})
					 return
				}
				if(!this.subForm.address){
					uni.showToast({
						title:"请定位电桩位置"
					})
					 return
				}
				if(files.length==0){
					uni.showToast({
						title:"请上传充电桩照片"
					})
					 return
				}
				
				this.show=true
				//this.submitApi()
			},
			submitApi(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.apply(this.subForm).then((res) => {
					//this.obj = res.data
					this.current=1
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.myApplyList({
					
				}).then((res) => {
					//this.obj = res.data
					 
					this.applyList=res.data.applyList;
					if(this.applyList.length){
						
						var item=this.applyList[0]
						if(item.status==0){
							this.current=1
						}else{
							this.current=2
							this.gunNo=item.gunNo
							// uni.redirectTo({
							// 	url:'pages/searchPile/stationAndPile/chargingPileDetails?isback=1&id='+item.gunId
							// })
						}
					}
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			gotoInfo(){
				uni.redirectTo({
					url:'/pages/searchPile/stationAndPile/chargingPileDetails?isback=1&id='+this.gunNo
				})
			},
			//获取定位地址
			getPositionByLonLats() {
				var _this = this;
				MapLoader().then(AMap => {
					var lnglatXY = [_this.subForm.longitude, _this.subForm.latitude];
					AMap.service('AMap.Geocoder', function() {
						let geocoder = new AMap.Geocoder({});
						geocoder.getAddress(lnglatXY, function(status, result) {
							console.log(lnglatXY);
							console.log(status, result);
							if (status === 'complete' && result.info === 'OK') {
								var address = result.regeocode.formattedAddress;
								console.log(address);
								_this.subForm.address = address;
								_this.$forceUpdate()
							} else {
								_this.subForm.address = '';
								uni.showToast({
									title:"无法获取定位"
								})
							}
						});
					});
				}).catch(error => {
					console.log(error)
				})
			},
			getPoint() {
			
				
				WxJsApi.getLocation().then((res) => {
					
					var latitude = parseFloat(res.latitude);
					var longitude = parseFloat(res.longitude);
			
					this.subForm.latitude = latitude;
					this.subForm.longitude = longitude;
					this.$refs.amap.setCenter({
						longitude:longitude,
						latitude:latitude
					})
					this.getPositionByLonLats()
				
				}).catch(error => {
					uni.showToast({
						title:JSON.stringify(error)
					})					
				})
			},
			getInfo(code){
				
				if(code&&code.indexOf('bind:')==0){
					var id=code.substring(5)
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API.findDeviceByNo({
						
						deviceNo:id
					}).then((res) => {
						if(res.data.ready){
							
							this.subForm.deviceNo=id;
							this.$forceUpdate()
							uni.showToast({
								title: "扫码成功"
							})
						}else{
							uni.showToast({
								title: "当前设备不可绑定"
							})
						}
						
						
						uni.hideLoading()
						
					}).catch(error => {
						uni.showToast({
							title: error
						})
					})
				}else{
					uni.showToast({
						title: "设备识别号不正确"
					})
				}
			},
			getScanCode(){
				if(process.env.NODE_ENV === "development"){
					this.subForm.longitude= 112.276527,
					this.subForm.latitude=30.306427,
					this.$refs.amap.setCenter({
						longitude:this.subForm.longitude,
						latitude:this.subForm.latitude
					})
					this.getInfo("bind:20241230001")
					this.getPositionByLonLats()
				}else{
					WxJsApi.scanQRCode(1).then(res => {
						
						this.getInfo(res)
						
					}).catch(error => {
					
					})
				}
				
			},
		}
	}
</script>



<style lang="scss" scoped>
	
	
	.steps {
		padding: 32rpx;
		height: 160rpx;
	
	}
	.main1{
		padding-bottom: 220rpx;
	}
	.main2{
		display: flex;
		flex-direction: column;
		height: calc(100vh - 88rpx);
		
		
		
		.content1{
			 background-color: #fff;
			 padding: 80rpx;
			 flex: 1;
			 text-align: center;
			 img{
				 width: 128rpx;
				 height: 128rpx;
			 }
			 .text1{
				 color: rgba(16, 16, 16, 1);
				 font-size: 40rpx;
				 margin-top: 42rpx;
				 font-weight: bold;
				 
			 }
			 .text2{
				 color: rgba(102, 102, 102, 1);
				 margin-top: 16rpx;
			 }
			 .button{
				 margin-top: 48rpx;
				 height: 88rpx;
				 line-height: 88rpx;
				 border-radius: 50px;
				 background-color: rgba(24, 144, 255, 1);
				 color: rgba(255, 255, 255, 1);
				 font-size: 36rpx;
			 }
			 .button2{
				 background: linear-gradient(134.04deg, rgba(0,185,98,1) 42.39%,rgba(22,119,255,1) 98.58%);
			 }
		}
	}
	

	.infosGroup {
		padding: 0 32rpx;
		margin-bottom: 24rpx;
		background-color: #fff;

		.item {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			padding: 28rpx 0;
			border-bottom: 1px solid #E5E7EA;
		}

		.item:last-of-type {
			border-bottom: none;
		}


		.itemTitle {
			color: #999999;
			min-width: 140rpx;

			span {
				color: #FF3A3A;
			}
		}

		.itemValue {
			width: 420rpx;
			margin-left: 36rpx;
			line-height: 32rpx;
			
			uni-input {
				color: #777777;


			}

			.uni-input-placeholder {
				color: #acacac;

			}
		}

		.itemIcon {
			margin-left: auto;
			display: flex;
			align-items: center;

			img {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.pictures {
			padding: 26rpx 0 32rpx;

			.picturesTitle {
				color: #999999;
				min-width: 140rpx;

				span {
					color: #FF3A3A;
				}
			}

			.picturesValue {
				margin-top: 28rpx;
			}
		}

	}
	
	
	.bottom{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 24rpx 32rpx;
		background-color: #fff;
		z-index: 999;
		.button{
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 18px;
			text-align: center;
			
		}
	}

 


</style>