<!--
|
* @Author: 小明丶
|
* @Date: 2019-10-21 17:19:32
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-16 10:54:36
|
* @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-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-number">
|
<van-field
|
v-model="userNumber"
|
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-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.packageTariff"
|
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.totalRepayment"
|
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.monthlyRepayment"
|
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.trim"
|
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.merchantArrival"
|
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:120px;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: {
|
zfbRate:'',
|
platRate:'',
|
merchantArrival: "", //商户到账
|
trim: "", //分期期数
|
monthlyRepayment: "", //每月还款
|
totalRepayment: "", //总还款额
|
packageTariff: "", //套餐资费
|
contId: "", //套餐id
|
contName: "" //套餐名称
|
},
|
userName: "", //用户名
|
userNumber: "", //用户手机号
|
tradeName: "" //商品名称
|
};
|
},
|
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.tradeName
|
this.userName=hb_session_info.userName
|
this.userNumber=hb_session_info.userNumber
|
}
|
},
|
mounted() {
|
this.query = this.$route.query;
|
console.log(this.query);
|
},
|
methods: {
|
cancel(val){
|
this.showDia = val
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
createdQRCode() {
|
if (
|
this.userName == "" ||
|
this.userNumber == "" ||
|
this.tradeName == ""
|
) {
|
Notify({ type: "primary", message: "姓名、入网号码、商品名称不能为空" });
|
return;
|
}
|
let hb_session_info = {
|
userName:this.userName,
|
userNumber:this.userNumber,
|
tradeName:this.tradeName
|
}
|
sessionStorage.hb_session_info=JSON.stringify(hb_session_info)
|
|
let params = {
|
contId: this.query.contId,
|
goodsName: this.tradeName,
|
userName: this.userName,
|
userMblNo: this.userNumber,
|
zfbVersion: this.$route.query.zfbVersion
|
};
|
this.$api.hbhyjCreate(params).then(res => {
|
let body = res.body;
|
this.orderId = body.orderId;
|
this.payQrCodeUrl = body.payQrCodeUrl;
|
this.totalAmount = body.totalAmount;
|
// this.trial.repayPerMonth = body.repayPerMonth;
|
// this.trial.feeRate = body.feeRate;
|
this.zfbRate = body.zfbRate
|
this.platRate = body.platRate
|
this.capitalAmt = body.capitalAmt
|
this.showConfirm = true;
|
if (body.payQrCodeUrl) {
|
sessionStorage.setItem("hbpayQrCodeUrl", body.payQrCodeUrl);
|
}
|
this.$router.push({
|
path: "/hb-getHBQRCode",
|
query: {
|
orderId: body.orderId,
|
payQrCodeUrl: body.payQrCodeUrl,
|
totalAmount: body.totalAmount,
|
term: this.query.trim,
|
typeId: this.query.typeId || "",
|
zfbRate: this.zfbRate,
|
platRate: this.platRate,
|
capitalAmt:this.capitalAmt
|
}
|
});
|
},err=>{
|
if(err.errorCode === 30006007){
|
console.log(111)
|
this.showDia = true
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.hbhy-big-box {
|
& {
|
position: relative;
|
background-color: #f5f5f5;
|
height: auto;
|
padding-bottom: 70px;
|
}
|
.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: 90%;
|
//height: 220px;
|
background-color: white;
|
left: 5%;
|
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: 90%;
|
height: 302px;
|
background-color: white;
|
margin: auto;
|
margin-top: 65px;
|
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>
|
