贷款计算器

App.vue

@@ -130,5 +130,10 @@
 		border: none;
 		color: #6B4000;
 	}
+	ul,li{
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
 	
 </style>

pages.json

@@ -27,6 +27,13 @@
 				"topWindow": false,
 				"navigationBarTitleText": "购房能力测算"	
 			}
+		},
+		{
+			"path": "pages/housePurchase/loanBalance",
+			"style": {
+				"topWindow": false,
+				"navigationBarTitleText": "购房能力测算"	
+			}
 		}
 	],
 	"globalStyle": {

pages/housePurchase/loanBalance.vue

 <template>
+	<div class="mortgageCalculatorContainer">
+		<view class="tabTitle">
+			<text>商业贷款</text>
+			<text>公积金贷款</text>
+			<text>组合贷款</text>
+		</view>
+		<view>
+			<!-- 公积金贷款 -->
+			<view class="accumulationFundContainer">
+				<h5>公积金</h5>
+				<ul>
+					<li v-for="item of accumulationFundParams" :key="item.id">
+						<div>{{item.name}}</div>
+						<div>
+							<input class="uni-input" type="{{item.type}}"  v-model="item.value"/>
+							<span>{{item.unit}}</span>
+						</div>
+					</li>
+				</ul>
+			</view>
+			
+			<!-- 商业贷款 -->
+			<view class="commercialLoans">
+				<h5>商业贷款</h5>
+				<ul>
+					<li v-for="item of commercialLoansParams" :key="item.id">
+						<div>{{item.name}}</div>
+						<div>
+							<input class="uni-input" type="{{item.type}}"  v-model="item.value"/>
+							<span>{{item.unit}}</span>
+						</div>
+					</li>
+				</ul>
+			</view>
+		</view>
+	</div>
 </template>
 
 <script>
 	export default{
 		data(){
-			
+			return{
+				accumulationFundParams:[
+					{id:'00',name:'公积金贷款余额',value:111,type:'digit',unit:'元'},
+					{id:'01',name:'公积金还款方式',value:'',type:'select',unit:''},
+					{id:'02',name:'剩余月份',value:11,type:'number',unit:'月'},
+					{id:'03',name:'年利率',value:1.89,type:'digit',unit:'%'},
+				],
+				commercialLoansParams:[
+					{id:'00',name:'商业贷款余额',value:'',type:'digit',unit:'元'},
+					{id:'01',name:'商业还款方式',value:'',type:'select',unit:''},
+					{id:'02',name:'剩余月份',value:'',type:'number',unit:'月'},
+					{id:'03',name:'年利率',value:'',type:'digit',unit:'%'},
+				],
+			}
 		},
 		name:'loanBalance',
 		components:{
@@ -19,5 +68,53 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
+	.mortgageCalculatorContainer{
+		padding: 70rpx 20rpx;
+		.tabTitle{
+			display: flex;
+			margin-bottom: 30rpx;
+			text{
+				width: 0;
+				flex: 1;
+				text-align: center;
+			}
+		}
+		ul{
+			li{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				border-bottom: 1px solid #E4E4E4;
+				height:80rpx;
+				>div:last-child{
+					display: flex;
+					text-align: right;
+					span{
+						padding-left: 10rpx;
+					}
+				}
+			}
+		}
+		h5{
+			position: relative;
+			color: #CEB07D;
+			font-size: 32rpx;
+			padding-left: 20rpx;
+			margin-top: 20rpx;
+			&::before{
+				content:'';
+				position:absolute;
+				left: 0;
+				top: 50%;
+				width: 8rpx;
+				height: 20rpx;
+				transform: translateY(-50%);
+				background: linear-gradient(123deg, #CEB07D 0%, #FED495 100%, #D1B27E 100%);
+				border-radius: 8rpx;
+				opacity: 1;
+			}
+		}
+	}
+
 </style>
\ No newline at end of file

pages/housePurchase/planningParameters.vue

@@ -14,10 +14,9 @@
 				</div>
 				<div class="dataSelect">
 					<div v-if="item.type==='data-picker'">
-						<uni-data-picker :localdata="items"
-						popup-title="请选择城市"
-						 @change="onchange" 
-						 @nodeclick="onnodeclick"></uni-data-picker>
+						  <view>
+						    <uni-data-picker :localdata="provinceList" popup-title="请选择城市" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
+						  </view>
 					</div>
 				</div>
 			</li>
@@ -30,6 +29,7 @@
 </template>
 
 <script>
+	import api from '../../api/api';
 	export default{
 		data(){
 			return {
@@ -42,7 +42,8 @@
 					{id:'06',name:'收入增长率',value:3,type:'number',remark:'国家统计局2022年第二季度数据显示全国居民人均可支配收入增长率为3.0%'},
 					{id:'07',name:'可接受本金损失',value:10,type:'number',remark:''}
 				],
-				editParamLists:[]
+				editParamLists:[],
+				provinceList:[]
 			}
 			
 		},
@@ -56,16 +57,47 @@
 		methods:{
 			onchange(e) {
 			        const value = e.detail.value
+					// console.log(e)
 			},
 			 onnodeclick(node) {
+				 // console.log(node)
 			 },
 			 resetParams(){
 				 this.editParamLists = JSON.parse(JSON.stringify(this.paramsLists))
 				 console.log(this.editParamLists)
+			 },
+			 provCityQry(){
+			 	api.provCityQry({insurerId:888}).then((res)=>{
+			 		console.log(res)
+			 		if(res['success']){
+			 			this.provinceList = this.action(res['data']['provinces']);
+			 		}
+			 	})
+			 },
+			 // 数据处理
+			 action(data){ // 使用递归函数
+			     // if(!(data?.length <= 0)){ 
+			     // 等价于
+			 	if(!data || data.length <= 0){ // 递归的出口
+			 		return null;
+			 	}
+			 	return data.map(x => { // 循环数据
+			 	    const model = { // 把后端返回过来的数据里面的键给替换成我想要的键
+			 		    source: x,
+			 			text: x.provinceName ? x.provinceName : x.cityName,
+			 			value: x.salesAreaCode ? x.salesAreaCode : x.zipCode,
+			 		};
+			 	    const children = this.action(x.citys); // 子级数据
+			 	    if(children){ // 一直往下循环查找有没有children这个键，如果有就直接添加一个子级字段名，这个字段名就是存子级数据
+			 		    model.children = children;
+			 	    }		
+			 	return model; // 返回这个数据
+			 	});
 			 }
 		},
 		mounted() {
-			this.editParamLists = JSON.parse(JSON.stringify(this.paramsLists))
+			this.editParamLists = JSON.parse(JSON.stringify(this.paramsLists));
+			this.provCityQry();
 		}
 	}
 </script>
@@ -97,11 +129,6 @@
 				opacity: 1;
 			}
 		}
-		ul,li{
-			list-style: none;
-			padding: 0;
-			margin: 0;
-		}
 		li{
 			display: flex;
 			align-items: center;