提交 543358b0 编写于 作者: donghuawangliang0612's avatar donghuawangliang0612

试算修改

上级 57b0c8ce
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
<template> <template>
<!-- <div> --> <!-- <div> -->
<div class="roolsolt" style="background-image:url(require('@/assets/images/mycard.png'))"> <div class="roolsolt">
<div > <div >
<van-row type="flex" class="title"> <van-row type="flex" class="title">
<van-col span="24" >累计贷款金额(元)</van-col> <van-col span="24" style="text-align: left">合同累计金额(元)</van-col>
</van-row> </van-row>
<van-row type="flex" class="mumMoney"> <van-row type="flex" class="mumMoney">
<van-col offset="4" span="11" class="money">100,000,00</van-col> <van-col span="24" class="money">100,000,00</van-col>
<van-col span="9" class="moneytitle">壹佰元整</van-col> <!-- <van-col span="9" class="moneytitle">壹佰元整</van-col>-->
</van-row> </van-row>
<!-- <van-row type="flex" class="title"> <!-- <van-row type="flex" class="title">
<van-col span="24" >已使用贷款金额(元)</van-col> <van-col span="24" >已使用贷款金额(元)</van-col>
...@@ -26,8 +26,12 @@ ...@@ -26,8 +26,12 @@
<van-col span="9" class="moneytitle">壹佰元整</van-col> <van-col span="9" class="moneytitle">壹佰元整</van-col>
</van-row> --> </van-row> -->
<van-row type="flex" justify="center" class="integral"> <van-row type="flex" justify="center" class="integral">
<van-col span="12">已使用贷款金额(元)</van-col> <van-col span="12" style="text-align: left; padding-left: 20px; color: #999999; font-size: 12px">合同已使用金额(元)</van-col>
<van-col span="12">6,0000壹佰元整</van-col> <van-col span="12" style="text-align: left; color: #999999; font-size: 12px">合同未使用金额(元)</van-col>
</van-row>
<van-row type="flex" justify="center" class="integral">
<van-col span="12" style="font-weight: 700; text-align: left; padding-left: 20px">1000000.00</van-col>
<van-col span="12" style="font-weight: 700; text-align: left">1000000.00</van-col>
</van-row> </van-row>
<!-- <van-row type="flex" justify="center" class="integrall"> <!-- <van-row type="flex" justify="center" class="integrall">
<van-col span="8">我的积分</van-col> <van-col span="8">我的积分</van-col>
...@@ -52,9 +56,10 @@ export default class CardPottom extends Vue { ...@@ -52,9 +56,10 @@ export default class CardPottom extends Vue {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.roolsolt{ .roolsolt{
background-image:url("../../assets/images/mycard.png"); background:url("../../assets/images/mycard.png");
width:100%; width:100%;
height:40%; height:40%;
background-size: cover;
} }
.title { .title {
font-size: 14px; font-size: 14px;
...@@ -63,20 +68,22 @@ export default class CardPottom extends Vue { ...@@ -63,20 +68,22 @@ export default class CardPottom extends Vue {
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
color: #999999; color: #999999;
margin-left: 10%;
margin-top: 5%; margin-top: 5%;
margin-left: 20px;
} }
.mumMoney{ .mumMoney{
margin:5% auto;
} }
.money { .money {
font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体', sans-serif; font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体', sans-serif;
font-style: normal; font-style: normal;
font-weight: 700;
font-size: 28px; font-size: 28px;
color: #FF9921; color: #FF9921;
margin-left: 10%; text-align: left;
margin-left: 20px;
margin-top: -6px;
} }
.moneytitle { .moneytitle {
...@@ -96,7 +103,7 @@ export default class CardPottom extends Vue { ...@@ -96,7 +103,7 @@ export default class CardPottom extends Vue {
font-size: 16px; font-size: 16px;
letter-spacing: normal; letter-spacing: normal;
color: #333333; color: #333333;
margin-top: 4px;
} }
.integrall { .integrall {
......
...@@ -47,7 +47,7 @@ export default class LittleCard extends Vue { ...@@ -47,7 +47,7 @@ export default class LittleCard extends Vue {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.d-tattle { .d-tattle {
margin-top: 28%; margin-top: 34%;
} }
.priductName{ .priductName{
padding-top: 2%; padding-top: 2%;
...@@ -69,7 +69,7 @@ export default class LittleCard extends Vue { ...@@ -69,7 +69,7 @@ export default class LittleCard extends Vue {
} }
.vanrow { .vanrow {
margin-top: 6%; margin-top: 3%;
margin-left: 2%; margin-left: 2%;
} }
......
...@@ -10,11 +10,16 @@ ...@@ -10,11 +10,16 @@
<template> <template>
<!-- <div> --> <!-- <div> -->
<div class ="d-tatle"> <div class ="d-tatle">
<van-row > <!-- <van-row >-->
<van-col span="9" v-if="tatleflag"><van-icon name="arrow-left" @click="retyen()" /></van-col> <!-- <van-col span="9" v-if="tatleflag"><van-icon name="arrow-left" @click="retyen()" /></van-col>-->
<van-col span="15">{{tatle}}</van-col> <!-- <van-col span="15">{{tatle}}</van-col>-->
<!-- <slot></slot>-->
<!-- </van-row>-->
<div style="padding-top: 12px; text-align: center; z-index: 0">
<span style="font-size: 18px; color: #FFFFFF">{{tatle}}</span>
</div>
<div style="z-index: 1; margin-top: -26px; margin-left: 4px"><span v-if="tatleflag" style="font-size: 18px; color: #FFFFFF"><van-icon name="arrow-left" @click="retyen()" /></span></div>
<slot></slot> <slot></slot>
</van-row>
</div> </div>
</template> </template>
......
...@@ -25,5 +25,19 @@ const depositInterestTrialRoutes = [ ...@@ -25,5 +25,19 @@ const depositInterestTrialRoutes = [
props: propsConvert, props: propsConvert,
meta: { keepAlive: false, requiresAuth: true, name: "试算结果" }, meta: { keepAlive: false, requiresAuth: true, name: "试算结果" },
}, },
{
path: `/DepositRate`,
name: 'DepositRate',
component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/DepositInterestTrial/DepositRate.vue"),
props: propsConvert,
meta: { keepAlive: false, requiresAuth: true, name: "存款利率" },
},
{
path: `/RepayPlan`,
name: 'RepayPlan',
component: () => import(/* webpackChunkName: "customer-mgt" */ "@/views/DepositInterestTrial/RepayPlan.vue"),
props: propsConvert,
meta: { keepAlive: false, requiresAuth: true, name: "还款计划" },
},
]; ];
export default depositInterestTrialRoutes; export default depositInterestTrialRoutes;
...@@ -10,23 +10,53 @@ ...@@ -10,23 +10,53 @@
</tatle-bar> </tatle-bar>
</div> </div>
<div class="card"> <div class="card">
<div style="margin-top: 4%;text-align: center"><span style="color: #9e9e9e">贷款利息试算金额</span></div> <div style="margin-top: 4%; margin-left: 20px"><span style="color: #9e9e9e">贷款利息(元)</span><span style="margin-left: 130px; color: #3672F1" @click="toSeeRepayPlan">查看还款计划</span></div>
<div style="margin-top: 4%;text-align: center;z-index: 1"><span style="color: #FFA121;font-size: 36px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体'; <div style="margin-top: 0px; margin-left: 20px"><span style="color: #FFA121;font-size: 24px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
font-weight: 700; font-weight: 700;
font-style: normal;">¥{{result}}</span></div> font-style: normal;">{{result}}</span></div>
<div style="margin-top: 4%;text-align: center"><span style="color: #FFA121">{{result}}</span></div> <div style="margin-top: 4%; margin-left: 20px"><span style="color: #9e9e9e">本息合计(元)</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 style="margin-top: 0px; margin-left: 20px"><span style="color: #FFA121;font-size: 24px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>贷款期限(月)</span><span style="margin-left: auto">{{loanTime}}</span></div> font-weight: 700;
<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> font-style: normal;">{{resultPlus}}</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>
<!-- <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 style="margin-top: 50px; margin-left: 30px; margin-right: 30px">
<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> <van-row>
<div style="margin-top: 17%;height: 20%;position: absolute;width: 100%;align-self: center;z-index: 0"> <van-col span="12" style="color: #999999">贷款金额(元)</van-col>
<van-divider v-for="count in 12" :key="count" style="background-color: #c6c8ca;margin-top: -11px;margin-left: 10%;height: 0.5px;width: 80%;"/> <van-col span="12" style="text-align: right">{{loanAmt}}</van-col>
</van-row>
</div>
<div style="margin-top: 20px; margin-left: 30px; margin-right: 30px">
<van-row>
<van-col span="12" style="color: #999999">贷款期限(月)</van-col>
<van-col span="12" style="text-align: right">{{loanTime}}</van-col>
</van-row>
</div>
<div style="margin-top: 20px; margin-left: 30px; margin-right: 30px">
<van-row>
<van-col span="12" style="color: #999999">贷款利率(%)</van-col>
<van-col span="12" style="text-align: right">{{loanRate}}</van-col>
</van-row>
</div> </div>
<div style="margin-top: 20px; margin-left: 30px; margin-right: 30px">
<van-row>
<van-col span="12" style="color: #999999">计划月还款</van-col>
<van-col span="12" style="text-align: right">{{planMonthRepay}}</van-col>
</van-row>
</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> <div style="margin-top: 20px; margin-left: 30px; margin-right: 30px">
<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> <van-row>
<van-col span="12" style="color: #999999">贷款种类</van-col>
<van-col span="12" style="text-align: right">{{loanType}}</van-col>
</van-row>
</div>
<div style="margin-top: 20px; margin-left: 30px; margin-right: 30px">
<van-row>
<van-col span="12" style="color: #999999">还款方式</van-col>
<van-col span="12" style="text-align: right">{{repayType}}</van-col>
</van-row>
</div>
<van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 16%;height: 6%;border-radius: 5px;" type="primary">确定</van-button>
<van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 28%;height: 6%;border-radius: 5px;border-color: #1890ff" @click="returnCount"><span style="color: #1890ff">重新计算</span></van-button>
</div> </div>
</div> </div>
</template> </template>
...@@ -37,23 +67,32 @@ import {Component, Prop, Vue} from "vue-property-decorator"; ...@@ -37,23 +67,32 @@ import {Component, Prop, Vue} from "vue-property-decorator";
name: "CountResult", name: "CountResult",
}) })
export default class CountResult extends Vue{ export default class CountResult extends Vue{
choice=""; resultPlus="";
result=""; result="";
loanAmt=""; loanAmt="";
loanRate=""; loanRate="";
planMonthRepay = "";
loanTime=""; loanTime="";
repayType = "";
loanType = "";
titleName="试算结果"; titleName="试算结果";
titleflag=true; titleflag=true;
mounted() { mounted() {
this.result = this.$route.params.result; this.result = this.$route.params.result;
this.loanAmt = this.$route.params.loanAmt; this.loanAmt = this.$route.params.loanAmt;
this.resultPlus = (parseInt(this.result) + parseInt(this.loanAmt)).toString();
this.loanRate = this.$route.params.loanRate; this.loanRate = this.$route.params.loanRate;
this.loanTime = this.$route.params.loanTime; this.loanTime = this.$route.params.loanTime;
this.choice = this.$route.params.choice; this.repayType = this.$route.params.repayType;
this.planMonthRepay = this.$route.params.planMonthRepay;
this.loanType = this.$route.params.loanType;
} }
returnCount() { returnCount() {
this.$router.back();
}
toSeeRepayPlan() {
this.$router.push({ this.$router.push({
name: "DepositInterestTrial", name: "RepayPlan",
}); });
} }
} }
......
...@@ -10,21 +10,47 @@ ...@@ -10,21 +10,47 @@
</tatle-bar> </tatle-bar>
</div> </div>
<div class="card"> <div class="card">
<div style="margin-top: 4%;text-align: center"><span style="color: #9e9e9e">存款收益后账户金额</span></div> <div style="margin-top: 4%; margin-left: 20px"><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', '思源黑体'; <div style="margin-top: 0px; margin-left: 20px"><span style="color: #FFA121;font-size: 24px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
font-weight: 700; font-weight: 700;
font-style: normal;">¥{{countResult}}</span></div> font-style: normal;">{{countResult}}</span></div>
<div style="margin-top: 4%;text-align: center"><span style="color: #FFA121">{{countResult}}</span></div> <div style="margin-top: 4%; margin-left: 20px"><span style="color: #9e9e9e">本息合计(元)</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 style="margin-top: 0px; margin-left: 20px"><span style="color: #FFA121;font-size: 24px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;width: 90%"><span>存款时长(月)</span><span style="margin-left: auto">{{depositTime}}</span></div> font-weight: 700;
<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> font-style: normal;">{{result}}</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>
<div style="margin-top: 17%;height: 20%;position: absolute;width: 100%;align-self: center;z-index: 0"> <div style="margin-top: 50px; margin-left: 30px; margin-right: 30px">
<van-divider v-for="count in 12" :key="count" style="background-color: #c6c8ca;margin-top: -11px;margin-left: 10%;height: 0.5px;width: 80%;"/> <van-row>
<van-col span="12" style="color: #999999">储蓄方式</van-col>
<van-col span="12" style="text-align: right">{{saveType}}</van-col>
</van-row>
</div>
<div style="margin-top: 20px; margin-left: 30px; margin-right: 30px">
<van-row>
<van-col span="12" style="color: #999999">定期类型</van-col>
<van-col span="12" style="text-align: right">{{timeType}}</van-col>
</van-row>
</div>
<div style="margin-top: 20px; margin-left: 30px; margin-right: 30px">
<van-row>
<van-col span="12" style="color: #999999">期限</van-col>
<van-col span="12" style="text-align: right">{{time}}</van-col>
</van-row>
</div>
<div style="margin-top: 20px; margin-left: 30px; margin-right: 30px">
<van-row>
<van-col span="12" style="color: #999999">年利率(%)</van-col>
<van-col span="12" style="text-align: right">{{yearRate}}</van-col>
</van-row>
</div> </div>
<div style="margin-top: 20px; margin-left: 30px; margin-right: 30px">
<van-row>
<van-col span="12" style="color: #999999">存入金额(元)</van-col>
<van-col span="12" style="text-align: right">{{depositAmt}}</van-col>
</van-row>
</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%;background-color: #1890ff;position: absolute;margin-top: 26%;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" @click="returnCount"><span style="color: #1890ff">重新计算</span></van-button> <van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 40%;height: 6%;border-radius: 5px;border-color: #1890ff" @click="returnCount"><span style="color: #1890ff">重新计算</span></van-button>
</div> </div>
</div> </div>
</template> </template>
...@@ -35,10 +61,13 @@ import {Component, Prop, Vue} from "vue-property-decorator"; ...@@ -35,10 +61,13 @@ import {Component, Prop, Vue} from "vue-property-decorator";
name: "CountResultB", name: "CountResultB",
}) })
export default class CountResultB extends Vue{ export default class CountResultB extends Vue{
countResult=""; result="0";
depositAmt=""; countResult="100";
depositTime=""; saveType="";
depositRate=""; timeType="";
time="";
yearRate="";
depositAmt= "";
titleName="试算结果"; titleName="试算结果";
titleflag=true; titleflag=true;
returnCount() { returnCount() {
...@@ -47,10 +76,13 @@ export default class CountResultB extends Vue{ ...@@ -47,10 +76,13 @@ export default class CountResultB extends Vue{
}); });
} }
mounted() { mounted() {
this.countResult = this.$route.params.countResult; this.saveType = this.$route.params.saveType;
this.timeType = this.$route.params.timeType;
this.time = this.$route.params.time=="1"?"一年":this.$route.params.time=="2"?"两年":"三年";
this.yearRate = this.$route.params.yearRate;
this.depositAmt = this.$route.params.depositAmt; this.depositAmt = this.$route.params.depositAmt;
this.depositTime = parseInt(this.$route.params.depositTime).toString(); this.countResult = this.$route.params.result;
this.depositRate = this.$route.params.depositRate; this.result = (parseInt(this.$route.params.result)+parseInt(this.depositAmt)).toString();
} }
} }
</script> </script>
......
...@@ -17,34 +17,42 @@ ...@@ -17,34 +17,42 @@
</div> </div>
</div> </div>
<div class="card" v-if="flag" :model="test"> <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%">储蓄方式
<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> <a-select v-model:value="test.saveType" :options="saveTypes" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto">
<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> </a-select>
<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="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>
<div class="card" v-if="!flag" :model="test2"> <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.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.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.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%">贷款利率(%)<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%">贷款种类
<!-- <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>--> <a-select v-model:value="test2.loanType" :options="loanTypes" placeholder="请选择贷款种类" style="width: 50%;margin-top: -2%;margin-left: auto">
<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>
</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"> <a-select-option v-for="(item, index) in choices" :key="index" :value="item">
{{item}} {{item}}
</a-select-option> </a-select-option>
</a-select></div> </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>
<div v-if="flag"> <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%;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: 102%;height: 6%;border-radius: 5px;border-color: #1890ff" @click="clearData"><span style="color: #1890ff">清除</span></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>
<div v-if="!flag"> <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%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary" @click="countB">计算</van-button>
...@@ -62,19 +70,56 @@ import {Test} from "@/views/DepositInterestTrial/Test"; ...@@ -62,19 +70,56 @@ import {Test} from "@/views/DepositInterestTrial/Test";
}) })
export default class DepositInterestTrial extends Vue{ export default class DepositInterestTrial extends Vue{
choices: string[] = ["利随本清","等额本金","等额本息"]; choices: string[] = ["利随本清","等额本金","等额本息"];
choice = ""; 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 = { test2: any = {
loanAmt: "", loanAmt: "",
loanTime: "", loanTime: "",
planMonthRepay : "",
loanRate: "", loanRate: "",
loanType: undefined,
repayType: "",
}; };
// value1 = 0;
// option1 = [
// { text: '请选择还款方式', value: 0 },
// { text: '利随本清', value: 1 },
// { text: '等额本金', value: 2 },
// { text: '等额本息', value: 3 },
// ]
test: Test = new Test();//测试数据 test: Test = new Test();//测试数据
flag:boolean=true; flag:boolean=true;
flagA=true; flagA=true;
...@@ -95,37 +140,32 @@ export default class DepositInterestTrial extends Vue{ ...@@ -95,37 +140,32 @@ export default class DepositInterestTrial extends Vue{
} }
countA() { countA() {
let result = 0; let result = 0;
let yearA = parseInt(this.test.putDate.substring(0,4)); result = parseInt(this.test.depositAmt)*parseInt(this.test.yearRate)/100*parseInt(this.test.time?this.test.time:"0");
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({ this.$router.push({
name: "CountResultB", name: "CountResultB",
params: { params: {
countResult: result.toString(), saveType: this.test.saveType || "0",
timeType: this.test.timeType || "0",
time: this.test.time || "0",
yearRate: this.test.yearRate,
depositAmt: this.test.depositAmt, depositAmt: this.test.depositAmt,
depositTime: (((yearB-yearA)*365+(monthB-monthA)*30+(dayB-dayA))/30).toString(), result: result.toString(),
depositRate: this.test.depositRate,
} }
}) })
} }
countB() { countB() {
let result = 0; let result = 0;
result = parseInt(this.test2.loanAmt)+parseInt(this.test2.loanAmt)*parseInt(this.test2.loanRate)*parseInt(this.test2.loanTime)/100; result = parseInt(this.test2.loanAmt)*parseInt(this.test2.loanRate)/100*parseInt(this.test2.loanTime)/12;
console.log(result);
console.log("**********"+JSON.stringify(this.choice));
this.$router.push({ this.$router.push({
name: "CountResult", name: "CountResult",
params: { params: {
result: result.toString(),
loanAmt: this.test2.loanAmt, loanAmt: this.test2.loanAmt,
loanRate: this.test2.loanRate,
loanTime: this.test2.loanTime, loanTime: this.test2.loanTime,
choice: this.choice, planMonthRepay: this.test2.planMonthRepay,
loanRate: this.test2.loanRate,
loanType: this.test2.loanType,
repayType: this.test2.repayType,
result: result.toString(),
} }
}) })
} }
...@@ -133,7 +173,12 @@ export default class DepositInterestTrial extends Vue{ ...@@ -133,7 +173,12 @@ export default class DepositInterestTrial extends Vue{
this.test = new Test(); this.test = new Test();
} }
handleChoiceChange(value:any) { handleChoiceChange(value:any) {
this.choice = value; this.test2.repayType = value;
}
toDepositRate() {
this.$router.push({
name: "DepositRate"
});
} }
} }
</script> </script>
......
/**
* @Author wangliang
* @date 20220825
*/
<template>
<div class="body d-page" style="background-color: #ffffff">
<div class="rarle">
<tatle-bar :tatle="tatleName"></tatle-bar>
</div>
<div style="background-color: #FFFFFF; height: 50px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">项目</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">年利率(%)</van-col>
</van-row>
</div>
<div style="background-color: rgba(241, 244, 255, 1); height: 40px; padding-top: 10px">
<span style="font-size: 14px; font-weight: 700; margin-left: 14px">一、城乡居民及单位存款</span>
</div>
<div style="background-color: #FFFFFF; height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">(一)&nbsp;&nbsp;活期</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">0.3</van-col>
</van-row>
</div>
<div style="background-color: rgba(241, 244, 255, 1); height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">(一)&nbsp;&nbsp;定期</van-col>
</van-row>
</div>
<div style="background-color: #FFFFFF; height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px; color: red">1.整存整取</van-col>
</van-row>
</div>
<div style="background-color: rgba(241, 244, 255, 1); height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">三个月</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">1.35</van-col>
</van-row>
</div>
<div style="background-color: #FFFFFF; height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">半年</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">1.55</van-col>
</van-row>
</div>
<div style="background-color: rgba(241, 244, 255, 1); height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">一年</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">1.75</van-col>
</van-row>
</div>
<div style="background-color: #FFFFFF; height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">两年</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">2.25</van-col>
</van-row>
</div>
<div style="background-color: rgba(241, 244, 255, 1); height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">三年</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">2.75</van-col>
</van-row>
</div>
<div style="background-color: #FFFFFF; height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">五年</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">2.75</van-col>
</van-row>
</div>
<div style="background-color: rgba(241, 244, 255, 1); height: 40px; padding-top: 10px; padding-left: 60px">
<span style="color: red">2.零存整取、整存零取、存本取息</span>
</div>
<div style="background-color: #FFFFFF; height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">一年</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">1.35</van-col>
</van-row>
</div>
<div style="background-color: rgba(241, 244, 255, 1); height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">三年</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">1.55</van-col>
</van-row>
</div>
<div style="background-color: #FFFFFF; height: 40px">
<van-row span="24">
<van-col span="12" style="text-align: center; margin-top: 10px">五年</van-col>
<van-col span="12" style="text-align: center; margin-top: 10px">1.55</van-col>
</van-row>
</div>
</div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component({
name: "DepositRate"
})
export default class DepositRate extends Vue {
tatleName="人民币存款基准利率";
}
</script>
<style scoped lang="scss">
</style>
<!--
@Author wangliang
@date 20220826
-->
<template>
<div class="body d-page" style="background-color: #ffffff">
<div class="rarle">
<tatle-bar :tatle="tatleName"></tatle-bar>
</div>
<a-table :columns="columns" :row-key="(record) => record.times" :data-source="repayPlans">
</a-table>
</div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component({
name: "RepayPlan"
})
export default class RepayPlan extends Vue{
tatleName="还款计划";
columns: any[] = [
{title: "期次", dataIndex: "times", className: "fontSize", ellipsis: true, align: "center"},
{title: "还款日期", dataIndex: "repayDate", className: "fontSize", ellipsis: true, align: "center"},
{title: "偿还利息", dataIndex: "repayInterest", className: "fontSize", ellipsis: true, align: "center"},
{title: "偿还本金", dataIndex: "repayCapital", className: "fontSize", ellipsis: true, align: "center"},
{title: "偿还本息", dataIndex: "repayAmt", className: "fontSize", ellipsis: true, align: "center"},
{title: "剩余本金", dataIndex: "surplusAmt", className: "fontSize", ellipsis: true, align: "center"},
];
repayPlans: any[] = [
{times: "1", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "2", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "3", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "4", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "5", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "6", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "7", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "8", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "9", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "10", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "11", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "12", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
{times: "13", repayDate: "20220707", repayInterest: "100", repayCapital: "100", repayAmt: "100", surplusAmt: "100"},
];
}
</script>
<style scoped lang="scss">
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
padding: 16px 0px;
overflow-wrap: break-word;
}
::v-deep .fontSize {
font-size: 12px;
}
</style>
export class Test { export class Test {
depositAmt: string; depositAmt: string; //存款金额
depositRate: string; yearRate: string;
putDate: string; putDate: string;
getDate: string; getDate: string;
saveType: string | undefined;
timeType: string | undefined;
time: string | undefined;
constructor( constructor(
options: { options: {
depositAmt?: string; depositAmt?: string;
depositRate?: string; yearRate?: string;
putDate?: string; putDate?: string;
getDate?: string; getDate?: string;
saveType?: string | undefined;
timeType?: string | undefined;
time?: string | undefined;
} = {} } = {}
) { ) {
this.depositAmt = options.depositAmt || ""; this.depositAmt = options.depositAmt || "";
this.depositRate = options.depositRate || ""; this.yearRate = options.yearRate || "";
this.putDate = options.putDate || ""; this.putDate = options.putDate || "";
this.getDate = options.getDate || ""; this.getDate = options.getDate || "";
this.saveType = options.saveType;
this.timeType = options.timeType;
this.time = options.time;
} }
} }
...@@ -12,6 +12,18 @@ ...@@ -12,6 +12,18 @@
<person-bar :title="tatleName" :param="param" :login="true" style="width:100%;height: calc(35vh);"> <person-bar :title="tatleName" :param="param" :login="true" style="width:100%;height: calc(35vh);">
</person-bar> </person-bar>
</div> </div>
<div style="margin-top: 160px; position: absolute; width: 100%">
<van-row span="24">
<van-col span="8" style="text-align: center; color: #FFFFFF; font-weight: 600">2456</van-col>
<van-col span="8" style="text-align: center; color: #FFFFFF; font-weight: 600">12</van-col>
<van-col span="8" style="text-align: center; color: #FFFFFF; font-weight: 600">10</van-col>
</van-row>
<van-row span="24">
<van-col span="8" style="text-align: center; color: #FFFFFF">我的积分</van-col>
<van-col span="8" style="text-align: center; color: #FFFFFF">卡券</van-col>
<van-col span="8" style="text-align: center; color: #FFFFFF">特权</van-col>
</van-row>
</div>
<div> <div>
<card-bar class="card"></card-bar> <card-bar class="card"></card-bar>
<!-- <uncard-bar class="card"></uncard-bar> --> <!-- <uncard-bar class="card"></uncard-bar> -->
...@@ -108,11 +120,11 @@ export default class MyPage extends Vue { ...@@ -108,11 +120,11 @@ export default class MyPage extends Vue {
.card { .card {
position: absolute; position: absolute;
top: 21%; top: 30%;
left: 3%; left: 3%;
right: 3%; right: 3%;
width: 90%; width: 90%;
height: 25%; height: 20%;
margin: 2% auto; margin: 2% auto;
border-radius: 15px; border-radius: 15px;
display: flex; display: flex;
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<!--上部分--> <!--上部分-->
<div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);"> <div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
<tatle-bar :tatle="titleName" :tatleflag="titleflag" > <tatle-bar :tatle="titleName" :tatleflag="titleflag" >
<van-col span="15" class="jfNumber">2134</van-col> <div class="jfNumber">2134</div>
</tatle-bar> </tatle-bar>
</div> </div>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册