<!--
|
* @Author: 小明丶
|
* @Date: 2020-03-19 10:25:57
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-06-28 10:28:58
|
* @Description:
|
-->
|
<!--
|
* @Author: 小明丶
|
* @Date: 2019-10-21 17:19:32
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-11-04 17:28:32
|
* @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="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;"
|
/>
|
</div>
|
</div>
|
<div class="btn-grounp">
|
<button @click="goHbPage">花呗分期</button>
|
<button @click="goCxPage">储蓄卡分期</button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { NavBar } from "vant";
|
import { Field } from "vant";
|
import { Button } from "vant";
|
import { Notify } from "vant";
|
|
Vue.use(Notify);
|
Vue.use(Button);
|
Vue.use(Field);
|
Vue.use(NavBar);
|
export default {
|
data() {
|
return {
|
query: {
|
merchantArrival: "", //商户到账
|
trim: "", //分期期数
|
monthlyRepayment: "", //每月还款
|
totalRepayment: "", //总还款额
|
packageTariff: "", //套餐资费
|
contId: "", //套餐id
|
contName: "" //套餐名称
|
},
|
userName: "", //用户名
|
userNumber: "", //用户手机号
|
tradeName: "", //商品名称
|
contMblNo:"",//合约手机号
|
idNo:""//身份证号
|
};
|
},
|
mounted() {
|
this.query = this.$route.query;
|
console.log(this.query);
|
},
|
methods: {
|
goCxPage(){
|
this.$route.push({
|
path:"/xyg/list",
|
query:this.query
|
})
|
},
|
goHbPage(){
|
this.$route.push({
|
path:"/xyg/list",
|
query:this.query
|
})
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
createdQRCode() {
|
if (
|
this.userName == "" ||
|
this.userNumber == "" ||
|
this.tradeName == "" ||
|
this.contMblNo == "" ||
|
this.idNo == ""
|
) {
|
Notify({ type: "primary", message: "姓名、入网号码、合约号码、身份证号、商品名称不能为空" });
|
return;
|
}
|
let params = {
|
contId: this.query.contId,
|
goodsName: this.tradeName,
|
userName: this.userName,
|
userMblNo: this.userNumber,
|
contMblNo:this.contMblNo,
|
idNo:this.idNo
|
};
|
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.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 || ""
|
}
|
});
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.hbhy-big-box {
|
& {
|
position: relative;
|
background-color: #f5f5f5;
|
height: auto;
|
padding-bottom: 20px;
|
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: 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: 94%;
|
height: 302px;
|
background-color: white;
|
margin: auto;
|
margin-top: -150px;
|
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;
|
}
|
}
|
}
|
.btn-grounp{
|
margin-top: 40px;
|
color: #fff;
|
text-align: center;
|
button:nth-of-type(1){
|
width:160px;
|
height:44px;
|
background:rgba(137,110,219,1);
|
border-radius:22px;
|
outline: none;
|
border: 0;
|
margin-right: 12px;
|
}
|
button:nth-of-type(2){
|
width:160px;
|
height:44px;
|
background:rgba(81,74,120,1);
|
border-radius:22px;
|
outline: none;
|
border: 0;
|
}
|
}
|
}
|
|
</style>
|
