公司信息设计完成，剩与后台对接

WebService/src/main/resources/components/company-base/company-base.html

@@ -0,0 +1,36 @@
+<fieldset role="tabpanel" aria-labelledby="component-h-0" class="body current" v-bind:class="{no_display:step!=1}" aria-hidden="false">
+    <h2>公司基本信息</h2>
+    <div class="row">
+        <div class="col-lg-8">
+            <div class="form-group">
+                <label>公司名称 *</label>
+                <input id="name" name="name" type="text" class="form-control required" aria-required="true" />
+            </div>
+            <div class="form-group">
+                <label>公司地址 *</label>
+                <input id="address" name="address" type="text" class="form-control required" aria-required="true" />
+            </div>
+            <div class="form-group">
+                <label>联系电话 *</label>
+                <input id="tel" name="tel" type="text" class="form-control required" aria-required="true" />
+            </div>
+            <div class="form-group">
+                <label>公司业务 *</label>
+                <select id="storeTypeCd" name="storeTypeCd" class="form-control  required" aria-required="true">
+                    <option v-for="storeType in storeTypes" value="storeType.storeTypeCd">{{storeType.name}}</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>附近建筑 *</label>
+                <input id="nearbyLandmarks" name="nearbyLandmarks" type="text" class="form-control required" aria-required="true" />
+            </div>
+        </div>
+        <div class="col-lg-4">
+            <div class="text-center">
+                <div style="margin-top: 20px;">
+                    <i class="fa fa-sign-in" style="font-size: 180px; color: rgb(229, 229, 229);"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</fieldset>

WebService/src/main/resources/components/company-base/company-base.js

@@ -0,0 +1,53 @@
+/**
+    初始化 公司信息
+
+**/
+
+(function(vc){
+    vc.extends({
+        data:{
+            storeTypes:[],
+            companyBaseInfo:{
+                tel:""
+            }
+        },
+         _initMethod:function(){
+             vc.component.initStoreType();
+         },
+         _initEvent:function(){
+//              vc.component.$on('errorInfoEvent',function(_errorInfo){
+//                     vc.component.registerInfo.errorInfo = _errorInfo;
+//                     console.log('errorInfoEvent 事件被监听',_errorInfo)
+//                 });
+
+         },
+        watch:{
+
+        },
+        methods:{
+            initStoreType:function(){
+                var param = {
+                                    params:{
+                                        msg:"123"
+                                    }
+
+                               }
+                vc.http.get('company','getStoreType',
+                             JSON.stringify(param),
+                             function(json,res){
+                                if(res.status == 200){
+                                    vc.component.storeTypes = JSON.parse(json);
+                                    return ;
+                                }
+                                //vc.component.$emit('errorInfoEvent',json);
+                             },function(errInfo,error){
+                                console.log('请求失败处理',errInfo,error);
+                                vc.component.$emit('errorInfoEvent',errInfo);
+                             });
+            }
+        }
+
+    });
+
+})(window.vc);
+

WebService/src/main/resources/components/company-cerdentials/company-cerdentials.html

@@ -0,0 +1,24 @@
+<fieldset id="component-p-1" role="tabpanel" aria-labelledby="component-h-1" class="body" aria-hidden="true"  v-bind:class="{no_display:step!=3}">
+    <h2>营业执照信息</h2>
+    <div class="row">
+        <div class="col-lg-8">
+            <div class="form-group">
+                <label>证件号码 *</label>
+                <input id="name" name="name" type="text" class="form-control required" aria-required="true" />
+            </div>
+        </div>
+        <div class="col-lg-8">
+            <div class="form-group">
+                <label>有效期 *</label>
+                <input id="email" name="email" type="text" class="form-control required email" aria-required="true" />
+            </div>
+        </div>
+        <div class="col-lg-8">
+            <div class="form-group">
+                <label>营业执照照片 *</label>
+                <vc:create name="positive-photo"></vc:create>
+            </div>
+        </div>
+    </div>
+</fieldset>
+

WebService/src/main/resources/components/company-cerdentials/company-cerdentials.js

