safetyHome_wxapp/pages/authentication/selectHouse.vue

<!-- 选择小区 -->
<template>
	<view class="pageBg">

		<!-- <image src="../../static/select_bgimage@2x.png" style="width: 100%;height: 100vh;"></image> -->
		<view class="backIcon" :style="{marginTop:phoneHeight+'rpx'}" @tap="back">
			<image src="../../static/icon_back@2x.png" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="infoBox">
			<view class="topTitle">
				选择小区住处
			</view>
			<view class="dec">获取详细的小区住处，登记您的信息</view>
			<picker mode="selector" @change="pickerHouse" :value="index" :range="houseData" range-key="comtyName"  class="item">
			<view class="item" style="margin-top: 0;">
				<view style="width: 26rpx;height: 26rpx;margin:28rpx 8rpx 32rpx 20rpx;">
					<image src="../../static/select_icon_village@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<input class="uni-input item-input" style="width:290rpx;height:40rpx;margin-top: 26rpx;" placeholder-class="holder"
				 v-model="form.houseName" disabled="true" placeholder="请选择小区名称" />
				 	 <!-- <view  style="width:290rpx;height:40rpx;margin-top: 26rpx;">{{form.houseName}}</view> -->
				<view class="selectIcon">
					<image src="../../static/select_combo@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			</picker>
			<!-- 楼号 -->
			<picker mode="selector" :range="louData" range-key="name" @change="pickerLou" class="item">
			<view class="item" style="margin-top:0rpx;" >
				<view style="width: 26rpx;height: 26rpx;margin:28rpx 8rpx 32rpx 20rpx;">
					<image src="../../static/select_icon_storey@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<input class="uni-input item-input" style="width:290rpx;height:40rpx;margin-top: 26rpx;" placeholder-class="holder"
				 v-model="form.lou" disabled="true" placeholder="请选择楼号" />
				<view class="selectIcon">
					<image src="../../static/select_combo@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			</picker>
			<!-- 单元号 -->
			<picker mode="selector" :range="hoodData" @change="pickerHood" range-key="name" class="item">
			<view class="item" style="margin-top:0rpx;" >
				<view style="width: 26rpx;height: 26rpx;margin:28rpx 8rpx 32rpx 20rpx;">
					<image src="../../static/select_icon_unit@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<input class="uni-input item-input" style="width:290rpx;height:40rpx;margin-top: 26rpx;" placeholder-class="holder"
				 v-model="form.hoodNum" disabled="true" placeholder="请选择单元号" />
				<view class="selectIcon">
					<image src="../../static/select_combo@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			</picker>
			<!-- 楼层 -->
			<picker mode="selector" :range="cengData" @change="pickerCeng" range-key="name" class="item">
			<view class="item" style="margin-top:0rpx;">
				<view style="width: 26rpx;height: 26rpx;margin:28rpx 8rpx 32rpx 20rpx;">
					<image src="../../static/ceng.png" style="width: 100%;height: 100%;"></image>
				</view>
				<input class="uni-input item-input" style="width:290rpx;height:40rpx;margin-top: 26rpx;" placeholder-class="holder"
				 v-model="form.ceng" disabled="true" placeholder="请选择楼层" />
				<view class="selectIcon">
					<image src="../../static/select_combo@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			</picker>
			<!-- 房屋号 -->
			<picker mode="selector" :range="homeData" @change="pickerHome" class="item" range-key="name">
			<view class="item" style="margin-top:0rpx;">
				<view style="width: 26rpx;height: 26rpx;margin:28rpx 8rpx 32rpx 20rpx;">
					<image src="../../static/homeNum.png" style="width: 100%;height: 100%;"></image>
				</view>
				<input class="uni-input item-input" style="width:290rpx;height:40rpx;margin-top: 26rpx;" placeholder-class="holder"
				 v-model="form.home" disabled="true" placeholder="请选择门牌号" />
				<view class="selectIcon">
					<image src="../../static/select_combo@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			</picker>
			<view class="bottom"></view>
		</view>
		<!-- 发表按钮 -->
		<button class="btn" @tap="submit" :class="{active:form.houseName&&form.lou&&form.hoodNum&&form.home}" >发表</button>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				index:0,
				isLoading: false, //按钮加载
				cityName: '',
				phoneHeight: 0, //手机状态栏的高度
				name:'',//小区id
				lou: '', //楼层
				hoodNum: '', //单元号
				home: '', //房屋号
				ceng: '', //层
				form: {
					ceng: '', //楼层
					houseName: '', //小区名称
					lou: '', //楼层
					hoodNum: '', //单元号
					home: '', //房屋号
				},
				// 自定义选择组件字段
				typeProps: {
					label: 'comtyName',
					value: 'comtyId',

				},
				selectProps: {
					label: 'name',
					value: 'id'
				},
				// 楼层数据
				cengData:[],
				//门牌号数据
				homeData: [],
				//小区名称数据
				houseData: [],
				//楼层数据
				louData: [],
				//单元号数据
				hoodData: []
			}
		},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
			this.getAreaData()
		},
		mounted() {},
		methods: {
			// 获取小区数据
			getAreaData() {
				this.http.httpRequest('/wxapplet/ownerbasehouse/comtylist', 'get', {
					ssxqdm: uni.getStorageSync('cityId')
				}).then((res) => {
					this.houseData = res.data
				})
			},
			// 获取楼栋数据
			getLouData(id, num, pid, type) {
				this.http.httpRequest('/wxapplet/ownerbasestruct/getStruct', 'get', {
					comtyId: Number(id),
					layer: num,
					parentId: pid
				}).then((res) => {
					if (type == 'lou') {
						this.louData = res.data
					} else if (type == '单元') {
						this.hoodData = res.data
					} else if (type == '层') {
						this.cengData = res.data
					} else {
						this.homeData = res.data
					}
				})
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 选择楼层
			pickerCeng(e) {
				this.form.home=''
				this.home=''
				this.form.ceng=this.cengData[e.target.value].name
				this.ceng=this.cengData[e.target.value].id
				this.getLouData(this.name,4,this.ceng,'门牌')
			},
			// 选择房屋号
			pickerHome(e) {
				this.form.home=this.homeData[e.target.value].name
				this.home =this.homeData[e.target.value].id
				console.log(this.home)
			},
			//选择小区事件
			pickerHouse(e) {
				this.form.lou = ''
				this.form.hoodNum = ''
				this.form.home = ''
				this.lou = ''
				this.form.ceng=''
				this.ceng=''
				this.hoodNum = '',
					this.home = ''
				this.index=Number(e.target.value)
				this.form.houseName=this.houseData[this.index].comtyName
				this.name=this.houseData[this.index].comtyId
				uni.setStorageSync('comtyId', this.name)
				this.getLouData(this.name, 1, '', 'lou')
			},
			// 选择楼层事件
			pickerLou(e) {
				this.form.hoodNum = '' //单元号
				this.form.home = ''
				this.hoodNum = '',
				this.home = ''
				this.form.ceng=''
				this.ceng=''
				this.form.lou=this.louData[e.target.value].name
				this.lou=this.louData[e.target.value].id
				this.getLouData(this.name, 2, this.lou, '单元')
			},
			// 选择单元号事件
			pickerHood(e) {
				this.form.home = ''
				this.home = ''
				this.form.ceng=''
				this.ceng=''
				this.form.hoodNum=this.hoodData[e.target.value].name
				this.hoodNum=this.hoodData[e.target.value].id
				this.getLouData(this.name, 3,this.hoodNum , '层')
			},
			// 发表
			submit() {
				// 判断信息是否选择完整
				if (this.form.houseName && this.form.lou && this.form.hoodNum && this.form.home && this.form.ceng) {
					uni.showLoading({
						mask:true,
						title:'加载中'
					})
					 this.http.httpRequest('/wxapplet/ownersidpeoinfor/add','post',{
						 phoneNum:uni.getStorageSync('phoneNumber'),
						 cardNo:uni.getStorageSync('idNumber'),
						 comtyId:this.name,
						 zzjgid:this.home
					 }).then((res)=>{
						 if(res.code==0){
							 uni.setStorageSync('homeId',this.home)
							 let str=this.form.houseName+this.form.lou+this.form.hoodNum+this.form.home
							 uni.setStorageSync('homeAdress',str)
							 // 判断认证房屋时  是否已经微信授权登录过了
							 if (!uni.getStorageSync('createBy')) {
							 	uni.navigateTo({
							 		url: '../login/authorization'
							 	})
							 } else { 
							 	uni.switchTab({
							 	url: '../index/index'	
							 	})
							 }
							 uni.hideLoading()
						 }else{
							  uni.hideLoading()
							 uni.showToast({
							 	title:res.msg,
								'icon':'none'
							 })
						 }
					 }).catch(()=>{
						  uni.hideLoading()
					 })
					
				} else {
					return
				}
			}
		},
		components: {
			
		}
	}
