<!--
|
* @Author: 小明丶
|
* @Date: 2019-09-24 18:22:58
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-08 13:49:02
|
* @Description:
|
-->
|
<template>
|
<div class="hb-merchant-installment">
|
<!-- <van-nav-bar title="商户贴息" left-arrow @click-left="onClickLeft" /> -->
|
<van-nav-bar title="商户贴息" left-text="返回" left-arrow @click-left="onClickLeft">
|
<!-- <van-icon name="iconzuojiantou" slot="left" /> -->
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
</van-nav-bar>
|
<div class="money-box">
|
<div class="item-content">
|
<div v-if="hasHjToken()" class="item-box">
|
<p class="money">{{ trial.capitalAmt ? trial.capitalAmt : '0.00 '}}</p>
|
<p class="tit">商家到账金额</p>
|
</div>
|
<span class="line"></span>
|
<div class="item-box">
|
<p class="money">{{ trial.totalAmount ? trial.totalAmount : '0.00' }}</p>
|
<p class="tit">客户总还款金额</p>
|
</div>
|
<span class="line"></span>
|
<div class="item-box">
|
<p class="money">{{ trial.repayPerMonth ? trial.repayPerMonth : '0.00' }}</p>
|
<p class="tit">客户月还款金额</p>
|
</div>
|
</div>
|
</div>
|
<div class="form-content">
|
<van-field
|
class="ipt"
|
v-model="howMouch"
|
type="number"
|
label="商品金额"
|
placeholder="请输入商品金额"
|
input-align="right"
|
border="true"
|
@input="changeMoney"
|
:maxlength="5"
|
/>
|
<van-field
|
class="fenqi"
|
readonly
|
clickable
|
label="分期期数"
|
:value="value"
|
placeholder="请选择"
|
@click="showPicker = true"
|
input-align="right"
|
border="true"
|
is-link="true"
|
/>
|
<van-field
|
class="ipt"
|
label="商品名称"
|
placeholder="请输入商品名称"
|
input-align="right"
|
border="false"
|
:maxlength="20"
|
v-model="contractGoodsName"
|
/>
|
<van-field
|
class="ipt"
|
label="商品品牌"
|
placeholder="请输入商品品牌"
|
input-align="right"
|
border="false"
|
:maxlength="10"
|
v-model="contractGoodsBrand"
|
/>
|
<van-field
|
class="ipt"
|
label="用户姓名"
|
placeholder="请输入用户姓名"
|
input-align="right"
|
border="false"
|
:maxlength="10"
|
v-model="contractUserName"
|
/>
|
<van-field
|
class="ipt"
|
type="tel"
|
label="用户手机号"
|
placeholder="请输入用户手机号"
|
input-align="right"
|
border="false"
|
:maxlength="11"
|
v-model="contractUserMblNo"
|
/>
|
<van-field
|
disabled
|
class="ipt"
|
type="tel"
|
label="智享服务费率"
|
placeholder="请输入智享服务费率"
|
label-width="150px"
|
input-align="right"
|
border="false"
|
:maxlength="11"
|
v-model="platRatePr"
|
/>
|
<van-field
|
disabled
|
class="ipt"
|
type="tel"
|
label-width="150px"
|
label="花呗分期手续费率"
|
placeholder="请输入花呗分期手续费率"
|
input-align="right"
|
border="false"
|
:maxlength="11"
|
v-model="zfbRatePr"
|
/>
|
</div>
|
<div class="btn-box">
|
<van-button
|
round
|
type="info"
|
class="btn"
|
block="true"
|
color="#896EDB"
|
@click="goodInstallmentOrder"
|
:class="sysPlat == 2 ? 'active' : ''"
|
>生成二维码</van-button>
|
<van-button
|
round
|
type="info"
|
class="btn"
|
block="true"
|
color="#896EDB"
|
@click="WeChatSanCode"
|
v-if="sysPlat != 2"
|
>扫描付款码</van-button>
|
</div>
|
|
<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>
|
<Vdialog @cancel="cancel" :show="showDia"></Vdialog>
|
</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";
|
import Vdialog from "@/components/common/v-dialog.vue";
|
|
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,Vdialog
|
},
|
data() {
|
return {
|
backUrl: "", //回调地址
|
zfbRate: "",
|
platRate: "",
|
showConfirm: false,
|
showDia:false,
|
contractGoodsBrand: "", //商品品牌
|
contractGoodsName: "", //商品名称
|
contractUserMblNo: "", //用户手机号
|
contractUserName: "", //用户名称
|
orderNo: "", //未知参数
|
term: null, //分期期数
|
userMblNo: "", //用户手机号
|
userName: "", //用户名称
|
trial: {
|
capitalAmt: "",
|
repayPerMonth: "",
|
totalAmount: ""
|
}, // 利率相关信息
|
orderId: "", //订单id
|
typeId: "",
|
payQrCodeUrl: "", // 二维码
|
termList: [], //分期期数列表
|
showConfirm: false,
|
howMouch: "", //商品金额
|
value: "", //期数选择值
|
showPicker: false, //期数选择弹出层控制
|
columns: [], //分期期数列表
|
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 "";
|
}
|
}
|
},
|
created() {
|
if(sessionStorage.hb_session_info&&this.$route.query.isCreateOrderPush){
|
this.isGoBack = 1
|
let hb_session_info = JSON.parse(sessionStorage.hb_session_info)
|
this.contractGoodsBrand=hb_session_info.goodsBrand //商品品牌
|
this.contractGoodsName=hb_session_info.goodsName //商品名称
|
this.value = hb_session_info.term
|
this.term = hb_session_info.term.slice(0, -1)
|
this.howMouch=hb_session_info.totalAmount //商品总价
|
this.contractUserMblNo=hb_session_info.userMblNo//用户电话号
|
this.contractUserName=hb_session_info.userName // 用户名称
|
this.sysPlat=hb_session_info.sysPlat
|
this.changeMoney()
|
}
|
let sysPlat = localStorage.sib_mer_sysPlat
|
if (sysPlat === 'undefined' || sysPlat === '1') {
|
sysPlat = 1
|
}
|
if (sysPlat === '2') {
|
sysPlat = 2
|
}
|
this.sysPlat = sysPlat
|
this.$api.shtxOrderInit().then(
|
res => {
|
var arr = res.body.terms;
|
arr.forEach((ele, i) => {
|
this.columns.push(`${ele.code}期`);
|
});
|
},
|
err => err
|
);
|
this.getWeChatConfig()
|
},
|
methods: {
|
cancel(val){
|
this.showDia = val
|
},
|
// 调用微信摄像头，扫一扫
|
WeChatSanCode() {
|
let _this = this;
|
this.totalAmount = this.howMouch;
|
let sysPlat = localStorage.sib_mer_sysPlat
|
if (sysPlat === 'undefined' || sysPlat === '1') {
|
sysPlat = 1
|
}
|
if (sysPlat === '2') {
|
sysPlat = 2
|
}
|
if (this.totalAmount != "") {
|
this.$api
|
.getMonthMoney({
|
totalAmount: this.howMouch,
|
term: this.value.slice(0, -1)
|
})
|
.then(res => {
|
this.trial.capitalAmt = res.body.capitalAmt;
|
this.trial.monthMoney = res.body.repayPerMonth;
|
this.trial.totalAmount = res.body.totalAmount;
|
});
|
}
|
let v = this.$tool;
|
if (v.checkValEmpty(this.totalAmount)) {
|
v.toast("请输入商品金额");
|
return;
|
}
|
//临时调整价格
|
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.contractGoodsBrand)) {
|
v.toast("请输入商品品牌");
|
return;
|
}
|
if (v.checkValEmpty(this.contractUserName)) {
|
v.toast("请输入用户姓名");
|
return;
|
}
|
if (v.checkValEmpty(this.contractUserMblNo)) {
|
v.toast("请输入用户手机号");
|
return;
|
}
|
if (sysPlat == 1) {
|
this.checkIsReady().then(() => {
|
wx.scanQRCode({
|
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
|
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
|
success: function(res) { // 当needResult 为 1 时，扫码返回的结果
|
// 扫码成功后调用接口
|
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, // 用户名称
|
zfbVersion: Number(_this.$route.query.zfbVersion),
|
payType: 2,//正扫
|
authCode: res.resultStr,
|
sysPlat: sysPlat
|
};
|
_this.$api.shtxOrderCreate(queryObj).then(res=>{
|
_this.orderId = res.body.orderId;
|
_this.$router.push({
|
path:'/pay-result',
|
query:{
|
orderId: _this.orderId,
|
mode:'shtx'
|
}
|
})
|
})
|
}
|
});
|
});
|
}
|
if (sysPlat == 2) {
|
my.postMessage({'sendToMiniProgram': '0'})
|
my.onMessage = function(e) {
|
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, // 用户名称
|
zfbVersion: Number(_this.$route.query.zfbVersion),
|
payType: 2,//正扫
|
authCode: e,
|
sysPlat: sysPlat
|
};
|
_this.$api.shtxOrderCreate(queryObj).then(res=>{
|
_this.orderId = res.body.orderId;
|
_this.$router.push({
|
path:'/pay-result',
|
query:{
|
orderId: _this.orderId,
|
mode:'shtx'
|
}
|
})
|
})
|
}
|
}
|
},
|
// 异步准备微信环境
|
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']
|
});
|
});
|
},
|
hasHjToken() {
|
if (localStorage.hjToken) {
|
return false;
|
} else {
|
return true;
|
}
|
},
|
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(1111);
|
this.trial.capitalAmt = res.body.capitalAmt;
|
this.trial.repayPerMonth = res.body.repayPerMonth;
|
this.trial.totalAmount = res.body.totalAmount;
|
this.platRate = res.body.platRate;
|
this.zfbRate = res.body.zfbRate;
|
});
|
},
|
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.trial.capitalAmt = res.body.capitalAmt;
|
this.trial.repayPerMonth = res.body.repayPerMonth;
|
this.trial.totalAmount = res.body.totalAmount;
|
this.platRate = res.body.platRate;
|
this.zfbRate = res.body.zfbRate;
|
});
|
} else if (this.howMouch == "") {
|
this.trial.capitalAmt = 0.0;
|
this.trial.repayPerMonth = 0.0;
|
this.trial.totalAmount = 0.0;
|
}
|
},
|
//订单生成
|
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.trial.capitalAmt = res.body.capitalAmt;
|
this.trial.monthMoney = res.body.repayPerMonth;
|
this.trial.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.contractGoodsBrand)) {
|
v.toast("请输入商品品牌");
|
return;
|
}
|
if (v.checkValEmpty(this.contractUserName)) {
|
v.toast("请输入用户姓名");
|
return;
|
}
|
if (v.checkValEmpty(this.contractUserMblNo)) {
|
v.toast("请输入用户手机号");
|
return;
|
}
|
|
// 用来整体存储缓存数据
|
let hb_session_info = {
|
goodsBrand: this.contractGoodsBrand, //商品品牌
|
goodsName: this.contractGoodsName, //商品名称
|
prodId: 30000010, //产品id
|
term: this.value, //分期期数
|
totalAmount: this.totalAmount, //商品总价
|
userMblNo: this.contractUserMblNo, //用户电话号
|
userName: this.contractUserName, // 用户名称
|
zfbVersion: Number(this.$route.query.zfbVersion),
|
payType: 1,//正扫
|
sysPlat: this.sysPlat
|
}
|
sessionStorage.hb_session_info = JSON.stringify(hb_session_info)
|
|
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, // 用户名称
|
zfbVersion: Number(this.$route.query.zfbVersion),
|
payType: 1,//正扫
|
sysPlat: this.sysPlat
|
};
|
this.$api.shtxOrderCreate(queryObj).then(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;
|
this.backUrl = res.body.backUrl;
|
sessionStorage.hjBackUrl = res.body.backUrl;
|
this.createdQRCode();
|
},err=>{
|
if(err.errorCode===30006007){
|
this.showDia = true
|
}
|
});
|
},
|
//生成二维码
|
createdQRCode() {
|
this.showConfirm = false;
|
|
var queryObj = {
|
term: this.value.slice(0, -1), //分期期数
|
payQrCodeUrl: this.payQrCodeUrl, //二维码
|
totalAmount: this.totalAmount, //还款总额，本金
|
platRate: this.platRate,
|
zfbRate: this.zfbRate,
|
capitalAmt: this.capitalAmt,
|
backUrl: this.backUrl
|
};
|
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: #f3f4f5;
|
width: 100%;
|
min-height: 100vh;
|
}
|
/deep/.van-field__control:disabled {
|
color: #666;
|
-webkit-text-fill-color: #666;
|
}
|
.money-box {
|
& {
|
width: 100%;
|
height: 150px;
|
background: linear-gradient(
|
-45deg,
|
rgba(104, 98, 133, 1),
|
rgba(76, 69, 113, 1)
|
);
|
display: flex;
|
justify-content: space-between;
|
text-align: center;
|
}
|
.item-content {
|
width: 359px;
|
height: 72px;
|
margin: 28px 8px 0 8px;
|
background: #716d8e;
|
border-radius: 72px;
|
.flexLayout(flex-start, center, row);
|
}
|
.line {
|
width: 1px;
|
height: 20px;
|
opacity: 0.1;
|
background: rgba(255, 255, 255, 1);
|
}
|
.item-box {
|
& {
|
display: flex;
|
flex-wrap: wrap;
|
align-content: center;
|
width: 33%;
|
color: #fff;
|
}
|
.tit {
|
font-size: 12px;
|
// font-weight: 700;
|
display: inline-block;
|
vertical-align: middle;
|
width: 100%;
|
}
|
.money {
|
margin: 0px 0 11px 0;
|
width: 100%;
|
font-size: 20px;
|
font-weight: bold;
|
}
|
}
|
}
|
.form-content {
|
width: 359px;
|
// height: 300px;
|
margin: 0 8px;
|
transform: translateY(-30px);
|
// position: absolute;
|
// top: 165px;
|
border-radius: 6px;
|
}
|
.ipt,
|
.fenqi {
|
& {
|
border-bottom: 1px solid rgba(238, 238, 238, 1);
|
color: #333;
|
font-size: 16px;
|
height: 50px;
|
}
|
}
|
.btn-box {
|
margin-top: 90px;
|
margin-bottom: 20px;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.btn {
|
width: 40vw;
|
height: 44px;
|
line-height: 44px;
|
background-color: #896edb;
|
border: none;
|
}
|
.active {
|
width: 80vw;
|
}
|
}
|
|
.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>
|
