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

<template>
	<view class="jpmain  ">
		<u-picker mode="selector"
		 v-model="isswitchshow" 
		 :range="columns" range-key="label"
		  :default-selector="columnsindex"
		   @confirm="switchBtn" ></u-picker>
		
	<!-- 	<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><img class="img" src="@/assets/img/mylock/item3.svg" alt=""></view>
					</view>
				</view>
		
				
				<view class="item">
					<view class="name">
						联系电话

					</view>
					<view class="value">
						{{bindInfo.phone}}
					</view>
				</view>
			</view>

			<view class="list">
				<view class="item"  >
					<view class="name">
						<span>*</span>所属停车场

					</view>
					<view class="value" @click="isswitchshowBtn">
						<view :style="bindInfo.parkingIdN?'':'color:#BBB'"
						>{{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">
						<view>
							<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>
						<!-- <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.name" />
					</view>
				</view>
				<view class="item">
					<view class="name">
						<span></span>停车位编号


					</view>
					<view class="value">
						<input placeholder="如1号车位" v-model="bindInfo.parkingNumber" />
					</view>
				</view>
				<view class="item">
					<view class="name">
						位置描述

					</view>
					<view class="value">
						<input v-model="bindInfo.describe" placeholder="请描述车位位置信息" />
					</view>
				</view>
				<view class="item">
					<view class="name">
						获取定位
				
					</view>
					<view class="value" @click="getUserLocation" >
						<view :style="bindInfo.parkingIdN?'':'color:#BBB'"
						>{{bindInfo.parkingIdN?bindInfo.parkingIdN:'点击获取车位定位信息'}}</view>
						<view><img class="img" src="@/assets/img/mylock/item5.svg" alt=""></view>
					</view>
				</view>
			<view class="floating-button">
				<view class="button"  @click="submit" >
					
					提交
				</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:"",
					phone:"",
					lockNo:"",
					type:"",
					remark:""
				},
				bindInfotypelist:[
					{id:"1",name:"公共车位"},
					{id:"2",name:"私人车位"}
				],
				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
			}
		},
		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:{
			getUserLocation(){
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						
						uni.chooseLocation({
							success: function (res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
							}
						});
					}
				})
				
			},
			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.parkingId){
					uni.showToast({
						title: "请选择所属停车场",
						icon: "none"
					})
					return
				}
				if(!this.bindInfo.type){
					uni.showToast({
						title: "请选择车位类型",
						icon: "none"
					})
					return
				}
				
				if(!this.bindInfo.name){
					uni.showToast({
						title: "请填写地锁名称",
						icon: "none"
					})
					return
				}
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				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() {
				
				// #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.name="智泊地锁"
						}
						
			 			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;
						
					}
			}
		}
	}
	.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;
			}
	}
	
</style>