<!--
|
* @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>
|
<selector title='商户是否有独立营业执照' placeholder='请选择' @on-change='handleLicenseTypeChange' v-model="storeInfo.bizLicenseType"
|
:options='bizLicenseTypeList' :value-map="['code','name']" direction='rtl'></selector>
|
<x-input title='门店名称' v-model.trim="storeInfo.storeName" :max='50' placeholder='请输入' text-align='right'></x-input>
|
<x-input v-if="storeInfo.bizLicenseType===2" title='营业执照号' v-model.trim="storeInfo.licenseNo" placeholder='请输入' :max='30' text-align='right'/>
|
<x-input v-if="storeInfo.bizLicenseType===2" title='营业执照名称' v-model.trim="storeInfo.orgName" :max='50' placeholder='请输入'
|
text-align='right'></x-input>
|
<van-field v-if="storeInfo.bizLicenseType===2" v-model.trim="storeInfo.addrText" clearable :readonly="true" right-icon="arrow" label="省市区"
|
@click="isShowArea = !isShowArea" text-align='right'/>
|
<x-input v-if="storeInfo.bizLicenseType===2" title='详细地址' v-model.trim="storeInfo.storeDetailAddr" placeholder='请输入' text-align='right'></x-input>
|
<x-input v-if="storeInfo.bizLicenseType===2" title='法人姓名' v-model.trim="storeInfo.legalName" :max='20' placeholder='请输入'
|
text-align='right'></x-input>
|
</group>
|
<f-space></f-space>
|
<group>
|
<x-input title='门店管理员姓名' v-model.trim="storeInfo.actualCtl" :max='30' placeholder='请输入' text-align='right'></x-input>
|
<x-input title='门店管理员手机号' v-model.trim="storeInfo.actualCtlPhone" :max='11' placeholder='请输入' text-align='right'></x-input>
|
<x-input title='门店管理员身份证号' v-model.trim="storeInfo.actualCtlIdCardNo" :max='18' 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: 'heydStoreBase',
|
components: {
|
Datetime,
|
XAddress,
|
...mapState(['areaList'])
|
},
|
data() {
|
return {
|
areaList:{//地区列表
|
province_list:{}, //省
|
city_list:{}, //市
|
county_list:{}, //地区、县
|
}
|
};
|
},
|
props: {
|
addressList: {
|
type: Array,
|
default: []
|
},
|
address: {
|
type: Array,
|
default: []
|
},
|
isShowArea: {
|
type: Boolean,
|
default: false
|
},
|
storeInfo: {
|
type: Object
|
},
|
bizLicenseTypeList: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
},
|
computed:{
|
calcAddress:{
|
get(){
|
return this.address || [];
|
},
|
set(newV){
|
this.$emit('addr-change', newV);
|
}
|
}
|
|
},
|
created() {
|
this.getArea();
|
},
|
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() {
|
console.log(this.areaList);
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
//保存 地区选择
|
setAreaValue(arr) {
|
this.storeInfo.addrText = arr[0].name + '-' + arr[1].name + '-' + arr[2].name;
|
this.storeInfo.storeProvinceCode = arr[0].code;
|
this.storeInfo.storeCityCode = arr[1].code;
|
this.storeInfo.storeDistrictCode = arr[2].code;
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
// 账号类型
|
handleLicenseTypeChange(val) {
|
let currentEle=JSON.parse(JSON.stringify(this.bizLicenseTypeList)).find(item=>item.code===val)
|
this.storeInfo.bizLicenseType = currentEle.code;
|
},
|
// 账号类型
|
handleLiChange(val) {
|
let currentEle = JSON.parse(JSON.stringify(this.cardTypeList)).find((item) => {
|
return item.code = val;
|
});
|
this.storeInfo.acctTypeName = currentEle.name;
|
},
|
}
|
};
|
|
</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>
|
