<!--
|
* @Date: 2019-08-30 11:07:43
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-10-22 09:53:09
|
* @Description:
|
-->
|
<template>
|
<div class="credit-installment h-100-g">
|
<x-header title="办理分期" :left-options="{backText:''}"></x-header>
|
<group>
|
<x-input title='商品金额' v-model="settAmt" @on-change='changeSettAmt' @on-blur='blurToCalc' :show-clear='false' :max='5' :placeholder="settLock?'选择期数后系统自动计算':'请输入商品金额'" :disabled='settLock' text-align='right'></x-input>
|
<x-input title='还款总额' v-model="insAmt" @on-change='changeInsAmt' @on-blur='blurToCalc' :show-clear='false' :max='5' :placeholder="insLock?'选择期数后系统自动计算':'请输入还款总额'" :disabled='insLock' text-align='right'></x-input>
|
<selector title='分期期数' ref="insTerm" placeholder='请选择分期期数' v-model="insTerm" :options='termList' :value-map="['termCode','termName']" @on-change='selectTerms' direction='rtl'></selector>
|
<x-input title='商品名称' v-model="prodName" placeholder='请输入商品名称' :max='20' text-align='right'></x-input>
|
<!-- <selector title='银行名称' ref='bankName' placeholder='请选择银行名称' v-model="bankName" :options='bankList' :value-map="['bankCode','bankName']" direction='rtl'></selector> -->
|
<x-input title='费率' v-model="feeRate" @on-change='changeInsAmt' @on-blur='blurToCalc' :show-clear='false' :placeholder="insLock?'选择期数后系统自动计算':'请输入费率'" :disabled='insLock' text-align='right'></x-input>
|
</group>
|
|
<div class="qrCode-box" v-if="dataURL">
|
<div class="qrCode">
|
<!-- <canvas id="canvas"></canvas> -->
|
|
<img :src="dataURL" alt="qrcode">
|
</div>
|
</div>
|
<f-button fixed @on-click='createdQRCode'>生成二维码</f-button>
|
</div>
|
</template>
|
|
<script>
|
import QRCode from 'qrcode';
|
import { mapState } from 'vuex';
|
export default {
|
name: 'credit-installment',
|
data() {
|
return {
|
//分期期数opt
|
settAmt: '',
|
insAmt: '',
|
insLock: false,
|
settLock: false,
|
needCalcInputName: '',
|
feeRate: '',
|
insTerm: null,
|
termList: [],
|
bankList: [],
|
dataURL: '',
|
prodName: '',
|
bankName: ''
|
};
|
},
|
computed:{
|
...mapState(['userinfo'])
|
},
|
created() {
|
this.$api.findTerms({ typeId: this.$route.query.typeId }).then(res => {
|
this.termList = res.body;
|
}, err => err);
|
},
|
methods: {
|
//计算商品金额或者还款金额的方法，因为下拉框change和input的blur都是统一方法，所以抽出来
|
calcFunc() {
|
if (!this.insTerm || !this.needCalcInputName) return;
|
let obj = {
|
term: this.insTerm
|
};
|
//如果填入的是商品金额，则计算还款总额，反之计算商品金额
|
let v = this.$tool;
|
if (this.needCalcInputName === 'insAmt') {
|
if (!Number(this.settAmt)) {
|
v.toast('请输入正确的商品金额');
|
return false;
|
}
|
if (
|
Number(this.settAmt) < 600 ||
|
Number(this.settAmt) > 50000
|
) {
|
v.toast('商品金额必须在600-50000之间');
|
return false;
|
}
|
obj.settAmt = this.settAmt;
|
} else if (this.needCalcInputName === 'settAmt') {
|
if (!Number(this.insAmt)) {
|
v.toast('请输入正确的还款总额');
|
return false;
|
}
|
if (Number(this.insAmt) < 600 || Number(this.insAmt) > 50000) {
|
v.toast('还款总额必须在600-50000之间');
|
return false;
|
}
|
obj.insAmt = this.insAmt;
|
}
|
obj.resultFiled = this.needCalcInputName;
|
this.$api.calAmt(obj).then(res => {
|
//赋值运算结果
|
this[this.needCalcInputName] = res.body.terAmt;
|
this.feeRate = res.body.feeRate;
|
}, err => err);
|
},
|
//选择期数后会自动计算商品金额和还款总额,并且渲染对应的银行列表
|
selectTerms(val) {
|
this.calcFunc();
|
},
|
createdQRCode() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.settAmt)) {
|
v.toast('请输入商品金额');
|
return false;
|
}
|
if (v.checkValEmpty(this.insAmt)) {
|
v.toast('请输入还款总额');
|
return false;
|
}
|
if (v.checkValEmpty(this.feeRate)) {
|
v.toast('请输入费率');
|
return false;
|
}
|
if (!Number(this.settAmt)) {
|
v.toast('请输入正确的商品金额');
|
return false;
|
}
|
if (!Number(this.insAmt)) {
|
v.toast('请输入正确的还款总额');
|
return false;
|
}
|
if (Number(this.settAmt) < 600 || Number(this.settAmt) > 50000) {
|
v.toast('商品金额必须在600-50000之间');
|
return false;
|
}
|
if (Number(this.insAmt) < 600 || Number(this.insAmt) > 50000) {
|
v.toast('还款总额必须在600-50000之间');
|
return false;
|
}
|
if (v.checkValEmpty(this.insTerm)) {
|
v.toast('请选择分期期数');
|
return false;
|
}
|
if (v.checkValEmpty(this.prodName)) {
|
v.toast('请输入商品名称');
|
return false;
|
}
|
|
let itemObj = this.termList[0].bankList[0].prodId;
|
let url = `${sessionStorage.getItem('jumpUrl')}/#/?insTerm=${this.insTerm}&prodName=${this.prodName}&prodId=${itemObj}&settAmt=${this.settAmt}&insAmt=${this.insAmt}&mgrId=${this.userinfo.id}`;
|
this.$router.push({
|
path: '/getQRCode',
|
query: {
|
insTerm: this.insTerm,
|
prodName: this.prodName,
|
prodId: itemObj,
|
settAmt: this.settAmt,
|
insAmt: this.insAmt,
|
mgrId: this.userinfo.id
|
}
|
});
|
},
|
//输入商品金额或者还款总额都会触发这个方法
|
changeSettAmt(settAmt) {
|
//如果等于settAmt，则说明当前正在填写商品金额或者已经计算了还款总额，就要阻止change事件继续触发
|
//当needCalcInputName为空的时候，说明两个输入框的值都应该清空，这时都变成可以填写的状态
|
if (this.needCalcInputName === 'settAmt') return;
|
//代表正在输入商品金额，需要计算还款总额，还款总额将不可填写
|
if (settAmt) {
|
this.needCalcInputName = 'insAmt';
|
this.insLock = true;
|
} else {
|
//如果输入框为空，则还原最初的状态
|
this.needCalcInputName = '';
|
this.insAmt = '';
|
this.insLock = false;
|
}
|
},
|
changeInsAmt(insAmt) {
|
//如果等于settAmt，则说明当前正在填写商品金额或者已经计算了还款总额，就要阻止change事件继续触发
|
//当needCalcInputName为空的时候，说明两个输入框的值都应该清空，这时都变成可以填写的状态
|
if (this.needCalcInputName === 'insAmt') return;
|
//代表正在输入还款总额，需要计算商品金额，商品金额将不可填写
|
if (insAmt) {
|
this.needCalcInputName = 'settAmt';
|
this.settLock = true;
|
} else {
|
//如果输入框为空，则还原最初的状态
|
this.needCalcInputName = '';
|
this.settAmt = '';
|
this.feeRate = '';
|
this.settLock = false;
|
}
|
},
|
//失去焦点时计算金额
|
blurToCalc(val) {
|
if (val) {
|
this.calcFunc();
|
}
|
}
|
}
|
|
};
|
</script>
|
<style lang='less' scoped>
|
.credit-installment {
|
padding-top: 54px;
|
background-color: #f1f1f1;
|
.qrCode-box {
|
padding-top: 60px;
|
.flexLayout(center, center, row);
|
.qrCode {
|
width: 200px;
|
height: 200px;
|
box-sizing: border-box;
|
background-color: #fff;
|
border: 5px solid @color-border-theme;
|
padding: 5px;
|
img {
|
width: 100%;
|
height: 100%;
|
vertical-align: middle;
|
}
|
}
|
}
|
}
|
</style>
|
