Skip to content

S
sfp-program
Commit ea3994a7 by Sweet Zhang
Options

弹窗

parent c5b94f78
Showing with 48 additions and 35 deletions
pages/housePurchase/housePurchase.vue
......@@ -6,7 +6,7 @@
<img src="../../static/images/banner.png" alt="banner" srcset="">
</view>
<scroll-view scroll-y="true" class="formInfoContainer" id="formInfoContainer">
<form @submit="formSubmit" @reset="formReset">
<form>
<!--需求信息-->
<view class="demandInfo">
<view class="title">
......@@ -24,8 +24,8 @@
</view>
<view class="inputItem">
<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>
</view>
<view class="inputItem">
......@@ -169,7 +169,7 @@
<view>
规划参数
</view>
<view class="view" @click="isPlan = true">
<view class="view" @click="paramsSelected=dialogIsShow=true">
查看
</view>
</view>
......@@ -254,11 +254,17 @@
<!--底部技术支持组件-->
<foot></foot>
</view>
<view class="mask">
<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 @closeLoan="closeChildLoan" :getChildLoanInfo="getChildLoanInfo" v-show="isLoanSelected"></loanBalance>
<loanBalance :getChildLoanInfo="getChildLoanInfo" v-if="isLoanSelected"></loanBalance>
<!--规划参数组件-->
<planningParameters></planningParameters>
<planningParameters v-if="paramsSelected"></planningParameters>
</view>
</view>
</template>
......@@ -274,8 +280,10 @@
export default{
data(){
return{
dialogIsShow:false,//弹窗显示与隐藏
isDisplace:false,
isLoanSelected:false,
paramsSelected:false,
myChart:null,
provinceList: [],
housePurchaseInfo:{
......@@ -404,8 +412,8 @@
this.housePurchaseInfo.cityCode = this.housePurchaseInfo.cityName = null;
}
},
closeChildLoan(){
this.isLoanSelected = false;
closeBtn(){
this.isLoanSelected = this.paramsSelected = this.dialogIsShow = false;
},
getChildLoanInfo(houseLoanOldList){
//获取旧房贷款信息
......@@ -415,13 +423,7 @@
//打开房屋置换组件
openLoan(){
this.isDisplace = !this.isDisplace;
if(this.isDisplace == false){
this.isLoanSelected = false;
}else{
this.isLoanSelected = true;
}
this.isLoanSelected = this.dialogIsShow = true;
}
},
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>
\ No newline at end of file
pages/housePurchase/loanBalance.vue
<template>
<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 v-for="item of loanTypeLists">
<text :class="{ actived: item.value===loanType }" @click="selectLoanType(item.value)">{{item.text}}</text>
......@@ -241,24 +237,16 @@
// 旧房贷款信息集合
console.log(this.houseLoanOldList)
this.getChildLoanInfo(this.houseLoanOldList);
},
closeBlan(){
//向父组件发送关闭弹窗
this.$emit('closeLoan')
}
}
}
</script>
<style lang="scss">
.mortgageCalculatorContainer{
padding: 70rpx 20rpx;
padding: 0 20rpx 70rpx;
position: relative;
.closeBtn{
position: absolute;
right: 20rpx;
top: 20rpx;
}
.tabTitle{
display: flex;
margin-bottom: 30rpx;
......
pages/housePurchase/planningParameters.vue
<template>
<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>
<ul>
<li v-for="item in editParamLists" :key="item.id">
......@@ -102,7 +98,7 @@
<style lang="scss">
.paramsContainer{
background-color: #fff;
padding: 44rpx 20rpx;
padding: 0 20rpx 44rpx;
h5{
position: relative;
color: #CEB07D;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment