Skip to content

S
sfp-program
Commit 05b5c3e9 by Chao Sun
Options

房屋计算器入参

parent c9da2d70
Showing with 102 additions and 119 deletions
App.vue
...@@ -119,6 +119,7 @@ ...@@ -119,6 +119,7 @@
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
padding-bottom: 30rpx; padding-bottom: 30rpx;
z-index: 1;
} }
.optionContent button{ .optionContent button{
flex: 0 0 46%; flex: 0 0 46%;
......
common/common.ts 0 → 100644
export default {
// 数据处理
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.provinceId ? x.provinceId : x.cityId,
};
const children = this.action(x.citys); // 子级数据
if(children){ // 一直往下循环查找有没有children这个键，如果有就直接添加一个子级字段名，这个字段名就是存子级数据
model.children = children;
}
return model; // 返回这个数据
});
}
}
\ No newline at end of file
environments/environment.ts
...@@ -19,7 +19,7 @@ const config = { ...@@ -19,7 +19,7 @@ const config = {
stage, stage,
prod prod
} }
let env = 'prod'; let env = 'dev';
// if (process.env.NODE_ENV === 'development') { // if (process.env.NODE_ENV === 'development') {
// env = 'dev'; // env = 'dev';
// }else if (process.env.NODE_ENV === 'production') { // }else if (process.env.NODE_ENV === 'production') {
......
package-lock.json
{ {
"name": "sfp-program",
"lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "lockfileVersion": 1,
"": {
"dependencies": {
"echarts": "^5.3.3",
"jweixin-module": "^1.6.0"
}
},
"node_modules/echarts": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.3.2"
}
},
"node_modules/jweixin-module": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/jweixin-module/-/jweixin-module-1.6.0.tgz",
"integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
},
"node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/zrender": {
"version": "5.3.2",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
"dependencies": {
"tslib": "2.3.0"
}
}
},
"dependencies": { "dependencies": {
"echarts": { "echarts": {
"version": "5.3.3", "version": "5.3.3",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz", "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==", "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"requires": { "requires": {
"tslib": "2.3.0", "tslib": "2.3.0",
...@@ -52,6 +16,11 @@ ...@@ -52,6 +16,11 @@
"resolved": "https://registry.npmjs.org/jweixin-module/-/jweixin-module-1.6.0.tgz", "resolved": "https://registry.npmjs.org/jweixin-module/-/jweixin-module-1.6.0.tgz",
"integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w==" "integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
}, },
"nanoid": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-4.0.0.tgz",
"integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
},
"tslib": { "tslib": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
......
package.json
{ {
"dependencies": { "dependencies": {
"echarts": "^5.3.3", "echarts": "^5.3.3",
"jweixin-module": "^1.6.0" "jweixin-module": "^1.6.0",
"nanoid": "^4.0.0"
} }
} }
pages/housePurchase/housePurchase.vue
...@@ -18,27 +18,21 @@ ...@@ -18,27 +18,21 @@
<text>几年后购房：</text> <text>几年后购房：</text>
<view class="inputContent"> <view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" <input class="uni-input" type="number" placeholder="请输入"
maxlength="3" maxlength="3" v-model="nyear" />
/><label for="">年</label> <label for="">年</label>
</view> </view>
</view> </view>
<view class="inputItem"> <view class="inputItem">
<text>预购城市：</text> <text>预购城市：</text>
<!-- <view class="inputContent"> <uni-data-picker placeholder="请选择地区" popup-title="请选择所在地区" :localdata="provinceList" v-model="classes"
<select name="" id=""> @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
<option value="">上海</option>
<option value="">深圳</option>
</select>
</view> -->
<uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china" field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code" parent-field="parent_code"
@change="onchange" @nodeclick="onnodeclick">
</uni-data-picker> </uni-data-picker>
</view> </view>
<view class="inputItem"> <view class="inputItem">
<text>预购面积：</text> <text>预购面积：</text>
<view class="inputContent"> <view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" <input class="uni-input" type="number" placeholder="请输入"
maxlength="3" maxlength="3" v-model="preOrderSize"
/><label for="">m²</label> /><label for="">m²</label>
</view> </view>
</view> </view>
...@@ -46,7 +40,7 @@ ...@@ -46,7 +40,7 @@
<text>预购房产现在市场单价：</text> <text>预购房产现在市场单价：</text>
<view class="inputContent"> <view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" <input class="uni-input" type="number" placeholder="请输入"
maxlength="3" maxlength="3" v-model="targetPrice"
/><label for="">m²/元</label> /><label for="">m²/元</label>
</view> </view>
</view> </view>
...@@ -54,7 +48,7 @@ ...@@ -54,7 +48,7 @@
<text>首付款最低成数：</text> <text>首付款最低成数：</text>
<view class="inputContent"> <view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" <input class="uni-input" type="number" placeholder="请输入"
maxlength="3" maxlength="3" v-model="downPaymentMin"
/><label for="">m²</label> /><label for="">m²</label>
</view> </view>
</view> </view>
...@@ -62,7 +56,7 @@ ...@@ -62,7 +56,7 @@
<text>新房贷款年限：</text> <text>新房贷款年限：</text>
<view class="inputContent"> <view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" <input class="uni-input" type="number" placeholder="请输入"
maxlength="3" maxlength="3" v-model="newLoanYear"
/><label for="">m²</label> /><label for="">m²</label>
</view> </view>
</view> </view>
...@@ -70,21 +64,17 @@ ...@@ -70,21 +64,17 @@
<text>新房贷款年利率：</text> <text>新房贷款年利率：</text>
<view class="inputContent"> <view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" <input class="uni-input" type="number" placeholder="请输入"
maxlength="3" maxlength="3" v-model="housePriceGrowthRate"
/><label for="">m²</label> /><label for="">m²</label>
</view> </view>
</view> </view>
<view class="inputItem"> <view class="inputItem">
<text style="flex: 0 0 30%;">购房用途：</text> <text style="flex: 0 0 30%;">购房用途：</text>
<view class="btn_wrapper"> <view class="btn_wrapper">
<view class="btn_item "> <view class="btn_item" :class="{ 'selected': housePurchaseType==housePurchaseTypeItem.id }"
投资 v-for="housePurchaseTypeItem in housePurchaseTypeList"
</view> @click="housePurchase(housePurchaseTypeItem.id)">
<view class="btn_item selected"> {{housePurchaseTypeItem.name}}
自助
</view>
<view class="btn_item">
其他
</view> </view>
</view> </view>
</view> </view>
...@@ -100,7 +90,7 @@ ...@@ -100,7 +90,7 @@
<text>已备首付：</text> <text>已备首付：</text>
<view class="inputContent"> <view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" <input class="uni-input" type="number" placeholder="请输入"
maxlength="3" maxlength="3" v-model="firstHouseAmount"
/><label for="">万元</label> /><label for="">万元</label>
</view> </view>
</view> </view>
...@@ -108,7 +98,7 @@ ...@@ -108,7 +98,7 @@
<text>年预备还房贷资金总额：</text> <text>年预备还房贷资金总额：</text>
<view class="inputContent"> <view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" <input class="uni-input" type="number" placeholder="请输入"
maxlength="3" maxlength="3" v-model="repaymentSpecial"
/><label for="">万元</label> /><label for="">万元</label>
</view> </view>
</view> </view>
...@@ -274,22 +264,28 @@ ...@@ -274,22 +264,28 @@
import foot from '../footer/footer.vue'; import foot from '../footer/footer.vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import api from '../../api/api'; import api from '../../api/api';
import common from '../../common/common';
export default{ export default{
data(){ data(){
return{ return{
isDisplace:false, isDisplace:false,
myChart:null, myChart:null,
nyear:null, nyear:null,//几年后购房
city:'', city:'',
provinceList: [{ provinceList: [],
provinceName:'选项1', provinceCode:null,
provinceId:'1' provinceName:null,
}, cityCode:null,
{ cityName:null,
provinceName:'选项2', preOrderSize:null,//预购面积
provinceId:'2' targetPrice:null,//目标价格(现值)
},], downPaymentMin:null,//首付款最低成数(百分位)
newLoanYear:null,//新房贷款年限【必须大于0】
firstHouseAmount:null,//初期购房资金(单位万)
housePurchaseType:null,//购房用途
repaymentSpecial:null,//每年还贷专用款(单位万)
housePurchaseTypeList:[{id:1,name:'投资'},{id:2,name:'自住'},{id:3,name:'其他'}]
} }
}, },
components:{ components:{
...@@ -333,9 +329,14 @@ ...@@ -333,9 +329,14 @@
api.provCityQry({insurerId:888}).then((res)=>{ api.provCityQry({insurerId:888}).then((res)=>{
console.log(res) console.log(res)
if(res['success']){ if(res['success']){
// this.provinceList = res['data']['provinces']; this.provinceList = common.action(res['data']['provinces']);
console.log(this.provinceList)
} }
}) })
},
housePurchase(id){
this.housePurchaseType = id;
} }
}, },
mounted(){ mounted(){
...@@ -343,7 +344,8 @@ ...@@ -343,7 +344,8 @@
} }
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.wrapper{
.houseInfo .title{ .houseInfo .title{
padding-left: 0; padding-left: 0;
justify-content: flex-start; justify-content: flex-start;
...@@ -351,14 +353,16 @@ ...@@ -351,14 +353,16 @@
.houseInfo .title::before{ .houseInfo .title::before{
width: 0; width: 0;
} }
.inputContent label{ .inputItem {
.inputContent {
label{
width: 200rpx; width: 200rpx;
text-align: right; text-align: right;
} }
.inputItem .btn_wrapper{
display: flex;
} }
.btn_wrapper .btn_item{ .btn_wrapper{
display: flex;
.btn_item{
width: 100rpx; width: 100rpx;
padding:5rpx 0; padding:5rpx 0;
border: 1px solid #CEB07D; border: 1px solid #CEB07D;
...@@ -370,10 +374,10 @@ ...@@ -370,10 +374,10 @@
.btn_wrapper .btn_item:last-child{ .btn_wrapper .btn_item:last-child{
margin-right: 0; margin-right: 0;
} }
.btn_wrapper .selected{ .selected{
color:#FED495; color:#FED495;
} }
.btn_wrapper .selected:after{ .selected:after{
display:block; display:block;
content:''; content:'';
border-width:20rpx 20rpx 20rpx 20rpx; border-width:20rpx 20rpx 20rpx 20rpx;
...@@ -384,6 +388,8 @@ ...@@ -384,6 +388,8 @@
transform: rotate(-45deg); transform: rotate(-45deg);
bottom: -11.5px; bottom: -11.5px;
} }
}
}
.title .view{ .title .view{
color: #666; color: #666;
border: 1px #FED495 solid; border: 1px #FED495 solid;
...@@ -393,14 +399,14 @@ ...@@ -393,14 +399,14 @@
width: 110rpx; width: 110rpx;
text-align: center; text-align: center;
} }
.result_wrapper{
.line{ .line{
border-radius: 10rpx; border-radius: 10rpx;
box-shadow: 0 0 5px #969696; box-shadow: 0 0 5px #969696;
background: #fff; background: #fff;
margin: 20rpx 0; margin: 20rpx 0;
padding: 0 10rpx 20rpx 10rpx; padding: 0 10rpx 20rpx 10rpx;
} .line_title{
.line .line_title{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%); background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
color: #fff; color: #fff;
width: 40%; width: 40%;
...@@ -414,8 +420,7 @@ ...@@ -414,8 +420,7 @@
color: #fff; color: #fff;
justify-content: space-around; justify-content: space-around;
margin: 20rpx 0; margin: 20rpx 0;
} .left,.right{
.content .left,.content .right{
background: #1349DD; background: #1349DD;
border-radius: 8rpx; border-radius: 8rpx;
display: flex; display: flex;
...@@ -423,11 +428,14 @@ ...@@ -423,11 +428,14 @@
align-items: center; align-items: center;
width: 48%; width: 48%;
box-shadow: 0 1px 1px #969696; box-shadow: 0 1px 1px #969696;
view {
margin: 10rpx 0;
} }
.content .right{ }
.right{
background: #F07006; background: #F07006;
} }
.content .left .realizable,.content .right .realizable{ .left .realizable,.right .realizable{
width: 60%; width: 60%;
background: #fff; background: #fff;
border-radius: 0 0 10rpx 10rpx; border-radius: 0 0 10rpx 10rpx;
...@@ -435,25 +443,24 @@ ...@@ -435,25 +443,24 @@
padding: 10rpx 0; padding: 10rpx 0;
margin: 0; margin: 0;
} }
.content .left .realizable{ .left .realizable{
color:#1349DD; color:#1349DD;
} }
.content .left view,.content .right view{ .right .realizable{
margin: 10rpx 0;
}
.content .right .realizable{
color:#F07006; color:#F07006;
} }
}
.line .line_bottom{ .line_bottom{
background: #e9ffe6; background: #e9ffe6;
color: #666; color: #666;
width: 98%; width: 98%;
padding: 10rpx; padding: 10rpx;
} }
.line_bottom.fail{
.line .line_bottom.fail{
background: #ffe6e6; background: #ffe6e6;
} }
}
}
}
</style> </style>
\ No newline at end of file
pages/housePurchase/planningParameters.vue
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
<script> <script>
import api from '../../api/api'; import api from '../../api/api';
import common from '../../common/common'
export default{ export default{
data(){ data(){
return { return {
...@@ -70,30 +71,10 @@ ...@@ -70,30 +71,10 @@
api.provCityQry({insurerId:888}).then((res)=>{ api.provCityQry({insurerId:888}).then((res)=>{
console.log(res) console.log(res)
if(res['success']){ if(res['success']){
this.provinceList = this.action(res['data']['provinces']); this.provinceList = common.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() { mounted() {
this.editParamLists = JSON.parse(JSON.stringify(this.paramsLists)); this.editParamLists = JSON.parse(JSON.stringify(this.paramsLists));
......
uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue
...@@ -441,7 +441,7 @@ ...@@ -441,7 +441,7 @@
.title-area { .title-area {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; /* display: flex; */
/* #endif */ /* #endif */
align-items: center; align-items: center;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
......
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