<!--
|
* @Date: 2019-08-30 13:38:35
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-09 15:17:58
|
* @Description:
|
-->
|
|
<template>
|
<div class="hb-credit-installment h-100-g">
|
<!-- <x-header title="办理分期" :left-options="{backText:''}"></x-header> -->
|
<!-- <tab :line-width=1 active-color='#bfa073'>
|
<tab-item v-for="(item, index) in tabList" :key="index" :selected="activeTab === index"
|
@on-item-click="handleTabChange(index)">{{ item }}</tab-item>
|
</tab> -->
|
<van-nav-bar title="用户付息" left-text="返回" left-arrow @click-left="onClickLeft" style="line-height: 43px;">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
</van-nav-bar>
|
<!--商品分期-->
|
<div class="mer" :style="{background:$store.state.defaultBgColor}">
|
<div class="mer-head">
|
<div class="mer-head-item">
|
<p>{{ capitalAmt? capitalAmt : '0.00' }}</p>
|
<p>商家到账金额</p>
|
</div>
|
<div class="mer-head-line"></div>
|
<div class="mer-head-item">
|
<p>{{ trial.totalAmount ? trial.totalAmount : '0.00' }}</p>
|
<p>客户总还款额</p>
|
</div>
|
<div class="mer-head-line"></div>
|
<div class="mer-head-item">
|
<p>{{ trial.repayPerMonth ? trial.repayPerMonth : '0.00'}}</p>
|
<p>客户月还款额</p>
|
</div>
|
</div>
|
</div>
|
<group class="group-content">
|
<div class="title">
|
<span class="line" :style="{background:$store.state.defaultBgColor}"></span>
|
分期信息
|
</div>
|
<div class="form-content">
|
<van-field
|
class="ipt"
|
v-model="capitalAmt"
|
type="number"
|
label="商品金额"
|
placeholder="请输入商品金额"
|
input-align="right"
|
border="true"
|
:maxlength="5"
|
/>
|
<!-- @input="changeMoney" -->
|
<van-field
|
class="fenqi"
|
readonly
|
clickable
|
label="分期期数"
|
:value="value"
|
placeholder="请选择"
|
@click="showPickerModel"
|
input-align="right"
|
border="true"
|
is-link='true'
|
/>
|
<van-field
|
class="ipt"
|
label="商品名称"
|
placeholder="请输入商品名称"
|
input-align="right"
|
border="false"
|
:maxlength="20"
|
v-model="goodsName"
|
/>
|
<van-field
|
class="ipt myDisableIpt"
|
label="月还款额"
|
placeholder="请输入月还款额"
|
input-align="right"
|
border="false"
|
:maxlength="20"
|
v-model="monthMoney"
|
disabled="true"
|
/>
|
<van-field
|
label-width="150px"
|
class="ipt myDisableIpt"
|
label="智享服务费率"
|
placeholder="请输入智享服务费率"
|
input-align="right"
|
border="false"
|
:maxlength="3"
|
v-model="platRatePr"
|
disabled="true"
|
/>
|
<van-field
|
label-width="150px"
|
class="ipt myDisableIpt"
|
label="花呗分期手续费率"
|
placeholder="请输入花呗分期手续费率"
|
input-align="right"
|
border="false"
|
:maxlength="3"
|
v-model="zfbRatePr"
|
disabled="true"
|
/>
|
|
</div>
|
<div style="height: 10px; background: #f5f5f5;"></div>
|
<div class="title" style="border-radius:6px;">
|
<span class="line" :style="{background:$store.state.defaultBgColor}"></span>
|
用户信息
|
</div>
|
<div class="form-content">
|
<van-field
|
class="ipt"
|
label="用户姓名"
|
placeholder="请输入用户姓名"
|
input-align="right"
|
border="false"
|
:maxlength="10"
|
v-model="userName"
|
/>
|
<van-field
|
class="ipt"
|
type="tel"
|
label="用户手机号"
|
placeholder="请输入用户手机号"
|
input-align="right"
|
border="false"
|
:maxlength="11"
|
v-model="userMblNo"
|
/>
|
</div>
|
</group>
|
|
<van-popup v-model="showPicker" position="bottom" :style="{ height: '30%'}">
|
<van-picker
|
title="选择期数"
|
show-toolbar
|
item-height="30"
|
:columns="termList"
|
value-key="name"
|
@cancel="showPicker = false"
|
@confirm="selectTerms"
|
/>
|
</van-popup>
|
<van-popup
|
v-model="showTwo"
|
@close="aferClose"
|
style="width:280px;height:150px;"
|
>
|
<van-icon name="cross" size="20px" style="position: absolute;right:10px;top:10px;color:#cccccc" @click="closeTwo" color="#CCCCCC"/>
|
<img src="../../../../static/img/img.png" style="width:60px;height:67px;margin-left: 110px;margin-top: 30px;">
|
<p style="font-size:14px;font-family:PingFang SC;font-weight:500;color:rgba(102,102,102,1);margin-top:10px;text-align:center">因{{this.showQi}}期业务调整，暂停{{this.showQi}}期办单通道。</p>
|
</van-popup>
|
<div class="btn-box">
|
<van-button round :color="$store.state.backColor" class="btn2" :class="sysPlat == 2 ? 'active' : ''" @click="goodInstallmentOrder">生成二维码</van-button>
|
<van-button round :color="$store.state.backColor" class="btn2" @click="WeChatSanCode" v-if="sysPlat != 2 && $route.query.zfbVersion != 5">扫描付款码</van-button>
|
</div>
|
<Vdialog @cancel="cancel" :show="showDia"></Vdialog>
|
</div>
|
</template>
|
|
<script>
|
import QRCode from 'qrcode';
|
import FConfirmSimple from '@/components/old/FConfirmSimple.vue';
|
import Vdialog from "@/components/common/v-dialog.vue";
|
|
export default {
|
name: 'hb-credit-installment',
|
components: {
|
FConfirmSimple,Vdialog
|
},
|
data() {
|
return {
|
zfbRate:'',//花呗分期手续费率
|
platRate:'',//智享服务费率
|
showTwo:false,
|
showQi:'',
|
showDia:false,
|
monthMoney: '', //月还款总额
|
contractGoodsBrand: '', //商品品牌
|
contractGoodsName: '', //商品名称
|
contractUserMblNo: '', //用户手机号
|
contractUserName: '', //用户名称
|
// hb
|
capitalAmt: '', //分期本金
|
goodsBrand: '', //商品品牌
|
goodsName: '', //商品名称
|
orderNo: '', //未知参数
|
term: null, //分期期数
|
userMblNo: '', //用户手机号
|
userName: '', //用户名称
|
trial: {}, // 利率相关信息
|
orderId: '', //订单id
|
payQrCodeUrl: '', // 二维码
|
termList: [], //分期期数列表
|
showConfirm: false,
|
value: "", //期数选择值
|
showPicker: false, //期数选择弹出层控制
|
backUrl:'',//红茄跳转链接
|
sysPlat: null,
|
isGoBack:'',//用于重新扫码后判断值
|
};
|
},
|
computed:{
|
zfbRatePr(){
|
if(this.zfbRate || this.zfbRate==0){
|
return this.zfbRate + '%'
|
}else{
|
return ''
|
}
|
|
},
|
platRatePr(){
|
if(this.platRate || this.platRate==0){
|
return this.platRate + '%'
|
}else{
|
return ''
|
}
|
|
}
|
},
|
watch: {
|
capitalAmt(newV) {
|
if (+newV > 0 && Number(this.term) > 0) {
|
this.selectTerms(this.term);
|
}
|
}
|
},
|
created() {
|
if(sessionStorage.hb_session_info&&this.$route.query.isCreateOrderPush){
|
this.isGoBack = 1
|
let hb_session_info = JSON.parse(sessionStorage.hb_session_info)
|
this.value = hb_session_info.term,
|
this.capitalAmt=hb_session_info.capitalAmt,
|
this.term=hb_session_info.term,
|
this.goodsName=hb_session_info.goodsName,
|
this.userName=hb_session_info.userName,
|
this.userMblNo=hb_session_info.userMblNo
|
}
|
//初始化
|
let sysPlat = localStorage.sib_mer_sysPlat
|
if (sysPlat === 'undefined' || sysPlat === '1') {
|
sysPlat = 1
|
}
|
if (sysPlat === '2') {
|
sysPlat = 2
|
}
|
this.sysPlat = sysPlat
|
this.$api.hbOrderInit({
|
prodId:this.$route.query.prodId*1,
|
zfbVersion:this.$route.query.zfbVersion
|
}).then(res => {
|
this.termList = [];
|
var arr = res.body.terms;
|
arr.forEach((ele, i) => {
|
ele.name = ele.name + '期'
|
});
|
this.termList = arr
|
|
}, err => err);
|
//获取微信配置
|
this.getWeChatConfig()
|
},
|
methods: {
|
cancel(val){
|
this.showDia = val
|
},
|
showPickerModel(){
|
this.isGoBack = 2
|
this.showPicker = true
|
},
|
// 调用微信摄像头，扫一扫
|
WeChatSanCode(){
|
let sysPlat = localStorage.sib_mer_sysPlat
|
if (sysPlat === 'undefined' || sysPlat === '1') {
|
sysPlat = 1
|
}
|
if (sysPlat === '2') {
|
sysPlat = 2
|
}
|
let _this = this
|
let v = this.$tool;
|
if (v.checkValEmpty(this.capitalAmt)) {
|
v.toast('请输入商品金额');
|
return false;
|
}
|
if (!Number(this.capitalAmt)) {
|
v.toast('请输入正确的商品金额');
|
return false;
|
}
|
// 临时调整价格
|
if (
|
Number(this.capitalAmt) < 0 ||
|
Number(this.capitalAmt) > 50000
|
) {
|
v.toast('商品金额必须在100-50000元之间');
|
return false;
|
}
|
let res = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
|
if (v.checkValEmpty(this.goodsName)) {
|
v.toast('请输入商品名称');
|
return false;
|
}
|
if (!res.test(this.goodsName)) {
|
v.toast('请输入文字/字母/数字且不包含特殊字符的商品名称');
|
return false;
|
}
|
if (v.checkValEmpty(this.term)) {
|
v.toast('请输入分期期数');
|
return false;
|
}
|
if (v.checkValEmpty(this.userName)) {
|
v.toast('请输入用户姓名');
|
return false;
|
}
|
if (v.checkValEmpty(this.userMblNo)) {
|
v.toast('请输入用户手机号');
|
return false;
|
}
|
if (!v.checkPhone(this.userMblNo)) {
|
v.toast('请输入正确的用户手机号');
|
return false;
|
}
|
//判断是不是微信
|
if (sysPlat == 1) {
|
this.checkIsReady().then(()=>{
|
wx.scanQRCode({
|
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
|
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
|
success: function (res) {
|
// 当needResult 为 1 时，扫码返回的结果
|
// 扫码成功后调用接口
|
let obj = {
|
capitalAmt: _this.capitalAmt,
|
// goodsBrand: this.goodsBrand,
|
goodsName: _this.goodsName,
|
orderNo: _this.orderNo,
|
term: _this.term,
|
userMblNo: _this.userMblNo,
|
userName: _this.userName,
|
zfbVersion: _this.$route.query.zfbVersion,
|
payType: 2 ,//反扫
|
authCode: res.resultStr,
|
sysPlat: sysPlat
|
};
|
_this.$api.hbOrderCreate(obj).then(res=>{
|
_this.orderId = res.body.orderId;
|
_this.$router.push({
|
path:'/pay-result',
|
query:{
|
orderId: _this.orderId,
|
mode: 'hb'
|
}
|
})
|
})
|
}
|
});
|
})
|
}
|
//判断是不是支付宝
|
if (sysPlat == 2) {
|
my.postMessage({'sendToMiniProgram': '0'})
|
my.onMessage = function(e) {
|
console.log(e);
|
let obj = {
|
capitalAmt: _this.capitalAmt,
|
// goodsBrand: this.goodsBrand,
|
goodsName: _this.goodsName,
|
orderNo: _this.orderNo,
|
term: _this.term,
|
userMblNo: _this.userMblNo,
|
userName: _this.userName,
|
zfbVersion: _this.$route.query.zfbVersion,
|
payType: 2 ,//反扫
|
authCode: e,
|
sysPlat: sysPlat
|
};
|
_this.$api.hbOrderCreate(obj).then(res=>{
|
_this.orderId = res.body.orderId;
|
_this.$router.push({
|
path:'/pay-result',
|
query:{
|
orderId: _this.orderId,
|
mode: 'hb'
|
}
|
})
|
})
|
}
|
}
|
},
|
// 异步准备微信环境
|
checkIsReady() {
|
return new Promise((resolve, reject) => {
|
wx.ready(() => resolve());
|
wx.error(err => reject(console.log(res + "wx.error")));
|
});
|
},
|
// 获取微信配置
|
getWeChatConfig(){
|
let url = location.href.split('#')[0]
|
this.$api.getTokenInfo({
|
url: url
|
}).then(res=>{
|
// 获取微信配置
|
wx.config({
|
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
|
appId: res.body.appId, // 必填，公众号的唯一标识
|
timestamp: res.body.timestamp, // 必填，生成签名的时间戳
|
nonceStr: res.body.nonceStr, // 必填，生成签名的随机串
|
signature: res.body.signature,// 必填，签名
|
jsApiList: ['checkJsApi','scanQRCode'], // 必填，需要使用的JS接口列表
|
openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
|
});
|
})
|
},
|
closeTwo(){
|
this.showTwo=false
|
this.showPicker = false
|
},
|
//顶部tabbar返回按钮
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
selectTerms(val) {
|
console.log(val)
|
if (!this.capitalAmt) {
|
this.$tool.toast('请输入商品金额');
|
return;
|
}
|
if(val.serverStatus==0){
|
this.showTwo = true
|
this.showQi = val.code
|
return
|
}
|
if(this.isGoBack!=1){
|
//console.log(val.slice(0,-1))
|
this.value = val.code;
|
//let valNum = val.slice(0,-1)
|
this.term = val.code;
|
}
|
|
|
this.$api.calcMonthMoney({
|
capitalAmt: this.capitalAmt,
|
term: this.value
|
}).then(res => {
|
console.log(res.body)
|
this.zfbRate = res.body.zfbRate
|
this.platRate = res.body.platRate
|
this.trial.totalAmount = res.body.totalAmount;
|
this.trial.repayPerMonth = res.body.repayPerMonth;
|
this.trial.feeRate = res.body.feeRate + '%';
|
this.monthMoney = res.body.repayPerMonth
|
})
|
this.showPicker = false;
|
},
|
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,
|
zfbRate: this.zfbRate,
|
platRate: this.platRate,
|
capitalAmt: this.capitalAmt,
|
backUrl: this.backUrl,
|
}
|
if (this.$route.query.typeId) {
|
queryObj.typeId = this.$route.query.typeId;
|
}
|
this.$router.push({
|
path: "/hb-getHBQRCode",
|
query: queryObj
|
})
|
},
|
// 商品分期生成订单
|
goodInstallmentOrder() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.capitalAmt)) {
|
v.toast('请输入商品金额');
|
return false;
|
}
|
if (!Number(this.capitalAmt)) {
|
v.toast('请输入正确的商品金额');
|
return false;
|
}
|
// 临时调整价格
|
if (
|
Number(this.capitalAmt) < 100 ||
|
Number(this.capitalAmt) > 50000
|
) {
|
v.toast('商品金额必须在100-50000元之间');
|
return false;
|
}
|
let res = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
|
if (v.checkValEmpty(this.goodsName)) {
|
v.toast('请输入商品名称');
|
return false;
|
}
|
if (!res.test(this.goodsName)) {
|
v.toast('请输入文字/字母/数字且不包含特殊字符的商品名称');
|
return false;
|
}
|
if (v.checkValEmpty(this.term)) {
|
v.toast('请输入分期期数');
|
return false;
|
}
|
if (v.checkValEmpty(this.userName)) {
|
v.toast('请输入用户姓名');
|
return false;
|
}
|
if (v.checkValEmpty(this.userMblNo)) {
|
v.toast('请输入用户手机号');
|
return false;
|
}
|
if (!v.checkPhone(this.userMblNo)) {
|
v.toast('请输入正确的用户手机号');
|
return false;
|
}
|
// 用来整体存储缓存数据
|
let hb_session_info = {
|
capitalAmt:this.capitalAmt,
|
term:this.term,
|
goodsName:this.goodsName,
|
userName:this.userName,
|
userMblNo:this.userMblNo
|
}
|
sessionStorage.hb_session_info = JSON.stringify(hb_session_info)
|
|
let obj = {
|
capitalAmt: this.capitalAmt,
|
// goodsBrand: this.goodsBrand,
|
goodsName: this.goodsName,
|
orderNo: this.orderNo,
|
term: this.term,
|
userMblNo: this.userMblNo,
|
userName: this.userName,
|
zfbVersion: this.$route.query.zfbVersion,
|
payType:1, //正扫
|
sysPlat: this.sysPlat
|
};
|
this.$api.hbOrderCreate(obj).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;
|
this.zfbRate = res.body.zfbRate
|
this.platRate = res.body.platRate
|
|
this.backUrl = res.body.backUrl
|
sessionStorage.hjBackUrl = res.body.backUrl
|
//this.capitalAmt = res.body.capitalAmt
|
|
if (body.payQrCodeUrl) {
|
window.sessionStorage.setItem("hbpayQrCodeUrl", body.payQrCodeUrl);
|
this.createdQRCode();
|
}
|
}, err => {
|
if(err.errorCode===30006007){
|
this.showDia = true
|
}
|
});
|
},
|
},
|
};
|
|
</script>
|
<style lang='less' scoped >
|
// /deep/.myDisableIpt{
|
// color: #999999;
|
// }
|
/deep/.van-field__control:disabled {
|
color: #666;
|
-webkit-text-fill-color: #666;
|
background-color: transparent;
|
opacity: 1;
|
}
|
|
.ipt,
|
.fenqi {
|
& {
|
border-bottom: 1px solid rgba(238,238,238,1);
|
color: #333;
|
font-size: 16px;
|
height: 50px;
|
}
|
}
|
.mer{
|
width: 100%;
|
height: 150px;
|
background: linear-gradient(-45deg,rgba(104,98,133,1),rgba(76,69,113,1));
|
overflow: hidden;
|
&-head{
|
width: 96%;
|
margin: 28px 2% 0 2%;
|
height: 72px;
|
background:rgba(255,255,255,0.1);
|
// background: (0,0,0, 0.1);
|
border-radius: 36px;
|
.flex();
|
&-item{
|
width: 33%;
|
color: #fff;
|
text-align: center;
|
:first-child{
|
margin-bottom: 11px;
|
font-size: 20px;
|
font-weight: bold;
|
}
|
:last-child{
|
font-size: 12px;
|
}
|
}
|
&-line{
|
width: 1px;
|
height: 20px;
|
background: #fff;
|
}
|
}
|
}
|
.group-content{
|
transform: translateY(-25px);
|
width: 96%;
|
margin: 0 2%;
|
}
|
/deep/.weui-cells{
|
border-radius: 6px;
|
font-size: 16px;
|
input{
|
font-size: 14px;
|
}
|
}
|
.hb-order-confirm {
|
.trial-list {
|
padding-left: 20px;
|
}
|
|
.f-button-component .f-button {
|
margin-top: 12px;
|
}
|
}
|
|
.hb-credit-installment {
|
background-color: #F5F5F7;
|
// padding-top: 54px;
|
min-height: 100%;
|
.title {
|
padding: 14px 0px 14px 12px;
|
font-size: 16px;
|
font-weight: bold;
|
color: #333;
|
border-bottom: 1px solid rgba(238,238,238,1);
|
.line {
|
display: inline-block;
|
width: 3px;
|
height: 16px;
|
// margin-right: 8px;
|
background:rgba(137,110,219,1);
|
border-radius:0px 6px 0px 6px;
|
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;
|
}
|
}
|
}
|
}
|
.btn-box{
|
margin-top: 40px;
|
margin-bottom: 22px;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.btn2{
|
width: 40%;
|
height: 44px;
|
background:rgba(137,110,219,1);
|
color: white;
|
}
|
.active {
|
width: 80%;
|
}
|
}
|
|
</style>
|
