avalon：商家註冊實例

<div>
	<div class="form-info">
		<div class="infop">
			<label><span class="fr">公司名稱：</span></label>
			<input class="input" id="fullName" ms-duplex="@fullName" ms-rules="{chinese:true,maxlength:50,required:true,}" data-required-message="請輸入在工商註冊的公司全稱" type="text" placeholder="公司名稱不能爲空" data-maxlength-message="字數不得超過50位"
			ms-blur="@validFullNameExist($event)"/>
			<span class="item-tip">請輸入在工商註冊的公司全稱</span>
			<span class="wrong"></span>
			<span class="addsucc"></span>
		</div>
		<div class="infop">
			<label><span class="fr">公司註冊地址：</span></label>
			<p ms-for="($index,area) in @searchRegionForm">
			    <select ms-change="@setSearchForm($index,$event)" ms-attr="{class:'addresst'+$index}">
			        <option>請選擇..</option>
			        <option ms-for="($cityindex,city) in area" ms-attr="{value:city.id}">{{city.name}}</option>
			    </select>
			</p>
			<span id="regionIdmsg" class="addsucc"></span>
		</div>
		<div class="infop address">
			<input class="input" id="registeredAddress" ms-duplex="@registeredAddress" ms-rules="{chinese:true,maxlength:50,required:true}" data-required-message="地址不能爲空" type="text" value="" placeholder="請輸入詳細地址" data-maxlength-message="字數不得超過50位"/>
			<span class="item-tip">請填入正確的公司註冊地址</span>
			<span class="wrong"></span>
			<span class="addsucc"></span>
		</div>
		<div class="infop">
			<label><span class="fr">公司聯繫方式：</span></label>
			<input ms-duplex="@companyContact" ms-rules="{valiMobilePhone:true,required:true}" data-required-message="請輸入公司聯繫方式" data-valiMobilePhone-message="公司聯繫方式輸入不正確" class="input" type="text" value="" placeholder="公司聯繫方式">
			<span class="item-tip">請填入正確的公司聯繫方式</span>
			<span class="wrong"></span>
			<span class="addsucc"></span>
		</div>
		<div class="infop">
			<label><span class="fr">公司指定聯繫人：</span></label>
			<input class="input" id="specifyContact" ms-duplex="@specifyContact" ms-rules="{maxlength:50,required:true}" data-required-message="聯繫人姓名不能爲空"  type="text"
			data-maxlength-message="字數不得超過50位"/>
			<span class="wrong"></span>
			<span class="item-tip">請填入公司可聯繫人名稱</span>
			<span class="addsucc"></span>
		</div>
		<div class="infop">
			<label><span class="fr">聯繫方式：</span></label>
			<input class="input" id="specifyContactPhone" ms-duplex="@specifyContactPhone" ms-rules="{valiMobilePhone:true,required:true}" data-required-message="聯繫方式不能爲空" type="text">
			<span class="item-tip">請填入公司可聯繫人聯繫方式</span>
			<span class="wrong"></span>
			<span class="addsucc"></span>
		</div>
		<div class="infop">
			<label><span class="fr">收貨地址：</span></label>
			<input id="deliveryRegionId" ms-duplex="@deliveryRegionId" type="hidden"/>
			<div ms-for="($index,area) in @searchRegionForm2">
			    <select ms-change="@setSearchForm2($index,$event)" ms-attr="{class:'addresst'+$index}">
			        <option>請選擇..</option>
			        <option ms-for="($cityindex,city) in area" ms-attr="{value:city.id}">{{city.name}}</option>
			    </select>
			</div>
			<span id="regionId2msg" class="addsucc"></span>
			<span class="wrong">收貨地址不能爲空</span><br>
		</div>
		<div class="infop address">
			<label></label>
			<input class="input" id="detailedAddress" ms-duplex="@detailedAddress" ms-rules="{chinese:true,maxlength:50,required:true}" data-required-message="收貨地址不能爲空" type="text" value="" placeholder="請輸入詳細地址" class="address" data-maxlength-message="字數不得超過50位"/>
			<span class="wrong"></span>
			<span class="item-tip">請填入收貨所需地址</span>
			<span class="addsucc"></span><br>
			<p class="address-tip">此信息用收貨地址，如添加更多地址，</p>
			<p class="address-tip">可到用戶收貨中心收貨地址管理添加。</p>
		</div>
	</div>
	<div class="form-info form-r">
		<div class="infop bottom10">
			<label><span class="fr">工商營業執照：</span></label>
			<input class="input" id="businesslicense" ms-duplex="@businesslicense" ms-rules="{validBusCode:true}" type="text" value="" placeholder="填寫執照號">
			<span class="item-tip">請輸入正確的工商執照</span>
			<span class="wrong"></span>
			<span class="addsucc"></span>
		</div>
		<div class="infop bottom10">
			<input id="imageurl-0" ms-duplex="@businesslicenseUrl" type="hidden"/>
			<div class="uploaddiv image0">
				<template :widget="{is:'vip-upload-image',sort:0}"></template>
			</div>
		</div>
		<div class="fl infop width290">
			<label><span class="fr">一般納稅人證明：</span></label>
			<input id="imageurl-1" ms-duplex="@taxpayerProofUrl" type="hidden"/>
			<div class="uploaddiv image1">
				<template :widget="{is:'vip-upload-image',sort:1}"></template>
			</div>
		</div>
		<div class="infop">
			<div class="uploaddiv">
				<label class="width125">
					<span class="fr">開戶許可證：</span>
				</label>
				<input id="imageurl-2" ms-duplex="@bankAccountsPermitsUrl" type="hidden"/>
				<div class="uploaddiv image2">
					<template :widget="{is:'vip-upload-image',sort:2}"></template>
				</div>
			</div>
		</div>
		<div class="infop bottom10">
			<label><span class="fr">稅號/社會統一信用代碼：</span></label>
			<input class="input" id="taxNumber" ms-duplex="@taxNumber" ms-rules="{valiTaxNumber:true}" ms-blur="@validTaxNumberExist($event)" type="text">
			<span class="wrong"></span>
			<span class="item-tip">請填入開票所需稅號</span>
			<span class="addsucc"></span><br>
			<span class="duty-tip">用於開增值稅專用發票</span>
		</div>
		<div class="infop bottom10">
			<label><span class="fr">開戶行：</span></label>
			<input class="input" id="bank" ms-duplex="@bank" ms-rules="{chinese:true,maxlength:50,required:true}" data-required-message="填寫開戶行" type="text" data-maxlength-message="字數不得超過50位">
			<span class="wrong"></span>
			<span class="item-tip">請填入開票所需開戶行及所屬支行</span>
			<span class="addsucc"></span><br>
			<span class="duty-tip">用於開增值稅專用發票</span>
		</div>
		<div class="infop">
			<label><span class="fr">開票賬號：</span></label>
			<input class="input" id="number" ms-duplex="@number" ms-rules="{number:true,required:true}"  data-required-message="賬號不能爲空"  type="text">
			<span class="wrong"></span>
			<span class="item-tip">請填入開票所需銀行賬號</span>
			<span class="addsucc"></span>
		</div>
		<div class="infop">
			<label><span class="fr">開票類型：</span></label>
			<input class="in-type" name="invoiceTypeEnum" type="checkbox" value="1" checked="checked" /><span class="in-content">普票</span>
			<input class="in-type" name="invoiceTypeEnum" type="checkbox" value="2"/><span class="in-content">專票</span>
			<span id="invoiceTypeWrong" class="wrong"></span>
		</div>
	</div>
	<div class="clear"></div>
	<div class="applysubmit-wrap">
		<p><button class="applysubmit-btn" type="submit">提交申請</button></p>
	</div>
