【买卖家发票管理页面开发】

src/main/webapp/resources/css/common.css

@@ -20,7 +20,7 @@ html {
 }
 
 html, body {
-    -ms-overflow-style: scrollbar;
+	-ms-overflow-style: scrollbar;
 }
 
 body,button,input,select,textarea {
@@ -61,8 +61,8 @@ body {
 }
 
 #top .container, #header .container, #nav .container, #content .container, #main .container, #footer .container {
-  width: 1190px;
-  margin: 0 auto;
+	width: 1190px;
+	margin: 0 auto;
 }
 
 .carousel-inner,.carousel-control:hover,.carousel-control:focus {
@@ -207,15 +207,15 @@ body {
 }
 
 .text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .text-link {
 	color: #5e696e;
-  	cursor: pointer;
-  	text-decoration: underline;
+	cursor: pointer;
+	text-decoration: underline;
 }
 
 .text-required {
@@ -264,7 +264,7 @@ input::-moz-placeholder{
 }
 
 .btn-inverse:hover,.btn-inverse:focus,.btn-inverse:active,.btn-inverse.active
-	{
+{
 	color: #fff;
 	background-color: #ef5813;
 }
@@ -277,7 +277,7 @@ input::-moz-placeholder{
 }
 
 .btn-theme:hover,.btn-theme:focus,.btn-theme:active,.btn-theme.active
-	{
+{
 	color: #fff;
 	background-color: #5078cb;
 }
@@ -397,12 +397,12 @@ input.ng-invalid.ng-dirty,textarea.ng-invalid.ng-dirty {
 
 /* modal 模态框 */
 .modal-open {
-    overflow: auto;
+	overflow: auto;
 }
 
 .modal-open .modal {
-    overflow-x: hidden;
-    overflow-y: hidden;
+	overflow-x: hidden;
+	overflow-y: hidden;
 }
 
 
@@ -412,13 +412,13 @@ input.ng-invalid.ng-dirty,textarea.ng-invalid.ng-dirty {
 }
 
 .modal {
-    position: absolute;
-    bottom: auto;
+	position: absolute;
+	bottom: auto;
 }
 
 .modal-backdrop.in {
-    filter: alpha(opacity=30);
-    opacity: .3;
+	filter: alpha(opacity=30);
+	opacity: .3;
 }
 
 /*loading new by suntg*/
@@ -451,7 +451,7 @@ input.ng-invalid.ng-dirty,textarea.ng-invalid.ng-dirty {
 .u-panel {
 	border: 1px solid #1BA5F8;
 	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 .u-panel-heading {
 	height: 57px;
@@ -479,7 +479,7 @@ input.ng-invalid.ng-dirty,textarea.ng-invalid.ng-dirty {
 /* 提示框 */
 .callout {
 	position: absolute;
-	
+
 	border: 1px solid #dddddd;
 	background-color: white;
 	box-shadow: 5px 5px 5px #E2E3E4;
@@ -635,7 +635,7 @@ table th.before-blank:before, table th.before-blank:after {
 .search-check .search button{
 	background: #d3e1fc;
 	border-radius: 0;
-	border: #e2dbdb 1px solid;
+	border: none !important;
 	border-left: none;
 }
 .search-check .search a{
@@ -672,7 +672,7 @@ table th.before-blank:before, table th.before-blank:after {
 .check-input input{
 	display: none;
 }
-.check-input label {
+.check-input label label {
 	width: 15px;
 	height: 15px;
 	display: inline-block;
@@ -710,14 +710,15 @@ div.ng-table-pager a.page-a{
 .down-goods-btn{
 	display: inline-block;
 	width: 94px;
-	height: 34px;
-	line-height: 34px;
+	height: 30px;
+	line-height: 30px;
 	text-align: center;
 	font-size: 14px;
 	background: #5078cb;
 	color: #fff;
 	float: right;
 	margin-right: 15px;
+	margin-top: 2px;
 }
 .down-goods-btn:hover{
 	background: #3f7ae3;
@@ -730,18 +731,37 @@ div.ng-table-pager a.page-a{
 .ng-table-pager .ng-table-pagination li.active a{
 	background: #5078cb !important;
 }
+.ng-table-pager .ng-table-pagination li.active a:hover{
+	color: #fff !important;
+}
 div.ng-table-pager div.page-go-block{
 	margin-top: 0 !important;
 }
-div.ng-table-pager a.page-a{
+.ng-table-pagination .page-number{
+	height: 30px !important;
+	border-bottom-right-radius: 0;
+	border-top-right-radius: 0;
+}
+body div.ng-table-pager input.page-number{
+	width: 40px;
+	height: 30px;
+	padding: 0 !important;
+	line-height: 30px;
+}
+body div.ng-table-pager a.page-a{
 	color: #fff;
 	border-color: #4574E8;
-	padding: 6px 6px;
+	/*padding: 6px 6px !important;*/
 	font-size: 14px;
 	border-top-right-radius: 4px;
 	border-bottom-right-radius: 4px;
 	text-decoration: none;
-	height: 31px;
+	height: 30px !important;
+	display: inline-block;
+	width: 35px;
+	padding: 0;
+	text-align: center;
+	line-height: 30px;
 }
 .ng-table-pagination .page-a:hover{
 	background: none !important;
@@ -782,4 +802,112 @@ div.ng-table-pager a.page-a{
 #left-nav-fragment .user_left ul li a:focus,#left-nav-fragment .user_left p:hover{
 	color: #fff !important;
 }
-input:required:invalid, input:focus:invalid, textarea:required:invalid, textarea:focus:invalid{box-shadow: none;}
+input:required:invalid, input:focus:invalid, textarea:required:invalid, textarea:focus:invalid{box-shadow: none;}
+/*显示多少条下拉*/
+.show-input{
+	margin-right: 40px;
+	width: 116px;
+	display: inline-block;
+}
+.show-input .form-control{
+	width: 45px;
+	height: 22px;
+	line-height: 22px;
+	border-radius: 1px;
+	padding: 0 2px;
+	float: right;
+	margin-left: 5px;
+	font-size: 12px;
+}
+.search-check .more-hover {
+	color: #fff !important;
+}
+.search-check .check{
+	position: relative;
+}
+.search-check .check ul{
+	width: 94px;
+	position: absolute;
+	left: 0;
+	top: 30px;
+	background: #fff;
+	border: #e8e8e8 1px solid;
+	padding: 5px 0;
+	display: none;
+	z-index: 200;
+}
+.search-check .check:hover ul{
+	display: inline-block;
+}
+.search-check .check ul li{
+	width: 100%;
+	line-height: 22px;
+	float: left;
+}
+.search-check .check ul li a{
+	display: inline-block;
+	width: 100%;
+	height: 22px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 22px;
+}
+.red{
+	color: #f00 !important;
+}
+.blue{
+	color: #5078cb !important;
+}
+
+/*全选操作*/
+.operation-btn{
+	margin-right: 15px;
+	margin-top: 4px;
+}
+.operation-btn a{
+	width: 55px;
+	height: 26px;
+	line-height: 26px;
+	display: inline-block;
+	text-align: center;
+	font-size: 14px;
+}
+.operation-btn a.off{
+	background: #b4b5b9;
+	color: #333;
+	margin-right: 10px;
+}
+.operation-btn a.ok{
+	background: #5078cb;
+	color: #fff;
+}
+
+/*改为按钮*/
+.edit-icon button {
+	width: 50px;
+	height: 24px;
+	border: none;
+	color: #fff;
+	float: left;
+}
+.edit-icon button:nth-of-type(2){
+	margin-top: 3px;
+}
+.edit-icon button.ok {
+	background: #33b401;
+}
+.edit-icon button.off {
+	background: #f15601;
+}
+.edit-icon button.edit {
+	background: #5078cb;
+}
+.edit-icon button.up {
+	background: #fff;
+	border: #5078cb 1px solid;
+	color: #5078cb;
+}
+.edit-icon button.up:hover{
+	background: #5078cb;
+	color: #fff;
+}

src/main/webapp/resources/js/usercenter/app.js

@@ -65,6 +65,18 @@ define([ 'angularAMD', 'ui.router', 'ui-bootstrap', 'ngLocal', 'ngTable', 'commo
 			templateUrl: 'static/view/usercenter/forstore/buyer_invoice.html',
 			controller: 'invoiceCtrl',
 			controllerUrl: 'app/controllers/forstore/buyer_invoice_ctrl'
+		})).state('buyer_no_invoice', angularAMD.route({
+			url: '/noInvoice',
+			title: '未开票',
+			templateUrl: 'static/view/usercenter/forstore/buyer_no_invoice.html',
+			controller: 'NoInvoiceCtrl',
+			controllerUrl: 'app/controllers/forstore/buyer_no_invoice_ctrl'
+		})).state('buyer_invoice-record', angularAMD.route({
+			url: '/invoiceRecord',
+			title: '开票记录',
+			templateUrl: 'static/view/usercenter/forstore/buyer_invoice_record.html',
+			controller: 'buyerInvoiceRecordCtrl',
+			controllerUrl: 'app/controllers/forstore/buyer_invoice_record_ctrl'
 		})).state('pay_center', angularAMD.route({
 			url: '/payCenter',
 			templateUrl: 'static/view/usercenter/forstore/pay_center.html',

src/main/webapp/resources/js/usercenter/controllers/forstore/buyer_invoice_ctrl.js

@@ -6,7 +6,7 @@ define(['app/app'], function(app) {
     'use strict';
     app.register.controller('invoiceCtrl', ['$scope', '$rootScope', 'toaster', '$modal', '$q', 'Bill', '$upload', '$http', '$location', '$stateParams', '$state', function($scope, $rootScope, toaster, $modal, $q, Bill, $upload, $http, $location, $stateParams, $state) {
         $rootScope.active = 'buyer_invoice';
-
+        $scope.tab = 'buyer_invoice';
         $scope.invoiceType = 1205;
         $scope.isSpecial = true; //专票，等于true为不存在
         $scope.isNormal = true; //普票，等于true为不存在

src/main/webapp/resources/js/usercenter/controllers/forstore/buyer_invoice_record_ctrl.js

@@ -0,0 +1,7 @@
+define([ 'app/app' ], function(app) {
+    'use strict';
+    app.register.controller('buyerInvoiceRecordCtrl', ['$scope','$rootScope','$modal', function ($scope, $rootScope, $modal) {
+        $scope.tab = 'buyer_invoice-record';
+        // 开票申请
+    }]);
+});

src/main/webapp/resources/js/usercenter/controllers/forstore/buyer_no_invoice_ctrl.js

@@ -0,0 +1,13 @@
+define([ 'app/app' ], function(app) {
+    'use strict';
+    app.register.controller('NoInvoiceCtrl', ['$scope','$rootScope','$modal', function ($scope, $rootScope, $modal) {
+        $scope.tab = 'buyer_no_invoice';
+        // 开票申请
+        $scope.applyInvoice = function () {
+            $modal.open({
+                templateUrl : $rootScope.rootPath + '/static/view/usercenter/modal/apply-invoice.html',
+                size : 'lg'
+            })
+        };
+    }]);
+});

src/main/webapp/resources/js/vendor/app.js

@@ -548,6 +548,12 @@ define([ 'angularAMD', 'ngLocal', 'common/services', 'common/directives', 'commo
 			templateUrl: 'static/view/vendor/forstore/messagePublic.html',
 			controller: 'MessagePublicCtrl',
 			controllerUrl: 'app/controllers/forstore/messagePublicCtrl'
+		})).state('vendorInvoice', angularAMD.route({
+			url: '/vendor_invoice',
+			title:'发票管理',
+			templateUrl: 'static/view/vendor/forstore/vendor-invoice.html',
+			controller: 'vendorInvoiceCtrl',
+			controllerUrl: 'app/controllers/forstore/vendor_invoice_ctrl'
 		}))
 	}]);
 

src/main/webapp/resources/js/vendor/controllers/forstore/vendor_invoice_ctrl.js

@@ -0,0 +1,11 @@
+define([ 'app/app' ], function(app) {
+    'use strict';
+    app.register.controller('vendorInvoiceCtrl', ['$scope','$rootScope','$modal', function ($scope, $rootScope, $modal) {
+        $rootScope.active = 'vendor_invoice';
+        // 切换tab
+        $scope.active = 'apply_invoice';
+        $scope.toggleTab = function (t) {
+            $scope.active = t;
+        };
+    }]);
+});

src/main/webapp/resources/view/usercenter/forstore/buyer_invoice.html

@@ -334,10 +334,9 @@
     <div class="ticket_record oder">
         <div class="oder01">
             <ul>
-                <li class="active"><a>开票信息</a></li>
-                <li class=""><a>未开票</a></li>
-                <li class=""><a>开票记录</a></li>
-                <!--<li><a>开票记录</a></li>-->
+                <li ng-class="{'active': tab == 'buyer_invoice'}"><a ui-sref="buyer_invoice">开票信息</a></li>
+                <li ng-class="{'active': tab == 'buyer_no_invoice'}"><a ui-sref="buyer_no_invoice">未开票</a></li>
+                <li ng-class="{'active': tab == 'buyer_invoice-record'}"><a ui-sref="buyer_invoice-record">开票记录</a></li>
             </ul>
         </div>
         <div style="background: #f5f5f5; height: 11px" ng-if="!changeBillStatusFlag"></div>

src/main/webapp/resources/view/usercenter/forstore/buyer_invoice_record.html

@@ -0,0 +1,208 @@
+<style>
+    /*未开票*/
+    .invoice-record{
+        width: 100%;
+        margin: 0 auto;
+        background: #fff;
+        margin-top: 16px;
+        display: inline-block;
+    }
+    .invoice-record-content{
+        width: 1000px;
+        margin: 0 auto;
+        margin-top: 16px;
+    }
+    .invoice-com-tab{
+        box-sizing: border-box;
+        border: #dae5fd 1px solid;
+        border-bottom: none;
+    }
+    .invoice-com-tab thead{
+        height: 40px;
+        width: 100%;
+        background: #89aefa;
+    }
+    .invoice-com-tab thead>tr th{
+        color: #fff;
+        font-weight: normal;
+        font-size: 14px;
+        text-align: center;
+        border-bottom: none;
+        vertical-align: middle;
+    }
+    .invoice-com-tab tbody tr:hover{
+        background: #f1f5ff;
+    }
+    .invoice-com-tab tbody>tr>td{
+        font-size: 14px;
+        color: #666;
+        border-bottom: 1px solid #dae5fd;
+        border-right: 1px solid #dae5fd;
+        height: 50px;
+        vertical-align: middle;
+        text-align: center;
+    }
+    .invoice-com-tab thead>tr>th.select-line{
+        padding: 8px 0;
+    }
+    .invoice-com-tab thead>tr>th .form-control{
+        color: #666;
+        padding: 0;
+        height: 24px;
+        width: 52px;
+        opacity: 1;
+        border: #fff 1px solid;
+        border-radius: 2px;
+        position: relative;
+        left: 10px;
+    }
+    /*无记录与记录条数*/
+    .table>tbody>tr.record-num td{
+        padding: 0;
+        border: none;
+        text-align: right;
+        font-size: 12px;
+        padding-right: 10px;
+        border-right: #fff 1px solid;
+        border-left: #fff 1px solid;
+    }
+    .table>tbody>tr.record-num:hover{
+        background: none;
+    }
+    .table>tbody+tbody{
+        border-top: 0;
+    }
+    .table>tbody+tbody.no-record-list tr td{
+        border: none;
+    }
+    .blue{
+        color: #5078cb !important;
+    }
+    .select-adder {
+        background: url(static/img/user/images/xiala.png) right no-repeat #fff !important;
+        background-position-x: 116% !important;
+    }
+    .invoice-search{
+        width: 100%;
+        margin: 0 auto;
+        background: #f5f8fe;
+        height: 40px;
+        margin-top: 5px;
+    }
+    .invoice-search div.fr{
+        width: 388px;
+        margin-top: 3px;
+        margin-right: 14px;
+    }
+    .invoice-search input.form-control{
+        width: 330px;
+        height: 32px;
+        line-height: 58px;
+        font-size: 12px;
+        border-radius: 0;
+        border: #5078cb 1px solid;
+        background: #fff;
+        float: left;
+    }
+    .invoice-search button{
+        border: none;
+        width: 58px;
+        height: 32px;
+        background: #5078cb;
+        text-align: center;
+        font-size: 14px;
+        color: #fff;
+        float: right;
+    }
+</style>
+<!--右侧主体部分-->
+<div class="user_right fr u_c_invoice">
+    <!--开票记录-->
+    <div class="ticket_record oder">
+        <div class="oder01">
+            <ul>
+                <li ng-class="{'active': tab == 'buyer_invoice'}"><a ui-sref="buyer_invoice">开票信息</a></li>
+                <li ng-class="{'active': tab == 'buyer_no_invoice'}"><a ui-sref="buyer_no_invoice">未开票</a></li>
+                <li ng-class="{'active': tab == 'buyer_invoice-record'}"><a ui-sref="buyer_invoice-record">开票记录</a></li>
+            </ul>
+        </div>
+        <!--开票记录-->
+        <div class="invoice-record">
+            <div class="invoice-search">
+                <div class="fr">
+                    <input type="text" class="form-control" placeholder="商家名称/订单号/发票抬头/收票人/联系电话"/>
+                    <button>搜索</button>
+                </div>
+            </div>
+            <div class="invoice-record-content">
+                <table class="invoice-com-tab table">
+                    <thead>
+                        <tr>
+                            <th width="80">申请时间</th>
+                            <th width="130">商家名称</th>
+                            <th width="80">订单号</th>
+                            <th width="100">可开票金额(￥)</th>
+                            <th width="55" class="select-line">
+                                <select class="select-adder form-control">
+                                    <option value="1">状态</option>
+                                    <option value="2">普票</option>
+                                    <option value="3">专票</option>
+                                </select>
+                            </th>
+                            <th width="100">发票抬头</th>
+                            <th width="50">收票人</th>
+                            <th width="55">联系电话</th>
+                            <th width="55">
+                                <select class="select-adder form-control" style="width: 55px;">
+                                    <option value="1">状态</option>
+                                    <option value="2">待开票</option>
+                                    <option value="3">已开票</option>
+                                </select>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>2017-08-28</td>
+                            <td>深圳市优软商城科技</td>
+                            <td>131364634534</td>
+                            <td>131313</td>
+                            <td>普票</td>
+                            <td>深圳市优软商城</td>
+                            <td>哈哈哈</td>
+                            <td>13135015772</td>
+                            <td>
+                                <span class="blue">待开票</span>
+                                <!--<span>已开票</span>-->
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>2017-08-28</td>
+                            <td>深圳市优软商城科技</td>
+                            <td>131364634534</td>
+                            <td>131313</td>
+                            <td>普票</td>
+                            <td>深圳市优软商城</td>
+                            <td>哈哈哈</td>
+                            <td>13135015772</td>
+                            <td>
+                                <!--<span class="blue">待开票</span>-->
+                                <span>已开票</span>
+                            </td>
+                        </tr>
+                        <tr class="record-num">
+                            <td colspan="10">
+                                <span class="count-tip">显示 1-<span>10</span> 条，共 <em>2506</em> 条</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <!--<tbody class="no-record-list">-->
+                    <!--<tr class="height200">-->
+                    <!--<td colspan="10"><img src="static/img/all/empty-cart.png"><span>暂无未开票信息！</span></td>-->
+                    <!--</tr>-->
+                    <!--</tbody>-->
+                </table>
+            </div>
+        </div>
+    </div>
+</div>

src/main/webapp/resources/view/usercenter/forstore/buyer_no_invoice.html

@@ -0,0 +1,194 @@
+<style>
+/*未开票*/
+    .no-invoice{
+        width: 100%;
+        margin: 0 auto;
+        background: #fff;
+        margin-top: 16px;
+        display: inline-block;
+    }
+    .no-invoice-tip{
+        width: 1000px;
+        height: 142px;
+        margin: 0 auto;
+        background: #f5f8fe;
+        padding: 8px 30px;
+        margin-top: 20px;
+    }
+    .no-invoice-tip p{
+        font-size: 12px;
+        color: #666;
+        line-height: 25px;
+    }
+    .no-invoice-tip p:nth-of-type(2){
+        color: #333;
+    }
+.no-invoice-tip p strong{
+    font-weight: bold;
+}
+.no-invoice-content{
+    width: 1000px;
+    margin: 0 auto;
+    margin-top: 16px;
+}
+.invoice-com-tab{
+    box-sizing: border-box;
+    border: #dae5fd 1px solid;
+    border-bottom: none;
+}
+.invoice-com-tab thead{
+    height: 40px;
+    width: 100%;
+    background: #89aefa;
+}
+.invoice-com-tab thead>tr th{
+    color: #fff;
+    font-weight: normal;
+    font-size: 14px;
+    text-align: center;
+    border-bottom: none;
+    vertical-align: middle;
+}
+.invoice-com-tab tbody tr:hover{
+    background: #f1f5ff;
+}
+.invoice-com-tab tbody>tr>td{
+    font-size: 14px;
+    color: #666;
+    border-bottom: 1px solid #dae5fd;
+    border-right: 1px solid #dae5fd;
+    height: 40px;
+    vertical-align: middle;
+    text-align: center;
+}
+/*无记录与记录条数*/
+.table>tbody>tr.record-num td{
+    padding: 0;
+    border: none;
+    text-align: right;
+    font-size: 12px;
+    padding-right: 10px;
+    border-right: #fff 1px solid;
+    border-left: #fff 1px solid;
+}
+.table>tbody>tr.record-num:hover{
+    background: none;
+}
+.table>tbody+tbody{
+    border-top: 0;
+}
+.table>tbody+tbody.no-record-list tr td{
+    border: none;
+}
+    /*全选*/
+.table .check-act input{
+    display: none;
+}
+.table .check-act label{
+    width: 12px;
+    height: 12px;
+    display: inline-block;
+    background: url(static/img/icon/check-rule.png) no-repeat;
+    position: relative;
+    top: 7px;
+}
+.table .check-act label{
+    background-position: -48px 0;
+}
+.table .check-act input:checked + label{
+    background-position: -31px 0;
+}
+.apply-btn{
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+    margin: 30px 0;
+}
+.apply-btn button{
+    width: 80px;
+    height: 26px;
+    line-height: 26px;
+    text-align: center;
+    font-size: 14px;
+    color: #fff;
+    background: #5078cb;
+    border: none;
+}
+</style>
+<!--右侧主体部分-->
+<div class="user_right fr u_c_invoice">
+    <!--开票记录-->
+    <div class="ticket_record oder">
+        <div class="oder01">
+            <ul>
+                <li ng-class="{'active': tab == 'buyer_invoice'}"><a ui-sref="buyer_invoice">开票信息</a></li>
+                <li ng-class="{'active': tab == 'buyer_no_invoice'}"><a ui-sref="buyer_no_invoice">未开票</a></li>
+                <li ng-class="{'active': tab == 'buyer_invoice-record'}"><a ui-sref="buyer_invoice-record">开票记录</a></li>
+            </ul>
+        </div>
+        <!--未开票-->
+        <div class="no-invoice">
+            <div class="no-invoice-tip">
+                <p>温馨提示：</p>
+                <p>1、申请发票时默认将同一店铺的订单合并开一张发票，如需分开开票，请分别提交申请 ；</p>
+                <p>2、您只能对订单状态为<strong>“交易成功”</strong>，且已不能再发起售后的人民币交易订单进行补开发票；</p>
+                <p>3、发票金额为产品总金额且不含运费、积分、优惠券、促销折扣等金额 ；</p>
+                <p>4、发票邮寄费用将由卖家承担。</p>
+            </div>
+            <div class="no-invoice-content">
+                <table class="invoice-com-tab table">
+                    <thead>
+                        <tr>
+                            <th width="80">
+                                <lable class="check-act">
+                                    <input type="checkbox" id="checkAll" />
+                                    <label for="checkAll"></label>
+                                </lable>
+                                全选</th>
+                            <th width="120">商家名称</th>
+                            <th width="250">订单号</th>
+                            <th width="200">可开票金额(￥)</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <lable class="check-act">
+                                    <input type="checkbox" id="1" />
+                                    <label for="1"></label>
+                                </lable>
+                            </td>
+                            <td>深圳市优软商城科技有限公司</td>
+                            <td>131364634534</td>
+                            <td>131313</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <lable class="check-act">
+                                    <input type="checkbox" id="2" />
+                                    <label for="2"></label>
+                                </lable>
+                            </td>
+                            <td>深圳市优软商城科技有限公司</td>
+                            <td>131364634534</td>
+                            <td>131313</td>
+                        </tr>
+                        <tr class="record-num">
+                            <td colspan="4">
+                                <span class="count-tip">显示 1-<span>10</span> 条，共 <em>2506</em> 条</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <!--<tbody class="no-record-list">-->
+                        <!--<tr class="height200">-->
+                            <!--<td colspan="10"><img src="static/img/all/empty-cart.png"><span>暂无未开票信息！</span></td>-->
+                        <!--</tr>-->
+                    <!--</tbody>-->
+                </table>
+            </div>
+            <div class="apply-btn">
+                <button ng-click="applyInvoice()">申请开票</button>
+            </div>
+        </div>
+    </div>
+</div>

src/main/webapp/resources/view/usercenter/modal/apply-invoice.html

@@ -0,0 +1,237 @@
+<style>
+.modal-dialog{
+    width: 590px;
+    border-radius: 5px;
+    overflow: hidden;
+}
+.modal-content{
+    border: none;
+}
+.modal-body{
+    padding: 0;
+}
+.apply-content{
+    width: 100%;
+    margin: 0 auto;
+    background: #fff;
+    padding-bottom: 22px;
+}
+.apply-content .head{
+    width: 100%;
+    height: 30px;
+    margin: 0 auto;
+    line-height: 30px;
+    color: #333;
+    position: relative;
+    text-align: center;
+    font-weight: bold;
+    font-size: 14px;
+}
+.apply-content .head a{
+    position: absolute;
+    right: 6px;
+    top: -2px;
+    font-size: 16px;
+    color: #b7b4b4;
+    font-weight: bold;
+}
+.apply-content .table{
+    width: 100%;
+    margin: 0 auto;
+    max-height: 130px;
+    overflow-y: auto;
+}
+.apply-content .table .row{
+    height: 26px;
+    line-height: 26px;
+    font-size: 12px;
+    color: #666;
+    background: #f8f8f8;
+    margin: 0;
+}
+.apply-content .table .row:nth-child(even){
+    background: #f2f2f2;
+}
+.apply-content .table .row .col-md-8{
+    padding-left: 54px;
+}
+.apply-content .table .row .col-md-4{
+    padding-left: 15px;
+}
+.apply-content .table .row em{
+    font-weight: bold;
+}
+.apply-content .count{
+    width: 100%;
+    margin: 0 auto;
+    height: 35px;
+    line-height: 35px;
+    background: #f2f2f2;
+    text-align: right;
+    padding-right: 20px;
+    font-size: 14px;
+}
+.apply-content .count em{
+    margin: 0 3px;
+}
+.apply-content .count .red{
+    font-weight: bold;
+}
+/*全选*/
+.apply-content .check-act input{
+    display: none;
+}
+.apply-content .check-act label{
+    width: 12px;
+    height: 12px;
+    display: inline-block;
+    background: url(static/img/icon/check-rule.png) no-repeat;
+    position: relative;
+    top: 0;
+}
+.apply-content .check-act label{
+    background-position: 0 0;
+}
+.apply-content .check-act input:checked + label{
+    background-position: -15px 0;
+}
+.apply-list{
+    margin-top: 10px;
+}
+.apply-list .row{
+    font-size: 14px;
+    color: #666;
+    height: 26px;
+    line-height: 26px;
+}
+.apply-list .row .col-md-4{
+    text-align: right;
+    width: 140px;
+}
+.apply-list .row .col-md-8{
+    margin-left: 8px;
+}
+.deal-btn{
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+    margin-top: 10px;
+}
+.deal-btn a{
+    width: 60px;
+    height: 26px;
+    display: inline-block;
+    text-align: center;
+    line-height: 26px;
+    font-size: 14px;
+}
+.deal-btn a.off{
+    background: #cdcccc;
+    color: #666;
+    margin-right: 8px;
+}
+.deal-btn a.ok{
+    background: #5078cb;
+    color: #fff;
+}
+.deal-btn a:hover{
+    background: #337ab7;
+    color: #fff;
+}
+.apply-content label{
+        margin-bottom: 0;
+    }
+</style>
+<div class="modal-body">
+    <div class="apply-content">
+        <div class="head">申请开票<a ng-click="">&times;</a></div>
+        <div class="table">
+            <div class="row">
+                <div class="col-md-8">深圳市哈哈哈有限公司</div>
+                <div class="col-md-4">金额： <em>￥223569</em> </div>
+            </div>
+            <div class="row">
+                <div class="col-md-8">深圳市优软商城科技有限公司</div>
+                <div class="col-md-4">金额： <em>￥223569</em> </div>
+            </div>
+            <div class="row">
+                <div class="col-md-8">深圳市优软商城科技有限公司</div>
+                <div class="col-md-4">金额： <em>￥223569</em> </div>
+            </div>
+            <div class="row">
+                <div class="col-md-8">深圳市优软商城科技有限公司</div>
+                <div class="col-md-4">金额： <em>￥223569</em> </div>
+            </div>
+            <div class="row">
+                <div class="col-md-8">深圳市优软商城科技有限公司</div>
+                <div class="col-md-4">金额： <em>￥223569</em> </div>
+            </div>
+            <div class="row">
+                <div class="col-md-8">深圳市哈哈哈有限公司</div>
+                <div class="col-md-4">金额： <em>￥223569</em> </div>
+            </div>
+        </div>
+        <div class="count">共<em class="blue">5</em>个商家，<em class="blue">15</em>个订单，发票金额总计：<em class="red">￥5689</em>元</div>
+        <div class="apply-list">
+            <div class="row">
+                <div class="col-md-4">发票类型</div>
+                <div class="col-md-8">
+                    <label class="check-act">
+                        <input type="radio" name="1" id="1206"/>
+                        <label for="1206"></label>
+                        增值税普票（不可抵扣）
+                    </label>
+                    <label class="check-act" style="margin-left: 35px;">
+                        <input type="radio" name="1" id="1207"/>
+                        <label for="1207"></label>
+                        增值税专票（可抵扣）
+                    </label>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">发票抬头</div>
+                <div class="col-md-8">深圳优软科技</div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">发票抬头</div>
+                <div class="col-md-8">深圳优软科技</div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">单位地址</div>
+                <div class="col-md-8">科技园科技五路5号英唐大厦6楼</div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">单位电话</div>
+                <div class="col-md-8">0755-56626666</div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">税务登记号</div>
+                <div class="col-md-8">2346463263653</div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">开户银行</div>
+                <div class="col-md-8">招商银行南山支行</div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">开户银行账户</div>
+                <div class="col-md-8">4564634131313</div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">收票人</div>
+                <div class="col-md-8">哈哈哈</div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">联系电话</div>
+                <div class="col-md-8">4564634131313</div>
+            </div>
+            <div class="row">
+                <div class="col-md-4">收票地址</div>
+                <div class="col-md-8">广东省&nbsp;&nbsp;深圳市&nbsp;&nbsp;南山区&nbsp;&nbsp;科技园科技五路5号英唐大厦6楼</div>
+            </div>
+        </div>
+        <div class="deal-btn">
+            <a ng-click="" class="off">取消</a>
+            <a href="" class="ok">确认</a>
+        </div>
+    </div>
+</div>

src/main/webapp/resources/view/vendor/forstore/vendor-invoice.html

@@ -0,0 +1,421 @@
+<style>
+    /*未开票*/
+    .vendor-invoice{
+        width: 100%;
+        margin: 0 auto;
+        background: #fff;
+        display: inline-block;
+    }
+    .vendor-invoice-tip{
+        width: 1000px;
+        height: 120px;
+        margin: 0 auto;
+        background: #f5f8fe;
+        padding: 8px 30px;
+        margin-top: 20px;
+    }
+    .vendor-invoice-tip p{
+        font-size: 12px;
+        color: #666;
+        line-height: 25px;
+    }
+    .vendor-invoice-tip p:nth-of-type(2){
+        color: #333;
+    }
+    .vendor-invoice-tip p strong{
+        font-weight: bold;
+    }
+    .vendor-invoice-content{
+        width: 1000px;
+        margin: 0 auto;
+        margin-top: 16px;
+    }
+    .invoice-com-tab{
+        box-sizing: border-box;
+        border: #dae5fd 1px solid;
+        border-bottom: none;
+    }
+    .invoice-com-tab thead{
+        height: 40px;
+        width: 100%;
+        background: #89aefa;
+    }
+    .invoice-com-tab thead>tr th{
+        color: #fff;
+        font-weight: normal;
+        font-size: 14px;
+        text-align: center;
+        border-bottom: none;
+        vertical-align: middle;
+    }
+    .invoice-com-tab tbody tr:hover{
+        background: #f1f5ff;
+    }
+    .invoice-com-tab tbody>tr>td{
+        font-size: 14px;
+        color: #666;
+        border-bottom: 1px solid #dae5fd;
+        border-right: 1px solid #dae5fd;
+        height: 40px;
+        vertical-align: middle;
+        text-align: center;
+    }
+    /*无记录与记录条数*/
+    .table>tbody>tr.record-num td{
+        padding: 0;
+        border: none;
+        text-align: right;
+        font-size: 12px;
+        padding-right: 10px;
+        border-right: #fff 1px solid;
+        border-left: #fff 1px solid;
+    }
+    .table>tbody>tr.record-num:hover{
+        background: none;
+    }
+    .table>tbody+tbody{
+        border-top: 0;
+    }
+    .table>tbody+tbody.no-record-list tr td{
+        border: none;
+    }
+    /*全选*/
+    .table .check-act input{
+        display: none;
+    }
+    .table .check-act label{
+        width: 12px;
+        height: 12px;
+        display: inline-block;
+        background: url(static/img/icon/check-rule.png) no-repeat;
+        position: relative;
+        top: 2px;
+    }
+    .table .check-act label{
+        background-position: -48px 0;
+    }
+    .table .check-act input:checked + label{
+        background-position: -31px 0;
+    }
+    .apply-btn{
+        width: 100%;
+        margin: 0 auto;
+        text-align: center;
+        margin: 30px 0;
+    }
+    .apply-btn button{
+        width: 80px;
+        height: 26px;
+        line-height: 26px;
+        text-align: center;
+        font-size: 14px;
+        color: #fff;
+        background: #5078cb;
+        border: none;
+    }
+    .invoice-com-tab thead>tr>th.select-line{
+        padding: 8px 0;
+    }
+    .invoice-com-tab thead>tr>th .form-control{
+        color: #666;
+        padding: 0;
+        height: 24px;
+        width: 52px;
+        opacity: 1;
+        border: #fff 1px solid;
+        border-radius: 2px;
+        position: relative;
+        left: 10px;
+    }
+    .invoice-com-tab thead>tr th,.invoice-com-tab tbody>tr td{
+        padding: 8px 3px;
+    }
+    .invoice-com-tab tbody>tr td.address{
+        text-align: left;
+    }
+    .invoice-com-tab tbody>tr td.address p{
+        font-size: 14px;
+    }
+    /*操作确认框*/
+    .com-del-box{
+        position: fixed;
+        z-index: 22;
+        height: 152px;
+        opacity: 1;
+        background-color: white;
+        width: 310px;
+        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+        box-shadow: 0 5px 15px rgba(0,0,0,.5);
+        margin: -155px 0 0 -75px;
+        top: 55%;
+        left: 50%;
+    }
+    .com-del-box .title{
+        height: 30px;
+        background-color: #5078cb;
+        text-align: right;
+        padding-right: 15px;
+        line-height: 30px;
+    }
+    .com-del-box .title a{
+        color: white;
+        font-size: 16px;
+    }
+    .com-del-box .content{
+        width: 100%;
+        text-align: center;
+        margin: 0 auto;
+    }
+    .com-del-box .content p{
+        line-height: 23px;
+        font-size: 14px;
+        padding-top: 15px;
+    }
+    .com-del-box .content p i{
+        color: #5078cb;
+        font-size: 18px;
+        margin-right: 5px;
+        position: relative;
+        top: 2px;
+    }
+    .com-del-box .content div{
+        width: 100%;
+        text-align: center;
+        margin: 0 auto;
+        margin-top: 15px;
+    }
+    .com-del-box .content div a{
+        width: 55px;
+        height: 26px;
+        line-height: 26px;
+        display: inline-block;
+        text-align: center;
+        font-size: 14px;
+    }
+    .com-del-box .content div a:first-child{
+        background: #b4b5b9;
+        color: #333;
+        margin-right: 10px;
+    }
+    .com-del-box .content div a:last-child{
+        background: #5078cb;
+        color: #fff;
+    }
+    .com-del-box .content div a:hover{
+        background: #3f7ae3;
+        color: #fff;
+    }
+    .invoice-search{
+        width: 100%;
+        margin: 0 auto;
+        background: #f5f8fe;
+        height: 40px;
+        margin-top: 5px;
+    }
+    .invoice-search div.fr{
+        width: 388px;
+        margin-top: 3px;
+        margin-right: 14px;
+    }
+    .invoice-search input.form-control{
+        width: 330px;
+        height: 32px;
+        line-height: 58px;
+        font-size: 12px;
+        border-radius: 0;
+        border: #5078cb 1px solid;
+        background: #fff;
+        float: left;
+    }
+    .invoice-search button{
+        border: none;
+        width: 58px;
+        height: 32px;
+        background: #5078cb;
+        text-align: center;
+        font-size: 14px;
+        color: #fff;
+        float: right;
+    }
+</style>
+<div class="count user_right fr">
+    <div class="count_center">
+        <div class="com_tab">
+            <ul class="fl">
+                <li ng-class="{'active': active == 'apply_invoice'}" ng-click="toggleTab('apply_invoice')"><a>开票申请</a></li>
+                <li ng-class="{'active': active == 'apply_record'}" ng-click="toggleTab('apply_record')"><a>开票记录</a></li>
+            </ul>
+        </div>
+    </div>
+    <!--申请开票-->
+    <div class="vendor-invoice" ng-if="active == 'apply_invoice'">
+        <div class="vendor-invoice-tip">
+            <p>温馨提示：</p>
+            <P>1、买家只能对订单状态为<strong>“交易成功”</strong>，且已不能再发起售后的人民币交易订单进行补开发票。</P>
+            <p>2、发票金额为产品总金额且不含运费、积分、优惠券、促销折扣等金额。</p>
+            <p>3、发票邮寄费用将有卖家承担。</p>
+        </div>
+        <div class="vendor-invoice-content">
+            <table class="invoice-com-tab table">
+                <thead>
+                <tr>
+                    <th width="45">
+                        <lable class="check-act">
+                            <input type="checkbox" id="checkAll" />
+                            <label for="checkAll"></label>
+                        </lable>
+                        全选</th>
+                    <th width="70">申请时间</th>
+                    <th width="90">订单号</th>
+                    <th width="90">可开票金额(￥)</th>
+                    <th width="55" class="select-line">
+                        <select class="select-adder form-control">
+                            <option value="1">状态</option>
+                            <option value="2">普票</option>
+                            <option value="3">专票</option>
+                        </select>
+                    </th>
+                    <th width="120">发票抬头</th>
+                    <th width="50">收票人</th>
+                    <th width="160">收票地址</th>
+                    <th width="50">联系电话</th>
+                </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <lable class="check-act">
+                                <input type="checkbox" id="1" />
+                                <label for="1"></label>
+                            </lable>
+                        </td>
+                        <td>2017-08-28</td>
+                        <td>131364634534</td>
+                        <td>131313</td>
+                        <td>普票</td>
+                        <td>深圳市优软商城科技技</td>
+                        <td>哦哦哦</td>
+                        <td class="address">
+                            <p>广东省&nbsp;&nbsp;深圳市&nbsp;&nbsp;南山区</p>
+                            <p>科技园科技五路5号英唐大厦6楼</p>
+                        </td>
+                        <td>13135015772</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <lable class="check-act">
+                                <input type="checkbox" id="1" />
+                                <label for="1"></label>
+                            </lable>
+                        </td>
+                        <td>2017-08-28</td>
+                        <td>131364634534</td>
+                        <td>131313</td>
+                        <td>普票</td>
+                        <td>深圳市优软商城科技技</td>
+                        <td>哦哦哦</td>
+                        <td class="address">
+                            <p>广东省&nbsp;&nbsp;深圳市&nbsp;&nbsp;南山区</p>
+                            <p>科技园科技五路5号英唐大厦6楼</p>
+                        </td>
+                        <td>13135015772</td>
+                    </tr>
+                    <tr class="record-num">
+                        <td colspan="9">
+                            <span class="count-tip">显示 1-<span>10</span> 条，共<em> 2506 </em>条</span>
+                        </td>
+                    </tr>
+                </tbody>
+                <!--<tbody class="no-record-list">-->
+                <!--<tr class="height200">-->
+                <!--<td colspan="10"><img src="static/img/all/empty-cart.png"><span>暂无未开票信息！</span></td>-->
+                <!--</tr>-->
+                <!--</tbody>-->
+            </table>
+        </div>
+        <div class="apply-btn">
+            <button ng-click="">确认开票</button>
+        </div>
+    </div>
+    <!--开票记录-->
+    <div class="vendor-invoice" ng-if="active == 'apply_record'">
+        <div class="invoice-search">
+            <div class="fr">
+                <input type="text" class="form-control" placeholder="商家名称/订单号/发票抬头/收票人/联系电话"/>
+                <button>搜索</button>
+            </div>
+        </div>
+        <div class="vendor-invoice-content">
+            <table class="invoice-com-tab table">
+                <thead>
+                    <tr>
+                        <th width="70">申请时间</th>
+                        <th width="90">订单号</th>
+                        <th width="90">可开票金额(￥)</th>
+                        <th width="55" class="select-line">
+                            <select class="select-adder form-control">
+                                <option value="1">状态</option>
+                                <option value="2">普票</option>
+                                <option value="3">专票</option>
+                            </select>
+                        </th>
+                        <th width="120">发票抬头</th>
+                        <th width="50">收票人</th>
+                        <th width="170">收票地址</th>
+                        <th width="50">联系电话</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>2017-08-28</td>
+                        <td>131364634534</td>
+                        <td>131313</td>
+                        <td>普票</td>
+                        <td>深圳市优软商城科技技</td>
+                        <td>哦哦哦</td>
+                        <td class="address">
+                            <p>广东省&nbsp;&nbsp;深圳市&nbsp;&nbsp;南山区</p>
+                            <p>科技园科技五路5号英唐大厦6楼</p>
+                        </td>
+                        <td>13135015772</td>
+                    </tr>
+                    <tr>
+                        <td>2017-08-28</td>
+                        <td>131364634534</td>
+                        <td>131313</td>
+                        <td>普票</td>
+                        <td>深圳市优软商城科技技</td>
+                        <td>哦哦哦</td>
+                        <td class="address">
+                            <p>广东省&nbsp;&nbsp;深圳市&nbsp;&nbsp;南山区</p>
+                            <p>科技园科技五路5号英唐大厦6楼</p>
+                        </td>
+                        <td>13135015772</td>
+                    </tr>
+                <tr class="record-num">
+                    <td colspan="8">
+                        <span class="count-tip">显示 1-<span>10</span> 条，共<em> 2506 </em>条</span>
+                    </td>
+                </tr>
+                </tbody>
+                <!--<tbody class="no-record-list">-->
+                <!--<tr class="height200">-->
+                <!--<td colspan="8"><img src="static/img/all/empty-cart.png"><span>暂无未开票信息！</span></td>-->
+                <!--</tr>-->
+                <!--</tbody>-->
+            </table>
+        </div>
+    </div>
+</div>
+
+<!--操作框-->
+<div class="com-del-box" style="display: none;">
+    <div class="title">
+        <a ng-click=""><i class="fa fa-close fa-lg"></i></a>
+    </div>
+    <div class="content">
+        <p><i class="fa fa-exclamation-circle"></i>点击【确认】系统将通知买家发票
+            <br/>已寄出，否则请点击【取消】</p>
+        <div><a ng-click="">取消</a><a ng-click="">确认</a></div>
+    </div>
+</div>

src/main/webapp/resources/view/vendor/left_nav.html

@@ -23,6 +23,7 @@
 	<ul>
 		<li ng-class="{'active' : active == 'vendor_order'}"><a href="javascript:void(0)" ui-sref="vendor_order">订单中心</a></li>
 		<!--<li ng-class="{'active' : active == 'vendor_logistics'}"><a href="javascript:void(0)" ui-sref="vendor_deliveryRule">物流管理</a></li>-->
+		<li ng-class="{'active' : active == 'vendor_invoice'}"><a href="javascript:void(0)" ui-sref="vendorInvoice">发票管理</a></li>
 		<li ng-class="{'active' : active == 'vendor_logistics'}"><a href="javascript:void(0)" ui-sref="vendor_logistics">物流管理</a></li>
 		<li ng-class="{'active' : active == 'pay_center'}"><a href="javascript:void(0)" ui-sref="pay_center">结算中心</a></li>
 		<li ng-class="{'active' : active == 'vendor_brand_apply'}"><a href="javascript:void(0)" ui-sref="vendor_brand_apply">品牌申请</a></li>