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 @@
align-items: center;
background-color: #fff;
padding-bottom: 30rpx;
z-index: 1;
}
.optionContent button{
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 = {
stage,
prod
}
let env = 'prod';
let env = 'dev';
// if (process.env.NODE_ENV === 'development') {
// env = 'dev';
// }else if (process.env.NODE_ENV === 'production') {
......
package-lock.json
{
"name": "sfp-program",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"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"
}
}
},
"lockfileVersion": 1,
"dependencies": {
"echarts": {
"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==",
"requires": {
"tslib": "2.3.0",
......@@ -52,6 +16,11 @@
"resolved": "https://registry.npmjs.org/jweixin-module/-/jweixin-module-1.6.0.tgz",
"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": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
......
package.json
{
"dependencies": {
"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 @@
<text>几年后购房：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
/><label for="">年</label>
maxlength="3" v-model="nyear" />
<label for="">年</label>
</view>
</view>
<view class="inputItem">
<text>预购城市：</text>
<!-- <view class="inputContent">
<select name="" id="">
<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 placeholder="请选择地区" popup-title="请选择所在地区" :localdata="provinceList" v-model="classes"
@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
</uni-data-picker>
</view>
<view class="inputItem">
<text>预购面积：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
maxlength="3" v-model="preOrderSize"
/><label for="">m²</label>
</view>
</view>
......@@ -46,7 +40,7 @@
<text>预购房产现在市场单价：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
maxlength="3" v-model="targetPrice"
/><label for="">m²/元</label>
</view>
</view>
......@@ -54,7 +48,7 @@
<text>首付款最低成数：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
maxlength="3" v-model="downPaymentMin"
/><label for="">m²</label>
</view>
</view>
......@@ -62,7 +56,7 @@
<text>新房贷款年限：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
maxlength="3" v-model="newLoanYear"
/><label for="">m²</label>
</view>
</view>
......@@ -70,21 +64,17 @@
<text>新房贷款年利率：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
maxlength="3" v-model="housePriceGrowthRate"
/><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 class="btn_item" :class="{ 'selected': housePurchaseType==housePurchaseTypeItem.id }"
v-for="housePurchaseTypeItem in housePurchaseTypeList"
@click="housePurchase(housePurchaseTypeItem.id)">
{{housePurchaseTypeItem.name}}
</view>
</view>
</view>
......@@ -100,7 +90,7 @@
<text>已备首付：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
maxlength="3" v-model="firstHouseAmount"
/><label for="">万元</label>
</view>
</view>
......@@ -108,7 +98,7 @@
<text>年预备还房贷资金总额：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入"
maxlength="3"
maxlength="3" v-model="repaymentSpecial"
/><label for="">万元</label>
</view>
</view>
......@@ -274,22 +264,28 @@
import foot from '../footer/footer.vue';
import * as echarts from 'echarts';
import api from '../../api/api';
import common from '../../common/common';
export default{
data(){
return{
isDisplace:false,
myChart:null,
nyear:null,
nyear:null,//几年后购房
city:'',
provinceList: [{
provinceName:'选项1',
provinceId:'1'
},
{
provinceName:'选项2',
provinceId:'2'
},],
provinceList: [],
provinceCode:null,
provinceName:null,
cityCode:null,
cityName:null,
preOrderSize:null,//预购面积
targetPrice:null,//目标价格(现值)
downPaymentMin:null,//首付款最低成数(百分位)
newLoanYear:null,//新房贷款年限【必须大于0】
firstHouseAmount:null,//初期购房资金(单位万)
housePurchaseType:null,//购房用途
repaymentSpecial:null,//每年还贷专用款(单位万)
housePurchaseTypeList:[{id:1,name:'投资'},{id:2,name:'自住'},{id:3,name:'其他'}]
}
},
components:{
......@@ -333,9 +329,14 @@
api.provCityQry({insurerId:888}).then((res)=>{
console.log(res)
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(){
......@@ -343,7 +344,8 @@
}
}
</script>
<style scoped>
<style scoped lang="scss">
.wrapper{
.houseInfo .title{
padding-left: 0;
justify-content: flex-start;
......@@ -351,14 +353,16 @@
.houseInfo .title::before{
width: 0;
}
.inputContent label{
.inputItem {
.inputContent {
label{
width: 200rpx;
text-align: right;
}
.inputItem .btn_wrapper{
display: flex;
}
.btn_wrapper .btn_item{
.btn_wrapper{
display: flex;
.btn_item{
width: 100rpx;
padding:5rpx 0;
border: 1px solid #CEB07D;
......@@ -370,10 +374,10 @@
.btn_wrapper .btn_item:last-child{
margin-right: 0;
}
.btn_wrapper .selected{
.selected{
color:#FED495;
}
.btn_wrapper .selected:after{
.selected:after{
display:block;
content:'';
border-width:20rpx 20rpx 20rpx 20rpx;
......@@ -384,6 +388,8 @@
transform: rotate(-45deg);
bottom: -11.5px;
}
}
}
.title .view{
color: #666;
border: 1px #FED495 solid;
......@@ -393,14 +399,14 @@
width: 110rpx;
text-align: center;
}
.result_wrapper{
.line{
border-radius: 10rpx;
box-shadow: 0 0 5px #969696;
background: #fff;
margin: 20rpx 0;
padding: 0 10rpx 20rpx 10rpx;
}
.line .line_title{
.line_title{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
color: #fff;
width: 40%;
......@@ -414,8 +420,7 @@
color: #fff;
justify-content: space-around;
margin: 20rpx 0;
}
.content .left,.content .right{
.left,.right{
background: #1349DD;
border-radius: 8rpx;
display: flex;
......@@ -423,11 +428,14 @@
align-items: center;
width: 48%;
box-shadow: 0 1px 1px #969696;
view {
margin: 10rpx 0;
}
.content .right{
}
.right{
background: #F07006;
}
.content .left .realizable,.content .right .realizable{
.left .realizable,.right .realizable{
width: 60%;
background: #fff;
border-radius: 0 0 10rpx 10rpx;
......@@ -435,25 +443,24 @@
padding: 10rpx 0;
margin: 0;
}
.content .left .realizable{
.left .realizable{
color:#1349DD;
}
.content .left view,.content .right view{
margin: 10rpx 0;
}
.content .right .realizable{
.right .realizable{
color:#F07006;
}
.line .line_bottom{
}
.line_bottom{
background: #e9ffe6;
color: #666;
width: 98%;
padding: 10rpx;
}
.line .line_bottom.fail{
.line_bottom.fail{
background: #ffe6e6;
}
}
}
}
</style>
\ No newline at end of file
pages/housePurchase/planningParameters.vue
......@@ -30,6 +30,7 @@
<script>
import api from '../../api/api';
import common from '../../common/common'
export default{
data(){
return {
......@@ -70,30 +71,10 @@
api.provCityQry({insurerId:888}).then((res)=>{
console.log(res)
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() {
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 @@
.title-area {
/* #ifndef APP-NVUE */
display: flex;
/* display: flex; */
/* #endif */
align-items: center;
/* #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