<!--
|
* @Author: c.y
|
* @Date: 2019-09-02 09:01:22
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-09-02 09:15:03
|
* @Description:
|
-->
|
<template>
|
<div class="open-heyd-page">
|
<group>
|
<x-input title='运营商内部名称' v-model.trim="merInfo.merchantName" placeholder='请输入' :max='100' text-align='right'></x-input>
|
<x-input title='营业执照号' v-model.trim="merInfo.licenseNo" :max='30' text-align='right'></x-input>
|
<x-input title='营业执照名称' v-model.trim="merInfo.orgName" placeholder='请输入' :max='50' text-align='right'></x-input>
|
</group>
|
<f-space></f-space>
|
<group>
|
<x-input title='法人名称' v-model.trim="merInfo.legalName" :max='30' placeholder='请输入' text-align='right'></x-input>
|
<x-input title='实控人身份证号' v-model.trim="merInfo.actualCtlIdCardNo" :max='18' placeholder='请输入' text-align='right'></x-input>
|
<x-input title='实控人身份证地址' v-model.trim="merInfo.actualCtl" placeholder='请输入' text-align='right'></x-input>
|
<x-input title='实控人手机号' v-model.trim="merInfo.actualCtlPhone" placeholder='请输入' :max='11' text-align='right'></x-input>
|
</group>
|
<f-space></f-space>
|
<group>
|
<van-field v-model.trim="merInfo.addrText" clearable :readonly="true" right-icon="arrow" label="省市区" placeholder=" 请选择"
|
@click="isShowArea = !isShowArea" text-align='right'/>
|
<x-input title='详细地址' v-model.trim="merInfo.regDetailAddr" placeholder='请输入' :max='100' text-align='right'></x-input>
|
</group>
|
<f-space></f-space>
|
<group>
|
<x-input title='商户账户名称' v-model.trim="merInfo.acctName" placeholder='请输入' text-align='right' />
|
<selector title='商户银行名称' placeholder='请选择' @on-change='handleBankChange' v-model="merInfo.acctBankname"
|
:options='bankList' :value-map="['code','name']" direction='rtl'></selector>
|
<x-input title='开户支行名称' v-model.trim="merInfo.acctOpenBankname" placeholder='请输入' :max='50' text-align='right'/>
|
<x-input title='开户银行卡号' v-model.trim="merInfo.acctNo" placeholder='请输入' :max='30' text-align='right'/>
|
<x-input title='开户行联行号' v-model.trim="merInfo.acctCnaps" :max='20' placeholder='请输入'
|
text-align='right'></x-input>
|
</group>
|
<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>
|
</div>
|
|
</template>
|
|
<script>
|
import {calcArea} from '@/utils/index';
|
import {
|
mapState,
|
mapActions
|
} from 'vuex';
|
import {
|
Datetime,
|
XAddress,
|
} from 'vux';
|
export default {
|
name: 'heydMerBase',
|
components: {
|
Datetime,
|
XAddress,
|
...mapState(['areaList'])
|
},
|
data() {
|
return {
|
areaList:{//地区列表
|
province_list:{}, //省
|
city_list:{}, //市
|
county_list:{}, //地区、县
|
},
|
};
|
},
|
props: {
|
addressList: {
|
type: Array,
|
default: []
|
},
|
isShowArea: {
|
type: Boolean,
|
default: false
|
},
|
merInfo: {
|
type: Object,
|
},
|
// 银行列表
|
bankList: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
},
|
computed:{
|
|
},
|
methods: {
|
...mapActions(['getArea']),
|
// 获取地区列表
|
getArea() {
|
Vue.prototype.$api.getArea().then((res) => {
|
let { provList } = res.body;
|
let obj = calcArea(provList)
|
this.areaList = {
|
province_list:obj.province_list,
|
city_list:obj.city_list,
|
county_list:obj.county_list
|
}
|
}).catch((err) => {
|
|
});
|
},
|
//关闭地区弹窗
|
closeAreaModal() {
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
//保存 地区选择
|
setAreaValue(arr) {
|
this.merInfo.addrText = arr[0].name + '-' + arr[1].name + '-' + arr[2].name;
|
this.merInfo.regProvinceCode = arr[0].code;
|
this.merInfo.regCityCode = arr[1].code;
|
this.merInfo.regDistrictCode = arr[2].code;
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
// 处理银行名称的改变
|
handleBankChange(val) {
|
let currentEle = this.bankList.find(item => {
|
return item.code === val;
|
})
|
},
|
},
|
created() {
|
this.getArea();
|
},
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
.open-heyd-page {
|
.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;
|
}
|
}
|
|
.vux-datetime {
|
font-size: 15Px;
|
}
|
|
.vux-datetime-value {
|
span {
|
width: 100%;
|
text-align: right;
|
}
|
}
|
}
|
|
</style>
|
