jp-floorlock-phone/pages/mylock/bindLock.vue

<template>
	<view class="jpmain  ">
	
	<!-- 	<view class="body">
			<u-steps :list="numList" mode="number" :current="current" un-active-color="#999999"></u-steps >
			</view>-->
			<view class="list" >
				<view class="item" @click="gotoscan">
					<view class="name">
						<span>*</span>地锁编号

					</view>
					<view class="value">
						<view :style="bindInfo.lockNo?'':'color:rgb(187, 187, 187)'">{{bindInfo.lockNo?bindInfo.lockNo:'请扫码识别地锁'}}</view>
						<view v-if="!id" ><img class="img" src="@/assets/img/mylock/item3.svg" alt=""></view>
					</view>
				</view>
		
				<view class="item">
					<view class="name">
						<span>*</span>管理者

				
					</view>
					<view class="value">
						
						<input v-model="bindInfo.name" placeholder="请填写用户真实姓名" />
					</view>
				</view>
				<view class="item">
					<view class="name">
						<span>*</span>联系电话
					</view>
					<view class="value">
						
						<input v-model="bindInfo.phone" placeholder="请填写手机号码" />
					</view>
				</view>
			</view>
			<u-select v-model="bindInfotypeshow"  :default-value="bindInfotypeshowdefaultvalue"
			value-name="id" label-name="name" @confirm="bindInfotypeconfirm"
			:list="bindInfotypelist"></u-select>
			
			<view class="list">
				
				<view class="item" >
					<view class="name">
						<span>*</span>地锁类型

					</view>
					<view class="value" @click="gotobindInfotypeshow">
						<view v-if="0">
							<u-radio-group v-model="bindInfo.type" >
										<u-radio 
											
											v-for="(item, index) in bindInfotypelist" :key="index" 
											:name="item.id"
											
										>
											{{item.name}}
										</u-radio>
									</u-radio-group>

						</view>
						
						<view :style="bindInfo.type?'':'color:#BBB'"
						>{{bindInfo.type?bindInfo.typeN:'请选择地锁类型'}}</view>
						<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						<!-- <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon> -->
					</view>
				</view>
				<view  class=" item tips" v-if="bindInfo.type==3">专属停车位只能选择运营停车场</view>
				
				<view class="item"  >
					<view class="name">
						<span>*</span>所属停车场
				
					</view>
					<view class="value" @click="gotoSelectParking()">
						<view style="display: flex;" :style="bindInfo.parkingIdN?'':'color:#BBB'"
						>
						<template v-if="bindInfo.parkingIdN">
							<span class="buildMode buildMode1"  v-if="bindInfo.buildMode==1">
									用户自建
							</span>
							<span class="buildMode buildMode2"  v-if="bindInfo.buildMode==2">
									平台运营
							</span>
						</template>
						
						{{bindInfo.parkingIdN?bindInfo.parkingIdN:'请选择所属停车场'}}</view>
						<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
					</view>
				</view>
				
				<view class="item">
					<view class="name">
						<span>*</span>地锁名称
				
				
					</view>
					<view class="value">
						<input placeholder="如智泊地锁" v-model="bindInfo.lockName" />
					</view>
				</view>
				
				
				<view class="item">
					<view class="name">
						<span>*</span>地锁定位
				
					</view>
					<view class="value" @click="getUserLocation" >
						<view :style="bindInfo.address?'':'color:#BBB'"
						>{{bindInfo.address?bindInfo.address:'点击获取地锁定位信息'}}</view>
						<view><img class="img" src="@/assets/img/mylock/item5.svg" alt=""></view>
					</view>
				</view>
			<view class="floating-button">
				<view class="button"  @click="submit" >
					
					{{id?'保存':'立即绑定'}}
				</view>
				
			</view>

		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/mylock.js'
	
	export default {
		components: {
			// //'u-radio-group': () => import('@/uni_modules/uview-ui/components/u-radio-group/u-radio-group'),
			
			// //'u-radio': () => import('@/uni_modules/uview-ui/components/u-radio/u-radio'),
			
			//'u-picker': () => import('@/uni_modules/uview-ui/components/u-picker/u-picker'),
			
		},
		options:{styleIsolation: 'shared'},
		data() {
			return {
				id:"",
				current: 0,
				nowscan:{},
				columnsindex:[0],
				bindInfo:{
					name:"",
					lockName:"",
					phone:"",
					lockNo:"",
					type:"",
					remark:"",
					describe:"",
					parkingNumber:"",
					address:"",
				},
				bindInfotypeshow:false,
				bindInfotypelist:[
					{id:"1",name:"公共地锁"},
					{id:"2",name:"私人地锁"},
					{id:"3",name:"专属地锁"}
				],
				bindInfotypeshowdefaultvalue:[0],
				isswitchshow:false,
				allList:[],
				numList: [{
					name: '绑定地锁'
				}, {
					name: '等待审核'
				}, {
					name: '完成绑定'
				}],
			};
		},
		onLoad(op) {
			this.userInfo = this.jphelp.getPersonInfo()
			
			this.bindInfo.phone=this.userInfo.phone
			if(op.id){
				this.id=op.id
				uni.setNavigationBarTitle({
					title: "修改地锁"
				})
				this.getFloorlockDetails()
			}
		},
		computed:{
			columns(){
				var sz=[]
				for(var i in this.allList){
					var obj=this.allList[i]
					
					
					sz.push({
						value:obj.id,
						label:obj.name
					})
				}
				
				return sz
			}
		},
		methods:{
			bindInfotypeconfirm(e){
				console.log(e)
				this.bindInfo.typeN=e[0].label
				this.bindInfo.type=e[0].value
			},
			gotobindInfotypeshow(){
				if(this.bindInfo.type){
					this.bindInfotypeshowdefaultvalue=[parseInt(this.bindInfo.type)-1]
				}
				this.bindInfotypeshow=true;
			},
			getFloorlockDetails() {
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj = {
					id: this.id
				}
			
				API.floorlockDetails(obj).then((res) => {
					this.bindInfo.id = res.data.floorlockInfo.id
					
					this.bindInfo.lockNo = res.data.floorlockInfo.lockNo
					this.bindInfo.name = res.data.floorlockInfo.contacts
					this.bindInfo.phone = res.data.floorlockInfo.contactPhone
					this.bindInfo.lockName = res.data.floorlockInfo.name
					
					
					if(res.data.parkingInfo&&res.data.parkingInfo.id){
						this.bindInfo.parkingId=res.data.parkingInfo.id
						this.bindInfo.parkingIdN=res.data.parkingInfo.name
						this.bindInfo.parkingName=res.data.parkingInfo.name
						this.bindInfo.buildMode=res.data.parkingInfo.buildMode
						
					}
					this.bindInfo.type = res.data.floorlockInfo.type
					this.bindInfotypelist.forEach(item=>{
						if(item.id==this.bindInfo.type){
							this.bindInfo.typeN=item.name
						}
					})
					
					
					if(this.bindInfo.buildMode==2){
						this.bindInfo.latitude = res.data.parkingInfo.latitude
						this.bindInfo.longitude = res.data.parkingInfo.longitude
						this.bindInfo.address = res.data.parkingInfo.address
						
					}else{
						this.bindInfo.latitude = res.data.floorlockInfo.latitude
						this.bindInfo.longitude = res.data.floorlockInfo.longitude
						this.bindInfo.address = res.data.floorlockInfo.locationAddress
						
					}
					
					
					
					uni.hideLoading();
					
				}).catch(error => {
			
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			gotoSelectParking(){
				uni.navigateTo({
				  url: '/pages/mylock/selectParking?type='+this.bindInfo.type,
				  events: {
				    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				    acceptDataFromOpenerPage: (item)=>{
						console.log(item)
						this.bindInfo.parkingIdN=item.data
						this.bindInfo.parkingId=item.dataid
						this.bindInfo.parkingName=item.data
						this.bindInfo.buildMode=item.datatype
						
						if(item.datatype==2){
							this.bindInfo.latitude = item.item.latitude
							this.bindInfo.longitude = item.item.longitude
							this.bindInfo.address = item.item.address
							
						}
						
						this.$forceUpdate()
						
				    },
				 
				  }
				  // ,
				  // success: function(res) {
				  //   // 通过eventChannel向被打开页面传送数据
				  //  
				  // }
				})
			},
			chooseLocationsuccess(res){
				console.log('位置名称：' + res.name);
				console.log('详细地址：' + res.address);
				console.log('纬度：' + res.latitude);
				console.log('经度：' + res.longitude);
				this.bindInfo.address=res.address
				this.bindInfo.latitude=res.latitude
				this.bindInfo.longitude=res.longitude
			},
			getUserLocation(){
				if(this.bindInfo.buildMode==2){
					uni.showToast({
						title: "平台运营停车场不能修改定位",
						icon: "none"
					})
					return
				}
				var _this=this;
				// #ifdef H5
					
					this.bindInfo.address='湖北省荆州市'
					this.bindInfo.latitude='30.31098'
					this.bindInfo.longitude='112.25494'
					
				// #endif
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						
						uni.chooseLocation({
							success: function (res) {
								_this.chooseLocationsuccess(res)
							}
						});
					}
				})
					// #endif
				
			},
			switchBtn(e){
				this.columnsindex=[e[0]]
				var obj=this.columns[e[0]]
				this.bindInfo.parkingId=obj.value
				this.bindInfo.parkingIdN=obj.label
			},
			isswitchshowBtn(){
				if(this.allList.length){
					this.isswitchshow=true
				}else{
					this.getParkingList()
				}
				
			},
			getParkingList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj = {
					pageIndex: 1,
					pageSize: 900,
					type:"bindLock"
					
				}
				
				API.parkingList(obj).then((res) => {
			
					this.allList = res.data.data
					this.isswitchshow=true
					uni.hideLoading();
			
				}).catch(error => {
			
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
			
				})
			},
			submit(){
				
				if(!this.bindInfo.lockNo){
					uni.showToast({
						title: "请扫码识别地锁",
						icon: "none"
					})
					return
				}
				if(!this.bindInfo.name){
					uni.showToast({
						title: "请填写用户真实姓名",
						icon: "none"
					})
					return
				}
				if(!this.bindInfo.phone){
					uni.showToast({
						title: "请填写手机号码",
						icon: "none"
					})
					return
				}
				if(!this.bindInfo.type){
					uni.showToast({
						title: "请选择地锁类型",
						icon: "none"
					})
					return
				}
				if(!this.bindInfo.parkingIdN){
					uni.showToast({
						title: "请选择所属停车场",
						icon: "none"
					})
					return
				}
				
				
				if(!this.bindInfo.lockName){
					uni.showToast({
						title: "请填写地锁名称",
						icon: "none"
					})
					return
				}
				
				if(!this.bindInfo.address){
					uni.showToast({
						title: "点击获取地锁定位信息",
						icon: "none"
					})
					return
				}
				if(this.bindInfo.type==3&&this.bindInfo.buildMode!=2){
					uni.showToast({
						title: "专属停车位只能选择运营停车场",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if(this.bindInfo.id){
					API.updateLock( this.bindInfo ).then((res) => {
					
						uni.navigateBack()
						
								 
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}else{
					API.add( this.bindInfo ).then((res) => {
					
						uni.redirectTo({
							url:"/pages/mylock/bindLockStatus?id="+this.nowscan.id
						})
							uni.hideLoading();
						
								 
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
				
				
				
			},
			gotoscanMP(){
				// 允许从相机和相册扫码
				var _this=this
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						_this.getscan(res.result)
					}
				});
			},
			gotoscan() {
				if(this.id){
					return
				}
				// #ifdef H5
					this.gotoscanH5()
				// #endif
				
				// #ifdef MP-WEIXIN
					
						this.gotoscanMP()
				// #endif
			},
			getscan(val) {
			 	
			 	
			 	uni.showLoading({
			 		title: "加载中",
			 		mask: true,
			 	})
			 	API.bindStatusByNo({
			 		lockNo: val,
			 
			 	}).then((res) => {
			 		uni.hideLoading();
					 
			 		if (res.data.openBind) {
			 			
			 			var nowscan=res.data.floorlockInfoList;
						if(nowscan&&nowscan.length){
							this.nowscan=nowscan[0];
							this.bindInfo.lockNo=nowscan[0].lockNo
							this.bindInfo.type=nowscan[0].type
						
							this.bindInfo.lockName="智泊地锁"
						}
						
			 			uni.showToast({
			 				title: "扫码成功",
			 				icon: "none"
			 			})
			 
			 
			 		} else {
			 			uni.showToast({
			 				title: "当前地锁不可绑定",
			 				icon: "none"
			 			})
						
			 		}
			 
			 	}).catch(error => {
			 		uni.showToast({
			 			title: error,
			 			icon: "none"
			 		})
			 	})
			 },
			gotoscanH5() {
				console.log('111')
				
				var _this = this;
				uni.showModal({
					title: '提示',
					editable: true,
					//content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							_this.getscan(res.content)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			
			
			},
		}
	}
</script>
<style>
	page {
		background-color: rgba(242, 244, 246, 1);
	}
</style>
<style lang="scss" scoped>
	 

	.body {
		padding: 32rpx;
	}
	.list{
		background-color: rgba(255,255,255,1);
		
		margin: 20rpx 0;
		.item:not(:last-child) {
		  border-bottom:1px solid rgba(232,232,232,1);
		}
		
		.item{
			padding: 32rpx;
			display: flex;
			    justify-content: space-between;
			.name{
				    width: 40%;
					font-size: 32rpx;
					color: #777777;
					span{
						color:red
					}
					white-space: pre;
			}
			.value{
				font-size: 32rpx;
				    width: 60%;
				display: flex;
				    justify-content: space-between;
					input::placeholder{
						color:#AAAAAA;
					}
					.img{
						width: 40rpx;
						height: 40rpx;
						
					}
			}
		}
		.tips{
			    color: rgb(187, 187, 187);
			    text-align: end;
			    margin-right: 32rpx;
				padding:0;
				    justify-content: flex-end;
		}
	}
	.uni-input-placeholder{
		color:#AAAAAA;
	}
	
	.floating-button {
		position: fixed; 
		  bottom: 0;    /* 距离底部 20px */
		    width: 100%;
			 display: flex;
			  height: 120rpx;
			    justify-content: center;
			background-color: rgba(255,255,255,1);
			.button{
				margin-top: 24rpx;
				border-radius: 50px;
			 height: 80rpx;
				width: 80%;
				display: flex;
				    align-items: center;
				    justify-content: center;
					padding:12rpx;
					
					background-color: rgba(22,119,255,1);
					color: rgba(255,255,255,1);
					font-size: 36rpx;
			}
	}
	
	.buildMode{
		font-size: 24rpx;
		    border: 1px solid #bbbbbb;
		    border-radius: 4px;
		    color: #1677ff;
		    padding: 2rpx 8rpx;
		    margin:0 8rpx;
			
	}
	.buildMode1{
		color: #1677ff;
		border: 1px solid #1677ff;
	}
	.buildMode2{
		color:#4CAF50;
		border: 1px solid #4CAF50;
	}
	
</style>