platform-b2c/src/main/webapp/resources/view/usercenter/billInput.html

<style type="text/css">
.content-header {
	font-size: 20px;
	font-weight: 600;
	border-bottom: 1px dashed rgb(129,184,233);
	padding-bottom: 10px;
}

.content-title {
	font-size: 19px;
}

td > .simple-select {
	display: inline;
}

.normal-control-label {
    margin-bottom: 0;
    text-align: right;
    padding-top: 6px;
}

#bill-info label {
	font-weight: 500;
}

.base-line {
	vertical-align: -webkit-baseline-middle;
}

#bill-info .row {
	margin-left: 0px;
	margin-right: 0px;
}

#bill-info {
	font-size: 15px;
}

.error {
	padding-top: 7px;
	line-height: 1.5;
}

div.radio {
	margin-top: 0px;
}

.padding-top-5 {
	padding-top: 5px;
}

label.padding-left-0 {
	padding-left: 0px;
}

.checkbox .col-md-3 {
	padding-right: 0px;
}

div.upload {
	margin-left: 15px;
	width: 370px;
}

#bill-info,  #bill-info input, #bill-info select{
	font-size: 12px !important;
}

h2 {
	font-size: 18px !important;
}

.height-34 {
	height: 34px;
	line-height: 26px;
}