@@ -0,0 +1,33 @@
+/**
+    初始化 公司信息
+
+**/
+
+(function(vc){
+    vc.extends({
+        data:{
+            companyCerdentialsInfo:{
+                tel:""
+            }
+        },
+         _initMethod:function(){
+
+         },
+         _initEvent:function(){
+//              vc.component.$on('errorInfoEvent',function(_errorInfo){
+//                     vc.component.registerInfo.errorInfo = _errorInfo;
+//                     console.log('errorInfoEvent 事件被监听',_errorInfo)
+//                 });
+
+         },
+        watch:{
+
+        },
+        methods:{
+
+        }
+
+    });
+
+})(window.vc);
+

WebService/src/main/resources/components/company-extend/company-extend.html

@@ -0,0 +1,35 @@
+<fieldset role="tabpanel" aria-labelledby="component-h-0" class="body current" v-bind:class="{no_display:step!=2}" aria-hidden="false">
+    <h2>公司扩展信息</h2>
+    <div class="row">
+        <div class="col-lg-8">
+            <div class="form-group">
+                <label>公司法人 *</label>
+                <input  name="name" type="text" class="form-control required" aria-required="true" />
+            </div>
+            <div class="form-group">
+                <label>注册资本 *</label>
+                <input  name="address" type="text" class="form-control required" aria-required="true" />
+            </div>
+            <div class="form-group">
+                <label>成立日期 *</label>
+                <input  name="tel" type="text" class="form-control required" aria-required="true" />
+            </div>
+            <div class="form-group">
+                <label>登记机关 *</label>
+                <input  name="tel" type="text" class="form-control required" aria-required="true" />
+
+            </div>
+            <div class="form-group">
+                <label>经营范围 *</label>
+                <input  name="nearbyLandmarks" type="text" class="form-control required" aria-required="true" />
+            </div>
+        </div>
+        <div class="col-lg-4">
+            <div class="text-center">
+                <div style="margin-top: 20px;">
+                    <i class="fa fa-sign-in" style="font-size: 180px; color: rgb(229, 229, 229);"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</fieldset>

WebService/src/main/resources/components/company-extend/company-extend.js

@@ -0,0 +1,34 @@
+/**
+    初始化 公司信息
+
+**/
+
+(function(vc){
+    vc.extends({
+        data:{
+            storeTypes:[],
+            companyExtendInfo:{
+                tel:""
+            }
+        },
+         _initMethod:function(){
+
+         },
+         _initEvent:function(){
+//              vc.component.$on('errorInfoEvent',function(_errorInfo){
+//                     vc.component.registerInfo.errorInfo = _errorInfo;
+//                     console.log('errorInfoEvent 事件被监听',_errorInfo)
+//                 });
+
+         },
+        watch:{
+
+        },
+        methods:{
+
+        }
+
+    });
+
+})(window.vc);
+

WebService/src/main/resources/components/company/company.html

@@ -26,101 +26,39 @@
                                 </li>
                                 <li role="tab" v-bind:class="{ current: step==2,disabled:step!=2 }">
                                     <a>
-                                        <span class="number">2.</span> 证件信息
+                                        <span class="number">2.</span> 扩展信息
                                     </a>
                                 </li>
                                 <li role="tab" v-bind:class="{ current: step==3,disabled:step!=3 }">
                                     <a>
-                                    <span class="number">3.</span> Warning
+                                    <span class="number">3.</span> 证件信息
                                     </a>
                                 </li>
                                 <li role="tab" v-bind:class="{ current: step==4,disabled:step!=4 }">
                                     <a>
-                                    <span class="number">4.</span> Finish
+                                    <span class="number">4.</span> 须知
                                     </a>
                                 </li>
                             </ul>
                         </div>
                         <div class="content clearfix">
                             <h1 tabindex="-1" class="title current">基本信息</h1>
