Skip to content

M
mcep-h5
提交 0ddee2db 编写于 作者: donghuawangliang0612's avatar donghuawangliang0612
浏览文件
操作

存款利息,贷款利息试算

上级 af13cd67
隐藏空白字符变更
内嵌 并排
正在显示 包含 143 行增加 和 28 行删除
src/views/DepositInterestTrial/CountResult.vue
浏览文件 @ 0ddee2db
......@@ -13,20 +13,20 @@
<div style="margin-top: 4%;text-align: center"><span style="color: #9e9e9e">贷款利息试算金额</span></div>
<div style="margin-top: 4%;text-align: center;z-index: 1"><span style="color: #FFA121;font-size: 36px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
font-weight: 700;
font-style: normal;">¥100000.00</span></div>
<div style="margin-top: 4%;text-align: center"><span style="color: #FFA121">壹佰万元整</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>贷款金额(元)</span><span style="margin-left: auto">20000</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>贷款期限(月)</span><span style="margin-left: auto">20000</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>贷款利率(%)</span><span style="margin-left: auto">20000</span></div>
<div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>计划月还款(元)</span><span style="margin-left: auto">20000</span></div>
<div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>贷款种类</span><span style="margin-left: auto">一般经营贷款</span></div>
<div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>还款方式</span><span style="margin-left: auto">等额本息</span></div>
font-style: normal;">¥{{result}}</span></div>
<div style="margin-top: 4%;text-align: center"><span style="color: #FFA121">{{result}}</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>贷款金额(元)</span><span style="margin-left: auto">{{loanAmt}}</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>贷款期限(月)</span><span style="margin-left: auto">{{loanTime}}</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>贷款利率(%)</span><span style="margin-left: auto">{{loanRate}}</span></div>
<div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>计划月还款(元)</span><span style="margin-left: auto">{{result/loanTime}}</span></div>
<!-- <div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>贷款种类</span><span style="margin-left: auto">一般经营贷款</span></div>-->
<div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>还款方式</span><span style="margin-left: auto">{{choice}}</span></div>
<div style="margin-top: 17%;height: 20%;position: absolute;width: 100%;align-self: center;z-index: 0">
<van-divider v-for="count in 12" :key="count" style="background-color: #c6c8ca;margin-top: -11px;margin-left: 10%;height: 0.5px;width: 80%;"/>
</div>
</div>
<van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary">确定</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>
<van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 102%;height: 6%;border-radius: 5px;border-color: #1890ff" @click="returnCount"><span style="color: #1890ff">重新计算</span></van-button>
</div>
</div>
</template>
......@@ -37,8 +37,25 @@ import {Component, Prop, Vue} from "vue-property-decorator";
name: "CountResult",
})
export default class CountResult extends Vue{
choice="";
result="";
loanAmt="";
loanRate="";
loanTime="";
titleName="试算结果";
titleflag=true;
mounted() {
this.result = this.$route.params.result;
this.loanAmt = this.$route.params.loanAmt;
this.loanRate = this.$route.params.loanRate;
this.loanTime = this.$route.params.loanTime;
this.choice = this.$route.params.choice;
}
returnCount() {
this.$router.push({
name: "DepositInterestTrial",
});
}
}
</script>
......
src/views/DepositInterestTrial/CountResultB.vue
浏览文件 @ 0ddee2db
......@@ -13,18 +13,18 @@
<div style="margin-top: 4%;text-align: center"><span style="color: #9e9e9e">存款收益后账户金额</span></div>
<div style="margin-top: 4%;text-align: center;z-index: 1"><span style="color: #FFA121;font-size: 36px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
font-weight: 700;
font-style: normal;">¥100000.00</span></div>
<div style="margin-top: 4%;text-align: center"><span style="color: #FFA121">壹佰万元整</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>存款金额(元)</span><span style="margin-left: auto">20000</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>存款时长(月)</span><span style="margin-left: auto">20000</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>存款利率(%)</span><span style="margin-left: auto">20000</span></div>
<div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>共计收益(元)</span><span style="margin-left: auto">20000</span></div>
font-style: normal;">¥{{countResult}}</span></div>
<div style="margin-top: 4%;text-align: center"><span style="color: #FFA121">{{countResult}}</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>存款金额(元)</span><span style="margin-left: auto">{{depositAmt}}</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>存款时长(月)</span><span style="margin-left: auto">{{depositTime}}</span></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>存款利率(%)</span><span style="margin-left: auto">{{depositRate}}</span></div>
<div class="d-flex" style="margin-top: -2%;margin-left: 5%;margin-bottom: 6%;width: 90%"><span>共计收益(元)</span><span style="margin-left: auto">{{countResult-depositAmt}}</span></div>
<div style="margin-top: 17%;height: 20%;position: absolute;width: 100%;align-self: center;z-index: 0">
<van-divider v-for="count in 12" :key="count" style="background-color: #c6c8ca;margin-top: -11px;margin-left: 10%;height: 0.5px;width: 80%;"/>
</div>
</div>
<van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary">确定</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>
<van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 102%;height: 6%;border-radius: 5px;border-color: #1890ff" @click="returnCount"><span style="color: #1890ff">重新计算</span></van-button>
</div>
</div>
</template>
......@@ -35,8 +35,23 @@ import {Component, Prop, Vue} from "vue-property-decorator";
name: "CountResultB",
})
export default class CountResultB extends Vue{
countResult="";
depositAmt="";
depositTime="";
depositRate="";
titleName="试算结果";
titleflag=true;
returnCount() {
this.$router.push({
name: "DepositInterestTrial",
});
}
mounted() {
this.countResult = this.$route.params.countResult;
this.depositAmt = this.$route.params.depositAmt;
this.depositTime = parseInt(this.$route.params.depositTime).toString();
this.depositRate = this.$route.params.depositRate;
}
}
</script>
......
src/views/DepositInterestTrial/DepositInterestTrial.vue
浏览文件 @ 0ddee2db
......@@ -16,22 +16,35 @@
</van-row>
</div>
</div>
<div class="card" v-if="flag">
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">存款金额(元)<van-field 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 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 placeholder="请输入取出日期" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
<div class="card" v-if="flag" :model="test">
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">存款金额(元)<van-field v-model="test.depositAmt" 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="test.depositRate" 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="test.putDate" 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.getDate" placeholder="请输入取出日期" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
</div>
<div class="card" v-if="!flag">
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款金额(元)<van-field 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 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 placeholder="请输入计划月还款" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
<div class="d-flex" style="margin-top: -2%;margin-left: 5%">贷款利率(%)<van-field 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 placeholder="请选择贷款种类" style="width: 50%;margin-top: -4%;margin-left: auto" is-link/></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式<van-field placeholder="请选择还款方式" style="width: 50%;margin-top: -4%;margin-left: auto" is-link/></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%;margin-bottom: 6%">计划月还款(元)<van-field 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%">贷款种类<van-field placeholder="请选择贷款种类" style="width: 50%;margin-top: -4%;margin-left: auto" is-link arrow-direction="down"/></div>-->
<!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式<van-field placeholder="请选择还款方式" style="width: 50%;margin-top: -4%;margin-left: auto" is-link arrow-direction="down"/></div>-->
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式<a-select :v-model="choice" @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 class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式-->
<!-- <div style="width: 50%;margin-top: -4%;margin-left: auto">-->
<!-- <van-dropdown-menu>-->
<!-- <van-dropdown-item :value="value1" :options="option1" />-->
<!-- </van-dropdown-menu>-->
<!-- </div>-->
<!-- </div>-->
</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="countA">计算</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>
<van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 102%;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>
......@@ -43,10 +56,26 @@
<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[] = ["利随本清","等额本金","等额本息"];
choice = "";
test2: any = {
loanAmt: "",
loanTime: "",
loanRate: "",
};
// value1 = 0;
// option1 = [
// { text: '请选择还款方式', value: 0 },
// { text: '利随本清', value: 1 },
// { text: '等额本金', value: 2 },
// { text: '等额本息', value: 3 },
// ]
test: Test = new Test();//测试数据
flag:boolean=true;
flagA=true;
flagB=false;
......@@ -65,15 +94,47 @@ export default class DepositInterestTrial extends Vue{
this.flagB=true;
}
countA() {
let result = 0;
let yearA = parseInt(this.test.putDate.substring(0,4));
let yearB = parseInt(this.test.getDate.substring(0,4));
let monthA = parseInt(this.test.putDate.substring(4,6));
let monthB = parseInt(this.test.getDate.substring(4,6));
let dayA = parseInt(this.test.putDate.substring(6));
let dayB = parseInt(this.test.getDate.substring(6));
result = parseInt(this.test.depositAmt)+ parseInt(this.test.depositAmt)*parseInt(this.test.depositRate)*((yearB-yearA)*365+(monthB-monthA)*30+(dayB-dayA))/36500;
console.log(result);
this.$router.push({
name: "CountResultB",
params: {
countResult: result.toString(),
depositAmt: this.test.depositAmt,
depositTime: (((yearB-yearA)*365+(monthB-monthA)*30+(dayB-dayA))/30).toString(),
depositRate: this.test.depositRate,
}
})
}
countB() {
let result = 0;
result = parseInt(this.test2.loanAmt)+parseInt(this.test2.loanAmt)*parseInt(this.test2.loanRate)*parseInt(this.test2.loanTime)/100;
console.log(result);
console.log("**********"+JSON.stringify(this.choice));
this.$router.push({
name: "CountResult",
params: {
result: result.toString(),
loanAmt: this.test2.loanAmt,
loanRate: this.test2.loanRate,
loanTime: this.test2.loanTime,
choice: this.choice,
}
})
}
clearData() {
this.test = new Test();
}
handleChoiceChange(value:any) {
this.choice = value;
}
}
</script>
......@@ -101,4 +162,7 @@ export default class DepositInterestTrial extends Vue{
margin-left: 5%;
margin-top: -30%;
}
::v-deep .ant-select-selection {
border: none;
}
</style>
src/views/DepositInterestTrial/Test.ts 0 → 100644
浏览文件 @ 0ddee2db
export class Test {
depositAmt: string;
depositRate: string;
putDate: string;
getDate: string;
constructor(
options: {
depositAmt?: string;
depositRate?: string;
putDate?: string;
getDate?: string;
} = {}
) {
this.depositAmt = options.depositAmt || "";
this.depositRate = options.depositRate || "";
this.putDate = options.putDate || "";
this.getDate = options.getDate || "";
}
}
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或