<!--
|
* @Author: 小明丶
|
* @Date: 2019-09-24 18:22:58
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-09-27 15:10:45
|
* @Description:
|
-->
|
<template>
|
<div class="hb-merchant-installment">
|
<van-nav-bar title="办理分期" left-arrow @click-left="onClickLeft" />
|
<div class="money-box">
|
<div class="item-box">
|
<p class="tit">商家到账金额</p>
|
<p v-if="this.capitalAmt == ''" class="money">0.00</p>
|
<p v-else class="money">{{this.capitalAmt}}</p>
|
</div>
|
<div class="item-box">
|
<p class="tit">客户总还款金额</p>
|
<p v-if="this.totalAmount == ''" class="money">0.00</p>
|
<p v-else class="money">{{this.totalAmount}}</p>
|
</div>
|
<div class="item-box">
|
<p class="tit">客户月还款金额</p>
|
<p v-if="this.monthMoney == ''" class="money">0.00</p>
|
<p v-else class="money">{{this.monthMoney}}</p>
|
</div>
|
</div>
|
<van-field
|
class="ipt"
|
v-model="howMouch"
|
type="number"
|
label="商品金额"
|
placeholder="请输入"
|
input-align="right"
|
border="true"
|
@input="changeMoney"
|
:maxlength="5"
|
required
|
/>
|
<van-field
|
class="fenqi"
|
readonly
|
clickable
|
label="分期期数"
|
:value="value"
|
placeholder="请选择"
|
@click="showPicker = true"
|
input-align="right"
|
border="true"
|
required
|
/>
|
|
<van-popup v-model="showPicker" position="bottom" :style="{ height: '30%' }">
|
<van-picker
|
title="选择期数"
|
show-toolbar
|
item-height="30"
|
:columns="columns"
|
@cancel="showPicker = false"
|
@confirm="onConfirm"
|
/>
|
</van-popup>
|
<van-field
|
class="ipt"
|
label="商品名称"
|
placeholder="请输入"
|
input-align="right"
|
border="true"
|
:maxlength="20"
|
v-model="contractGoodsName"
|
required
|
/>
|
<van-field
|
class="ipt"
|
label="商品品牌"
|
placeholder="请输入"
|
input-align="right"
|
border="true"
|
:maxlength="10"
|
v-model="contractGoodsBrand"
|
/>
|
<van-field
|
class="ipt"
|
label="用户姓名"
|
placeholder="请输入"
|
input-align="right"
|
border="true"
|
:maxlength="10"
|
v-model="contractUserName"
|
required
|
/>
|
<van-field
|
class="ipt"
|
type="tel"
|
label="用户手机号"
|
placeholder="请输入"
|
input-align="right"
|
border="true"
|
:maxlength="11"
|
v-model="contractUserMblNo"
|
required
|
/>
|
<van-button
|
round
|
type="info"
|
class="btn"
|
block="true"
|
color="linear-gradient(to right, #4bb0ff, #6149f6)"
|
@click="goodInstallmentOrder"
|
>创建订单</van-button>
|
<!--点击创建订单展示 弹窗 -->
|
<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>
|
</div>
|
</template>
|
<script>
|
import QRCode from "qrcode";
|
import FConfirmSimple from "@/components/old/FConfirmSimple.vue";
|
import axios from "axios";
|
import Vue from "vue";
|
import { NavBar } from "vant";
|
import { Grid, GridItem } from "vant";
|
import { Field } from "vant";
|
import { DropdownMenu, DropdownItem } from "vant";
|
import { Popup } from "vant";
|
import { Picker } from "vant";
|
import { Toast } from "vant";
|
import { async } from "q";
|
|
Vue.use(Toast);
|
Vue.use(Picker);
|
Vue.use(Popup);
|
Vue.use(DropdownMenu).use(DropdownItem);
|
Vue.use(Field);
|
Vue.use(Grid).use(GridItem);
|
Vue.use(NavBar);
|
export default {
|
components: {
|
FConfirmSimple
|
},
|
data() {
|
return {
|
showConfirm: false,
|
capitalAmt: "0.00", //商家到账金额
|
monthMoney: "0.00", //客户月还款总额
|
contractGoodsBrand: "", //商品品牌
|
contractGoodsName: "", //商品名称
|
contractUserMblNo: "", //用户手机号
|
contractUserName: "", //用户名称
|
totalAmount: "0.00",
|
orderNo: "", //未知参数
|
term: null, //分期期数
|
userMblNo: "", //用户手机号
|
userName: "", //用户名称
|
trial: {}, // 利率相关信息
|
orderId: "", //订单id
|
typeId: "",
|
payQrCodeUrl: "", // 二维码
|
termList: [], //分期期数列表
|
showConfirm: false,
|
howMouch: "", //商品金额
|
value: "", //期数选择值
|
showPicker: false, //期数选择弹出层控制
|
columns: [] //分期期数列表
|
};
|
},
|
created() {
|
this.$api.shtxOrderInit().then(
|
res => {
|
console.log(res);
|
var arr = res.body.terms;
|
arr.forEach((ele, i) => {
|
this.columns.push(`${ele.code}期`);
|
});
|
console.log(this.columns);
|
},
|
err => err
|
);
|
},
|
methods: {
|
handleHide() {
|
this.showConfirm = false;
|
},
|
//返回上一级按钮
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
//弹出层显示
|
showPopup() {
|
this.show = true;
|
},
|
// 弹出层期数选项控制
|
onConfirm(value) {
|
this.value = value;
|
//console.log(value.slice(0, -1));
|
this.showPicker = false;
|
this.term = value.slice(0, -1)
|
//得到月还款额
|
this.$api
|
.getMonthMoney({
|
totalAmount: this.howMouch,
|
term: value.slice(0, -1)
|
})
|
.then(res => {
|
console.log(res);
|
this.capitalAmt = res.body.capitalAmt;
|
this.monthMoney = res.body.repayPerMonth;
|
this.totalAmount = res.body.totalAmount;
|
});
|
},
|
changeMoney(){
|
if(this.howMouch != this.totalAmount && this.term!= null && this.howMouch !=''){
|
//得到月还款额
|
this.$api
|
.getMonthMoney({
|
totalAmount: this.howMouch,
|
term: this.value.slice(0, -1)
|
})
|
.then(res => {
|
this.capitalAmt = res.body.capitalAmt;
|
this.monthMoney = res.body.repayPerMonth;
|
this.totalAmount = res.body.totalAmount;
|
});
|
} else if(this.howMouch == ''){
|
this.capitalAmt = 0.00;
|
this.monthMoney = 0.00
|
this.totalAmount = 0.00
|
}
|
},
|
//订单生成
|
goodInstallmentOrder() {
|
this.totalAmount = this.howMouch
|
if(this.totalAmount != ''){
|
this.$api
|
.getMonthMoney({
|
totalAmount: this.howMouch,
|
term: this.value.slice(0, -1)
|
})
|
.then(res => {
|
console.log(res);
|
this.capitalAmt = res.body.capitalAmt;
|
this.monthMoney = res.body.repayPerMonth;
|
this.totalAmount = res.body.totalAmount;
|
});
|
}
|
let v = this.$tool;
|
if (v.checkValEmpty(this.totalAmount)) {
|
v.toast("请输入商品金额");
|
return ;
|
}
|
// if (!Number(this.totalAmount)) {
|
// v.toast("请输入正确的结算金额");
|
// return false;
|
// }
|
//临时调整价格
|
if (Number(this.totalAmount) <= 0 ) {
|
v.toast("商品金额不能为0");
|
return false;
|
}
|
let res = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
|
if (v.checkValEmpty(this.contractGoodsName)) {
|
v.toast("请输入商品名称");
|
return ;
|
}
|
if (!res.test(this.contractGoodsName)) {
|
v.toast("请输入文字/字母/数字且不包含特殊字符的商品名称");
|
return ;
|
}
|
if (v.checkValEmpty(this.term)) {
|
v.toast("请输入分期期数");
|
return ;
|
}
|
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 queryObj = {
|
goodsBrand: this.contractGoodsBrand, //商品品牌
|
goodsName: this.contractGoodsName, //商品名称
|
prodId: 30000010, //产品id
|
term: this.value.slice(0, -1), //分期期数
|
totalAmount: this.totalAmount, //商品总价
|
userMblNo: this.contractUserMblNo, //用户电话号
|
userName: this.contractUserName // 用户名称
|
};
|
this.$api.shtxOrderCreate(queryObj).then(res => {
|
console.log(res);
|
this.orderId = res.body.orderId;
|
this.payQrCodeUrl = res.body.payQrCodeUrl;
|
this.trial.totalAmount = res.body.totalAmount;
|
this.trial.repayPerMonth = res.body.repayPerMonth;
|
this.trial.feeRate = res.body.feeRate;
|
this.showConfirm = true;
|
});
|
},
|
//生成二维码
|
createdQRCode() {
|
this.showConfirm = false;
|
var queryObj = {
|
term: this.value.slice(0, -1), //分期期数
|
payQrCodeUrl: this.payQrCodeUrl, //二维码
|
totalAmount: this.totalAmount //还款总额，本金
|
};
|
if (this.$route.query.typeId) {
|
queryObj.typeId = this.$route.query.typeId;
|
}
|
this.$router.push({
|
path: "/shtx-getShtxQRCode",
|
query: {
|
orderId: this.orderId,
|
...queryObj
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.hb-merchant-installment {
|
& {
|
background-color: #e0e1e6;
|
width: 100%;
|
height: 100vh;
|
}
|
.money-box {
|
& {
|
width: 100%;
|
height: 13vh;
|
background-color: #e0e1e6;
|
display: flex;
|
justify-content: space-between;
|
text-align: center;
|
}
|
.item-box {
|
& {
|
display: flex;
|
flex-wrap: wrap;
|
align-content: center;
|
}
|
.tit {
|
font-size: 14px;
|
font-weight: 700;
|
display: inline-block;
|
vertical-align: middle;
|
width: 100%;
|
}
|
.money {
|
margin: 15px 0 0 0;
|
width: 100%;
|
}
|
}
|
}
|
.ipt,
|
.fenqi {
|
& {
|
border-bottom: 1px solid #e0e1e6;
|
}
|
}
|
.btn {
|
width: 80vw;
|
height: 6vh;
|
line-height: 6vh;
|
margin: auto;
|
position: fixed;
|
bottom: 3vh;
|
right: 10vw;
|
}
|
.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>
|