</div>

avalon的js模塊

import {} from './register-apply-enterprise.scss';
import template from './register-apply-enterprise.html';
import upload from './upload.jpg';
import {accountService} from 'service.account';
import {checkoutService} from 'service.checkout';
let regionsdata = [];
    
class RegisterApplyEnterprise {

    /**
     * constructor
     */
    constructor() {
        this.template = template;
        this.defaults = {
        	upload: upload,
		    regionId : 0, //公司註冊地區id
		    deliveryRegionId : 0,//收貨地址註冊地區id
		    defaultregionId : 1602,
		    searchRegionForm :[], //公司註冊地區展示集合
		    searchRegionForm2 :[], //收貨地址地區展示集合
		    fullName: '',          //提交內容開始
		    registeredAddress: '',
		    companyContact: '',
		    specifyContact: '',
		    specifyContactPhone: '',
		    detailedAddress: '',
		    businesslicense: '',
		    businesslicenseUrl :'',
		    taxpayerProofUrl: '',
		    bankAccountsPermitsUrl: '',
		    taxNumber: '',
		    bank: '',
		    number: '',
		    invoiceTypeEnum: '',
            isvalidFullNameExist: true,
            isvalidTaxNumberExist: true,
            onInit: this.onInit,
            loadInvoiceRegions: this.loadInvoiceRegions,
		    validFullNameExist: this.validFullNameExist,
		    validTaxNumberExist:this.validTaxNumberExist,
            setSearchFormInit: this.setSearchFormInit,
            setSearchForm: this.setSearchForm,
            getChildOrg: this.getChildOrg,
            setSearchFormInit2: this.setSearchFormInit2,
            setSearchForm2: this.setSearchForm2,
            getChildOrg2: this.getChildOrg2,
        };
    }
    onInit(){
        this.loadInvoiceRegions();
    }
    //加載公司地址
    loadInvoiceRegions(){
        checkoutService.loadInvoiceRegions().then(result => {
            if (result.data) {
                regionsdata = result.data;
                this.setSearchFormInit(this.defaultregionId); //加載城市
                this.setSearchFormInit2(this.defaultregionId);
             }
        },() => {});
    }
    //驗證公司名稱是否已經存在
    validFullNameExist(event){
        let value = event.target.value;
        value = value.replace(/\s+/g, "");
        if(value !== null && value !== ''){
            let element = event.target;
            let parentEle = $(element).closest('.infop');
            accountService.getValidFullName(value).then(result => {
                if (!result.data) {
                    this.isvalidFullNameExist = false;
                    $(element).addClass("inputwrong");
                    parentEle.find('.addsucc').hide();
                    parentEle.find('.wrong').html("該公司名稱已存在").show();
                }else{
                    this.isvalidFullNameExist = true;
                    parentEle.find('.item-tip').hide();
                }
            },() => {});
        }
    }
    //驗證稅務號是否已經存在
    validTaxNumberExist(event){
        let value = event.target.value;
        if(value !== null && value !== ''){
            let element = event.target;
            let parentEle = $(element).closest('.infop');
            accountService.getValidTaxNumber(value).then(result => {
                if (!result.data) {
                    this.isvalidTaxNumberExist = false;
                    $(element).addClass("inputwrong");
                    parentEle.find('.addsucc').hide();
                    parentEle.find('.wrong').html("該稅號或社會統一信用代碼已存在").show();
                }else{
                    this.isvalidTaxNumberExist = true;
                    parentEle.find('.item-tip').hide();
                }
            },() => {});
        }
    }
    //註冊地址處理
    setSearchFormInit(currNode){
        let childNodes = this.getChildOrg(currNode);
        if (childNodes.length){
            this.searchRegionForm = [childNodes];
        }
    }
    setSearchForm(index,event){
        //刪除第index個元素後的所有成員
        this.searchRegionForm.removeAll(function(arr, i) {
            if (i > index){
                return true;
            }else{
                return false;
            }
        });
        let currNode = event.target.value;
        let childNodes = this.getChildOrg(currNode);
        if (childNodes.length > 0){
            this.searchRegionForm.push(childNodes);
            this.regionId = 0;
            $("#regionIdmsg").hide();
        }else{
            this.regionId = event.target.value;    //爲最後選擇的城市賦值
            $("#regionIdmsg").show();
        }
    }
    getChildOrg(id){
        let retList = [];
        for (let i = 0; i < regionsdata.length; i++) {
            let elem = regionsdata[i];
            if (elem.parentid != id){
                continue;
            }
            retList.push({
                id: elem.id,
                name: elem.name,
                parentid: elem.parentid
            });
        }
        return retList;
    }
    //收貨地址處理
    setSearchFormInit2(currNode){
        let childNodes = this.getChildOrg(currNode);
        if (childNodes.length){
            this.searchRegionForm2 = [childNodes];
        }
    }
    setSearchForm2(index,event){
        //刪除第index個元素後的所有成員
        this.searchRegionForm2.removeAll(function(arr, i) {
            if (i > index){
                return true;
            }else{
                return false;
            }
        });
        let currNode = event.target.value;
        let childNodes = this.getChildOrg2(currNode);
        if (childNodes.length > 0){
            this.searchRegionForm2.push(childNodes);
            this.deliveryRegionId = 0;
            $("#regionId2msg").hide();
        }else{
            this.deliveryRegionId = event.target.value;    //爲最後選擇的城市賦值
            $("#regionId2msg").show();
        }
    }
    getChildOrg2(id){
        let retList = [];
        for (let i = 0; i < regionsdata.length; i++) {
            let elem = regionsdata[i];
            if (elem.parentid != id){
                continue;
            }
            retList.push({
                id: elem.id,
                name: elem.name,
                parentid: elem.parentid
            });
        }
        return retList;
    }
}

avalon.component('register-apply-enterprise', new RegisterApplyEnterprise());
export {RegisterApplyEnterprise};