<!--
* @Author: wangliang
* @date 20220727
-->
<template>
<div>
<div class="rarle">
<!--上部分-->
<div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
<tatle-bar :tatle="titleName" :tatleflag="titleflag" >
</tatle-bar>
<div class="bar">
<van-row>
<van-col span="12" style="text-align: center;line-height: 31px;border-radius: 4px 0px 0px 4px;margin-top: 1px" :class="flagA?'white':'green'" @click="chooseA">存款利息试算</van-col>
<van-col span="12" style="text-align: center;line-height: 31px;border-radius: 0px 4px 4px 0px;margin-top: 1px" :class="flagB?'white':'green'" @click="chooseB">贷款利息试算</van-col>
</van-row>
</div>
</div>
<div class="card" v-if="flag" :model="test">
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">储蓄方式
<a-select v-model:value="test.saveType" :options="saveTypes" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto">
</a-select>
</div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">定期类型
<a-select v-model:value="test.timeType" :options="timeTypes" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto">
</a-select>
</div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">期限
<a-select v-model:value="test.time" :options="times" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto">
</a-select>
</div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">年利率(%)<van-field v-model="test.yearRate" placeholder="请输入" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">存入金额(元)<van-field v-model="test.depositAmt" placeholder="请输入" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
</div>
<div v-if="flag" style="margin-top: 160px; text-align: right; margin-right: 10px; font-size: 12px; color: #3672F1" @click="toDepositRate">
查看基准存款利率
</div>
<div class="card" v-if="!flag" :model="test2">
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款金额(元)<van-field v-model="test2.loanAmt" placeholder="请输入贷款金额" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款期限(月)<van-field v-model="test2.loanTime" placeholder="请输入贷款期限" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">计划月还款(元)<van-field v-model="test2.planMonthRepay" placeholder="请输入计划月还款" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款利率(%)<van-field v-model="test2.loanRate" placeholder="请输入贷款利率" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款种类
<a-select v-model:value="test2.loanType" :options="loanTypes" placeholder="请选择贷款种类" style="width: 50%;margin-top: -2%;margin-left: auto">
</a-select>
</div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式<a-select :v-model="test2.repayType" @change="handleChoiceChange" placeholder="请选择还款方式" style="width: 50%;margin-top: -2%;margin-left: auto">
<a-select-option v-for="(item, index) in choices" :key="index" :value="item">
{{item}}
</a-select-option>
</a-select></div>
</div>
<div v-if="flag">
<van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 40%;height: 6%;border-radius: 5px;" type="primary" @click="countA">计算</van-button>
<van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 54%;height: 6%;border-radius: 5px;border-color: #1890ff" @click="clearData"><span style="color: #1890ff">清除</span></van-button>
</div>
<div v-if="!flag">
<van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary" @click="countB">计算</van-button>
<van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 102%;height: 6%;border-radius: 5px;border-color: #1890ff"><span style="color: #1890ff">清除</span></van-button>
</div>
</div>
</div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {Test} from "@/views/DepositInterestTrial/Test";
@Component({
name: "DepositInterestTrial",
})
export default class DepositInterestTrial extends Vue{
choices: string[] = ["利随本清","等额本金","等额本息"];
loanTypes: any[] = [
{
value : "有抵押",
label : "有抵押",
},{
value : "无抵押",
label : "无抵押",
}
];
saveTypes: any[] = [
{
value : "定期",
label : "定期",
},{
value : "非定期",
label : "非定期",
}
];
timeTypes: any[] = [
{
value : "定存整取",
label : "定存整取",
},{
value : "零存整取",
label : "零存整取",
},{
value : "整存整取",
label : "整存整取",
}
];
times: any[] = [
{
value : "1",
label : "一年",
},{
value : "2",
label : "两年",
},{
value : "3",
label : "三年",
}
];
test2: any = {
loanAmt: "",
loanTime: "",
planMonthRepay : "",
loanRate: "",
loanType: undefined,
repayType: "",
};
test: Test = new Test();//测试数据
flag:boolean=true;
flagA=true;
flagB=false;
titleName:any ="存款利息试算";
titleflag:boolean=true;
chooseA() {
this.flag = true;
this.titleName="存款利息试算";
this.flagA=true;
this.flagB=false;
}
chooseB() {
this.flag = false;
this.titleName="贷款利息试算";
this.flagA=false;
this.flagB=true;
}
countA() {
let result = 0;
result = parseInt(this.test.depositAmt)*parseInt(this.test.yearRate)/100*parseInt(this.test.time?this.test.time:"0");
this.$router.push({
name: "CountResultB",
params: {
saveType: this.test.saveType || "0",
timeType: this.test.timeType || "0",
time: this.test.time || "0",
yearRate: this.test.yearRate,
depositAmt: this.test.depositAmt,
result: result.toString(),
}
})
}
countB() {
let result = 0;
result = parseInt(this.test2.loanAmt)*parseInt(this.test2.loanRate)/100*parseInt(this.test2.loanTime)/12;
this.$router.push({
name: "CountResult",
params: {
loanAmt: this.test2.loanAmt,
loanTime: this.test2.loanTime,
planMonthRepay: this.test2.planMonthRepay,
loanRate: this.test2.loanRate,
loanType: this.test2.loanType,
repayType: this.test2.repayType,
result: result.toString(),
}
})
}
clearData() {
this.test = new Test();
}
handleChoiceChange(value:any) {
this.test2.repayType = value;
}
toDepositRate() {
this.$router.push({
name: "DepositRate"
});
}
}
</script>
<style scoped lang="scss">
.bar{
margin: 0px auto;
width: 90%;
height: 14%;
background-color: #ffffff;
margin-top: 4%;
border-radius: 4px;
}
.white{
background-color: #ffffff;
color: #0073ff;
}
.green{
background-color: #409eff;
color: #ffffff;
}
.card{
position: absolute;
background-color: #ffffff;
width: 90%;
margin-left: 5%;
margin-top: -30%;
}
::v-deep .ant-select-selection {
border: none;
}
</style>