<!--
|
* @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="storeInfo.licenseNo" readonly text-align='right'></x-input>
|
<x-input title='营业执照名称' v-model.trim="storeInfo.orgName" placeholder='请输入' :max='50' text-align='right'></x-input>
|
<datetime v-model="storeInfo.issueDate" format="YYYY-MM-DD" title="注册日期" placeholder="请选择"></datetime>
|
</group>
|
<group>
|
<van-field v-model.trim="storeInfo.addrText" clearable :readonly="true" right-icon="arrow" label="注册省市区" placeholder=" 请选择"
|
@click="isShowArea = !isShowArea" text-align='right'/>
|
<x-input title='注册详细地址' v-model.trim="storeInfo.regDetailAddr" placeholder='请输入' :max='100' text-align='right'></x-input>
|
<x-input title='渠道编码' v-model.trim="storeInfo.outMerchantNo" placeholder='请输入' :max='100' text-align='right'></x-input>
|
<x-input title='渠道名称' v-model.trim="storeInfo.merchantName" placeholder='请输入' :max='100' text-align='right'></x-input>
|
</group>
|
|
<f-space></f-space>
|
<group>
|
<x-input title='法人名称' v-model.trim="storeInfo.legalName" readonly text-align='right'></x-input>
|
<x-input title='法人身份证号' v-model.trim="storeInfo.legalIdCardNo" readonly text-align='right'></x-input>
|
<x-input title='法人身份证地址' v-model.trim="storeInfo.legalIdCardAddress" placeholder='请输入' text-align='right'></x-input>
|
<x-input title='法人手机号' v-model.trim="storeInfo.legalPhone" placeholder='请输入' :max='11' text-align='right'></x-input>
|
</group>
|
<f-space></f-space>
|
<group>
|
<x-input title='联系人姓名' v-model.trim="storeInfo.contactName" placeholder='请输入' text-align='right'></x-input>
|
<x-input title='联系人手机号' v-model.trim="storeInfo.contactPhone" placeholder='请输入' :max='11' text-align='right'></x-input>
|
<x-input title='联系人邮箱' v-model="storeInfo.contactEmail" text-align='right' max="50" placeholder="请输入"></x-input>
|
<selector title='与企业关系' placeholder='请选择' @on-change='handleCusRefChange' v-model="storeInfo.objContactReal"
|
:options='merRefList' :value-map="['code','name']" direction='rtl'></selector>
|
</group>
|
<f-space></f-space>
|
<group>
|
<van-field v-model.trim="storeInfo.merAddrText" clearable :readonly="true" right-icon="arrow" label="经营省市区"
|
@click="isShowMerArea = !isShowMerArea" text-align='right'/>
|
<x-input title='经营详细地址' v-model.trim="storeInfo.bizDetailAddr" placeholder='请输入' text-align='right'></x-input>
|
</group>
|
<f-space></f-space>
|
<group>
|
<selector title='商户账号类型' placeholder='请选择' @on-change='handleCardTypeChange' v-model="storeInfo.acctType"
|
:options='cardTypeList' :value-map="['code','name']" direction='rtl'></selector>
|
<x-input title='商户账户名称' v-model.trim="storeInfo.acctName" placeholder='请输入' text-align='right' />
|
<selector title='商户银行名称' placeholder='请选择' @on-change='handleBankChange' v-model="storeInfo.acctBankname"
|
:options='bankList' :value-map="['code','name']" direction='rtl'></selector>
|
<x-input title='商户银行账号' v-model.trim="storeInfo.acctNo" placeholder='请输入' :max='30' text-align='right'/>
|
<x-input v-if="storeInfo.acctType===1" title='商户开户支行名称' v-model.trim="storeInfo.acctOpenBankname" placeholder='请输入' :max='30' text-align='right'/>
|
<x-input v-if="storeInfo.acctType===1" title='开户行行号' v-model.trim="storeInfo.acctCnaps" :max='20' placeholder='请输入'
|
text-align='right'></x-input>
|
<selector v-if="storeInfo.acctType===2" title='账户企业关系' placeholder='请选择' @on-change='handleMerRefChange' v-model="storeInfo.acctEnpRel"
|
:options='merRefList' :value-map="['code','name']" direction='rtl'></selector>
|
</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>
|
<van-popup v-model="isShowMerArea" position="bottom" :close-on-click-overlay="false">
|
<van-area ref='Area' :area-list='areaList' @cancel="closeMerAreaModal" @confirm="setMerAreaValue"></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 {
|
merValue:'',
|
areaList:{//地区列表
|
province_list:{}, //省
|
city_list:{}, //市
|
county_list:{}, //地区、县
|
},
|
merAreaList:{//地区列表
|
province_list:{}, //省
|
city_list:{}, //市
|
county_list:{}, //地区、县
|
}
|
};
|
},
|
props: {
|
addressList: {
|
type: Array,
|
default: []
|
},
|
address: {
|
type: Array,
|
default: []
|
},
|
isShowArea: {
|
type: Boolean,
|
default: false
|
},
|
isShowMerArea: {
|
type: Boolean,
|
default: false
|
},
|
storeInfo: {
|
type: Object,
|
},
|
// 银行列表
|
bankList: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
cardTypeList: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
merRefList: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
},
|
computed:{
|
calcAddress:{
|
get(){
|
return this.address || [];
|
},
|
set(newV){
|
this.$emit('addr-change', newV);
|
}
|
}
|
|
},
|
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) => {
|
|
});
|
},
|
getMerArea() {
|
this.merAreaList = this.areaList;
|
},
|
//关闭地区弹窗
|
closeAreaModal() {
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
//关闭地区弹窗
|
closeMerAreaModal() {
|
this.isShowMerArea = false;
|
this.$refs.Area.reset()
|
},
|
//保存 地区选择
|
setAreaValue(arr) {
|
this.storeInfo.addrText = arr[0].name + '-' + arr[1].name + '-' + arr[2].name;
|
this.storeInfo.regProvinceCode = arr[0].code;
|
this.storeInfo.regCityCode = arr[1].code;
|
this.storeInfo.regDistrictCode = arr[2].code;
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
//经营地保存地区选择
|
setMerAreaValue(arr) {
|
this.storeInfo.merAddrText = arr[0].name + '-' + arr[1].name + '-' + arr[2].name;
|
this.storeInfo.bizProvinceCode = arr[0].code;
|
this.storeInfo.bizProvinceName = arr[0].name;
|
this.storeInfo.bizCityCode = arr[1].code;
|
this.storeInfo.bizCityName = arr[1].name;
|
this.storeInfo.bizDistrictCode = arr[2].code;
|
this.storeInfo.bizDistrictName = arr[2].name;
|
this.isShowMerArea = false;
|
this.$refs.Area.reset()
|
},
|
// 处理银行名称的改变
|
handleBankChange(val) {
|
let currentEle = this.bankList.find(item => {
|
return item.code === val;
|
})
|
},
|
// 账号类型
|
handleCardTypeChange(val) {
|
let currentEle = JSON.parse(JSON.stringify(this.cardTypeList)).find((item) => {
|
return item.code = val;
|
});
|
this.storeInfo.acctTypeName = currentEle.name;
|
},
|
// 商户与账户关系
|
handleMerRefChange(val) {
|
let currentEle = JSON.parse(JSON.stringify(this.merRefList)).find((item) => {
|
return item.code = val;
|
});
|
this.storeInfo.acctEnpRelName = currentEle.name;
|
},
|
// 商户与账户关系
|
handleCusRefChange(val) {
|
let currentEle = JSON.parse(JSON.stringify(this.merRefList)).find((item) => {
|
return item.code = val;
|
});
|
}
|
},
|
created() {
|
this.getArea();
|
this.getMerArea();
|
this.merAddrValue = this.merAddrText;
|
},
|
};
|
|
</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>
|