-                            <fieldset role="tabpanel" aria-labelledby="component-h-0" class="body current" v-bind:class="{no_display:step!=1}" aria-hidden="false">
-                                <h2>公司基本信息</h2>
-                                <div class="row">
-                                    <div class="col-lg-8">
-                                        <div class="form-group">
-                                            <label>公司名称 *</label>
-                                            <input id="name" name="name" type="text" class="form-control required" aria-required="true" />
-                                        </div>
-                                        <div class="form-group">
-                                            <label>公司地址 *</label>
-                                            <input id="address" name="address" type="text" class="form-control required" aria-required="true" />
-                                        </div>
-                                        <div class="form-group">
-                                            <label>联系电话 *</label>
-                                            <input id="tel" name="tel" type="text" class="form-control required" aria-required="true" />
-                                        </div>
-                                        <div class="form-group">
-                                            <label>公司业务 *</label>
-                                            <select id="storeTypeCd" name="storeTypeCd" class="form-control  required" aria-required="true">
-                                                <option v-for="storeType in storeTypes" value="storeType.storeTypeCd">{{storeType.name}}</option>
-                                            </select>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>附近建筑 *</label>
-                                            <input id="nearbyLandmarks" name="nearbyLandmarks" type="text" class="form-control required" aria-required="true" />
-                                        </div>
-                                    </div>
-                                    <div class="col-lg-4">
-                                        <div class="text-center">
-                                            <div style="margin-top: 20px;">
-                                                <i class="fa fa-sign-in" style="font-size: 180px; color: rgb(229, 229, 229);"></i>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </fieldset>
+                            <vc:create name="company-base"></vc:create>
+                            <h1 tabindex="-1" class="title">扩展信息</h1>
+                            <vc:create name="company-extend"></vc:create>
                             <h1 id="component-h-1" tabindex="-1" class="title">证件信息</h1>
-                            <fieldset id="component-p-1" role="tabpanel" aria-labelledby="component-h-1" class="body" aria-hidden="true"  v-bind:class="{no_display:step!=2}">
-                                <h2>公司证件信息</h2>
-                                <div class="row">
-                                    <div class="col-lg-6">
-                                        <div class="form-group">
-                                            <label>First name *</label>
-                                            <input id="name" name="name" type="text" class="form-control required" aria-required="true" />
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Last name *</label>
-                                            <input id="surname" name="surname" type="text" class="form-control required" aria-required="true" />
-                                        </div>
-                                    </div>
-                                    <div class="col-lg-6">
-                                        <div class="form-group">
-                                            <label>Email *</label>
-                                            <input id="email" name="email" type="text" class="form-control required email" aria-required="true" />
-                                        </div>
-                                        <div class="form-group">
-                                            <label>Address *</label>
-                                            <input id="address" name="address" type="text" class="form-control" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </fieldset>
-                            <h1 id="component-h-2" tabindex="-1" class="title">Warning</h1>
-                            <fieldset id="component-p-2" role="tabpanel" aria-labelledby="component-h-2" class="body" aria-hidden="true"  v-bind:class="{no_display:step!=3}">
-                                <div class="text-center" style="margin-top: 120px;">
-                                    <h2>You did it Man :-)</h2>
-                                </div>
-                            </fieldset>
-                            <h1 id="component-h-3" tabindex="-1" class="title">Finish</h1>
-                            <fieldset id="component-p-3" role="tabpanel" aria-labelledby="component-h-3" class="body" aria-hidden="true"  v-bind:class="{no_display:step!=4}">
-                                <h2>Terms and Conditions</h2>
+                            <vc:create name="company-cerdentials"></vc:create>
+                            <h1 id="component-h-2" tabindex="-1" class="title">须知</h1>
+                            <fieldset id="component-p-2" role="tabpanel" aria-labelledby="component-h-2" class="body" aria-hidden="true"  v-bind:class="{no_display:step!=4}">
+                                <h4>这里是须知</h4>
                                 <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required" aria-required="true" />
-                                <label for="acceptTerms">I agree with the Terms and Conditions.</label>
+                                <label for="acceptTerms">我同意并遵守以上信息.</label>
                             </fieldset>
+
                         </div>
                         <div class="actions clearfix">
                             <ul role="menu" aria-label="Pagination">
-                                <li class="disabled" aria-disabled="true"><a v-on:click="previous()" role="menuitem">上一步</a></li>
+                                <li v-bind:class="{disabled:step == 1}" aria-disabled="true"><a v-on:click="previous()" role="menuitem">上一步</a></li>
                                 <li v-bind:class="{no_display:step==4}"><a v-on:click="next()" role="menuitem">下一步</a></li>
                                 <li v-bind:class="{no_display:step!=4}"><a v-on:click="finish()" role="menuitem">提交审核</a></li>
                             </ul>

WebService/src/main/resources/components/company/company.js

