<!--
|
* @Date: 2019-08-30 13:38:35
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-09 15:17:58
|
* @Description:
|
-->
|
|
<template>
|
<div class="hb-credit-installment h-100-g">
|
<!-- <x-header title="办理分期" :left-options="{backText:''}"></x-header> -->
|
<!-- <tab :line-width=1 active-color='#bfa073'>
|
<tab-item v-for="(item, index) in tabList" :key="index" :selected="activeTab === index"
|
@on-item-click="handleTabChange(index)">{{ item }}</tab-item>
|
</tab> -->
|
<van-nav-bar title="和微分" left-text="返回" left-arrow @click-left="onClickLeft" style="line-height: 43px;">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
</van-nav-bar>
|
<div class="search">
|
<selector title='活动编码' placeholder='请选择' @on-change='handleContIdChange' v-model="contSendCode"
|
:options='form.cmccWxpayContList' :value-map="['contCode','contName']" direction='rtl'></selector>
|
</div>
|
<group class="group-content">
|
<div class="title">
|
<span class="line" :style="{background:$store.state.defaultBgColor}"></span>
|
活动信息
|
</div>
|
<div class="form-content">
|
<x-input title='活动ID' v-model.trim="contSendCode" readonly text-align='right'></x-input>
|
<x-input title='活动名称' v-model.trim="contName" readonly text-align='right'></x-input>
|
<x-input title='合约期' v-model.trim="term" readonly text-align='right'></x-input>
|
<x-input title='担保金额' v-model.trim="guaranteedAmt" readonly text-align='right'></x-input>
|
</div>
|
<div style="height: 10px; background: #f5f5f5;"></div>
|
<div class="title" style="border-radius:6px;">
|
<span class="line" :style="{background:$store.state.defaultBgColor}"></span>
|
用户信息
|
</div>
|
<div class="form-content">
|
<selector title='手机号类型' placeholder='请选择' @on-change='handleMblTypeChange' v-model="mblNoType"
|
:options='form.mblNoTypeList' :value-map="['code','name']" direction='rtl'></selector>
|
<x-input title='用户姓名' v-model.trim="userName" placeholder='请输入' text-align='right' />
|
<selector title='归属地' placeholder='请选择' @on-change='handleRegionChange' v-model="regionCode"
|
:options='form.regionList' :value-map="['code','name']" direction='rtl'></selector>
|
<x-input title='身份证号码' v-model.trim="idCardNo" placeholder='请输入' text-align='right' />
|
<van-field
|
v-model="mblNo"
|
clearable
|
maxlength='11'
|
type="number"
|
placeholder="手机号码"
|
>
|
<van-button class="mgs-btn" slot="button" size="small" @click="mblVertify" >可用查询</van-button>
|
</van-field>
|
</div>
|
</group>
|
|
|
<div class="btn-box">
|
<van-button round :color="$store.state.backColor" class="btn2" @click="wxScoreOrderCreate">生成二维码</van-button>
|
</div>
|
<Vdialog @cancel="cancel" :show="showDia"></Vdialog>
|
</div>
|
</template>
|
|
<script>
|
import QRCode from 'qrcode';
|
import FConfirmSimple from '@/components/old/FConfirmSimple.vue';
|
import Vdialog from "@/components/common/v-dialog.vue";
|
import {
|
mapState,
|
mapActions
|
} from 'vuex';
|
import {
|
Datetime,
|
XAddress,
|
} from 'vux';
|
export default {
|
name: 'wx-pay-score',
|
components: {
|
FConfirmSimple,Vdialog
|
},
|
data() {
|
return {
|
creditId: '',
|
contId: '',//合约id
|
contSendCode: '',//合约code
|
mblType:'',
|
regionCode:'',
|
mblNoType:'',
|
vertifyStatus:'',
|
userName: '',
|
idCardNo: '',
|
mblNo: '',
|
term: '',//合约期数
|
contName: '',//合约名称
|
guaranteedAmt: '',//担保金额
|
monGiftAmt: '',//月赠费金额
|
qrCode:'',
|
form: {
|
cmccWxpayContList: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
mblNoTypeList: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
regionList: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
}
|
}
|
};
|
},
|
computed:{
|
|
},
|
created(){
|
this.$api.wxScoreInit().then(res => {
|
this.form = res.body || {};
|
var arr = res.body.terms;
|
}, err => err);
|
},
|
methods: {
|
//顶部tabbar返回按钮
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
// 套餐类型
|
handleContIdChange(val) {
|
let currentEle=JSON.parse(JSON.stringify(this.form.cmccWxpayContList)).find(item=>item.contCode===val)
|
this.contId = currentEle.contId;
|
this.contSendCode = currentEle.contCode;
|
this.contName = currentEle.contName;
|
this.term = currentEle.term;
|
this.guaranteedAmt = currentEle.guaranteedAmt;
|
this.monGiftAmt = currentEle.monGiftAmt;
|
},
|
// 账号类型
|
handleMblTypeChange(val) {
|
let currentEle = JSON.parse(JSON.stringify(this.form.mblNoTypeList)).find((item) => {
|
return item.code = val;
|
});
|
},
|
// 市区
|
handleRegionChange(val) {
|
let currentEle = JSON.parse(JSON.stringify(this.form.regionList)).find((item) => {
|
return item.code = val;
|
});
|
},
|
// 账号类型
|
mblVertify(val) {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.mblNoType)) {
|
v.toast('请选择手机号类型');
|
return false;
|
}
|
if (v.checkValEmpty(this.contSendCode)) {
|
v.toast('请选择活动套餐');
|
return false;
|
}
|
if (v.checkValEmpty(this.userName)) {
|
v.toast('请输入用户姓名');
|
return false;
|
}
|
if (v.checkValEmpty(this.regionCode)) {
|
v.toast('请选择归属地');
|
return false;
|
}
|
if (v.checkValEmpty(this.idCardNo)) {
|
v.toast('请输入用户身份证号');
|
return false;
|
}
|
if (!v.checkPhone(this.mblNo)) {
|
v.toast('请输入正确的用户手机号');
|
return false;
|
}
|
this.$api.wxScoreVertify({
|
cardNo: this.idCardNo,
|
contCode:this.contSendCode,
|
mblNo: this.mblNo,
|
mblNoType: this.mblNoType,
|
regionCode: this.regionCode
|
}).then(res => {
|
this.creditId = res.body.creditId
|
this.vertifyStatus = res.body.status
|
if(this.vertifyStatus == 0){
|
v.toast('号码不可用');
|
return false;
|
}else if(this.vertifyStatus == 1){
|
v.toast('号码可用');
|
return false;
|
}
|
}, err => err);
|
},
|
// 提交订单
|
wxScoreOrderCreate(val) {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.contSendCode)) {
|
v.toast('请选择活动套餐');
|
return false;
|
}
|
if (v.checkValEmpty(this.mblNoType)) {
|
v.toast('请选择手机号类型');
|
return false;
|
}
|
if (v.checkValEmpty(this.userName)) {
|
v.toast('请输入用户姓名');
|
return false;
|
}
|
if (v.checkValEmpty(this.regionCode)) {
|
v.toast('请选择归属地');
|
return false;
|
}
|
if (v.checkValEmpty(this.idCardNo)) {
|
v.toast('请输入用户身份证号');
|
return false;
|
}
|
if (!v.checkPhone(this.mblNo)) {
|
v.toast('请输入正确的用户手机号');
|
return false;
|
}
|
if(this.vertifyStatus == 0){
|
v.toast('号码不可用');
|
return false;
|
}
|
this.$api.wxScoreCreate({
|
creditId: this.creditId,
|
contId: this.contId,
|
cardNo: this.idCardNo,
|
mblNo: this.mblNo,
|
contCode: this.contSendCode,
|
regionCode: this.regionCode,
|
userName: this.userName
|
}).then(res => {
|
this.qrCode = res.body.qrCode
|
this.orderId = res.body.orderId
|
if (this.qrCode) {
|
this.createdQRCode();
|
}
|
}, err => err);
|
},
|
// 生成二维码
|
createdQRCode() {
|
let queryObj = {
|
qrCode:this.qrCode,
|
orderId: this.orderId,
|
contName: this.contName,
|
term: this.term,
|
guaranteedAmt: this.guaranteedAmt,
|
monGiftAmt: this.monGiftAmt,
|
}
|
this.$router.push({
|
path: "/wx-getWxQRCode",
|
query: queryObj
|
})
|
},
|
},
|
};
|
|
</script>
|
<style lang='less' scoped >
|
// /deep/.myDisableIpt{
|
// color: #999999;
|
// }
|
/deep/.van-field__control:disabled {
|
color: #666;
|
-webkit-text-fill-color: #666;
|
background-color: transparent;
|
opacity: 1;
|
}
|
|
.ipt,
|
.fenqi {
|
& {
|
border-bottom: 1px solid rgba(238,238,238,1);
|
color: #333;
|
font-size: 16px;
|
height: 50px;
|
}
|
}
|
//搜索框
|
.search {
|
margin-bottom: 20px;
|
padding: 5px 10px;
|
}
|
.mer{
|
width: 100%;
|
height: 150px;
|
background: linear-gradient(-45deg,rgba(104,98,133,1),rgba(76,69,113,1));
|
overflow: hidden;
|
&-head{
|
width: 96%;
|
margin: 28px 2% 0 2%;
|
height: 72px;
|
background:rgba(255,255,255,0.1);
|
// background: (0,0,0, 0.1);
|
border-radius: 36px;
|
.flex();
|
&-item{
|
width: 33%;
|
color: #fff;
|
text-align: center;
|
:first-child{
|
margin-bottom: 11px;
|
font-size: 20px;
|
font-weight: bold;
|
}
|
:last-child{
|
font-size: 12px;
|
}
|
}
|
&-line{
|
width: 1px;
|
height: 20px;
|
background: #fff;
|
}
|
}
|
}
|
.group-content{
|
transform: translateY(-25px);
|
width: 96%;
|
margin: 0 2%;
|
}
|
/deep/.weui-cells{
|
border-radius: 6px;
|
font-size: 16px;
|
input{
|
font-size: 14px;
|
}
|
}
|
.hb-order-confirm {
|
.trial-list {
|
padding-left: 20px;
|
}
|
|
.f-button-component .f-button {
|
margin-top: 12px;
|
}
|
}
|
|
.hb-credit-installment {
|
background-color: #F5F5F7;
|
// padding-top: 54px;
|
min-height: 100%;
|
.title {
|
padding: 14px 0px 14px 12px;
|
font-size: 16px;
|
font-weight: bold;
|
color: #333;
|
border-bottom: 1px solid rgba(238,238,238,1);
|
.line {
|
display: inline-block;
|
width: 3px;
|
height: 16px;
|
// margin-right: 8px;
|
background:rgba(137,110,219,1);
|
border-radius:0px 6px 0px 6px;
|
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;
|
}
|
}
|
}
|
}
|
.btn-box{
|
margin-top: 40px;
|
margin-bottom: 22px;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.btn2{
|
width: 40%;
|
height: 44px;
|
background:rgba(137,110,219,1);
|
color: white;
|
}
|
.active {
|
width: 80%;
|
}
|
}
|
|
</style>
|
