<template>
<div class="border-box main-wrap">
<view-box ref="viewBox">
<div class="subhead">
<sub-header-component subheadertext="企业注册"/>
</div>
<div class="register-title padl-17">
<i class="iconfont icon-dingdan"></i>
<span>企业资料</span>
</div>
<div class="font-14">
<group labelWidth="8em" label-align="right">
<x-input title='公司名称：' :required=true v-model="submit_data.customerName" type="text" placeholder="请输入公司名字" name="companyName"></x-input>
<x-address :title="''" v-model="addressValue" raw-value :list="addressData" value-text-align="left" placeholder="请选择注册地区"></x-address>
<x-input title='注册地址：' :required=true v-model="submit_data.regAddress" type="text" placeholder="请输入注册地区"></x-input>
<x-input title='法人代表：' :required=true is-type='china-name' v-model="submit_data.legalRepresentative" type="text" placeholder="请输入法人代表"></x-input>
<x-input title='联系人姓名：' :required=true v-model="submit_data.contactPeople" type="text" placeholder="请输入联系人姓名"></x-input>
<x-input title='联系人电话：' :required=true is-type='china-mobile' v-model="submit_data.contractNumber" type="text" placeholder="请输入联系人电话"></x-input>
<x-input title='社会信用代码：' :required=true v-model="submit_data.commerceRegNo" type="text" placeholder="请输入社会信用代码"></x-input>
<x-input title='开启行名称：' v-model="submit_data.bank" type="text" placeholder="请输入开启行名称"></x-input>
<x-input title='银行帐号：' v-model="submit_data.bankAccount" type="text" placeholder="请输入银行帐号"></x-input>
<x-input title='收货地址：' :required=true v-model="submit_data.billTo" type="text" placeholder="请输入收货地址"></x-input>
<x-input title='收单地址：' :required=true v-model="submit_data.shipTo" type="text" placeholder="请输入收单地址"></x-input>
<group>
<cell :title="'采购意向'" :value="bigcat_name" is-link @click.native="show_bigcat=true"></cell>
</group>
<popup v-model="show_bigcat" class="checker-popup">
<div class="cntr-p " style="padding-bottom:20px">
<p class="cntr-p cntr-m0">采购意向</p>
<checker
v-model="bigcat_name"
default-item-class="checker-item"
selected-item-class="checker-item-selected"
disabled-item-class="checker-item-disabled">
<checker-item v-for="item in bigcat_list" :value="item.BigCatName" @on-item-click="bigCatItemTap(item)">{{item.BigCatName}}</checker-item>
</checker>
</div>
</popup>
<group title="业务区域">
<popup-picker :title="''" :data="area_list" v-model="area_value" @on-change="areaChange" @on-show="areaShow"></popup-picker>
</group>
<group title="业务主管">
<popup-picker :title="''" :data="sales_list" v-model="sales_value" @on-change="salesChange" @on-show="salesShow"></popup-picker>
</group>
</group>
</div>
<div class="register-title padl-17">
<i class="iconfont icon-dingdan"></i>
<span>企业证件</span>
</div>
<div class="prompt-box">
<p>若企业证照为三证合一只需上传一张即可，否则请上传工商营业执照料、组织机构代码证、税务登记证</p>
</div>
<ul class="paperwork-wrap">
<li>
<div class="photo-cell">
<input type="file" class="photo-cell-file" accept="image/*" v-on:change="fileChange($event, 'bl_img', 'bl_img_uploading')" v-show="bl_img==''"/>
<div class="photo-wrap" >
<img class="img-pw" v-bind:src="bl_img" v-show="bl_img!==''&&!bl_img_uploading" v-on:click="delPhoto('bl_img')"/>
<span v-show="bl_img_uploading" class="font-size-sm">上传中。。。</span>
<i class="iconfont icon-tianjia text-gray" v-show="bl_img==''&&!bl_img_uploading"></i>
</div>
<p class="tc font-size-sm cntr-p">工商营业执照</p>
</div>
</li>
<li>
<div class="photo-cell">
<input type="file" class="photo-cell-file" accept="image/*" v-on:change="fileChange($event, 'oc_img', 'oc_img_uploading')" v-show="oc_img==''"/>
<div class="photo-wrap" >
<img class="img-pw" v-bind:src="oc_img" v-show="oc_img!==''&&!oc_img_uploading" v-on:click="delPhoto('oc_img')"/>
<span v-show="oc_img_uploading" class="font-size-sm">上传中。。。</span>
<i class="iconfont icon-tianjia text-gray" v-show="oc_img==''&&!oc_img_uploading"></i>
</div>
<p class="tc font-size-sm cntr-p">组织机构代码证</p>
</div>
</li>
<li>
<div class="photo-cell">
<input type="file" class="photo-cell-file" accept="image/*" v-on:change="fileChange($event, 'tr_img', 'tr_img_uploading')" v-show="tr_img==''"/>
<div class="photo-wrap" >
<img class="img-pw" v-bind:src="tr_img" v-show="tr_img!==''&&!tr_img_uploading" v-on:click="delPhoto('tr_img')"/>
<span v-show="tr_img_uploading" class="font-size-sm">上传中。。。</span>
<i class="iconfont icon-tianjia text-gray" v-show="tr_img==''&&!tr_img_uploading"></i>
</div>
<p class="tc font-size-sm cntr-p">税务登记证</p>
</div>
</li>
<li>
<div class="photo-cell">
<input type="file" class="photo-cell-file" accept="image/*" v-on:change="fileChange($event, 'tio_img','tio_img_uploading')" v-show="tio_img==''"/>
<div class="photo-wrap" >
<img class="img-pw" v-bind:src="tio_img" v-show="tio_img!==''&&!tio_img_uploading" v-on:click="delPhoto('tio_img')"/>
<span v-show="tio_img_uploading" class="font-size-sm">上传中。。。</span>
<i class="iconfont icon-tianjia text-gray" v-show="tio_img==''&&!tio_img_uploading"></i>
</div>
<p class="tc font-size-sm red cntr-p">三证合一</p>
</div>
</li>
</ul>
<x-button plain class="next-step mt-21" v-on:click.native="submitData">完成</x-button>
<confirm v-model="confirm_show" v-bind:title="'删除图片'" v-on:on-confirm="delPhotoConfirm" >
<p style="text-align:center;">确定删除？</p>
</confirm>
</view-box>
</div>
</template>
<script type="text/ecmascript-6">
import HeaderComponent from '../components/header.vue'
import subHeaderComponent from '../components/subHeader.vue'
import axios from 'axios'
import xhres6 from '../../../plugins/xhres6.js'
import URLAPI from '../../../config/URLAPI.js'
import { ViewBox, XHeader, Actionsheet, Grid, GridItem, Group, XInput, Icon, Flexbox, FlexboxItem, XButton, Tabbar, TabbarItem ,Selector ,ChinaAddressData, XAddress, XDialog, Value2nameFilter, Cell, Checker, Popup, CheckerItem, PopupPicker, Confirm } from 'vux'
const chinese_reg = /^[\u4e00-\u9fa5]+$/; //中文正则
const mobile_reg = /^(13|14|15|17|18)[0-9]{9}$/ //移动电话正则
export default {
components: {
HeaderComponent,
subHeaderComponent,
ViewBox,
XHeader,
Actionsheet,
Grid,
GridItem,
Group,
XInput,
Icon,
Flexbox,
FlexboxItem,
XButton,
Tabbar,
TabbarItem,
Selector,
ChinaAddressData,
XAddress,
XDialog,
Cell,
Checker,
Popup,
CheckerItem,
PopupPicker,
Confirm
},
data () {
return {
addressData: ChinaAddressData,
addressValue: [],
xaddress_title: '注册地区',
showNoScroll: false,
show_bigcat:false,
bigcat_list:[],
bigcat_name:'',
area_list:[],
area_org_list:[],
area_value:[''],
sales_list:[],
sales_value:[''],
confirm_show:false,
del_photo_type:'',
submit_data:{
"bigCatCode":"",
"businessIndex":"",
"customerName":"",
"regAddress":"",
"legalRepresentative":"",
"contactPeople":"",
"contractNumber":"",
"commerceRegNo":"",
"bank":"",
"bankAccount":"",
"billTo":"",
"shipTo":"",
"businessLicence":"",
"organizationCode":"",
"taxRegistration":"",
"threeinone":"",
"filePath":"customer_images/",
"province":"",
"city":"",
"county":"",
"varUserId":this.$store.state.varUserId,
"salesId":''
},
bl_img:'',
bl_img_uploading:false,
oc_img:'',
oc_img_uploading:false,
tr_img:'',
tr_img_uploading:false,
tio_img:'',
tio_img_uploading:false,
}
},
mounted(){
this.getBigCatCode();
},
methods: {
getImageSrc(e){
const promiseh = new Promise((resolve, reject)=>{
try{
const _thise = e;
const files = e.files;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const srcimg = new Image();
const quality = 0.5;
const tmp_srcimgdata = URL.createObjectURL(files[0]);
srcimg.src = tmp_srcimgdata;
srcimg.onload = function(){
canvas.width = srcimg.width;
canvas.height = srcimg.height;
ctx.drawImage(srcimg, 0, 0, srcimg.width, srcimg.height, 0, 0, srcimg.width, srcimg.height);
const dataUrl = canvas.toDataURL(files[0].type, quality);
// console.log(dataUrl);
resolve(dataUrl);
}
}catch(e){
reject("your browser doesn't support canvas");
}
})
return promiseh;
},
dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
let byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0){
byteString = atob(dataURI.split(',')[1]);
}else{
byteString = unescape(dataURI.split(',')[1]);
}
// separate out the mime component
let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
let ia = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
},
fileChange(_e, _type, _loading){
const e_target = _e.target;
console.dir(_e.target.files[0].name);
const file_name = _e.target.files[0].name;
let submit_file_name = (new Date()).getTime()+"_"+file_name.substring(0, file_name.lastIndexOf("."));
const extention = file_name.substring(file_name.lastIndexOf(".") + 1).toLowerCase();
submit_file_name = submit_file_name+'.'+extention;
console.log(submit_file_name);
let upload_file_id = '';
switch(_type){
case 'bl_img':
upload_file_id = 'businessLicence';
break;
case 'oc_img':
upload_file_id = 'organizationCode';
break;
case 'tr_img':
upload_file_id = 'taxRegistration';
break;
case 'tio_img':
upload_file_id = 'threeinone';
break;
}
console.log(upload_file_id);
// this.upLoadFile(_e.target.files[0], _type, _loading, upload_file_id, submit_file_name, e_target);
this.getImageSrc(_e.target).then((_rpdata)=>{
// console.log(_rpdata);
// this[_type] = _rpdata;
const file = this.dataURItoBlob(_rpdata);
_e.target.value = '';
this.upLoadFile(file, _type, _loading, upload_file_id, submit_file_name);
},(_rpdata)=>{
this.upLoadFile(_e.target.files[0], _type, _loading, upload_file_id, submit_file_name, e_target);
console.log(_rpdata);
});
// return;
// const fd = new FormData();
// fd.append('file_'+upload_file_id, _e.target.files[0]);
// this[_loading] = true;
// const xhr = new xhres6;
//
// xhr.post(URLAPI.saafCommonImageUp+"&filePath="+this.submit_data.filePath+"&fileName="+submit_file_name,{
// headers:{
// 'Accept':'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
// 'Accept-Language':'zh-CN,zh;q=0.8,en;q=0.6,ja;q=0.4,zh-TW;q=0.2'
// },
// data_type:'form-data',
// data:fd
// }).then((_rpdata)=>{
// console.log(_rpdata);
//
// this[_loading] = false;
// if(_rpdata.body.status === 'S'){
// this[_type]=URLAPI.upLoadService+_rpdata.body.data.accessPath;
// this.submit_data[upload_file_id]=_rpdata.body.name;
//
// }else{
// this.$vux.toast.show({
// text: _rpdata.msg,
// type: 'cancel'
// })
// }
// e_target.value = ''; // 开压缩这个可以注释
//
// },()=>{
// this.$vux.toast.show({
// text: "上传失败",
// type: 'cancel'
// })
// this[_loading] = false;
// e_target.value = ''; // 开压缩这个可以注释
// });
},
upLoadFile(_file, _type, _loading, upload_file_id, submit_file_name, e_target){
const fd = new FormData();
fd.append('file_'+upload_file_id, _file);
this[_loading] = true;
const xhr = new xhres6;
xhr.post(URLAPI.saafCommonImageUp+"&filePath="+this.submit_data.filePath+"&fileName="+submit_file_name,{
headers:{
'Accept':'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
'Accept-Language':'zh-CN,zh;q=0.8,en;q=0.6,ja;q=0.4,zh-TW;q=0.2'
},
data_type:'form-data',
data:fd
}).then((_rpdata)=>{
console.log(_rpdata);
this[_loading] = false;
if(_rpdata.body.status === 'S'){
this[_type]=URLAPI.upLoadService+_rpdata.body.data.accessPath;
this.submit_data[upload_file_id]=_rpdata.body.name;
}else{
this.$vux.toast.show({
text: _rpdata.msg,
type: 'cancel'
})
}
if(e_target){
e_target.value = '';
}
},()=>{
this.$vux.toast.show({
text: "上传失败",
type: 'cancel'
})
this[_loading] = false;
if(e_target){
e_target.value = '';
}
});
},
delPhoto(_item){
this.confirm_show = true;
this.del_photo_type = _item;
},
delPhotoConfirm(){
if(this.del_photo_type!==''){
this[this.del_photo_type] = '';
}
},
bigCatItemTap(_item){
this.show_bigcat = false;
this.submit_data.bigCatCode = _item.BigCatCode;
this.loadPurchaseInt(this.submit_data.bigCatCode);
},
loadPurchaseInt(_code){
this.$getData.getSaleAreRela({
params:JSON.stringify({
varBigCat:_code
})
},(_rpdata)=>{
console.dir(_rpdata);
if(_rpdata.status == 'S'){
this.area_org_list = _rpdata.data;
let tmp_area_array = [];
let tmp_sales_array = [];
this.area_org_list.forEach((value, key)=>{
if(value.AreaPlace == undefined){
this.$set(value, 'AreaPlace', '');
}
if(value.UserFullName == undefined){
this.$set(value, 'UserFullName', '');
}
tmp_area_array.push(value.AreaPlace)
tmp_sales_array.push(value.UserFullName);
})
this.area_list=[tmp_area_array];
this.sales_list=[tmp_sales_array];
console.log(this.area_list[0][0]);
this.area_value = [this.area_list[0][0]];
this.sales_value = [this.sales_list[0][0]];
}else{
}
})
},
areaChange(_value){
this.area_org_list.forEach((value, key)=>{
if(_value == value.AreaPlace){
this.sales_value = [value.UserFullName];
return;
}
})
},
areaShow(){
if(this.submit_data.bigCatCode == ''){
this.$vux.toast.show({
text: '请先选择采购意向',
type: 'cancel'
})
}
},
salesChange(_value){
this.area_org_list.forEach((value, key)=>{
if(_value == value.UserFullName){
this.area_value = [value.AreaPlace];
return;
}
})
},
salesShow(){
if(this.submit_data.bigCatCode == ''){
this.$vux.toast.show({
text: '请先选择采购意向',
type: 'cancel'
})
}
},
getBigCatCode(){
this.$getData.getPurchaseInt({}, (_rpdata)=>{
console.log(_rpdata);
if(_rpdata.status == 'S'){
this.bigcat_list = _rpdata.data;
}else{
}
})
},
submitData(_value){
let address_array = Value2nameFilter(this.addressValue, this.addressData);
address_array = address_array.split(' ');
this.area_org_list.forEach((value, key)=>{
if(value.AreaPlace == this.area_value){
this.submit_data.businessIndex = key;
this.submit_data.salesId = value.SalesId;
}
})
// console.log(address_array);
this.submit_data.province = address_array[0];
this.submit_data.city = address_array[1];
this.submit_data.county = address_array[2];
if(this.submit_data.customerName == ''){
this.$vux.toast.show({
text: '请填写公司名称',
type: 'cancel',
// 'is-show-mask': true
})
return;
}
if(this.submit_data.province == ''){
this.$vux.toast.show({
text: '请选择地区',
type: 'cancel',
// 'is-show-mask': true
})
return;
}
if(this.submit_data.regAddress == ''){
this.$vux.toast.show({
text: '请填写注册地址',
type: 'cancel'
});
return;
}
if(this.submit_data.legalRepresentative == ''){
this.$vux.toast.show({
text: '请填写法人代表',
type: 'cancel'
});
return;
}else{
if(!chinese_reg.test(this.submit_data.legalRepresentative)){
this.$vux.toast.show({
text: '请使用中文填写法人代表',
type: 'cancel'
});
return;
}
}
if(this.submit_data.contactPeople == ''){
this.$vux.toast.show({
text: '请填写联系人',
type: 'cancel'
});
return;
}else{
if(!chinese_reg.test(this.submit_data.contactPeople)){
this.$vux.toast.show({
text: '请使用中文填写联系人',
type: 'cancel'
});
return;
}
}
if(this.submit_data.contractNumber == ''){
this.$vux.toast.show({
text: '请填写联系人电话',
type: 'cancel'
});
return;
}else{
if(!mobile_reg.test(this.submit_data.contractNumber)){
this.$vux.toast.show({
text: '请填写合法的电话号码',
type: 'cancel'
});
return;
}
}
if(this.submit_data.commerceRegNo == ''){
this.$vux.toast.show({
text: '请填写社会信用代码',
type: 'cancel'
});
return;
}
if(this.submit_data.billTo == ''){
this.$vux.toast.show({
text: '请填写收货地址',
type: 'cancel'
});
return;
}
if(this.submit_data.shipTo == ''){
this.$vux.toast.show({
text: '请填写收单地址',
type: 'cancel'
});
return;
}
if(this.submit_data.bigCatCode == ''){
this.$vux.toast.show({
text: '请先选择采购意向',
type: 'cancel'
});
return;
}
if(this.submit_data.businessLicence=="" && this.submit_data.organizationCode=="" && this.submit_data.taxRegistration=="" && this.submit_data.threeinone==""){
this.$vux.toast.show({
text: '请先上传证件照片',
type: 'cancel'
});
return;
}
console.log(this.submit_data);
this.$getData.createExCustomer(this.submit_data, (_rpdata)=>{
console.log(_rpdata);
if(_rpdata.status === 'S'){
}else{
this.$vux.toast.show({
text: _rpdata.msg,
type: 'cancel'
})
}
})
}
}
}
</script>
<style scoped >
.register-title {
color: #25619f;
height: 46.5px;
line-height: 46.5px;
font-size: 14px;
border-bottom: 4.5px solid #25619f;
box-sizing: border-box;
}
.prompt-box {
padding: 13px;
min-height: 54.5px;
box-sizing: border-box;
color: #399b00;
}
.certificate-box {
border: 1px solid #cdcdcd;
min-height: 99px;
text-align: center;
overflow: hidden;
}
.certificate-box .col-25 {
height: 100%;
border-right: 1px solid #cdcdcd;
box-sizing: border-box;
}
.certificate-box .col-25:last-child {
border: none;
}
.certificate-box .col-25 .btn .icon-tianjia {
line-height: 80px;
height: 100%;
font-size: 20px;
color: #cdcdcd;
}
.certificate-box .col-25 .certificate-img {
height: 100%;
}
.certificate-box .col-25 .certificate-img img {
width: 100%;
height: 100%;
}
.certificate-box .col-25 .certificate-img .pos-a {
right: 0px;
top: 0px;
background: #000000;
opacity: 0.5;
-webkit-border-radius: 100%;
border-radius: 100%;
width: 20px;
height: 20px;
text-align: center;
}
.certificate-box .col-25 .certificate-img .pos-a .icon-shanchu3 {
line-height: 20px;
font-size: 5px;
}
.checker-item {
background-color: #ddd;
color: #222;
font-size: 1rem;
padding: 5px 10px;
margin-right: 10px;
line-height: 18px;
border-radius: 15px;
}
.checker-item-selected {
background-color: #FF3B3B;
color: #fff;
}
.checker-item-disabled {
color: #999;
}
.cntr-m0{
margin:0 auto !important;
}
.text-gray{
color:#cdcdcd !important;
}
/* photo cell */
.paperwork-wrap{
display:flex;
border:1px solid #cdcdcd;
}
.paperwork-wrap li{
width:25%;
border-left:1px solid #cdcdcd;
overflow:hidden;
}
.paperwork-wrap li:first-child{
border-left:0;
}
.photo-cell{
position:relative;
display:flex;
flex-direction:column;
z-index:1;
}
.photo-cell-file{
opacity:0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
-webkit-appearance: none;
z-index: 2;
}
.photo-wrap{
height:80px;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
}
.img-pw{
/* width:100%; */
max-height:100%;
}
/* photo cell end */
</style>