@@ -6,14 +6,13 @@
 (function(vc){
     vc.extends({
         data:{
-            storeTypes:[],
             step:1,
             companyInfo:{
                 tel:""
             }
         },
          _initMethod:function(){
-             vc.component.initStoreType();
+             //vc.component.initStoreType();
          },
          _initEvent:function(){
 //              vc.component.$on('errorInfoEvent',function(_errorInfo){
@@ -23,39 +22,16 @@
 
          },
         watch:{
-            'companyInfo':{
-                deep: true,
-                handler:function(){
-                    console.log('通知号码信息',vc.component.companyInfo.tel);
-                    vc.component.$emit('validate_tel_change_event',vc.component.companyInfo);
-                }
-            }
+
         },
         methods:{
-            initStoreType:function(){
-                var param = {
-                                    params:{
-                                        msg:"123"
-                                    }
 
-                               }
-                vc.http.get('company','getStoreType',
-                             JSON.stringify(param),
-                             function(json,res){
-                                if(res.status == 200){
-                                    vc.component.storeTypes = JSON.parse(json);
-                                    return ;
-                                }
-                                //vc.component.$emit('errorInfoEvent',json);
-                             },function(errInfo,error){
-                                console.log('请求失败处理',errInfo,error);
-                                vc.component.$emit('errorInfoEvent',errInfo);
-                             });
-            },
             next:function(){
                 if(vc.component.step<4){
                     vc.component.step = vc.component.step+1;
                 }
+
+                //校验字段是否填写
             },
             previous:function(){
                 if(vc.component.step>1){

WebService/src/main/resources/components/positive-photo/positive-photo.html

@@ -0,0 +1,7 @@
+<div class="fileinput fileinput-new" data-provides="fileinput">
+    <span class="btn btn-default btn-file" v-bind:class="{no_display:positivePhotoInfo.chooseFlag==1}">
+        <span class="fileinput-new" >选择图片</span>
+    </span>
+    <input type="file" class="file" accept="images/*" name="..." v-on:change="choosePositivePhoto($event)">
+        <img v-bind:src="positivePhotoInfo.imgInfo" v-bind:class="{no_display:positivePhotoInfo.chooseFlag==0}" width="200px" height="200px">
+</div>

WebService/src/main/resources/components/positive-photo/positive-photo.js

@@ -0,0 +1,48 @@
+(function(vc){
+    vc.extends({
+        data:{
+            positivePhotoInfo:{
+                chooseFlag:0,// 1表示选择了照片,0表示未选择照片
+                imgInfo:"",
+                errorInfo:"",
+            }
+        },
+         _initMethod:function(){
+
+         },
+         _initEvent:function(){
+//              vc.component.$on('errorInfoEvent',function(_errorInfo){
+//                     vc.component.registerInfo.errorInfo = _errorInfo;
+//                     console.log('errorInfoEvent 事件被监听',_errorInfo)
+//                 });
+
+         },
+        watch:{
+
+        },
+        methods:{
+
+            choosePositivePhoto:function(event){
+                var photoFiles = event.target.files;
+                if (photoFiles && photoFiles.length > 0) {
+                        // 获取目前上传的文件
+                        var file = photoFiles[0];// 文件大小校验的动作
+                        if(file.size > 1024 * 1024 * 1) {
+                            vc.component.positivePhotoInfo.errorInfo = '图片大小不能超过 2MB!';
+                            return false;
+                        }
+                        var reader = new FileReader(); //新建FileReader对象
+                        reader.readAsDataURL(file); //读取为base64
+                        console.log('render obj:',reader);
+                        reader.onloadend = function(e) {
+                            vc.component.positivePhotoInfo.imgInfo = reader.result;
+                            vc.component.positivePhotoInfo.chooseFlag = 1;
+                        }
+                    }
+            }
+
+        }
+
+    });
+
+})(window.vc);

WebService/src/main/resources/static/css/common.css

@@ -6,4 +6,17 @@
 }
 .no_display{
     display:none
+}
+.fileinput>.file{
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 0;
+        opacity: 0;
+        filter: alpha(opacity=0);
+        font-size: 23px;
+        height: 100%;
+        width: 100%;
+        direction: ltr;
+        cursor: pointer;
 }