Skip to content

S
sfp-program
Commit a06a91cf by Chao Sun
Options

购房能力测算样式

parent aeb93e40
Showing with 406 additions and 187 deletions
.vite/deps/_metadata.json
{
"hash": "df8c90de",
"browserHash": "b3a2b26f",
"hash": "1b874b42",
"browserHash": "9e8dac0c",
"optimized": {
"nanoid": {
"src": "../../node_modules/nanoid/index.browser.js",
"file": "nanoid.js",
"fileHash": "65e128fe",
"fileHash": "894499a8",
"needsInterop": false
},
"echarts": {
"src": "../../node_modules/echarts/index.js",
"file": "echarts.js",
"fileHash": "892bbea7",
"needsInterop": false
}
},
"chunks": {}
"chunks": {
"chunk-VZBJPTNH": {
"file": "chunk-VZBJPTNH.js"
}
}
}
\ No newline at end of file
.vite/deps/chunk-VZBJPTNH.js 0 → 100644
var __defProp = Object.defineProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
export {
__export
};
//# sourceMappingURL=chunk-VZBJPTNH.js.map
.vite/deps/chunk-VZBJPTNH.js.map 0 → 100644
{
"version": 3,
"sources": [],
"sourcesContent": [],
"mappings": "",
"names": []
}
.vite/deps/echarts.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
.vite/deps/echarts.js.map 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
.vite/deps/nanoid.js
import "./chunk-VZBJPTNH.js";
// E:/work/sfp-program/node_modules/nanoid/url-alphabet/index.js
var urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
......
.vite/deps/nanoid.js.map
......@@ -2,6 +2,6 @@
"version": 3,
"sources": ["../../node_modules/nanoid/url-alphabet/index.js", "../../node_modules/nanoid/index.browser.js"],
"sourcesContent": ["export const urlAlphabet =\n 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'\n", "export { urlAlphabet } from './url-alphabet/index.js'\nexport let random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nexport let customRandom = (alphabet, defaultSize, getRandom) => {\n let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n return (size = defaultSize) => {\n let id = ''\n while (true) {\n let bytes = getRandom(step)\n let j = step\n while (j--) {\n id += alphabet[bytes[j] & mask] || ''\n if (id.length === size) return id\n }\n }\n }\n}\nexport let customAlphabet = (alphabet, size = 21) =>\n customRandom(alphabet, size, random)\nexport let nanoid = (size = 21) =>\n crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n byte &= 63\n if (byte < 36) {\n id += byte.toString(36)\n } else if (byte < 62) {\n id += (byte - 26).toString(36).toUpperCase()\n } else if (byte > 62) {\n id += '-'\n } else {\n id += '_'\n }\n return id\n }, '')\n"],
"mappings": ";AAAO,IAAM,cACX;;;ACAK,IAAI,SAAS,WAAS,OAAO,gBAAgB,IAAI,WAAW,KAAK,CAAC;AAClE,IAAI,eAAe,CAAC,UAAU,aAAa,cAAc;AAC9D,MAAI,OAAQ,MAAM,KAAK,IAAI,SAAS,SAAS,CAAC,IAAI,KAAK,OAAQ;AAC/D,MAAI,OAAO,CAAC,CAAG,OAAM,OAAO,cAAe,SAAS;AACpD,SAAO,CAAC,OAAO,gBAAgB;AAC7B,QAAI,KAAK;AACT,WAAO,MAAM;AACX,UAAI,QAAQ,UAAU,IAAI;AAC1B,UAAI,IAAI;AACR,aAAO,KAAK;AACV,cAAM,SAAS,MAAM,KAAK,SAAS;AACnC,YAAI,GAAG,WAAW;AAAM,iBAAO;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AACF;AACO,IAAI,iBAAiB,CAAC,UAAU,OAAO,OAC5C,aAAa,UAAU,MAAM,MAAM;AAC9B,IAAI,SAAS,CAAC,OAAO,OAC1B,OAAO,gBAAgB,IAAI,WAAW,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,SAAS;AAChE,UAAQ;AACR,MAAI,OAAO,IAAI;AACb,UAAM,KAAK,SAAS,EAAE;AAAA,EACxB,WAAW,OAAO,IAAI;AACpB,UAAO,QAAO,IAAI,SAAS,EAAE,EAAE,YAAY;AAAA,EAC7C,WAAW,OAAO,IAAI;AACpB,UAAM;AAAA,EACR,OAAO;AACL,UAAM;AAAA,EACR;AACA,SAAO;AACT,GAAG,EAAE;",
"mappings": ";;;AAAO,IAAM,cACX;;;ACAK,IAAI,SAAS,WAAS,OAAO,gBAAgB,IAAI,WAAW,KAAK,CAAC;AAClE,IAAI,eAAe,CAAC,UAAU,aAAa,cAAc;AAC9D,MAAI,OAAQ,MAAM,KAAK,IAAI,SAAS,SAAS,CAAC,IAAI,KAAK,OAAQ;AAC/D,MAAI,OAAO,CAAC,CAAG,OAAM,OAAO,cAAe,SAAS;AACpD,SAAO,CAAC,OAAO,gBAAgB;AAC7B,QAAI,KAAK;AACT,WAAO,MAAM;AACX,UAAI,QAAQ,UAAU,IAAI;AAC1B,UAAI,IAAI;AACR,aAAO,KAAK;AACV,cAAM,SAAS,MAAM,KAAK,SAAS;AACnC,YAAI,GAAG,WAAW;AAAM,iBAAO;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AACF;AACO,IAAI,iBAAiB,CAAC,UAAU,OAAO,OAC5C,aAAa,UAAU,MAAM,MAAM;AAC9B,IAAI,SAAS,CAAC,OAAO,OAC1B,OAAO,gBAAgB,IAAI,WAAW,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,SAAS;AAChE,UAAQ;AACR,MAAI,OAAO,IAAI;AACb,UAAM,KAAK,SAAS,EAAE;AAAA,EACxB,WAAW,OAAO,IAAI;AACpB,UAAO,QAAO,IAAI,SAAS,EAAE,EAAE,YAAY;AAAA,EAC7C,WAAW,OAAO,IAAI;AACpB,UAAM;AAAA,EACR,OAAO;AACL,UAAM;AAAA,EACR;AACA,SAAO;AACT,GAAG,EAAE;",
"names": []
}
App.vue
......@@ -109,4 +109,26 @@
color: #999999;
font-size: 24rpx;
}
.optionContent{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
padding-bottom: 30rpx;
}
.optionContent button{
flex: 0 0 46%;
border:2rpx solid #e7c793!important;
font-size: 36rpx;
}
.btn{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
border: none;
color: #6B4000;
}
</style>
main.js
import App from './App'
// import store from './store'
// #ifndef VUE3
import Vue from 'vue'
import axios from 'axios'
import api from '@api/api.ts'
import * as echarts from 'echarts'
Vue.config.productionTip = false;
Vue.prototype.axios = axios;
Vue.prototype.$api = api;
App.mpType = 'app'
App.mpType = 'app';
Vue.prototype.$echarts = echarts;
const app = new Vue({
api,
...App,
......
package-lock.json
......@@ -29,6 +29,15 @@
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"echarts": {
"version": "5.3.3",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
"integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.3.2"
}
},
"follow-redirects": {
"version": "1.15.1",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz",
......@@ -61,6 +70,19 @@
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-4.0.0.tgz",
"integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
},
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"zrender": {
"version": "5.3.2",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
"integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
"requires": {
"tslib": "2.3.0"
}
}
}
}
pages/housePurchase/housePurchase.vue
......@@ -6,176 +6,238 @@
<img src="../../static/images/banner.png" alt="banner" srcset="">
</view>
<scroll-view scroll-y="true" class="formInfoContainer" id="formInfoContainer">
<!--需求信息-->
<view class="demandInfo">
<view class="title">
<view>
需求信息
</view>
</view>
<view class="inputItem">
<text>几年后购房：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">年</label>
</view>
</view>
<view class="inputItem">
<text>预购城市：</text>
<view class="inputContent">
<select name="" id="">
<option value="">上海</option>
<option value="">深圳</option>
</select>
</view>
</view>
<view class="inputItem">
<text>预购面积：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">m²</label>
</view>
</view>
<view class="inputItem">
<text>预购房产现在市场单价：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">m²/元</label>
</view>
</view>
<view class="inputItem">
<text>首付款最低成数：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">m²</label>
</view>
</view>
<view class="inputItem">
<text>新房贷款年限：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">m²</label>
<form @submit="formSubmit" @reset="formReset">
<!--需求信息-->
<view class="demandInfo">
<view class="title">
<view>
需求信息
</view>
</view>
<view class="inputItem">
<text>几年后购房：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">年</label>
</view>
</view>
<view class="inputItem">
<text>预购城市：</text>
<view class="inputContent">
<select name="" id="">
<option value="">上海</option>
<option value="">深圳</option>
</select>
</view>
</view>
<view class="inputItem">
<text>预购面积：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">m²</label>
</view>
</view>
<view class="inputItem">
<text>预购房产现在市场单价：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">m²/元</label>
</view>
</view>
<view class="inputItem">
<text>首付款最低成数：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">m²</label>
</view>
</view>
<view class="inputItem">
<text>新房贷款年限：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">m²</label>
</view>
</view>
<view class="inputItem">
<text>新房贷款年利率：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">m²</label>
</view>
</view>
<view class="inputItem">
<text style="flex: 0 0 30%;">购房用途：</text>
<view class="btn_wrapper">
<view class="btn_item ">
投资
</view>
<view class="btn_item selected">
自助
</view>
<view class="btn_item">
其他
</view>
</view>
</view>
</view>
</view>
<view class="inputItem">
<text>新房贷款年利率：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">m²</label>
<!--资源信息-->
<view class="sourcesInfo">
<view class="title">
<view>
资源信息
</view>
</view>
<view class="inputItem">
<text>已备首付：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">万元</label>
</view>
</view>
<view class="inputItem">
<text>年预备还房贷资金总额：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">万元</label>
</view>
</view>
</view>
</view>
<view class="inputItem">
<text style="flex: 0 0 30%;">购房用途：</text>
<view class="btn_wrapper">
<view class="btn ">
投资
<!--房屋置换-->
<view class="houseInfo">
<view class="title">
<view class="radioButton" :class="{'selected':!isDisplace }"></view>
<text style="margin-left: 10rpx;">是否置换旧房</text>
</view>
<view class="inputItem">
<text>旧房贷款余额：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">万元</label>
</view>
</view>
<view class="btn selected">
自助
<view class="inputItem">
<text>旧房贷款剩余月份：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">月</label>
</view>
</view>
<view class="btn">
其他
<view class="inputItem">
<text>旧房贷款利率：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">%</label>
</view>
</view>
<view class="inputItem">
<text style="flex: 0 0 35%;">旧房贷款方式：</text>
<view class="btn_wrapper">
<view class="btn_item" style="width: 120rpx;">
公积金
</view>
<view class="btn_item selected" style="width: 120rpx;">
商业贷
</view>
<view class="btn_item" style="width: 120rpx;">
组合贷
</view>
</view>
</view>
<view class="inputItem">
<text style="flex: 0 0 35%;">旧房还款方式：</text>
<view class="btn_wrapper">
<view class="btn_item" style="width: 140rpx;">
等额本金
</view>
<view class="btn_item selected" style="width: 140rpx;">
等额本息
</view>
</view>
</view>
</view>
</view>
</view>
<!--资源信息-->
<view class="sourcesInfo">
<view class="title">
<view>
资源信息
<!--规划参数-->
<view class="parametersInfo">
<view class="title">
<view>
规划参数
</view>
<view class="view">
查看
</view>
</view>
</view>
</view>
<view class="inputItem">
<text>已备首付：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">万元</label>
<!-- 操作 -->
<view class="optionContent">
<button type="default" plain="true" form-type="reset"
>全部清空</button>
<button type="default" plain="true"
class="btn">开始计算</button>
</view>
</view>
<view class="inputItem">
<text>年预备还房贷资金总额：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">万元</label>
</form>
<!--测算结果-->
<view class="result_wrapper">
<view class="suggestInfo">
<view class="title">
<view>
测算结果及建议
</view>
</view>
</view>
</view>
<!--房屋置换-->
<view class="houseInfo">
<view class="title">
<view class="radioButton" :class="{'selected':!isDisplace }"></view>
<text style="margin-left: 10rpx;">是否置换旧房</text>
</view>
<view class="inputItem">
<text>旧房贷款余额：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">万元</label>
<view id="myEcharts" style="height: 500rpx;"></view>
<view>
1.如您想实现N年后在XX地区购买XXX㎡的房产，那么您还需要提高首付款到XXXX元，或您需提高每年预备还房贷资金总额到XXXX元。
</view>
</view>
<view class="inputItem">
<text>旧房贷款剩余月份：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">月</label>
<view>
2.根据您的已备首付款和每年预备还房贷资金总额，您在N年后可实现购买房屋单价为XXX元/㎡，总价为XXXX元的房产。
</view>
</view>
<view class="inputItem">
<text>旧房贷款利率：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">%</label>
</view>
</view>
<view class="inputItem">
<text style="flex: 0 0 35%;">旧房贷款方式：</text>
<view class="btn_wrapper">
<view class="btn" style="width: 140rpx;">
公积金
<view class="line">
<view class="line_title">房屋总价</view>
<view class="content">
<view class="left">
<view class="realizable">可实现的</view>
<view>终值：1,233,930元</view>
<view class="now">
现值：1,233,930元
</view>
</view>
<view class="btn selected" style="width: 140rpx;">
商业贷
</view>
<view class="btn" style="width: 150rpx;">
组合贷
<view class="right">
<view class="realizable">你想要的</view>
<view>终值：1,233,930元</view>
<view class="now">
现值：1,233,930元
</view>
</view>
</view>
</view>
<view class="inputItem">
<text style="flex: 0 0 35%;">旧房还款方式：</text>
<view class="btn_wrapper">
<view class="btn" style="width: 160rpx;">
等额本金
</view>
<view class="btn selected" style="width: 160rpx;">
等额本息
</view>
<view class="line_bottom">
恭喜您！经过测算，您已超出目标值XXXX,N年后可以达成您的目标.
</view>
</view>
</view>
<!--规划参数-->
<view class="parametersInfo">
<view class="title">
<view>
规划参数
</view>
<view class="line">
<view class="line_title">房屋单价</view>
</view>
<view class="line">
<view class="line_title">首付款</view>
</view>
<view class="line">
<view class="line_title">贷款金额</view>
</view>
</view>
<!--底部技术支持组件-->
<foot></foot>
</scroll-view>
<!--底部技术支持组件-->
<foot></foot>
</view>
<!--旧房贷款余额组件-->
<loanBalance></loanBalance>
......@@ -188,10 +250,16 @@
import planningParameters from './loanBalance.vue';
import head from '../header/header.vue';
import foot from '../footer/footer.vue';
import * as echarts from 'echarts';
export default{
data(){
isDisplace:Boolean
return{
isDisplace:false,
myChart:null,
nyear:null,
city:null
}
},
components:{
loanBalance,
......@@ -200,10 +268,36 @@
foot
},
onLoad(){
this.echertWidth=300;
this.sHeight=300;
},
methods:{
drawLine() {
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById('myEcharts'));
// 绘制图表
this.myChart.setOption({
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 43, 49],
type: 'bar',
stack: 'x'
},
{
data: [5, 4, 3, 5, 10],
type: 'bar',
stack: 'x'
}
]
});
},
},
mounted(){
this.drawLine();
}
}
</script>
......@@ -222,15 +316,16 @@
.inputItem .btn_wrapper{
display: flex;
}
.btn_wrapper .btn{
width: 130rpx;
.btn_wrapper .btn_item{
width: 100rpx;
padding:5rpx 0;
border: 1px solid #CEB07D;
margin-right: 10rpx;
text-align: center;
position: relative;
font-size: 26rpx;
}
.btn_wrapper .btn:last-child{
.btn_wrapper .btn_item:last-child{
margin-right: 0;
}
.btn_wrapper .selected{
......@@ -239,13 +334,80 @@
.btn_wrapper .selected:after{
display:block;
content:'';
border-width:25rpx 25rpx 25rpx 25rpx;
border-width:20rpx 20rpx 20rpx 20rpx;
border-style:solid;
border-color:#FED495 transparent transparent transparent;
position:absolute;
right: -25rpx;
right: -20rpx;
transform: rotate(-45deg);
bottom: -25rpx;
bottom: -11.5px;
}
.title .view{
color: #666;
border: 1px #FED495 solid;
font-weight: normal;
padding:8rpx 20rpx;
font-size: 28rpx;
width: 110rpx;
text-align: center;
}
.line{
border-radius: 10rpx;
box-shadow: 0 0 5px #969696;
background: #fff;
margin: 20rpx 0;
padding: 0 10rpx 20rpx 10rpx;
}
.line .line_title{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
color: #fff;
width: 40%;
border-radius: 10rpx 0 10rpx 0;
text-align: center;
padding: 10rpx 0;
margin-left: -10rpx;
}
.content{
display: flex;
color: #fff;
justify-content: space-around;
margin: 20rpx 0;
}
.content .left,.content .right{
background: #1349DD;
border-radius: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
width: 48%;
box-shadow: 0 1px 1px #969696;
}
.content .right{
background: #F07006;
}
.content .left .realizable,.content .right .realizable{
width: 60%;
background: #fff;
border-radius: 0 0 10rpx 10rpx;
text-align: center;
padding: 10rpx 0;
margin: 0;
}
.content .left .realizable{
color:#1349DD;
}
.content .left view,.content .right view{
margin: 10rpx 0;
}
.content .right .realizable{
color:#F07006;
}
.line .line_bottom{
background: #e9ffe6;
color: #666;
width: 98%;
padding: 10rpx;
}
</style>
\ No newline at end of file
pages/index/index.css
......@@ -82,27 +82,7 @@
margin-bottom: 60rpx;
padding-bottom: 60rpx;
}
.optionContent{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
padding-bottom: 30rpx;
}
.optionContent button{
flex: 0 0 46%;
border:2rpx solid #e7c793;
font-size: 36rpx;
}
.btn{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
border: none;
color: #6B4000;
}
.batchDataResult{
box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.1);
margin-top: 32rpx;
......
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