弹窗

pages/housePurchase/housePurchase.vue

@@ -6,7 +6,7 @@
 			<img src="../../static/images/banner.png" alt="banner" srcset="">
 			<img src="../../static/images/banner.png" alt="banner" srcset="">
 		</view>	
 		</view>	
 		<scroll-view scroll-y="true" class="formInfoContainer" id="formInfoContainer">
 		<scroll-view scroll-y="true" class="formInfoContainer" id="formInfoContainer">
-			<form @submit="formSubmit" @reset="formReset">
+			<form>
 				<!--需求信息-->
 				<!--需求信息-->
 					<view class="demandInfo">
 					<view class="demandInfo">
 						<view class="title">
 						<view class="title">
@@ -24,8 +24,8 @@
 						</view>
 						</view>
 						<view class="inputItem">
 						<view class="inputItem">
 							<text>预购城市：</text>
 							<text>预购城市：</text>
-							<uni-data-picker placeholder="请选择地区" popup-title="请选择所在地区" :localdata="provinceList" v-model="classes"
-											@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
+							<uni-data-picker placeholder="请选择地区" popup-title="请选择所在地区" :localdata="provinceList"
+											@change="onchange" @nodeclick="onnodeclick">
 										</uni-data-picker>
 										</uni-data-picker>
 						</view>
 						</view>
 						<view class="inputItem">
 						<view class="inputItem">
@@ -169,7 +169,7 @@
 							<view>
 							<view>
 								规划参数
 								规划参数
 							</view>
 							</view>
-							<view class="view" @click="isPlan = true">
+							<view class="view" @click="paramsSelected=dialogIsShow=true">
 								查看
 								查看
 							</view>
 							</view>
 						</view>
 						</view>
@@ -254,11 +254,17 @@
 		<!--底部技术支持组件-->
 		<!--底部技术支持组件-->
 		<foot></foot>
 		<foot></foot>
 	</view>
 	</view>
-	<view class="mask">
-		<!--旧房贷款余额组件-->
-		<loanBalance @closeLoan="closeChildLoan" :getChildLoanInfo="getChildLoanInfo" v-show="isLoanSelected"></loanBalance>
-		<!--规划参数组件-->
-		<planningParameters></planningParameters>
+	<view class="mask" v-if="dialogIsShow">
+		<view class="content">
+			<!-- 关闭按钮 -->
+			<div class="closeBtn" @click="closeBtn()">
+				<svg t="1663922894848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2545" width="26" height="26"><path d="M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z" p-id="2546"></path></svg>
+			</div>
+			<!--旧房贷款余额组件-->
+			<loanBalance :getChildLoanInfo="getChildLoanInfo" v-if="isLoanSelected"></loanBalance>
+			<!--规划参数组件-->
+			<planningParameters v-if="paramsSelected"></planningParameters>
+		</view>
 	</view>
 	</view>
 </template>
 </template>
 
 
@@ -274,8 +280,10 @@
 	export default{
 	export default{
 		data(){
 		data(){
 			return{
 			return{
+				dialogIsShow:false,//弹窗显示与隐藏
 				isDisplace:false,
 				isDisplace:false,
 				isLoanSelected:false,
 				isLoanSelected:false,
+				paramsSelected:false,
 				myChart:null,
 				myChart:null,
 				provinceList: [],
 				provinceList: [],
 				housePurchaseInfo:{
 				housePurchaseInfo:{
@@ -404,8 +412,8 @@
 						this.housePurchaseInfo.cityCode = this.housePurchaseInfo.cityName = null;
 						this.housePurchaseInfo.cityCode = this.housePurchaseInfo.cityName = null;
 					}
 					}
 			},
 			},
-			closeChildLoan(){
-				this.isLoanSelected = false;
+			closeBtn(){
+				this.isLoanSelected = this.paramsSelected = this.dialogIsShow = false;
 			},
 			},
 			getChildLoanInfo(houseLoanOldList){
 			getChildLoanInfo(houseLoanOldList){
 				//获取旧房贷款信息
 				//获取旧房贷款信息
@@ -415,13 +423,7 @@
 			//打开房屋置换组件
 			//打开房屋置换组件
 			openLoan(){
 			openLoan(){
 				this.isDisplace = !this.isDisplace;
 				this.isDisplace = !this.isDisplace;
-				if(this.isDisplace == false){
-					this.isLoanSelected = false;
-				}else{
-					this.isLoanSelected = true;
-				}
-					
-				
+				this.isLoanSelected = this.dialogIsShow = true;
 			}
 			}
 		},
 		},
 		mounted(){
 		mounted(){
@@ -547,5 +549,31 @@
 			}
 			}
 		}
 		}
 	}
 	}
