Skip to content

S
sfp-program
Commit 920bdeea by Chao Sun
Options

结果显示调整

parent 85d965b1
Showing with 133 additions and 47 deletions
pages/housePurchase/housePurchase.vue
...@@ -143,61 +143,41 @@ ...@@ -143,61 +143,41 @@
</view> </view>
<view id="myEcharts" style="height: 500rpx;"></view> <view id="myEcharts" style="height: 500rpx;"></view>
<view> <view>
1.如您想实现N年后在XX地区购买XXX㎡的房产，那么您还需要提高首付款到XXXX元，或您需提高每年预备还房贷资金总额到XXXX元。 1.如您想实现{{resultInfos.nyear}}年后在{{resultInfos.provinceName}} {{resultInfos.cityName}}地区购买{{resultInfos.preOrderSize}}㎡的房产，那么您还需要提高首付款到{{resultInfos.pvDownPayment}}元，或您需提高每年预备还房贷资金总额到{{resultInfos.houseSpecialPurpose}}元。
</view> </view>
<view> <view>
2.根据您的已备首付款和每年预备还房贷资金总额，您在N年后可实现购买房屋单价为XXX元/㎡，总价为XXXX元的房产。 2.根据您的已备首付款和每年预备还房贷资金总额，您在N年后可实现购买房屋单价为XXX元/㎡，总价为XXXX元的房产。
</view> </view>
</view> </view>
<view class="line"> <view class="line" v-for="houseItem in housePurchasePrices">
<view class="line_title">房屋总价</view> <view class="line_title">{{getResultTitle(houseItem.priceType)}}
<view class="content"> <img src="../../static/images/can.png" alt="" v-show="houseItem.fvDifference >= 0">
<view class="left"> <img src="../../static/images/cannot.png" alt="" v-show="houseItem.fvDifference < 0">
<view class="realizable">可实现的</view>
<view>终值：1,233,930元</view>
<view class="now">
现值：1,233,930元
</view>
</view>
<view class="right">
<view class="realizable">你想要的</view>
<view>终值：1,233,930元</view>
<view class="now">
现值：1,233,930元
</view>
</view>
</view>
<view class="line_bottom">
恭喜您！经过测算，您已超出目标值XXXX,N年后可以达成您的目标.
</view> </view>
</view>
<view class="line">
<view class="line_title">房屋单价</view>
<view class="content"> <view class="content">
<view class="left"> <view class="left">
<view class="realizable">可实现的</view> <view class="realizable">可实现的</view>
<view>终值：1,233,930元</view> <view>终值：{{numberConverter(houseItem.fvPriceRealization)}}元</view>
<view class="now"> <view class="now">
现值：1,233,930元 现值：{{numberConverter(houseItem.pvPriceRealization)}}元
</view> </view>
</view> </view>
<img src="../../static/images/vs.png" alt="">
<view class="right"> <view class="right">
<view class="realizable">你想要的</view> <view class="realizable">你想要的</view>
<view>终值：1,233,930元</view> <view>终值：{{numberConverter(houseItem.fvPriceDesired)}}元</view>
<view class="now"> <view class="now">
现值：1,233,930元 现值：{{numberConverter(houseItem.pvPriceDesired)}}元
</view> </view>
</view> </view>
</view> </view>
<view class="line_bottom fail"> <view class="line_bottom" v-show="houseItem.fvDifference > 0">
很遗憾！经过测算，距离实现您的目标还差XXX。您可以参考我们给出的建议进行调整。 <text style="font-size: 36rpx;">恭喜您</text>！经过测算，您已超出目标值XXXX,N年后可以达成您的目标.
</view>
<view class="line_bottom fail" v-show="houseItem.fvDifference < 0">
<text style="font-size: 36rpx;">很遗憾！</text>
经过测算，距离实现您的目标还差XXX。您可以参考我们给出的建议进行调整。
</view> </view>
</view>
<view class="line">
<view class="line_title">首付款</view>
</view>
<view class="line">
<view class="line_title">贷款金额</view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
...@@ -226,6 +206,7 @@ ...@@ -226,6 +206,7 @@
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'; import common from '../../common/common';
import dataHandling from "../../util/dataHandling";
export default{ export default{
data(){ data(){
...@@ -254,7 +235,55 @@ ...@@ -254,7 +235,55 @@
housePurchaseTypeList:[{id:1,name:'投资'},{id:2,name:'自住'},{id:3,name:'其他'}], housePurchaseTypeList:[{id:1,name:'投资'},{id:2,name:'自住'},{id:3,name:'其他'}],
houseLoanOldList:[], houseLoanOldList:[],
accumulationFundParams:[], accumulationFundParams:[],
commercialLoansParams:[] commercialLoansParams:[],
downPaymentList:[],
totalLoanList:[],
resultInfos:{
nyear:null, //几年后购房
preOrderSize:null, //预购面积
provinceName:null, //预购省名称
cityName:null, //预购城市名称
pvDownPayment:null, //提高已备首付款到
houseSpecialPurpose:null, //提高每年还贷专用款到
},
housePurchasePrices:[
{
"priceType": "1",
"fvPriceRealization": 1922788.0,
"pvPriceRealization": 1744025.0,
"fvPriceDesired": 1102500.0,
"pvPriceDesired": 1000000.0,
"fvDifference": -820288.0,
"pvDifference": -744025.0
},
{
"priceType": "2",
"fvPriceRealization": 19228.0,
"pvPriceRealization": 17440.0,
"fvPriceDesired": 11025.0,
"pvPriceDesired": 10000.0,
"fvDifference": -8203.0,
"pvDifference": -7440.0
},
{
"priceType": "4",
"fvPriceRealization": 0.0,
"pvPriceRealization": -0.0,
"fvPriceDesired": -820288.0,
"pvPriceDesired": -758402.0,
"fvDifference": -820288.0,
"pvDifference": -758402.0
},
{
"priceType": "3",
"fvPriceRealization": 1922788.0,
"pvPriceRealization": 1777726.0,
"fvPriceDesired": 11025.0,
"pvPriceDesired": 10193.0,
"fvDifference": -1911763.0,
"pvDifference": -1767533.0
}
],
} }
}, },
components:{ components:{
...@@ -275,19 +304,40 @@ ...@@ -275,19 +304,40 @@
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById('myEcharts')); this.myChart = echarts.init(document.getElementById('myEcharts'));
// 绘制图表 // 绘制图表
if(this.housePurchasePrices.length){
const list1 = this.housePurchasePrices.filter((item)=>{
return item.priceType == 3
})[0];
this.downPaymentList = this.downPaymentList.concat(list1.pvPriceRealization,list1.pvPriceDesired,list1.pvDifference)
const list2 = this.housePurchasePrices.filter((item)=>{
return item.priceType == 4
})[0];
this.totalLoanList = this.totalLoanList.concat(list2.fvPriceRealization,list2.fvPriceDesired,list2.fvDifference)
}
this.myChart.setOption({ this.myChart.setOption({
legend: {
data: ['首付款', '总贷款金额']
},
grid: {
left: '20%', // 调整这个属性
},
xAxis: { xAxis: {
data: ['A', 'B', 'C', 'D', 'E'] data: ['可实现的', '你想要的', '差额'],
axisTick:{//坐标轴刻度相关设置。
show: false,
},
}, },
yAxis: {}, yAxis: {},
series: [ series: [
{
name:'首付款',
data: this.downPaymentList,
type: 'bar',
stack: 'x'
},
{ {
data: [10, 22, 28, 43, 49], name:'总贷款金额',
type: 'bar', data: this.totalLoanList,
stack: 'x',
},
{
data: [5, 4, 3, 5, 10],
type: 'bar', type: 'bar',
stack: 'x' stack: 'x'
} }
...@@ -329,6 +379,11 @@ ...@@ -329,6 +379,11 @@
if(!this.housePurchaseInfo.newLoanYear){ if(!this.housePurchaseInfo.newLoanYear){
common.errorDialog(1,'请填写新房贷款年限') common.errorDialog(1,'请填写新房贷款年限')
return false; return false;
}else {
if(this.housePurchaseInfo.newLoanYear<=0){
common.errorDialog(2,'新房贷款年限必须大于0')
return false;
}
} }
if(!this.housePurchaseInfo.interestRate){ if(!this.housePurchaseInfo.interestRate){
common.errorDialog(1,'请填写新房贷款年利率') common.errorDialog(1,'请填写新房贷款年利率')
...@@ -348,14 +403,19 @@ ...@@ -348,14 +403,19 @@
} }
const param = { const param = {
...this.housePurchaseInfo, ...this.housePurchaseInfo,
houseLoanOldList:this.houseLoanOldList
} }
// api.housePurchasePlanAnalysis().then((res)=>{ // api.housePurchasePlanAnalysis().then((res)=>{
// if(res['success']){
// this.resultInfos = res['data'];
// this.housePurchasePrices = this.resultInfos['housePurchasePrices'];
// }
// }) // })
}, },
onchange(e) { onchange(e) {
console.log(e)
const value = e.detail.value; const value = e.detail.value;
if(value){ if(value.length>0){
this.housePurchaseInfo.provinceName = value[0]['text']; this.housePurchaseInfo.provinceName = value[0]['text'];
this.housePurchaseInfo.provinceCode = value[0]['value']; this.housePurchaseInfo.provinceCode = value[0]['value'];
this.housePurchaseInfo.cityCode = value[1]['value']; this.housePurchaseInfo.cityCode = value[1]['value'];
...@@ -380,7 +440,22 @@ ...@@ -380,7 +440,22 @@
openLoan(){ openLoan(){
this.isDisplace = !this.isDisplace; this.isDisplace = !this.isDisplace;
this.isLoanSelected = this.dialogIsShow = true; this.isLoanSelected = this.dialogIsShow = true;
} },
getResultTitle(priceType){
if(priceType === '1'){
return '房屋总价';
}else if(priceType === '2'){
return '房屋单价';
}else if(priceType === '3'){
return '首付款';
}else if(priceType === '4'){
return '贷款金额';
}
},
// 数字千分位处理
numberConverter(val){
return dataHandling.numberConverter(val)
},
}, },
mounted(){ mounted(){
this.drawLine(); this.drawLine();
...@@ -449,6 +524,7 @@ ...@@ -449,6 +524,7 @@
background: #fff; background: #fff;
margin: 20rpx 0; margin: 20rpx 0;
padding: 0 10rpx 20rpx 10rpx; padding: 0 10rpx 20rpx 10rpx;
position: relative;
.line_title{ .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;
...@@ -457,12 +533,19 @@ ...@@ -457,12 +533,19 @@
text-align: center; text-align: center;
padding: 10rpx 0; padding: 10rpx 0;
margin-left: -10rpx; margin-left: -10rpx;
img{
position: absolute;
right: 0;
max-width: 17%;
top: 3%;
}
} }
.content{ .content{
display: flex; display: flex;
color: #fff; color: #fff;
justify-content: space-around; justify-content: space-around;
margin: 20rpx 0; margin: 20rpx 0;
align-items: center;
.left,.right{ .left,.right{
background: #1349DD; background: #1349DD;
border-radius: 8rpx; border-radius: 8rpx;
...@@ -475,6 +558,9 @@ ...@@ -475,6 +558,9 @@
margin: 10rpx 0; margin: 10rpx 0;
} }
} }
img{
max-width: 15%;
}
.right{ .right{
background: #F07006; background: #F07006;
} }
......
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