公募机构表单验证第四步

donate-console/src/main/webapp/resources/js/index/app.js

@@ -1115,8 +1115,8 @@ define([ 'angularAMD', 'ui.router', 'ui-bootstrap', 'ngLocal', 'ngTable', 'file-
     /**
      * 公募机构认证第四步
      */
-    app.controller('PublicCertificationStep4Ctrl', ['$scope', '$http', '$rootScope', '$timeout', '$location', 'toaster', 'Organization',
-        function ($scope, $http, $rootScope, $timeout, $location, toaster, Organization) {
+    app.controller('PublicCertificationStep4Ctrl', ['$scope', 'BaseService', '$http', '$rootScope', '$timeout', '$location', 'toaster', 'Organization',
+        function ($scope, BaseService, $http, $rootScope, $timeout, $location, toaster, Organization) {
 
             var orgCopy;
             // 获取当前账户注册机构情况
@@ -1133,16 +1133,10 @@ define([ 'angularAMD', 'ui.router', 'ui-bootstrap', 'ngLocal', 'ngTable', 'file-
                 toaster.pop('error', '注册情况加载失败');
             });
 
-            /*$scope.fileChanged = function(ele, order){
-                if (order == 0) {
-                    //合作商户资料
-                    $scope.material = ele.files[0];
-                } else if (order == 1) {
-                    //结算银行账号证明
-                    $scope.certify = ele.files[0];
-                }
-                $scope.$apply();
-            }*/
+            if (angular.isUndefined($scope.org)) {
+                $scope.org = {};
+            }
+
 
             //建立一个可存取到该file的url
             var getObjectURL = function (file) {
@@ -1230,7 +1224,13 @@ define([ 'angularAMD', 'ui.router', 'ui-bootstrap', 'ngLocal', 'ngTable', 'file-
             };
 
             //提交
-            $scope.saveStep4 = function (org, isDraft) {
+            $scope.saveStep4 = function (org, isDraft, invalid) {
+                if (invalid == true) {
+                    $scope.submited = true;
+                    BaseService.scrollBackToTop();
+                    return;
+                }
+
                 if (orgCopy == org) {
                     $location.path('publicOfferingCertificationStep5');
                 } else {

donate-console/src/main/webapp/resources/view/user/publicOfferingCertification4.html

@@ -518,14 +518,110 @@
         color: #1968f9;
     }
 
-    .lookImg{
-        margin-left: 40px;
-        width: 40px;
-        height: 34px;
-        line-height: 34px;
+    /*上传图片*/
+    .certificate .certificate-item .uploadImage .showImg {
+        position: relative ;
+        width: 160px;
+        height: 160px;
+        margin: 16px 0;
+    }
+    .certificate .certificate-item .uploadImage .showImgs{
+        width: 570px;
+        height: 70px;
+    }
+    .certificate .certificate-item .uploadImage .showImg img{
+        width: 100%;
+        height: 100%;
+    }
+    .certificate .certificate-item .uploadImage .showImg .hover-show {
+        position: absolute ;
+        top: 0;
+        left: -20px;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,.5);
+        display: none;
+    }
+    .certificate .certificate-item .uploadImage .showImg:hover .hover-show {
+        display: block;
+    }
+    .certificate .certificate-item .uploadImage .showImg .hover-show .delete{
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        color: #fff;
+        cursor: pointer;
+    }
+    .certificate .certificate-item .uploadImage .showImg .hover-show .delete em.fa-trash{
+        font-size: 18px;
+        color: #fff;
+    }
+    .certificate .certificate-item .uploadImage .showImg .hover-show a{
+        position: absolute;
+        top: 44%;
+        left: 36%;
+        font-size: 16px;
+        color: #fff;
+    }
+    /*封面图片Banner*/
+    .certificate .certificate-item .uploadImage{
+        position: relative;
+    }
+    .certificate .certificate-item .uploadImage div{
+        height: 28px;
+        line-height: 28px;
+    }
+    .certificate .certificate-item .uploadImage div button{
+        width: 90px;
+        height: 28px;
+        line-height: 28px;
         text-align: center;
-        vertical-align: middle ;
+        font-size: 14px;
+        color: #6d6d6d;
+        background: -webkit-linear-gradient(top, #fff 0%,#dadada 100%);
+        background: -o-linear-gradient(top, #fff 0%,#dadada 100%);
+        background: -ms-linear-gradient(top, #fff 0%,#dadada 100%);
+        background: linear-gradient(to bottom, #fff 0%,#dadada 100%);
         border: 1px solid #dcdcdc;
+        border-radius: 3px;
+    }
+    .certificate .certificate-item .uploadImage div span{
+        margin-left: 20px;
+        font-size: 12px;
+        color: #969696;
+    }
+    .certificate .certificate-item .uploadImage input{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 90px;
+        height: 28px;
+        opacity: 0;
+        outline: none;
+    }
+    .certificate .certificate-item .uploadImage .img-show {
+        margin: 15px 0 25px;
+        width: 160px;
+        height: 160px;
+        line-height: 160px;
+        text-align: center;
+    }
+    .certificate .certificate-item.uploadImage .img-show img{
+        width: 100%;
+        height: 100%;
+    }
+    .certificate .certificate-item .uploadImage .img-shows {
+        margin: 15px 0 30px;
+        width: 480px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+    }
+
+    /*  */
+    button.disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
     }
 </style>
 
@@ -558,63 +654,34 @@
                                 </div>
                                 <div class="certificate-item item clearfix">
                                     <span class="fl name">XXX合作商户资料</span>
-                                    <!--<div class="fl uploadImg">
-                                        <button>上传图片</button>
-                                        <input type="file" ng-multiple="false" onchange='angular.element(this).scope().fileChanged(this, 0)'>
-                                        <a href="">下载模板</a>
-                                        <span class="txt-info">（请根据模板要求填写对应内容）</span>
-                                    </div>
-                                    <img class="fl lookImg" src="{{org.material}}">-->
-
                                     <div class="fl uploadImage">
                                         <div><button>上传图片</button></div>
-                                        <input type="file" accept="image/*" ng-multiple="false" onchange='angular.element(this).scope().fileChanged(this, 0)'>
-                                        <a href="">下载模板</a>
-                                        <div ng-if="null != materialUrl" style="max-height: 100px; max-width: 300px">
-                                            <img style="max-height: 100px; max-width: 100px" src="{{materialUrl}}">
+                                        <input type="file" ng-multiple="false" id="material" accept="image/*" onchange='angular.element(this).scope().fileChanged(this, 0)'>
+                                        <div ng-if="null != materialUrl" class="showImg" style="margin-left: 40px;">
+                                            <img src="{{materialUrl}}">
                                             <span class="hover-show">
-                                                <em style="cursor: pointer;" class="delete" title="删除" ng-click="clearFile('material')">
-                                                    <em class="fa fa-2x fa-trash"></em>
-                                                </em>
-                                                <a ng-click="showImg('material')" title="点击查看大图">
-                                                    <em class="fa fa-search"></em>查看
-                                                </a>
-                                            </span>
+                                                    <em class="delete" title="删除" ng-click="clearFile('material')"><em class="fa fa-2x fa-trash"></em></em>
+                                                    <a ng-click="showImg('material')" title="点击查看大图"><em class="fa fa-search" style="margin-right: 5px;"></em>查看</a>
+                                                </span>
                                         </div>
-
-                                        <input type="text" name="materialUrl" ng-show="false" ng-model="materialUrl" required>
-                                        <span class="error" ng-show="publicOfferingCertification4.$submitted && publicOfferingCertification4.materialUrl.$error.required">*需上传XXX合作商户资料</span>
                                     </div>
+                                    <span class="error" ng-show="submited && materialUrl == null && org.material == null">*请上传XXX合作商户资料</span>
 
                                 </div>
                                 <div class="certificate-item item clearfix">
                                     <span class="fl name">XXX结算银行账号证明</span>
-                                    <!--<div class="fl uploadImg">
-                                        <button>上传图片</button>
-                                        <input type="file" ng-multiple="false" onchange='angular.element(this).scope().fileChanged(this, 1)'>
-                                        <a href="">下载模板</a>
-                                        <span class="txt-info">（请根据模板要求填写对应内容）</span>
-                                    </div>
-                                    <img class="fl lookImg" src="{{org.certify}}">-->
-
-                                    <div class="fl uploadImage">
-                                        <div><button>上传图片</button></div>
-                                        <input type="file" accept="image/*" ng-multiple="false" onchange='angular.element(this).scope().fileChanged(this, 1)'>
-                                        <a href="">下载模板</a>
-                                        <div ng-if="null != certifyUrl" style="max-height: 100px; max-width: 300px">
-                                            <img style="max-height: 100px; max-width: 100px" src="{{certifyUrl}}">
-                                            <span class="hover-show">
-                                                <em style="cursor: pointer;" class="delete" title="删除" ng-click="clearFile('certify')">
-                                                    <em class="fa fa-2x fa-trash"></em>
-                                                </em>
-                                                <a ng-click="showImg('certify')" title="点击查看大图">
-                                                    <em class="fa fa-search"></em>查看
-                                                </a>
-                                            </span>
+                                        <div class="fl uploadImage">
+                                            <div><button>上传图片</button></div>
+                                            <input type="file" ng-multiple="false" id="certify" accept="image/*" onchange='angular.element(this).scope().fileChanged(this, 1)'>
+                                            <div ng-if="null != certifyUrl" class="showImg" style="margin-left: 40px;">
+                                                <img src="{{certifyUrl}}">
+                                                <span class="hover-show">
+                                                    <em class="delete" title="删除" ng-click="clearFile('certify')"><em class="fa fa-2x fa-trash"></em></em>
+                                                    <a ng-click="showImg('certify')" title="点击查看大图"><em class="fa fa-search" style="margin-right: 5px;"></em>查看</a>
+                                                </span>
+                                            </div>
                                         </div>
-
-                                        <input type="text" name="certifyUrl" ng-show="false" ng-model="certifyUrl" required>
-                                        <span class="error" ng-show="publicOfferingCertification4.$submitted && publicOfferingCertification4.certifyUrl.$error.required">*需上传XXX合作商户资料</span>
+                                        <span class="error" ng-show="submited && certifyUrl == null && org.certify == null">*请上传XXX结算银行账号证明</span>
                                     </div>
 
                                 </div>
@@ -624,8 +691,8 @@
                                     <p>2、所有上传图片大小不超过1M支持jpg、png格式。</p>
                                 </div>
                                 <div class="text-left submitBtn" style="margin-top: 35px;margin-left: 375px;">
-                                    <button type="submit" ng-click="saveStep4(org, true)" ng-disabled="publicOfferingCertification4.$invalid">保存，下一步</button>
-                                    <button type="submit" ng-click="saveStep4(org, false)" ng-disabled="publicOfferingCertification4.$invalid">提交</button>
+                                    <button type="submit" ng-click="saveStep4(org, true, publicOfferingCertification4.$invalid || (!materialUrl && !org.material) || (!certifyUrl && !org.certify))">保存，下一步</button>
+                                    <button type="submit" ng-click="saveStep4(org, false, publicOfferingCertification4.$invalid || (!materialUrl && !org.material) || (!certifyUrl && !org.certify))">提交</button>
                                     <a ui-sref="publicOfferingCertificationStep3">返回上一页</a>
                                 </div>
                             </div>