图片上传

<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>