+	.mask{
+		position: fixed;
+		left: 0;
+		top: 0;
+		width:100%;
+		height:100%;
+		background:rgba(0,0,0,.35);
+		z-index: 2;
+		.content{
+			position: relative;
+			width: 95%;
+			height: 60vh;
+			margin: 10% auto;
+			border-radius: 0.3125rem;
+			background-color: #fff;
+			overflow-y: scroll;
+			box-shadow: 0 1px 5px 2px #8b8b8b;
+			padding-top: 70rpx;
+			.closeBtn{
+				position: absolute;
+				right: 20rpx;
+				top: 20rpx;
+			}
+		}
+		
+	}
 	
 	
 </style>
 </style>
\ No newline at end of file

pages/housePurchase/loanBalance.vue

 <template>
 <template>
 	<div class="mortgageCalculatorContainer">
 	<div class="mortgageCalculatorContainer">
-		<!-- 关闭按钮 -->
-		<div class="closeBtn" @click="closeBlan()">
-			<svg t="1663922894848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2545" width="26" height="26"><path d="M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z" p-id="2546"></path></svg>
-		</div>
 		<view class="tabTitle">
 		<view class="tabTitle">
 			<view v-for="item of loanTypeLists">
 			<view v-for="item of loanTypeLists">
 				<text :class="{ actived: item.value===loanType }" @click="selectLoanType(item.value)">{{item.text}}</text>
 				<text :class="{ actived: item.value===loanType }" @click="selectLoanType(item.value)">{{item.text}}</text>
@@ -241,24 +237,16 @@
 				// 旧房贷款信息集合
 				// 旧房贷款信息集合
 				console.log(this.houseLoanOldList)
 				console.log(this.houseLoanOldList)
 				this.getChildLoanInfo(this.houseLoanOldList);
 				this.getChildLoanInfo(this.houseLoanOldList);
-			},
-			closeBlan(){
-				//向父组件发送关闭弹窗
-				this.$emit('closeLoan')
 			}
 			}
+			
 		}
 		}
 	}
 	}
 </script>
 </script>
 
 
 <style lang="scss">
 <style lang="scss">
 	.mortgageCalculatorContainer{
 	.mortgageCalculatorContainer{
-		padding: 70rpx 20rpx;
+		padding: 0 20rpx 70rpx;
 		position: relative;
 		position: relative;
-		.closeBtn{
-			position: absolute;
-			right: 20rpx;
-			top: 20rpx;
-		}
 		.tabTitle{
 		.tabTitle{
 			display: flex;
 			display: flex;
 			margin-bottom: 30rpx;
 			margin-bottom: 30rpx;

pages/housePurchase/planningParameters.vue

 <template>
 <template>
 	<div class="paramsContainer">
 	<div class="paramsContainer">
-		<!-- 关闭按钮 -->
-		<div class="closeBtn">
-			<svg t="1663922894848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2545" width="26" height="26"><path d="M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z" p-id="2546"></path></svg>
-		</div>
 		<h5>规划参数<span>(点击参数值即可修改参数)</span></h5>
 		<h5>规划参数<span>(点击参数值即可修改参数)</span></h5>
 		<ul>
 		<ul>
 			<li v-for="item in editParamLists" :key="item.id">
 			<li v-for="item in editParamLists" :key="item.id">
@@ -102,7 +98,7 @@
 <style lang="scss">
 <style lang="scss">
 	.paramsContainer{
 	.paramsContainer{
 		background-color: #fff;
 		background-color: #fff;
-		padding: 44rpx 20rpx;
+		padding: 0 20rpx 44rpx;
 		h5{
 		h5{
 			position: relative;
 			position: relative;
 			color: #CEB07D;
 			color: #CEB07D;