<!--
* @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" style="height: calc(5vh); " justify="center">
<van-row >
<van-col span="11" style=" width:49%; text-align: center;line-height: calc(4vh);border-radius: 4px 0px 0px 4px;margin:calc(0.5vh) 0% calc(0.5vh) 0.5%;" :class="flagA?'white':'green'" @click="chooseA">存款利息试算</van-col>
<van-col span="11" style="width:49%; text-align: center;line-height: calc(4vh);border-radius: 0px 4px 4px 0px;margin: calc(0.5vh) 0.5% calc(0.5vh) 0%;" :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> -->
<van-row type="flex" class="layoutName">
<van-col span="24">
<!-- <van-field is-link readonly :value="this.typeValue" label="储蓄方式" input-align="right" placeholder="请选择储蓄方式" @click="showTypes = true" />-->
<van-field is-link readonly :value="test.saveType" label="储蓄方式" input-align="right" placeholder="请选择储蓄方式" @click="showTypes = true" />
<van-popup v-model="showTypes" round position="bottom">
<van-picker
show-toolbar
:columns="saveTypes"
@cancel="showTypes = false"
@confirm="onConfirmTypes"
/>
</van-popup>
</van-col>
</van-row>
<!-- <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> -->
<van-row type="flex" class="layoutName">
<van-col span="24">
<!-- <van-field is-link readonly :value="timeTypeValue" label="定期类型" input-align="right" placeholder="请选择定期类型" @click="showTimeTypes = true"/>-->
<van-field is-link readonly :value="test.timeType" label="存款类型" input-align="right" placeholder="请选择定期类型" @click="showTimeTypes = true"/>
<van-popup v-model="showTimeTypes" round position="bottom">
<van-picker
show-toolbar
:columns="timeTypes"
@cancel="showTimeTypes = false"
@confirm="onConfirmTimeTypes"
/>
</van-popup>
</van-col>
</van-row>
<!-- <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> -->
<van-row type="flex" class="layoutName">
<van-col span="24">
<!-- <van-field is-link readonly :value="timeValue" label="期限" input-align="right" placeholder="请选择期限" @click="showTimes = true"/>-->
<van-field is-link readonly :value="test.time" label="期限" input-align="right" placeholder="请选择期限" @click="showTimes = true"/>
<van-popup v-model="showTimes" round position="bottom">
<van-picker
show-toolbar
:columns="times"
@cancel="showTimes = false"
@confirm="onConfirmTimes"
/>
</van-popup>
</van-col>
</van-row>
<!-- <div class="d-flex" style="padding: 10px 16 px ;margin-top: 6%;margin-left: 5%">年利率(%)<van-field v-model="test.yearRate" placeholder="请输入" style="width: 50%;margin-top: -4%;margin-left: auto" input-align="right"></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" input-align="right"></van-field></div> -->
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field v-model="test.yearRate" label="年利率(%)" input-align="right" placeholder="请输入 " >
</van-field>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field v-model="test.depositAmt" label="存入金额(元)" input-align="right" placeholder="请输入 " />
</van-col>
</van-row>
</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;" input-align="right"></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" input-align="right"></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.loanTime" placeholder="请输入贷款利率 " style="width: 50%;margin-top: -4%;margin-left: auto;" input-align="right"></van-field></div> -->
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field v-model="test2.loanAmt" label="贷款金额(元)" input-align="right" placeholder="请输入 " />
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field v-model="test2.loanTime" label="贷款期限(月)" input-align="right" placeholder="请输入 " />
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field v-model="test2.loanRate" label="贷款利率(%)" input-align="right" placeholder="请输入 " />
</van-col>
</van-row>
<!-- <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:value="test2.repayType" :options="choices" placeholder="请选择还款方式" style="width: 60%;margin-top: -2%;margin-left: auto">
</a-select>
</div> -->
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field style="color: red;" is-link readonly :value="test2.repayType" label="还款方式" input-align="right" placeholder="请选择还款方式" @click="showChoices = true"/>
<van-popup v-model="showChoices" round position="bottom">
<van-picker
show-toolbar
:columns="choices"
@cancel="showChoices = false"
@confirm="onConfirmChoices"
/>
</van-popup>
</van-col>
</van-row>
</div>
<!-- <div style="margin-top:-60px;"> -->
<div v-if="flag">
<van-button style="width: 90%;margin-left: 5%;background-color: #3672F1;position: absolute;margin-top: 60%;height: 6%;border-radius: 5px; border-color: #3672F1" type="primary" @click="countA">计算</van-button>
<van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 75%;height: 6%;border-radius: 5px;border-color: #3672F1" @click="clearData"><span style="color: #3672F1">清除</span></van-button>
</div>
<div v-if="!flag">
<van-button style="width: 90%;margin-left: 5%;background-color: #3672F1;position: absolute;margin-top: 60%;height: 6%;border-radius: 5px; border-color: #3672F1" type="primary" @click="countB">计算</van-button>
<van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 75%;height: 6%;border-radius: 5px;border-color: #3672F1" @click="clearDataB"><span style="color: #3672F1">清除</span></van-button>
</div>
</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{
loanTypes: any[] = [
{
value : "有抵押",
label : "有抵押",
},{
value : "无抵押",
label : "无抵押",
}
];
typeValue:any= "";
showTypes:any=false;
// saveTypes: any[] = [
// {
// value : "定期",
// label : "定期",
// },{
// value : "非定期",
// label : "非定期",
// }
// ];
saveTypes: any[] = [
"定期","活期",
];
onConfirmTypes(typeValue: string) {
this.test.saveType = typeValue;
this.showTypes = false;
}
// choices: any[] = [
// {
// value : "利随本清",
// label : "利随本清",
// },{
// value : "等额本金",
// label : "等额本金",
// },{
// value : "等额本息",
// label : "等额本息",
// },
// {
// value : "按季结息(到期一次性还本)",
// label : "按季结息(到期一次性还本)",
// },{
// value : "按月结息(到期一次性还本)",
// label : "按月结息(到期一次性还本)",
// },{
// value : "按年结息(到期一次性还本)",
// label : "按年结息(到期一次性还本)",
// }
// ];
choiceValue:any= "";
showChoices:any=false;
choices: any[] = [
"利随本清",
"等额本金",
"等额本息",
"按月结息(到期一次性还本)",
"按季结息(到期一次性还本)",
"按年结息(到期一次性还本)",
];
onConfirmChoices(choiceValue: string) {
this.test2.repayType = choiceValue;
this.showChoices = false;
}
// timeTypes: any[] = [
// {
// value : "定存整取",
// label : "定存整取",
// },{
// value : "零存整取",
// label : "零存整取",
// },{
// value : "整存整取",
// label : "整存整取",
// }
// ];
timeTypeValue:any= "";
showTimeTypes:any=false;
timeTypes: any[] = [
"定存整取",
"零存整取",
"整存整取",
];
onConfirmTimeTypes(timeTypeValue: string) {
this.test.timeType = timeTypeValue;
this.showTimeTypes = false;
}
timeValue:any= "";
showTimes:any=false;
// times: any[] = [
// {
// value : "1",
// label : "一年",
// },{
// value : "2",
// label : "两年",
// },{
// value : "3",
// label : "三年",
// }
// ];
times: any[] = [
"一年",
"两年",
"三年",
];
onConfirmTimes(timeValue: string) {
this.test.time = timeValue;
this.showTimes = false;
}
test2: any = {
loanAmt: "",
loanTime: "",
//planMonthRepay : "",
loanRate: "",
//loanType: undefined,
repayType: undefined,
};
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=="一年"?"1":this.test.time=="两年"?"2":"3");
console.log("@@@@"+this.test.depositAmt)
if(this.test.depositAmt==""||this.test.yearRate==""||this.test.time==""){
alert("请输入数据");
}else{
this.$router.push({
name: "CountResultB",
params: {
saveType: this.test.saveType || "0",
timeType: this.test.timeType || "0",
time: this.test.time=="一年"?"1":this.test.time=="两年"?"2":"3",
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;
if(this.test2.loanAmt==""||this.test2.loanRate==""||this.test2.loanTime==""){
alert("请输入数据")
}else{
this.$router.push({
name: "CountResult",
params: {
routeName: "aaa",
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();
}
clearDataB() {
this.test2.loanAmt="";
this.test2.loanTime="";
this.test2.repayType=undefined;
this.test2.loanRate="";
}
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: #3672F1;
}
.green{
background-color: #3672F1;
color: #ffffff;
}
.card{
padding: 1.5% 0% 1.5% 0%;
position: absolute;
background-color: #ffffff;
width: 90%;
margin-left: 5%;
margin-top: -25%;
border-radius: 10px;
}
.layoutName {
font-family: "Arial Normal", "Arial";
font-weight: 400;
font-style: normal;
font-size: 13px;
color: rgba(0, 0, 0, 0.65);
}
::v-deep .ant-select-selection {
border: none;
}
::v-deep .van-field__label {
color:#212529;
}
</style>