<!--
|
* @Author: 小明丶
|
* @Date: 2020-03-19 12:38:43
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-16 10:54:46
|
* @Description: 信用购花呗办理套餐页面
|
-->
|
<template>
|
<div class="hbhy-big-box">
|
<!-- <van-nav-bar title="办理套餐" left-arrow @click-left="onClickLeft" /> -->
|
<!-- <x-header title="办理套餐" :left-options="{backText:''}"></x-header> -->
|
<v-navbar title="办理套餐" fixed></v-navbar>
|
<div class="color-box"></div>
|
<div class="user-information">
|
<div class="tit">
|
<p>用户信息</p>
|
</div>
|
<div class="user-cont">
|
<van-field
|
v-model="contMblNo"
|
maxlength="11"
|
label="合约号码"
|
placeholder="请输入用户合约号码"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
</div>
|
<div class="user-name">
|
<van-field
|
v-model="userName"
|
label="用户姓名"
|
placeholder="请输入用户姓名"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
</div>
|
<div class="user-idno">
|
<van-field
|
v-model="idNo"
|
maxlength="18"
|
label="身份证号"
|
placeholder="请输入用户身份证号"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
</div>
|
<div class="user-number">
|
<van-field
|
v-model="tradeName"
|
label="商品名称"
|
placeholder="请输入商品名称"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
</div>
|
</div>
|
<div class="package-information">
|
<div class="tit">
|
<p>套餐信息</p>
|
</div>
|
<div class="package-tariff">
|
<van-field
|
class="myStyle"
|
disabled
|
custom-style="color:#333333"
|
v-model="query.packagePrices"
|
label="套餐资费"
|
placeholder="请输入"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
</div>
|
<div class="total-repayment">
|
<van-field
|
class="myStyle"
|
disabled
|
v-model="query.totalPayments"
|
label="总还款额"
|
placeholder="请输入"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
</div>
|
<div class="monthly-repayment">
|
<van-field
|
class="myStyle"
|
disabled
|
v-model="query.retFee"
|
label="每月还款"
|
placeholder="请输入"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
</div>
|
<div class="trim">
|
<van-field
|
class="myStyle"
|
disabled
|
v-model="query.term"
|
label="还款期数"
|
placeholder="请输入"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
</div>
|
<div class="merchant-arrival">
|
<van-field
|
disabled
|
v-model="query.prodAmt"
|
label="结算金额"
|
placeholder="请输入"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
<van-field
|
disabled
|
v-model="platRatePr"
|
label="智享服务费率"
|
label-width="150px"
|
placeholder="请输入"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
<van-field
|
disabled
|
v-model="zfbRatePr"
|
label="花呗分期手续费率"
|
label-width="150px"
|
placeholder="请输入"
|
input-align="right"
|
label-class="input-text"
|
style="font-size: 14px;
|
color: rgba(102, 102, 102, 1);
|
font-family:PingFang SC;"
|
/>
|
</div>
|
</div>
|
<van-button
|
round
|
type="default"
|
color="#896EDB"
|
style="margin-left:10%;margin-top:125px;width:80%;background:#896EDB;color:#fff"
|
@click="createdQRCode"
|
>生成二维码</van-button>
|
<Vdialog @cancel="cancel" :show="showDia"></Vdialog>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { NavBar } from "vant";
|
import { Field } from "vant";
|
import { Button } from "vant";
|
import { Notify } from "vant";
|
import Vdialog from "@/components/common/v-dialog.vue";
|
|
Vue.use(Notify);
|
Vue.use(Button);
|
Vue.use(Field);
|
Vue.use(NavBar);
|
export default {
|
components:{
|
Vdialog
|
},
|
data() {
|
return {
|
showDia:false,
|
query: {
|
platRate:'',
|
zfbRate:'',
|
prodAmt: "", //结算金额
|
term: "", //分期期数
|
retFee: "", //月还款
|
totalPayments: "", //总还款额
|
packagePrices: "", //套餐资费
|
// contId: "", //套餐id
|
// contName: "" //套餐名称
|
},
|
mblNo:'',//
|
userName: "", //用户名
|
//userNumber: "", //用户入网号码
|
tradeName: "", //商品名称
|
contMblNo:"",//合约手机号
|
idNo:"",//身份证号
|
//prodName:'',//商品名称
|
};
|
},
|
computed:{
|
zfbRatePr(){
|
if(this.query.zfbRate){
|
return this.query.zfbRate + '%'
|
}else{
|
return ''
|
}
|
|
},
|
platRatePr(){
|
if(this.query.platRate){
|
return this.query.platRate + '%'
|
}else{
|
return ''
|
}
|
|
}
|
},
|
created(){
|
if(sessionStorage.hb_session_info&&this.$route.query.isCreateOrderPush){
|
let hb_session_info = JSON.parse(sessionStorage.hb_session_info)
|
this.tradeName=hb_session_info.goodsName
|
this.userName=hb_session_info.userName
|
this.contMblNo=hb_session_info.contMblNo
|
this.idNo=hb_session_info.idNo
|
}
|
},
|
mounted() {
|
this.query = this.$route.query;
|
this.contMblNo = this.$route.query.mblNo
|
console.log(this.query);
|
},
|
methods: {
|
cancel(val){
|
this.showDia = val
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
createdQRCode() {
|
if (
|
this.userName == "" ||
|
this.tradeName == "" ||
|
this.contMblNo == "" ||
|
this.idNo == ""
|
) {
|
Notify({ type: "primary", message: "姓名、合约号码、身份证号、商品名称不能为空" });
|
return;
|
}
|
// 用来整体存储缓存数据
|
let hb_session_info = {
|
goodsName: this.tradeName,
|
userName: this.userName,
|
contMblNo:this.contMblNo,
|
idNo:this.idNo,
|
}
|
sessionStorage.hb_session_info = JSON.stringify(hb_session_info)
|
|
let params = {
|
//contId:this.query.contId,
|
goodsName: this.tradeName,
|
userName: this.userName,
|
contMblNo:this.contMblNo,
|
idNo:this.idNo,
|
seq:this.query.seq,
|
term:this.query.term,
|
capitalAmt:this.query.prodAmt,
|
zfbVersion: this.$route.query.zfbVersion
|
};
|
this.$api.xygOrderCreateHbOrder(params).then(res => {
|
let body = res.body;
|
this.orderId = body.orderId;
|
this.payQrCodeUrl = body.payQrCodeUrl;
|
this.totalAmount = body.totalAmount;
|
this.capitalAmt = body.capitalAmt
|
// this.trial.repayPerMonth = body.repayPerMonth;
|
// this.trial.feeRate = body.feeRate;
|
this.showConfirm = true;
|
if (body.payQrCodeUrl) {
|
sessionStorage.setItem("xygHbpayQrCodeUrl", body.payQrCodeUrl);
|
}
|
this.$router.push({
|
path: "/xyg-getXygHbQRCode",
|
query: {
|
orderId: body.orderId,
|
payQrCodeUrl: body.payQrCodeUrl,
|
totalAmount: body.totalAmount,
|
term: this.query.term,
|
typeId: this.query.typeId || "",
|
platRate: this.query.platRate,
|
zfbRate: this.query.zfbRate,
|
capitalAmt:this.capitalAmt
|
}
|
});
|
},err=>{
|
if(err.errorCode===30006007){
|
this.showDia = true
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.hbhy-big-box {
|
& {
|
position: relative;
|
background-color: #f5f5f5;
|
height: auto;
|
padding-bottom: 60px;
|
min-height: 100vh;
|
}
|
.color-box {
|
width: 100%;
|
height: 260px;
|
background: linear-gradient(
|
180deg,
|
rgba(85, 78, 128, 1),
|
rgba(66, 61, 93, 1)
|
);
|
}
|
.user-information {
|
& {
|
position: absolute;
|
width: 94%;
|
height: 220px;
|
background-color: white;
|
left: 3%;
|
top: 98px;
|
border-radius: 6px;
|
}
|
div {
|
height: 50px;
|
width: 100%;
|
border-bottom: 1px solid #f5f5f5;
|
}
|
.tit {
|
p {
|
color: #333333;
|
font-size: 16px;
|
font-weight: bold;
|
line-height: 50px;
|
margin-left: 5px;
|
}
|
p::before {
|
width: 3px;
|
height: 16px;
|
content: "";
|
background: rgba(137, 110, 219, 1);
|
border-radius: 0px 3px 0px 3px;
|
// left: -8px;
|
// top: 24px;
|
// position: absolute;
|
display: inline-block;
|
margin-right: 5px;
|
}
|
}
|
}
|
.package-information {
|
& {
|
width: 94%;
|
height: 302px;
|
background-color: white;
|
margin: auto;
|
margin-top: 100px;
|
border-radius:6px;
|
}
|
div:not(:last-child) {
|
height: 50px;
|
width: 100%;
|
border-bottom: 1px solid #f5f5f5;
|
}
|
/deep/ .van-field__control:disabled {
|
//color: #333333;
|
-webkit-text-fill-color: #333333!important;
|
background-color: transparent;
|
opacity: 1;
|
}
|
.tit {
|
p {
|
color: #333333;
|
font-size: 16px;
|
font-weight: bold;
|
line-height: 50px;
|
margin-left: 5px;
|
}
|
p::before {
|
width: 3px;
|
height: 16px;
|
content: "";
|
background: rgba(137, 110, 219, 1);
|
border-radius: 0px 3px 0px 3px;
|
// left: -8px;
|
// top: 24px;
|
// position: absolute;
|
display: inline-block;
|
margin-right: 5px;
|
}
|
}
|
}
|
}
|
</style>
|
