<!--
|
* @Date: 2019-08-30 13:38:35
|
* @LastEditors: Please set LastEditors
|
* @LastEditTime: 2021-09-16 16:41:21
|
* @Description:
|
-->
|
|
<template>
|
<div class="hb-credit-installment h-100-g">
|
<van-nav-bar
|
title="标题"
|
:right-text="hnOrnxtype==410000?'':'授权测试'"
|
left-arrow
|
@click-right="qrCodePage()"
|
>
|
<i
|
v-if='hnOrnxtype==410000'
|
class="iconfont iconzuojiantou"
|
slot="left"
|
style="font-size: 25px;"
|
></i>
|
<span v-else slot="left" ></span>
|
</van-nav-bar>
|
<!-- <van-nav-bar
|
title="和微分"
|
left-text="返回"
|
left-arrow
|
fixed
|
@click-left="onClickLeft"
|
style="line-height: 43px;"
|
>
|
|
<template #left >
|
|
</template>
|
<template #right >
|
<div class="head-right" v-on:click="qrCodePage()">授权测试</div>
|
</template>
|
</van-nav-bar> -->
|
<div class="search">
|
<van-field
|
rows="1"
|
input-align='right'
|
readonly
|
autosize
|
type="textarea"
|
:label="hnOrnxtype==410000?'活动编码':'活动名称'"
|
:value="contName"
|
placeholder="请选择"
|
@click="showPicker = true"
|
/>
|
<!-- <selector
|
:title="hnOrnxtype==410000?'活动编码':'活动名称'"
|
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">
|
<van-field
|
label="活动ID"
|
v-model.trim="contSendCode"
|
readonly
|
input-align="right"
|
></van-field>
|
<van-field
|
v-model="contName"
|
rows="1"
|
input-align='right'
|
readonly
|
autosize
|
label="活动名称"
|
type="textarea"
|
/>
|
<van-field
|
label="合约期"
|
v-model.trim="term"
|
readonly
|
input-align="right"
|
></van-field>
|
<van-field
|
label="担保金额"
|
v-model.trim="guaranteedAmt"
|
readonly
|
input-align="right"
|
></van-field>
|
</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">
|
<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="身份证号码"
|
:max="18"
|
v-model.trim="idCardNo"
|
placeholder="请输入"
|
text-align="right"
|
/>
|
<van-field
|
v-model="mblNo"
|
clearable
|
maxlength="11"
|
type="number"
|
placeholder="请输入手机号码"
|
>
|
<van-button
|
v-if="mblNoType == 0 || mblNoType == 1"
|
class="mgs-btn"
|
slot="button"
|
type="warning"
|
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>
|
<van-popup v-model="showPicker" round position="bottom">
|
<van-picker
|
show-toolbar
|
:columns="form.cmccWxpayContList"
|
@cancel="showPicker = false"
|
@confirm="handleContIdChange"
|
/>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import FConfirmSimple from '@/components/old/FConfirmSimple.vue';
|
import Vdialog from '@/components/common/v-dialog.vue';
|
import { mapState } from 'vuex';
|
export default {
|
name: 'wx-pay-score',
|
components: {FConfirmSimple,Vdialog},
|
computed:{
|
...mapState(['hnOrnxtype']),
|
},
|
data() {
|
return {
|
showPicker:false,
|
creditId: '',
|
contType:'',
|
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 [];
|
},
|
},
|
},
|
isClick:false
|
};
|
},
|
|
created() {
|
let apiText ='';
|
let sendData ={};
|
if(this.hnOrnxtype == 410000){
|
// 河南移动
|
this.contType = this.$route.query.code;
|
this.mblNoType = this.$route.query.mblNoType;
|
apiText ='wxScoreInit2';
|
sendData ={type: this.contType}
|
}else{
|
// 宁夏移动
|
apiText ='nxInit';
|
sendData= {};
|
}
|
this.$api[apiText](sendData).then(
|
(res) => {
|
this.form = res.body || {};
|
this.form.cmccWxpayContList = this.form.cmccWxpayContList.map(val=>{
|
return{
|
text:val.contName,
|
...val
|
}
|
})
|
},
|
(err) => err
|
);
|
},
|
methods: {
|
//顶部tabbar返回按钮
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
// 套餐类型
|
handleContIdChange(val) {
|
console.log(val)
|
let currentEle = JSON.parse( JSON.stringify(this.form.cmccWxpayContList) ).find((item) => item.contCode === val.contCode);
|
this.contId = currentEle.contId;
|
this.contSendCode = currentEle.contCode;
|
this.contName = currentEle.contName;
|
this.term = currentEle.term;
|
this.guaranteedAmt = currentEle.guaranteedAmt;
|
this.monGiftAmt = currentEle.monGiftAmt;
|
this.showPicker =false;
|
},
|
// 市区
|
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.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.checkIDCard(this.idCardNo)){
|
v.toast('身份证号格式不正确');
|
return false;
|
}
|
if (v.checkValEmpty(this.mblNo)) {
|
v.toast('请输入用户手机号');
|
return false;
|
}
|
if (this.mblNo.length != 11) {
|
v.toast('请输入正确的用户手机号');
|
return false;
|
}
|
let httpText = '';
|
if(this.hnOrnxtype == 410000){
|
httpText ='wxScoreVertify';
|
}else{
|
httpText ='nxVerifyMblNo';
|
}
|
this.$api[httpText]({
|
cardNo: this.idCardNo,
|
contCode: this.contSendCode,
|
mblNo: this.mblNo,
|
mblNoType: this.mblNoType,
|
regionCode: this.regionCode,
|
}).then( (res) => {
|
this.isClick =true;
|
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.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.checkIDCard(this.idCardNo)){
|
v.toast('身份证号格式不正确');
|
return false;
|
}
|
if (v.checkValEmpty(this.mblNo)) {
|
v.toast('请输入用户手机号');
|
return false;
|
}
|
if (this.mblNo.length != 11) {
|
v.toast('请输入正确的用户手机号');
|
return false;
|
}
|
if (this.mblNoType == 2) {
|
this.vertifyStatus = 1;
|
}else{
|
if(!this.isClick){
|
v.toast('请先点击可用查询再生成二维码');
|
return false;
|
}
|
}
|
if (this.vertifyStatus == 0) {
|
v.toast('号码不可用');
|
return false;
|
}
|
let httpText = '';
|
if(this.hnOrnxtype == 410000){
|
httpText ='wxScoreCreate';
|
}else{
|
httpText ='nxCreate';
|
}
|
this.$api[httpText]({
|
contType: this.contType,
|
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,
|
});
|
},
|
qrCodePage() {
|
this.$router.push({
|
path: "/wx-test-code",
|
query: "",
|
});
|
},
|
}
|
};
|
</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 {
|
padding: 5px 10px;
|
box-sizing: border-box;
|
}
|
|
.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 {
|
padding: 10px;
|
box-sizing: border-box;
|
// 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;
|
min-height: 100%;
|
box-sizing: border-box;
|
.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-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>
|
<style lang="less">
|
.van-nav-bar{
|
z-index: 10;
|
}
|
.weui-select{
|
font-size: 14px;
|
}
|
.weui-label{
|
font-size: 14px;
|
}
|
.van-cell .van-cell__title{
|
font-size: 14px !important;
|
}
|
.van-field__body{
|
font-size: 14px !important;
|
}
|
.van-picker-column__wrapper{
|
line-height:24px !important;
|
}
|
.van-ellipsis{
|
font-size:12px ;
|
overflow: inherit;
|
white-space: inherit;
|
text-overflow: inherit;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
</style>
|
