Skip to content

S
sfp-program
Commit 05b5c3e9 by Chao Sun
Options

房屋计算器入参

parent c9da2d70
Showing with 192 additions and 209 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> </uni-data-picker>
<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>
</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,117 +344,123 @@ ...@@ -343,117 +344,123 @@
} }
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.houseInfo .title{ .wrapper{
padding-left: 0; .houseInfo .title{
justify-content: flex-start; padding-left: 0;
} justify-content: flex-start;
.houseInfo .title::before{ }
width: 0; .houseInfo .title::before{
} width: 0;
.inputContent label{ }
width: 200rpx; .inputItem {
text-align: right; .inputContent {
} label{
.inputItem .btn_wrapper{ width: 200rpx;
display: flex; text-align: right;
} }
.btn_wrapper .btn_item{ }
width: 100rpx; .btn_wrapper{
padding:5rpx 0; display: flex;
border: 1px solid #CEB07D; .btn_item{
margin-right: 10rpx; width: 100rpx;
text-align: center; padding:5rpx 0;
position: relative; border: 1px solid #CEB07D;
font-size: 26rpx; margin-right: 10rpx;
} text-align: center;
.btn_wrapper .btn_item:last-child{ position: relative;
margin-right: 0; font-size: 26rpx;
} }
.btn_wrapper .selected{ .btn_wrapper .btn_item:last-child{
color:#FED495; margin-right: 0;
} }
.btn_wrapper .selected:after{ .selected{
display:block; color:#FED495;
content:''; }
border-width:20rpx 20rpx 20rpx 20rpx; .selected:after{
border-style:solid; display:block;
border-color:#FED495 transparent transparent transparent; content:'';
position:absolute; border-width:20rpx 20rpx 20rpx 20rpx;
right: -20rpx; border-style:solid;
transform: rotate(-45deg); border-color:#FED495 transparent transparent transparent;
bottom: -11.5px; position:absolute;
} right: -20rpx;
.title .view{ transform: rotate(-45deg);
color: #666; bottom: -11.5px;
border: 1px #FED495 solid; }
font-weight: normal; }
padding:8rpx 20rpx; }
font-size: 28rpx; .title .view{
width: 110rpx; color: #666;
text-align: center; border: 1px #FED495 solid;
} font-weight: normal;
.line{ padding:8rpx 20rpx;
border-radius: 10rpx; font-size: 28rpx;
box-shadow: 0 0 5px #969696; width: 110rpx;
background: #fff; text-align: center;
margin: 20rpx 0; }
padding: 0 10rpx 20rpx 10rpx; .result_wrapper{
} .line{
.line .line_title{ border-radius: 10rpx;
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%); box-shadow: 0 0 5px #969696;
color: #fff; background: #fff;
width: 40%; margin: 20rpx 0;
border-radius: 10rpx 0 10rpx 0; padding: 0 10rpx 20rpx 10rpx;
text-align: center; .line_title{
padding: 10rpx 0; background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
margin-left: -10rpx; color: #fff;
} width: 40%;
.content{ border-radius: 10rpx 0 10rpx 0;
display: flex; text-align: center;
color: #fff; padding: 10rpx 0;
justify-content: space-around; margin-left: -10rpx;
margin: 20rpx 0; }
} .content{
.content .left,.content .right{ display: flex;
background: #1349DD; color: #fff;
border-radius: 8rpx; justify-content: space-around;
display: flex; margin: 20rpx 0;
flex-direction: column; .left,.right{
align-items: center; background: #1349DD;
width: 48%; border-radius: 8rpx;
box-shadow: 0 1px 1px #969696; display: flex;
} flex-direction: column;
.content .right{ align-items: center;
background: #F07006; width: 48%;
} box-shadow: 0 1px 1px #969696;
.content .left .realizable,.content .right .realizable{ view {
width: 60%; margin: 10rpx 0;
background: #fff; }
border-radius: 0 0 10rpx 10rpx; }
text-align: center; .right{
padding: 10rpx 0; background: #F07006;
margin: 0; }
} .left .realizable,.right .realizable{
.content .left .realizable{ width: 60%;
color:#1349DD; background: #fff;
} border-radius: 0 0 10rpx 10rpx;
.content .left view,.content .right view{ text-align: center;
margin: 10rpx 0; padding: 10rpx 0;
} margin: 0;
.content .right .realizable{ }
color:#F07006; .left .realizable{
} color:#1349DD;
}
.line .line_bottom{ .right .realizable{
background: #e9ffe6; color:#F07006;
color: #666; }
width: 98%; }
padding: 10rpx; .line_bottom{
} background: #e9ffe6;
color: #666;
.line .line_bottom.fail{ width: 98%;
background: #ffe6e6; padding: 10rpx;
}
.line_bottom.fail{
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