<template> <!-- 随意分--> <div class="content"> <div style="width: 100%"> <van-form label-width="25%" @submit="onSubmit"> <mobile-input :formatter="formatter" size="100" format-trigger="reset" v-model="loanMoney" :required="true" :rules="[{ validator: validatorFloatNum, message: '输入有误,请输入' }]" type="number" label="贷款金额(元)" placeholder="请输入贷款金额" /> <d-select label="还款方式" :rules="[{ required: true, message: '还款方式不能为空' }]" placeholder="请选择" :required="true" border="true" @input="selectSYFRate" v-model="Repayment" sfield="Repayment" size="small" ></d-select> <d-select label="手续费收取方式" :rules="[{ required: true, message: '手续费收取方式不能为空' }]" placeholder="请选择" :required="true" border="true" v-model="brokerage" sfield="brokerage" size="small" ></d-select> <mobile-input :formatter="formatter" format-trigger="reset" readonly v-model="yearRate" :rules="[{ validator: validatorRules, message: '输入有误,请输入' }]" :label="label1" /> <mobile-input :formatter="formatter" format-trigger="reset" readonly v-model="AllRate" :rules="[{ validator: validatorRules, message: '输入有误,请输入' }]" :label="label2" /> <mobile-input :formatter="formatter" format-trigger="reset" v-model="yearRate_yh" :required="true" label="优惠折扣" placeholder="请输入" :rules="[{ validator: validatorRules, message: rateMsg }]" /> <d-select v-if="Repayment == '1'" name="NUM" label="期数(月)" placeholder="请选择期数" :rules="[{ required: true, message: '期数不能为空' }]" border="true" sfield="NUM" :required="true" v-model="NUMS" /> <mobile-input v-if="Repayment == '2'" :formatter="formatter" format-trigger="reset" v-model="NUMS2" :required="true" type="digit" :rules="[{ validator: validatorNumber, message: '期数必须小于等于730' }]" label="期数(天)" /> <div style="margin: 16px; display: flex; justify-content: space-around"> <van-button @click="reset" style="width: 40%" round color="#999999" native-type="button" plain >重置 </van-button > <van-button style="width: 40%" round type="info" native-type="submit" >提交 </van-button > </div> </van-form> </div> </div> </template> <script lang="ts"> import { Component, Vue, Watch } from "vue-property-decorator"; import nettyApi from "@/constants/api/ms-netty/netty.api.ts"; import IF from "@/public/factory/InterFaceFactory"; import { NativeUI } from "@/public/ts/NativeUI"; import systemApi from "@/constants/api/ms-system/system.api.ts"; /** *@description: 随意分还款试算 *@author: wanghang *@date: 2022-02-16 */ @Component({ name: "RepaymentTrial" }) export default class RepaymentTrial extends Vue { title = "随意分还款试算"; columns1 = ["每月1日", "每月2日", "每月3日", "每月4日", "每月5日"]; showPicker1 = false; showPicker2 = false; loanMoney: any = ""; yearRate: any = ""; yearRate_yh: any = ""; //优惠卷利率 NUMS: any = ""; //选择的期数,月 NUMS2: any = ""; //手写的期数,天 Repayment: any = ""; brokerage: any = ""; resInfo: any[] = []; pattern: any = /^[1-9]\d*$/; //整数校验 rateMsg: any = "请填写正确的折扣"; inrateType: any = "aytxbj_inrate"; //随意分类别 AllRate: any = ""; label1: any = "年利率(%)"; label2: any = "总费率(%)"; largeDay: any = 0; //利率请求默认天数 smallDay: any = 1000; //利率请求默认天数 formatter() { } onSubmit() { this.selectSYFInfo(); } reset() { this.loanMoney = ""; this.yearRate = ""; this.yearRate_yh = ""; //优惠卷利率 this.NUMS = ""; this.Repayment = ""; this.AllRate = ""; this.NUMS2 = ""; this.brokerage = ""; } selectSYFInfo() { const param: any = { tc: "MCEP", AMT: this.loanMoney, inRate: this.yearRate, inRate_YH: this.Repayment == "1" ? this.yearRate_yh / 100 : this.yearRate_yh / 10000, NUMS: this.Repayment == "1" ? this.NUMS : this.NUMS2, Repayment: this.Repayment, brokerage: this.brokerage }; NativeUI.showWaiting("正在查询..."); return IF.transferDataInter(systemApi.SYFLoanmoneyComputed, param).then((res: any) => { NativeUI.closeWaiting(); if (res.code == 1) { this.resInfo = res.data.LIST; this.$store.commit("setEmpty"); this.$store.commit("setCalculateRes", this.resInfo); this.$router.push({ path: "/RepaymentTrialDetail" }); } else { NativeUI.toast(res.message); } }); } //查询随意分利率 selectSYFRate(val: any) { if (val == 1) { //按月付款 this.largeDay = 1; this.smallDay = 1000; } else if (val == 2) { if (this.NUMS2 == "" || this.NUMS2 == 0 || (this.NUMS2 >= 1 && this.NUMS2 <= 365)) { this.largeDay = 1; this.smallDay = 365; } else { this.largeDay = 366; this.smallDay = 1000; } } const param = { capitalType: val, largeDay: this.largeDay, smallDay: this.smallDay, pageNum: "1", pageSize: "10" }; return IF.transferDataInter(systemApi.SYFLoanRateSelect, param).then((res:any) => { if (res.code == 1) { //查询回来利率 this.yearRate = res.data.records[0].rate; } else { NativeUI.toast(res.msg); } }); } //浮点校验规则 validator(val: any) { return /^(-?\d+)(\.\d+)?$/.test(val); } //输入内容进行校验 validatorRules(val: any) { let reg = new RegExp("^d{1,2}$|^\\d{1,2}"); if (!reg.test(val)) { return false; } else if (val > 100) { return false; } return true; } //验证非负两位浮点数 validatorFloatNum(val: any) { let reg = new RegExp("^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"); if (!reg.test(val)) { return false; } return true; } validatorNumber(val: any) { console.log(val); let reg = new RegExp("^[1-9]\\d*$"); if (!reg.test(val)) { return false; } else if (val > 730) { return false; } else { return true; } } activated() { this.$router.beforeEach((to, from, next) => { if (from.path == "/main/workbench") { this.loanMoney = ""; this.yearRate = ""; this.yearRate_yh = ""; //优惠卷利率 this.AllRate = ""; this.NUMS = ""; this.NUMS2 = ""; this.Repayment = ""; this.brokerage = ""; } next(); }); } @Watch("yearRate") yearRateFunction(val:any) { if (this.Repayment == "1") { let payoff = this.yearRate_yh; if (payoff == "") { this.AllRate = ((this.NUMS * val) / 12).toFixed(2).toString(); } else { this.AllRate = ((this.NUMS * val * payoff / 100) / 12).toFixed(2).toString(); } } else if (this.Repayment == "2") { // this.selectSYFRate("2"); let payoff = this.yearRate_yh; if (payoff == "") { this.AllRate = ((this.NUMS2 * val) / 100).toFixed(2).toString(); } else { this.AllRate = ((this.NUMS2 * val * payoff / 100) / 100).toFixed(2).toString(); } } } @Watch("yearRate_yh") yearRate_yhFunction(val:any) { if (this.yearRate_yh < 0) { this.rateMsg = "折扣不能为负"; } else { this.rateMsg = "请填写正确的折扣"; } if (this.Repayment == "1") { let payoff = val; if (payoff == "") { this.AllRate = ((this.NUMS * this.yearRate) / 12).toFixed(2).toString(); } else { this.AllRate = ((this.NUMS * this.yearRate * payoff / 100) / 12).toFixed(2).toString(); } } else if (this.Repayment == "2") { let payoff = val; if (payoff == "") { this.AllRate = ((this.NUMS2 * this.yearRate) / 100).toFixed(2).toString(); } else { this.AllRate = ((this.NUMS2 * this.yearRate * payoff / 100) / 100).toFixed(2).toString(); } } } @Watch("NUMS2") NUMS2Function(val: any) { this.selectSYFRate("2"); let payoff = this.yearRate_yh; if (payoff == "") { this.AllRate = ((val * this.yearRate) / 100).toFixed(2).toString(); } else { this.AllRate = ((val * this.yearRate * payoff / 100) / 100).toFixed(2).toString(); } } @Watch("NUMS") NUMSFunction(val: any) { if (this.Repayment == "1") { let payoff = this.yearRate_yh; if (payoff == "") { this.AllRate = ((val * this.yearRate) / 12).toFixed(2).toString(); } else { this.AllRate = ((val * this.yearRate * payoff / 100) / 12).toFixed(2).toString(); } } } @Watch("Repayment") RepaymentFunction(val: any) { if (val == "1") { this.label1 = "年利率(%)"; this.label2 = "总费率(%)"; } else if (val == "2") { this.label1 = "天利率(万分)"; this.label2 = "总费率(%)"; } } } </script> <style scoped> .content { width: 60%; padding-top: 10%; margin: 0 auto; } ::v-deep .d-form-field .van-field { align-items: center; } ::v-deep .van-cell::after { border: 0; } ::v-deep .van-button--info { background-color: #fd5065; border: 1px solid #fd5065; } ::v-deep .van-button__text { font-size: 16px; } </style>