<!--
|
* @Date: 2019-08-30 13:38:35
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-10-28 15:24:08
|
* @Description:
|
-->
|
|
<template>
|
<div class="hb-credit-installment h-100-g">
|
<x-header title="办理分期" :left-options="{backText:''}"></x-header>
|
<!--合约机分期-->
|
<group v-show="activeTab === 0">
|
<div class="title">
|
<span class="line"></span>
|
合约信息
|
</div>
|
<selector title='合约套餐' placeholder='请选择' v-model="selectContract" :options='contractList'
|
:value-map="['contId','contName']" @on-change='handleChangeContract' direction='rtl'></selector>
|
<x-input title='结算金额' v-model.trim="selectContractInfo.capitalAmt" readonly text-align='right'></x-input>
|
<x-input title='月缴话费' v-model.trim="selectContractInfo.monthlyFees" readonly text-align='right'></x-input>
|
<x-input title='月还款额' v-model.trim="selectContractInfo.monthlyPayments" readonly text-align='right'>
|
</x-input>
|
<x-input title='期数' v-model.trim="selectContractInfo.term" readonly text-align='right'></x-input>
|
</x-input>
|
<div style="height: 10px; background: #f5f5f5;"></div>
|
<div class="title">
|
<span class="line"></span>
|
商品信息
|
</div>
|
|
<x-input title='商品品牌' v-model.trim="contractGoodsBrand" placeholder='请输入' :max='10' text-align='right'>
|
</x-input>
|
<x-input title='商品名称' v-model.trim="contractGoodsName" placeholder='请输入' :max='20' text-align='right'>
|
</x-input>
|
<div style="height: 10px; background: #f5f5f5;"></div>
|
<div class="title">
|
<span class="line"></span>
|
用户信息
|
</div>
|
<x-input title='用户姓名' v-model.trim="contractUserName" placeholder='请输入' :max='10' text-align='right'>
|
</x-input>
|
<x-input title='用户手机号' v-model.trim="contractUserMblNo" placeholder='请输入' :max='11' text-align='right'>
|
</x-input>
|
</group>
|
|
|
<div class="qrCode-box" v-if="dataURL">
|
<div class="qrCode">
|
<img :src="dataURL" alt="qrcode">
|
</div>
|
</div>
|
|
<!--点击创建订单展示 弹窗 -->
|
<FConfirmSimple v-model="showConfirm" ref="FConfirmQRCode" @on-hide="handleHide"
|
iconClass="scene_Staging-dingdan" class="hb-order-confirm" :showIcon="true" >
|
<div class="trial-list">
|
<div>还款总额：{{trial.totalAmount}}元</div>
|
<div>每月还款额：{{trial.repayPerMonth}}元</div>
|
<div>费率：{{trial.feeRate}}%</div>
|
</div>
|
<f-button @on-click='createdQRCode'>生成二维码</f-button>
|
</FConfirmSimple>
|
<!--此次修改为 生成订单-->
|
<f-space type="large"></f-space>
|
<f-button fixed @on-click='contractInstallmentOrder'>生成订单</f-button>
|
</div>
|
</template>
|
|
<script>
|
import QRCode from 'qrcode';
|
import FConfirmSimple from '@/components/old/FConfirmSimple.vue';
|
|
export default {
|
name: 'hb-credit-installment',
|
components: {
|
FConfirmSimple,
|
},
|
data() {
|
return {
|
monthMoney: '', //月还款总额
|
activeTab: 0, // 处于激活状态下的tab, 最开始为合约机分期
|
tabList: ['合约机分期', '商品分期'],
|
selectContract: '', // 选中的合约
|
contractList: [], // 合约列表
|
selectContractInfo: {// 当前选中合约元素
|
capitalAmt:"",
|
monthlyFees:"",
|
monthlyPayments:"",
|
term:""
|
},
|
contractGoodsBrand: '', //商品品牌
|
contractGoodsName: '', //商品名称
|
contractUserMblNo: '', //用户手机号
|
contractUserName: '', //用户名称
|
// hb
|
capitalAmt: '', //分期本金
|
goodsBrand: '', //商品品牌
|
goodsName: '', //商品名称
|
orderNo: '', //未知参数
|
term: null, //分期期数
|
userMblNo: '', //用户手机号
|
userName: '', //用户名称
|
trial: {}, // 利率相关信息
|
orderId: '', //订单id
|
payQrCodeUrl: '', // 二维码
|
termList: [], //分期期数列表
|
dataURL: '', // QRcode
|
showConfirm: false,
|
};
|
},
|
created() {
|
this.getContractList();
|
},
|
methods: {
|
// 处理合约的修改
|
handleChangeContract(val) {
|
this.selectContractInfo = this.contractList.find((item) => {
|
return item.contId === val;
|
})
|
},
|
handleHide() {
|
this.showConfirm = false;
|
},
|
// 生成二维码
|
createdQRCode() {
|
this.showConfirm = false;
|
let queryObj = {
|
orderId: this.orderId,
|
totalAmount: this.trial.totalAmount,
|
term: this.term,
|
typeId: this.$route.query.typeId
|
}
|
if(this.activeTab===0){
|
queryObj.term = this.selectContractInfo.term;
|
}
|
if (this.$route.query.typeId) {
|
queryObj.typeId = this.$route.query.typeId;
|
}
|
this.$router.push({
|
path: "/hb-getHBQRCode",
|
query: queryObj
|
})
|
},
|
// 合约分期生成订单
|
contractInstallmentOrder() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.selectContract)) {
|
v.toast('请选择合约套餐');
|
return false;
|
}
|
let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
|
if (v.checkValEmpty(this.contractGoodsBrand)) {
|
v.toast('请输入商品品牌');
|
return false;
|
}
|
if (!reg.test(this.contractGoodsBrand)) {
|
v.toast('请输入文字/字母/数字且不包含特殊字符的商品品牌');
|
return false;
|
}
|
if (v.checkValEmpty(this.contractGoodsName)) {
|
v.toast('请输入商品名称');
|
return false;
|
}
|
if (!reg.test(this.contractGoodsName)) {
|
v.toast('请输入文字/字母/数字且不包含特殊字符的商品名称');
|
return false;
|
}
|
if (v.checkValEmpty(this.contractUserName)) {
|
v.toast('请输入用户姓名');
|
return false;
|
}
|
if (v.checkValEmpty(this.contractUserMblNo)) {
|
v.toast('请输入用户手机号');
|
return false;
|
}
|
if (!v.checkPhone(this.contractUserMblNo)) {
|
v.toast('请输入正确的用户手机号');
|
return false;
|
}
|
let params = {
|
contId: this.selectContract,
|
goodsName: this.contractGoodsName,
|
goodsBrand: this.contractGoodsBrand,
|
userName: this.contractUserName,
|
userMblNo: this.contractUserMblNo,
|
}
|
this.$api.hbhyjCreate(params).then(res => {
|
let body = res.body;
|
this.orderId = body.orderId;
|
this.payQrCodeUrl = body.payQrCodeUrl;
|
this.trial.totalAmount = body.totalAmount;
|
this.trial.repayPerMonth = body.repayPerMonth;
|
this.trial.feeRate = body.feeRate;
|
this.showConfirm = true;
|
if (body.payQrCodeUrl) {
|
sessionStorage.setItem("hbpayQrCodeUrl", body.payQrCodeUrl);
|
}
|
})
|
// todo 数据组装，接口的调取
|
},
|
// 获取当前的合约列表
|
getContractList() {
|
this.$api.contractList({
|
typeId: +this.$route.query.typeId
|
}).then(res => {
|
this.contractList = res.body;
|
}, err => err);
|
}
|
},
|
};
|
|
</script>
|
<style lang='less' scoped >
|
.hb-order-confirm {
|
.trial-list {
|
padding-left: 20px;
|
}
|
|
.f-button-component .f-button {
|
margin-top: 12px;
|
}
|
}
|
|
.hb-credit-installment {
|
background-color: #f1f1f1;
|
padding-top: 54px;
|
.title {
|
padding: 14px 12px;
|
font-size: 15px;
|
color: #333;
|
.line {
|
display: inline-block;
|
width: 2px;
|
height: 16px;
|
margin-right: 8px;
|
background: @color-text-three;
|
vertical-align: middle;
|
margin-top: -1px;
|
}
|
}
|
|
.qrCode-box {
|
padding-top: 0;
|
.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;
|
display: block;
|
}
|
}
|
}
|
}
|
|
</style>
|
