<!--
|
* @Author: 小明丶
|
* @Date: 2019-09-24 18:22:58
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-26 14:41:46
|
* @Description:
|
-->
|
<template>
|
<div class="hb-merchant-installment">
|
<!-- <van-nav-bar title="商户贴息" left-arrow @click-left="onClickLeft" /> -->
|
<van-nav-bar title="商户资料" left-text="返回" left-arrow @click-left="onClickLeft" style="line-height: 43px;">
|
<!-- <van-icon name="iconzuojiantou" slot="left" /> -->
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
</van-nav-bar>
|
<div class="form-content">
|
<van-field
|
class="ipt"
|
v-model="contractGoodsName"
|
label="商户名称"
|
placeholder="请输入"
|
input-align="right"
|
border="true"
|
required
|
/>
|
<van-field
|
class="ipt"
|
label="营业执照号"
|
placeholder="请输入"
|
input-align="right"
|
border="false"
|
:maxlength="20"
|
v-model="businesslicenseNo"
|
required
|
/>
|
<van-field
|
class="ipt"
|
label="法人姓名"
|
placeholder="请输入"
|
input-align="right"
|
border="false"
|
:maxlength="10"
|
v-model="contractUserName"
|
/>
|
<van-field
|
class="ipt"
|
label-width='100'
|
label="法人身份证号"
|
placeholder="请输入"
|
input-align="right"
|
border="false"
|
:maxlength="18"
|
v-model="contractUserNo"
|
/>
|
<!-- <v-cell :value="areaText" label='所在地区' isLink disabled placeholder='请选择' @click.native="isShowArea = true;"></v-cell> -->
|
<van-field
|
class="fenqi"
|
readonly
|
clickable
|
label="商户地址"
|
:value="areaLists"
|
placeholder="请选择"
|
@click="ShowArea"
|
input-align="right"
|
border="true"
|
required
|
/>
|
<van-field
|
class="ipt"
|
label="详细地址"
|
placeholder="请输入"
|
input-align="right"
|
border="false"
|
:maxlength="10"
|
v-model="dtlAddress"
|
/>
|
|
</div>
|
<!-- <van-popup v-model="showPicker" position="bottom" :style="{ height: '30%' }">
|
<van-picker
|
title="选择地址"
|
show-toolbar
|
item-height="30"
|
:columns="columns"
|
@cancel="showPicker = false"
|
@confirm="onConfirm"
|
/>
|
</van-popup> -->
|
<van-popup v-model="isShowArea" position="bottom" :close-on-click-overlay="false">
|
<van-area ref='Area' :area-list='areaList' @cancel="closeAreaModal" @confirm="setAreaValue"></van-area>
|
</van-popup>
|
<van-button
|
round
|
type="info"
|
class="btn"
|
block="true"
|
:color="$store.state.backColor"
|
@click="createdQRCode"
|
>保存</van-button>
|
<!--点击创建订单展示 弹窗 -->
|
<!-- <FConfirmSimple
|
v-model="showConfirm"
|
ref="FConfirmQRCode"
|
@on-hide="handleHide"
|
iconClass="scene_Staging-dingdan"
|
class="hb-order-confirm"
|
:showIcon="true"
|
>
|
<div class="trial-list">
|
<div>还款总额：{{trial.totalAmount}}元</div>
|
<div>每月还款额：{{trial.repayPerMonth}}元</div>
|
<div>费率：{{trial.feeRate}}%</div>
|
</div>
|
<f-button @on-click="createdQRCode">生成二维码</f-button>
|
</FConfirmSimple> -->
|
</div>
|
</template>
|
<script>
|
import {mapState, mapMutations} from 'vuex';
|
import QRCode from "qrcode";
|
import FConfirmSimple from "@/components/old/FConfirmSimple.vue";
|
import axios from "axios";
|
import Vue from "vue";
|
import { NavBar } from "vant";
|
import { Grid, GridItem } from "vant";
|
import { Field } from "vant";
|
import { DropdownMenu, DropdownItem } from "vant";
|
import { Popup } from "vant";
|
import { Picker } from "vant";
|
import { Toast } from "vant";
|
import { async } from "q";
|
|
Vue.use(Toast);
|
Vue.use(Picker);
|
Vue.use(Popup);
|
Vue.use(DropdownMenu).use(DropdownItem);
|
Vue.use(Field);
|
Vue.use(Grid).use(GridItem);
|
Vue.use(NavBar);
|
export default {
|
components: {
|
FConfirmSimple
|
},
|
data() {
|
return {
|
merId:'',
|
isShowArea: false,
|
capitalAmt: "0.00", //商家到账金额
|
monthMoney: "0.00", //客户月还款总额
|
merId: this.$route.query.merId || [], //商户id
|
contractGoodsBrand: "", //商品品牌
|
contractGoodsName: "", //商品名称
|
contractUserMblNo: "", //用户手机号
|
contractUserName: "", //用户名称
|
businesslicenseNo: '', //营业执照号
|
contractUserNo: '', //法人身份证
|
dtlAddress: '', //详细地址
|
contractUserPID: '', //商户PID
|
merZfbInfos:[],//商户PID列表
|
totalAmount: "0.00",
|
orderNo: "", //未知参数
|
term: null, //分期期数
|
userMblNo: "", //用户手机号
|
userName: "", //用户名称
|
trial: {}, // 利率相关信息
|
orderId: "", //订单id
|
typeId: "",
|
payQrCodeUrl: "", // 二维码
|
termList: [], //分期期数列表
|
showConfirm: false,
|
howMouch: "", //商品金额
|
value: "", //期数选择值
|
showPicker: false, //期数选择弹出层控制
|
columns: [], //分期期数列表
|
|
|
form: {
|
areaLists: '',
|
provCode: '',
|
cityCode: '',
|
areaCode: '',
|
},
|
arrDress:'',
|
};
|
},
|
computed: {
|
...mapState(['areaList']),
|
},
|
created() {
|
this.merInit();
|
},
|
methods: {
|
ShowArea(){
|
this.isShowArea=true
|
},
|
handleHide() {
|
this.showConfirm = false;
|
},
|
setAreaValue(arr){
|
this.areaLists = arr[0].name +arr[1].name + arr[2].name + '';
|
// this.form.provCode= arr[0].code;
|
// this.form.cityCode= arr[1].code;
|
// this.form.areaCode= arr[2].code;
|
this.form.provCode= arr[0];
|
this.form.cityCode= arr[1];
|
this.form.areaCode= arr[2];
|
this.isShowArea = false;
|
// this.$refs.Area.reset()
|
this.$forceUpdate();
|
},
|
//返回上一级按钮
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
//关闭地区弹窗
|
closeAreaModal(){
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
//弹出层显示
|
showPopup() {
|
this.show = true;
|
},
|
// 弹出层地址选择
|
onConfirm(arr) {
|
this.arrDress = arr
|
this.areaTexts = arr[0].name + '-' +arr[1].name +'-'+ arr[2].name;
|
// this.form.provCode= arr[0].code;
|
// this.form.cityCode= arr[1].code;
|
// this.form.areaCode= arr[2].code;
|
this.form.provCode= arr[0];
|
this.form.cityCode= arr[1];
|
this.form.areaCode= arr[2];
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
//商户资料初始化
|
merInit() {
|
this.$api.merchantDetail({merId: this.merId}).then(
|
res => {
|
this.contractGoodsName = res.body.merName;
|
this.businesslicenseNo = res.body.licenseNo;
|
this.contractUserName = res.body.legalName;
|
this.contractUserNo = res.body.legalIdNo;
|
this.dtlAddress = res.body.addr.dtlAddr;
|
this.contractUserPID = res.body.pid;
|
this.merId = res.body.merId;
|
this.arrDress = res.body.addr
|
let list = res.body.merZfbInfos.filter((item, index) => {
|
if(sessionStorage.isddxt == 1){
|
return item.zfbVersion == 6 || item.zfbVersion == 7
|
}else{
|
return item.zfbVersion != 6 && item.zfbVersion != 7
|
}
|
})
|
this.merZfbInfos = list
|
let arr = [];
|
if(res.body.addr.area) {
|
arr.push(res.body.addr.province)
|
arr.push(res.body.addr.city)
|
arr.push(res.body.addr.area)
|
this.setAreaValue(arr);
|
}
|
},
|
err => err
|
);
|
},
|
//保存
|
createdQRCode() {
|
let v = this.$tool;
|
let res = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
|
if (v.checkValEmpty(this.contractGoodsName)) {
|
v.toast("请输入商户名称");
|
return ;
|
}
|
// res = /^[0-9a-zA-Z]{1,20}$/;
|
if (v.checkValEmpty(this.businesslicenseNo)) {
|
v.toast("请输入营业执照号");
|
return;
|
}
|
// if (!res.test(this.businesslicenseNo)) {
|
// v.toast("请输入正确的营业执照号");
|
// return false;
|
// }
|
if (v.checkValEmpty(this.contractUserName)) {
|
v.toast("请输入法人姓名");
|
return;
|
}
|
res = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
|
if (v.checkValEmpty(this.contractUserNo)) {
|
v.toast("请输入身份证号");
|
return ;
|
}
|
if (!res.test(this.contractUserNo)) {
|
v.toast("请输入正确的身份证号");
|
return false;
|
}
|
if (v.checkValEmpty(this.areaLists)) {
|
v.toast("请选择商户地址");
|
return;
|
}
|
if (v.checkValEmpty(this.dtlAddress)) {
|
v.toast("请输入详细地址");
|
return;
|
}
|
if(this.contractUserPID) {
|
if (v.checkValEmpty(this.contractUserPID)) {
|
v.toast("请输入商户PID");
|
return;
|
}
|
}
|
let date = {}
|
if(this.contractUserPID) {
|
date.pid = this.contractUserPID;
|
}
|
|
this.arrDress.dtlAddr = this.dtlAddress
|
this.arrDress.area = this.form.areaCode
|
this.arrDress.city = this.form.cityCode
|
this.arrDress.province = this.form.provCode
|
|
date.dtlAddress = this.dtlAddress;
|
date.legalIdNo = this.contractUserNo;
|
date.addr = this.arrDress;
|
date.legalName = this.contractUserName;
|
date.merName = this.contractGoodsName;
|
date.licenseNo = this.businesslicenseNo;
|
date.merId = this.merId;
|
date.merZfbInfos = this.merZfbInfos;
|
this.$api.merchantEdit(date).then(() => {
|
this.$router.push('/mine/setting')
|
})
|
this.showConfirm = false;
|
var queryObj = {
|
term: this.value.slice(0, -1), //分期期数
|
payQrCodeUrl: this.payQrCodeUrl, //二维码
|
totalAmount: this.totalAmount //还款总额，本金
|
};
|
if (this.$route.query.typeId) {
|
queryObj.typeId = this.$route.query.typeId;
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
// @import '../../../style/myVant.less';
|
/deep/.van-field__control{
|
color: #999 !important;
|
font-size: 14px !important;
|
}
|
.van-button--info{
|
background: #896EDB;
|
}
|
.hb-merchant-installment{
|
background-color: #F3F4F5;
|
height: 100vh;
|
}
|
.form-content{
|
width: 359px;
|
// height: 300px;
|
margin: 10px 8px;
|
// transform: translateY(-30px);
|
// position: absolute;
|
// top: 165px;
|
border-radius: 6px;
|
}
|
.ipt,
|
.fenqi {
|
& {
|
border-bottom: 1px solid #e0e1e6;
|
color: #333;
|
font-size: 16px;
|
// .van-field__control--right{
|
// color: #999 !important;
|
// font-size: 14px !important;
|
// }
|
}
|
}
|
.btn {
|
width: 80vw;
|
height: 6vh;
|
line-height: 6vh;
|
margin: auto;
|
position: fixed;
|
bottom: 3vh;
|
right: 10vw;
|
}
|
.hb-order-confirm {
|
.trial-list {
|
padding-left: 20px;
|
}
|
|
.f-button-component .f-button {
|
margin-top: 12px;
|
}
|
}
|
|
.hb-credit-installment {
|
background-color: #f1f1f1;
|
padding-top: 54px;
|
.title {
|
padding: 14px 12px;
|
font-size: 15px;
|
color: #333;
|
.line {
|
display: inline-block;
|
width: 2px;
|
height: 16px;
|
margin-right: 8px;
|
background: @color-text-three;
|
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;
|
}
|
}
|
}
|
}
|
</style>
|
