CommunityApp/pages/auth/auth.vue

<template>
	<view style="background-color: #FFFFFF;min-height: 100vh;">
		<view class="flex justify-between " style="padding: 30rpx;box-sizing: border-box;">
			<view class="" style="font-size: 38rpx;">
				<text class="text-bold text-black">您要申请的小区</text>
			</view>
			<view class="text-red"  style="padding-top: 12rpx;">
				<text style="font-size: 38rpx;">{{totalStep-1}}</text>
				<text class="text-df">/{{totalStep}}</text>
			</view>
		</view>
		<view class="padding-top-30  cu-list menu">
			
			<view @click="jump(0)" class="cu-item arrow" >
				<view class="content">
					<image style="width: 50rpx; height: 50rpx;margin: 0 20rpx 4rpx 0;" 
					src="/static/common/city2.png" class="png" mode="aspectFit"></image>
					<text class="text-black text-bold">城市</text>
				</view>
				<view class="action">
					<text class="text-grey text-df">
						{{$isEmpty(city_county_name)?'请选择城市':city_county_name}}
					</text>
				</view>
			</view>
			<view @click="jump(1)" class="cu-item arrow" >
				<view class="content">
					<image style="width: 50rpx; height: 50rpx;margin: 0 20rpx 0rpx 0;" 
					src="/static/common/xiaoqu.png" class="png" mode="aspectFit"></image>
					<text class="text-black text-bold">小区</text>
				</view>
				<view class="action">
					<text class="text-grey text-df">
						{{$isEmpty(data.residential_name)?'请选择小区':data.residential_name}}
					</text>
				</view>
			</view>
			<view @click="jump(2)" class="cu-item arrow" >
				<view class="content">
					<image style="width: 50rpx; height: 50rpx;margin: 0 20rpx 10rpx 0;" 
					src="/static/common/loudong.png" class="png" mode="aspectFit"></image>
					<text class="text-black text-bold">楼栋</text>
				</view>
				<view class="action">
					<text class="text-grey text-df">
						{{$isEmpty(data.building_name)?'请选择楼栋':data.building_name}}
					</text>
				</view>
			</view>
			
			<view @click="jump(3)" class="cu-item arrow" >
				<view class="content">
					<image style="width: 36rpx; height: 36rpx;margin: 0 24rpx 10rpx 10rpx;" 
					src="/static/common/unit.png" class="png" mode="aspectFit"></image>
					<text class="text-black text-bold">单元</text>
				</view>
				<view class="action">
					<text class="text-grey text-df">
						{{$isEmpty(data.unit_name)?'请选择楼栋':data.unit_name}}
					</text>
				</view>
			</view>
			
			<view @click="jump(4)" class="cu-item arrow" >
				<view class="content">
					<image style="width: 50rpx; height: 50rpx;margin: 0 20rpx 10rpx 0;" 
					src="/static/common/fangjian.png" class="png" mode="aspectFit"></image>
					<text class="text-black text-bold">门牌号</text>
				</view>
				<view class="action">
					<text class="text-grey text-df">
						{{$isEmpty(data.room_name)?'请选择门牌号':data.room_name}}
					</text>
				</view>
			</view>
		</view>
		<view  class="footer-fixed" @click="next" :style="{marginBottom:safeAreaBottom +'rpx'}">
			<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	var app=getApp()
	export default {
		data() {
			return {
				totalStep:3,
				
				//小区id
				residential_id:'',
				//楼栋id
				unit_id:'',
				data:{
					//小区
					residential_name:"",
					//楼栋
					building_name:'',
					//楼栋id
					building_id:'',
					//单元
					unit_name:"",
					//房间名
					room_name:"",
					//房间id
					room_id:"",
				},
				//城市
				city_county_name:''
			}
		},
		onShow() {
			if(this.$isEmpty(app.globalData.totalStep)){
				this.totalStep=2
			}else{
				this.totalStep=app.globalData.totalStep
			}
			this.residential_id=app.globalData.residentialId || ''
			this.unit_id=app.globalData.unitId || ''
		},
		onLoad(options){
			console.log(options);
			if(!this.$isEmpty(options)){
				//页面数据
				this.city_county_name=app.globalData.city+app.globalData.county
				this.data.room_id=options.room_id
				this.data.room_name=options.room_name
				this.data.residential_name=options.residential_name
				this.data.building_name=options.building_name
				this.data.building_id=options.building_id
				this.data.unit_name=options.unit_name
			}
		},
		methods: {
			jump(type){
				let that=this
				if(type==0){
					//选择城市
					let params={
						city:app.globalData.city,
						county:app.globalData.county,
						currentCityCode:app.globalData.currentCityCode
					}
					uni.navigateTo({
						url:"../choosePlot/choosePlot"+this.$u.queryParams(params)
					})
					return
				}
				//未选择城市
				if(this.$isEmpty(this.city_county_name)){
					uni.showToast({
						title:"请选择城市",
						icon:"none"
					})
					return
				}
				if(type==1){
					//选择小区
					let params={
						city:app.globalData.city,
						county:app.globalData.county,
						currentCityCode:app.globalData.currentCityCode
					}
					uni.navigateTo({
						url:"../choosePlot/choosePlot"+this.$u.queryParams(params)
					})
					return
				}
				//未选择小区
				if(this.$isEmpty(this.data.residential_name)){
					uni.showToast({
						title:"请选择小区",
						icon:"none"
					})
					return
				}
				if(type==2){
					//选择楼栋
					let params={
						residential_id:this.residential_id,
						residential_name:this.data.residential_name
					}
					uni.navigateTo({
						url:"../choosePlot/chooseBuilding/chooseBuilding"+this.$u.queryParams(params)
					})
					return
				}
				
				//未选择楼栋
				if(this.$isEmpty(this.data.building_name)){
					uni.showToast({
						title:"请选择楼栋",
						icon:"none"
					})
					return
				}
				
				if (type==3) {
					//选择单元
					let params={
						residential_name:this.data.residential_name,
						building_id:this.data.building_id,
						building_name:this.data.building_name
					}
					uni.navigateTo({
						url:"../choosePlot/chooseUnit/chooseUnit"+this.$u.queryParams(params)
					})
				}
				
				if(type==4){
					//选择房间
					let params={
						residential_name:this.data.residential_name,
						building_name:this.data.building_name,
						building_id:this.data.building_id,
						unit_name:this.data.unit_name,
						unit_id:this.unit_id
					}
					uni.navigateTo({
						url:"/pages/choosePlot/chooseRoom/chooseRoom"+this.$u.queryParams(params)
					})
				}
			},
			next(){
				if(this.$isEmpty(this.city_county_name)){
					uni.showToast({
						title:"请选择城市",
						icon:"none"
					})
					return
				}
				if(this.$isEmpty(this.data.residential_name)){
					uni.showToast({
						title:"请选择小区",
						icon:"none"
					})
					return
				}
				
				if(this.$isEmpty(this.data.building_name)){
					uni.showToast({
						title:"请选择楼栋",
						icon:"none"
					})
					return
				}
				
				if(this.$isEmpty(this.data.unit_name)){
					uni.showToast({
						title:"请选择单元",
						icon:"none"
					})
					return
				}
				
				if(this.$isEmpty(this.data.room_id)||this.$isEmpty(this.data.room_name)){
					uni.showToast({
						title:"请选择门牌号",
						icon:"none"
					})
					return
				}
				let params=this.$u.deepClone(this.data)
				params.residentialId=this.residential_id
				params.unitId=this.unit_id
				uni.navigateTo({
					url:"../choosePlot/householdCert/householdCert"+this.$u.queryParams(params)
				})
			}
		}
	}
</script>

<style lang="scss">
view,
button{
    box-sizing: border-box;
}
.cu-list.menu>.cu-item.arrow {
    padding-right: 36px;
}

.bg-gray{
	background-color: #a1a1a1;
	color: #FFFFFF;
}
</style>