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>
			<view class="item" @tap="pickerHouse">
				<view style="width: 26rpx;height: 26rpx;margin:29rpx 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;"  v-model="form.houseName"
				 disabled="true" placeholder="请选择小区名称" />
				<view class="selectIcon" >
					<image src="../../static/select_combo@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="item" style="margin-top:50rpx;" @tap="pickerLou">
				<view style="width: 26rpx;height: 26rpx;margin:32rpx 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;"  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>
			<view class="item" style="margin-top:50rpx;"  @tap="pickerHood">
				<view style="width: 26rpx;height: 26rpx;margin:32rpx 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;" 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>
			<view class="bottom"></view>
		</view>
		<!-- 发表按钮 -->
		<button class="btn" @tap="submit" :class="{active:form.houseName&&form.lou&&form.hoodNum}">发表</button>
		<!-- 选择小区名称组件 -->
		<lb-picker ref="houseName" :props="typeProps" :list="houseData" @confirm="confirm"></lb-picker>
		<!-- 选择楼层组件 -->
		<lb-picker ref="Lou" :list="louData" @confirm="confirmLou">></lb-picker>
		<!-- 选择单元号组件 -->
		<lb-picker ref="hoodNum" :list="hoodData" @confirm="confirmHoodNum"></lb-picker>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	export default {
		data() {
			return {
				phoneHeight: 0, //手机状态栏的高度
				lou: '',//楼层
				hoodNum: '',//单元号
				form: {
					houseName: '', //小区名称
					lou: '', //楼层
					hoodNum: '' //单元号
				},
				// 自定义选择组件字段
				typeProps:{
					label:'name',
					value:'value',
			
				},
				//小区名称数据
				houseData: [{
						name: '花园小区',
						value: 0,
						
					},
					{
						name: '番茄小区',
						value: 1,
						
					},
					{
						name: '蓬莱院',
						value: 2,
						
					},
				],
				//楼层数据
				louData: [{
						label: '一楼',
						value: 0,
						children: []
					},
					{
						label: '二楼',
						value: 1,
						children: []
					},
					{
						label: '三楼',
						value: 2,
						children: []
					},
				],
				//单元号数据
				hoodData: [{
						label: '101',
						value: 0,
						children: []
					},
					{
						label: '201',
						value: 1,
						children: []
					},
					{
						label: '301',
						value: 2,
						children: []
					},
				]
			}
		},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
		},
		mounted(){},
		methods: {
			// 获取小区数据
			getAreaData(){
				
			},
			//返回
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			//选择小区事件
			pickerHouse() {
				this.$refs.houseName.show()
			},
			// 选择楼层事件
			pickerLou() {
				this.$refs.Lou.show()
			},
			// 选择单元号事件
			pickerHood() {
				this.$refs.hoodNum.show()
			},
			//小区选择确定
			confirm(data) {
				console.log(data)
				this.form.houseName = data.item.name
				this.name = data.item.value
			},
			//楼层选择确定
			confirmLou(data) {
				this.form.lou = data.item.label
				this.lou = data.item.value
			},
			//单元号选择确定
			confirmHoodNum(data) {
				this.form.hoodNum = data.item.label
				this.hoodNum = data.item.value
			},
			// 发表
			submit() {
				// 判断信息是否选择完整
				  if(this.form.houseName&& this.form.lou&&this.form.hoodNum){
					  
					  uni.switchTab({
					  	url:"../index/index"
					  })
				  }else{
					  return
				  }
			}
		},
		components: {
			LbPicker
		}
	}
</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: 890rpx;
		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: 120rpx;
	}

	.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: 70rpx;
	}

	.item-input {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 54rpx;
		color: rgba(204, 204, 204, 1);
	}
	.active {
		background: rgba(41, 138, 253, 1);
	}
</style>