</script>

<style>
	.backIcon {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		left: 24rpx;
		top: 30rpx;
	}

	.btn {
		width: 590rpx;
		height: 90rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 90rpx;
		color: rgba(255, 255, 255, 1);
		background: rgba(163, 197, 237, 1);
		opacity: 1;
		position: absolute;
		top: 1160rpx;
		left: 80rpx;
	}

	.selectIcon {
		width: 17rpx;
		height: 12rpx;
		position: absolute;
		bottom: 60rpx;
		right: 30rpx;
	}

	.bottom {
		width: 642rpx;
		height: 42rpx;
		background: linear-gradient(84deg, rgba(64, 151, 255, 1) 0%, rgba(141, 193, 255, 1) 100%);
		opacity: 1;
		border-radius: 0rpx 0rpx 24rpx 24rpx;
		position: absolute;
		bottom: 0;
	}

	.pageBg {
		width: 100%;
		height: 100vh;
		background: url(../../static/select_bgimage@2x.png);
		background-size: 100% 100%;
	}

	.infoBox {
		position: relative;
		width: 642rpx;
		height: 950rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20px rgba(156, 202, 255, 0.36);
		opacity: 1;
		border-radius: 20px;
		/* margin: 0 auto; */
		/* margin-top: 190rpx; */
		overflow: hidden;
		position: absolute;
		top: 190rpx;
		left: 54rpx;
	}

	.topTitle {
		width: 348rpx;
		height: 80rpx;
		font-size: 56rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 54rpx;
		color: rgba(41, 138, 253, 1);
		opacity: 1;
		margin: 0 auto;
		margin-top: 55rpx;
	}

	.dec {
		width: 532rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 54rpx;
		color: rgba(153, 153, 153, 1);
		margin: 0 auto;
		margin-top: 16rpx;
		opacity: 1;
	}

	.item {
		position: relative;
		display: flex;
		width: 590rpx;
		height: 90rpx;
		border: 2rpx solid rgba(247, 247, 247, 1);
		opacity: 1;
		border-radius: 12rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.item-input {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 54rpx;
		color: rgba(51, 51, 51, 1);
	}

	.active {
		background: rgba(41, 138, 253, 1);
	}

	.holder {
		color: rgba(204, 204, 204, 1);
	}
</style>