.a-background {
	color: red;
}
</style>
<div id="bill-info">
  <div class="row">
      <h2 class="content-header" ng-bind="bill.head?'修改开票资料':'新增开票资料'">新增开票资料</h2>
  </div>
   <div class="row">
       <label class="col-md-3 normal-control-label"><b class="text-inverse">*</b>发票类型：</label>
       <div class="radio col-md-9">
            <label class="radio-inline" ng-show="isNormal">
                <label class="padding-top-5"><input type="radio" ng-model="bill.kind" value="1206" ng-checked="bill.kind==1206"></label> <label class="padding-left-0">增值税普通发票（不可抵扣）</label>
            </label>
           <label class="radio-inline" ng-show="isSpecial">
                <label class="padding-top-5"><input type="radio" ng-model="bill.kind" value="1205" ng-checked="bill.kind==1205"></label> <label class="padding-left-0">增值税专用发票（可抵扣） </label>
           </label>
       </div>
   </div>
   <form class="form-horizontal" novalidate="novalidate" name="form" ng-if="bill.kind==1206">
         <div class="form-group">
             <label class="col-md-3 control-label"><b class="text-inverse">*</b>发票抬头：</label>
             <div class="col-md-5">
                 <input type="text" class="form-control" ng-model="bill.head" name="billHead" required="required">
             </div>
             <div class="text-inverse error col-md-2" ng-show="(bill.head||form.billHead.$touched)&&form.billHead.$invalid">必填项</div>
           </div>
           <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>收票人：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-model="bill.name" name="billName"  required="required">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.name||form.billName.$touched)&&form.billName.$invalid">必填项</div>
           </div>
            <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>收票人联系人电话：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-model="bill.telephone" name="billTel"
                   ng-pattern="/^((\(\d{3}\))|(\d{3}\\-))?(13|15|17|18)\d{9}$/" ng-length="11" required="required">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.telephone||form.billTel.$touched)&&form.billTel.$invalid">请输入正确的手机号码</div>
           </div>
           <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>收票地址：</label>
               <div class="row checkbox">
                    <div class="col-md-3">
                        <select class="form-control"
                            ng-model="bill.address.province" name="province"
                            ng-options="key as key for (key,value) in division"
                            ng-change="bill.address.city='';bill.address.district='';">
                            <option value="">省</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-control" ng-model="bill.address.city" name="city"
                            ng-options="key as key for (key,value) in division[bill.address.province]"
                            ng-change="bill.address.district='';">
                            <option value="">市</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                    <select class="form-control" ng-model="bill.address.district" name="district"
                        ng-options="value as value for value in division[bill.address.province][bill.address.city]" required="required">
                        <option value="">区</option>
                    </select>
                    </div>
                </div>
           </div>
           <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>收票详细地址：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-model="bill.detailAddress" name="billDetail" required="required">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.detailAddress||form.billDetail.$touched)&&form.billDetail.$invalid">必填项</div>
           </div>
           <div class="form-group">
                <label class="col-md-3 control-label"><b class="text-inverse">*</b></label>
                <div class="col-md-5">
                     <label class="checkbox-inline text-inverse">
                            <input type="checkbox" checked="true" name="is_agree" ng-model="bill.is_agree" required="required" /> 我已阅读并同意
                     </label>
                     <a href="/help/helpList/205" class="base-line" target="_blank">《发票须知》</a>
                 </div>
           </div>
           <div class="col-md-offset-3">
               <input type="submit" value="保存发票信息" class="btn btn-warning" ng-disabled="form.$invalid||(!bill.is_agree)" ng-click="saveBill()">
               <input type="button" value="取消修改" class="btn btn-warning" ng-show="isRevice" ng-click="exit()">
           </div>
   </form>
   <form class="form-horizontal" novalidate="novalidate" name="form" ng-if="bill.kind==1205">
              <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>发票抬头：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-model="bill.head" name="billHead" required="required">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.head||form.billHead.$touched)&&form.billHead.$invalid">必填项</div>
           </div>
           <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>收票人：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-model="bill.name" name="billName" required="required">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.name||form.billName.$touched)&&form.billName.$invalid">必填项</div>
           </div>
           <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>收票人联系电话：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-model="bill.telephone" name="billTel"
                   ng-pattern="/^((\(\d{3}\))|(\d{3}\\-))?(13|15|17|18)\d{9}$/" ng-length="11" required="required">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.telephone || form.billTel.$touched)&&form.billTel.$invalid">输入正确的联系方式</div>
           </div>
           <div class="form-group">
             <label class="col-md-3 control-label"><b class="text-inverse">*</b>收票地址：</label>
             <div class="row checkbox">
                    <div class="col-md-3">
                        <select required="required" class="form-control"
                            ng-model="bill.address.province" name="province"
                            ng-options="key as key for (key,value) in division"
                            ng-change="bill.address.city='';bill.address.district='';">
                            <option value="">省</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-control" ng-model="bill.address.city" name="city"
                            ng-options="key as key for (key,value) in division[bill.address.province]"
                            ng-change="bill.address.district='';" required="required">
                            <option value="">市</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                    <select class="form-control" ng-model="bill.address.district" name="district"
                        ng-options="value as value for value in division[bill.address.province][bill.address.city]" required="required">
                        <option value="">区</option>
                    </select>
                    </div>
                </div>
          </div>
           <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>收票详细地址：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" required="required" name="billDetail" ng-model="bill.detailAddress">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.detailAddress||form.billDetail.$touched)&&form.billDetail.$invalid">必填项</div>
           </div>
           <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>公司注册地址：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-model="bill.companyAddress" name="companyAddr" required="required">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.companyAddress||form.companyAddr.$touched)&&form.companyAddr.$invalid">必填项</div>
           </div>
           <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>公司电话：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-pattern="/^0\d{2,3}-[1-9]\d{6,7}$/" placeholder="区号和号码使用 '-' 隔开,或者不填区号" name="companyPhone" ng-model="bill.companyPhone" required="required">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.companyPhone||form.companyPhone.$touched)&&form.companyPhone.$invalid">输入正确的电话</div>
           </div>
           <div class="form-group">
              <label class="col-md-3 control-label"><b class="text-inverse">*</b>税务登记号：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-model="bill.companyTaxNumber" name="companyTaxNum" required="true" ng-minlength="15">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.companyTaxNumber||form.companyTaxNum.$touched)&&(form.companyTaxNum.$error.required||form.companyTaxNum.$error.minlength)">至少15位数字</div>
           </div>
           <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>开户银行：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-model="bill.bankName" name="bankName" required="required">
               </div>
               <div class="text-inverse error col-md-2" ng-show="(bill.bankName||form.bankName.$touched)&&form.bankName.$invalid">必填项</div>
           </div>
            <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b>开户银行账户：</label>
               <div class="col-md-5">
                   <input type="text" class="form-control" ng-model="bill.bankAccount" name="account" ng-pattern="/^[0-9]*$/" required=required"" minlength="8" maxlength="30">
               </div>
               <div class="text-inverse error col-md-3" ng-show="(bill.bankAccount||form.account.$touched)&&(form.account.$invalid)">输入正确的银行卡账号</div>
           </div>
           <div class="form-group" ng-show="!bill.attachUrl || billInfoRevise">
                <label class="col-md-3 control-label" for="exampleInputFile">上传开票资料:</label>
                <div class="col-md-5">
                    <input class="form-control" type="file" ng-file-select ng-model="bill.billInfo" name="billInfo" id="InputFile" ng-multiple="false" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg,application/pdf,*.pdf">
                </div>
          </div>
          <div class="form-group" ng-show="bill.attachUrl&&!billInfoRevise">
                <label class="col-md-3 control-label" for="exampleInputFile">开票资料:</label>
                <div class="col-md-5 height-34">
                    <a href="{{bill.attachUrl}}" target="_blank">点击查看</a>&nbsp;<a class="a-background" ng-click="billInfoRevise=true;">修改</a>
                </div>
          </div>
           <div class="form-group">
               <label class="col-md-3 control-label"><b class="text-inverse">*</b></label>
               <div class="col-md-5">
                   <label class="check-inline text-inverse">
                        <input checked="true" type="checkbox" ng-model="bill.is_agree" name="is_agree" required=""> 我已阅读并同意
                   </label>
                    <a href="/help/helpList/205">《发票须知》</a>
               </div>
           </div>
           <div class="col-md-offset-3">
               <input type="submit" value="保存发票信息" class="btn btn-warning" ng-disabled="form.$invalid||(!bill.is_agree)" ng-click="saveBill()">
               <input type="button" value="取消修改" class="btn btn-warning" ng-show="isRevice" ng-click="exit()">
           </div>
   </form>
</div>