卖家求购询价页面及模态框创建

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

@@ -1,5 +1,5 @@
 define(['app/app'], function(app) {
-    app.register.controller('seekPurchaseCtrl', ['$scope', '$rootScope', '$stateParams','$state', 'toaster','Rate','seekPurchase','BaseService','ngTableParams', function ($scope, $rootScope, $stateParams, $state, toaster, Rate, seekPurchase, BaseService, ngTableParams) {
+    app.register.controller('seekPurchaseCtrl', ['$scope', '$rootScope', '$stateParams', '$state', 'toaster', 'seekPurchase', 'BaseService', 'ngTableParams', '$modal', function ($scope, $rootScope, $stateParams, $state, toaster, seekPurchase, BaseService, ngTableParams, $modal) {
         $scope.title = '求购询价';
         $rootScope.active = 'vendor_seek_purchase';
         $scope.seekPurchaseRate = {};
@@ -81,5 +81,40 @@ define(['app/app'], function(app) {
         $scope.orderTableParams.page(1);
         $scope.orderTableParams.reload();
       };
+
+      /*获取时间戳代表的天数*/
+      $scope.getDay = function (timeStamp) {
+        return Math.floor(timeStamp / (1000 * 60 * 60 * 24));
+      }
+      /*获取时间戳代表的小时*/
+      $scope.getHours = function (timeStamp) {
+        return Math.floor((timeStamp / (1000 * 60 * 60)) % 24);
+      }
+
+      /*设置列表状态*/
+      $scope.setSeekActive = function (seek, flag) {
+        seek.$active = flag;
+      }
+
+      /*上架模态框*/
+      $scope.goGrounding = function (seek) {
+        $modal.open({
+          templateUrl : 'static/view/vendor/modal/groundingSeek.html',
+          controller : 'groundingSeekCtrl',
+          size : 'lg',
+          resolve : {
+            seek : function() {
+              return angular.copy(seek);
+            }
+          }
+        });
+      }
+
     }]);
+  app.register.controller('groundingSeekCtrl', ['$scope', 'toaster', 'seek', '$modalInstance', function ($scope, toaster, seek, $modalInstance) {
+    $scope.seek = seek;
+    $scope.cancel = function () {
+      $modalInstance.dismiss();
+    }
+  }]);
 });

src/main/webapp/resources/view/vendor/forstore/seekPurchase.html

@@ -202,12 +202,18 @@
         height: 21px;
         line-height: 21px;
     }
-    .seek-purchase .seek-purchase-content table tbody tr.default-row td.unit-price,
+    .seek-purchase .seek-purchase-content table tbody tr.default-row td.user-name >div {
+        width: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
     .seek-purchase .seek-purchase-content table tbody tr.default-row td.left-time span{
         color: #f62d37;
     }
     .seek-purchase .seek-purchase-content table tbody tr.default-row td.unit-price span {
         font-size: 12px;
+        color: #f62d37;
     }
     .seek-purchase .seek-purchase-content table tbody tr.default-row td.operate {
         font-size: 12px;
@@ -232,11 +238,15 @@
         display: block;
     }
     .seek-purchase .seek-purchase-content table tbody tr.expand-row{
+        display: none;
         height: 40px;
         line-height: 40px;
         background: #fffbf0;
         border: 1px solid #dae5fd;
     }
+    .seek-purchase .seek-purchase-content table tbody tr.default-row:hover + tr.expand-row {
+        display: table-row;
+    }
     .seek-purchase .seek-purchase-content table tbody tr.expand-row td {
         font-size: 14px;
         text-align: center;
@@ -248,6 +258,90 @@
     .seek-purchase .seek-purchase-content table tbody tr.expand-row td span {
         color: #f62d37;
     }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price {
+        display: none;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div {
+        background-color: #e7eef9;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div {
+        display: inline-block;
+        position: relative;
+        height: 50px;
+        line-height: 50px;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(1) {
+        width: 189px;
+        background: #adcbfc;
+        text-align: center;
+        margin-right: 14px;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(2) {
+        margin-right: 30px;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(2) input {
+        display: inline-block;
+        width: 118px;
+        height: 26px;
+        border: 1px solid #5392f9;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(2) div {
+        position: absolute;
+        top: 14px;
+        left: 33px;
+        width: 32px;
+        height: 25px;
+        line-height: 25px;
+        text-align: center;
+        color: #5392f9;
+        border-right: 1px solid #5392f9;
+        border-bottom-left-radius: 4px;
+        border-top-left-radius: 4px;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(2) div + input {
+        padding-left: 34px;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(3) {
+        margin-right: 52px;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(3) input {
+        display: inline-block;
+        width: 32px;
+        height: 26px;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(4) {
+        margin-right: 69px;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(4) input {
+        display: inline-block;
+        width: 118px;
+        height: 26px;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(5) span {
+        width: 71px;
+        height: 28px;
+        line-height: 28px;
+        text-align: center;
+        display: inline-block;
+        cursor: pointer;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(5) span:first-child {
+        background: #dedddd;
+        margin-right: 10px;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div:nth-child(5) span:last-child {
+        background: #fa4701;
+        color: #fff;
+    }
+    .seek-purchase .seek-purchase-content table tbody tr.say-price td >div >div i {
+        color: #e41515;
+        position: relative;
+        top: 2px;
+        right: 3px;
+    }
+    .seek-purchase .seek-purchase-content table tbody.active tr {
+        display: table-row;
+    }
 </style>
 <div class="user_right fr seek-purchase">
     <!--求购询价-->
@@ -331,37 +425,68 @@
                     <th width="92">操作</th>
                 </tr>
             </thead>
-            <tbody>
-                <tr class="default-row" ng-repeat="seek in seekPurchases" ng-mouseenter="seek.hover=true">
+            {{seek.$active}}
+            <tbody ng-repeat="seek in seekPurchases" ng-class="{'active': seek.$active}">
+                <tr class="default-row">
                     <td class="release-time">
                         <span ng-bind="seek.seekPurchase.releaseDate"></span>
                         <span>14:45:50</span>
                         <div class="seek-status">
                             <div ng-show="seek.goodsId == null" class="no-grounding">未上架</div>
-                            <a ng-show="seek.goodsId == null">去上架>></a>
+                            <a ng-show="seek.goodsId == null" ng-click="goGrounding(seek)">去上架>></a>
                             <div ng-show="seek.goodsId != null">已上架</div>
                         </div>
                     </td>
-                    <td class="user-name"><div ng-bind="seek.seekPurchase.userName"></div></td>
+                    <td class="user-name"><div title="{{seek.seekPurchase.userName}}" ng-bind="seek.seekPurchase.userName"></div></td>
                     <td ng-bind="seek.seekPurchase.code"></td>
                     <td ng-bind="seek.seekPurchase.brand"></td>
                     <td ng-bind="seek.seekPurchase.encapsulation || '--'"></td>
                     <td ng-bind="seek.seekPurchase.produceDate || '--'"></td>
                     <td ng-bind="seek.seekPurchase.amount || '--'"></td>
-                    <td class="unit-price"><span>{{(!seek.seekPurchase.unitPrice || seek.seekPurchase.unitPrice == null ? null : seek.seekPurchase.currency+seek.seekPurchase.unitPrice) | currencyStr}}</span></td>
-                    <td class="left-time">剩余&nbsp;<span>5</span>&nbsp;小时</td>
+                    <td class="unit-price">
+                        <div ng-if="!seek.seekPurchase.unitPrice || seek.seekPurchase.unitPrice == null">-</div>
+                        <span ng-if="seek.seekPurchase.unitPrice">{{seek.seekPurchase.currency+seek.seekPurchase.unitPrice | currencyStr}}</span>
+                    </td>
+                    <td class="left-time">剩余&nbsp;<span ng-bind="getDay(seek.seekPurchase.deadline - seek.seekPurchase.releaseDate)"></span>&nbsp;天&nbsp;<span ng-bind="getHours(seek.seekPurchase.deadline - seek.seekPurchase.releaseDate)">5</span>&nbsp;小时</td>
                     <td class="operate">
                         <a>联系买家 <img src="static/img/seekPurchase/link-buyer.png" alt=""></a>
-                        <div>我要报价</div>
+                        <div ng-click="setSeekActive(seek, true)">我要报价</div>
+                    </td>
+                </tr>
+                <tr class="expand-row">
+                    <td colspan="10">
+                        <div style="width: 173px;">历史报价</div>
+                        <div style="width: 180px;">单价：<span>￥986</span></div>
+                        <div style="width: 182px;">交期：<span>6天</span></div>
+                        <div style="width: 271px;">生产时间：2016-12-12</div>
+                    </td>
+                </tr>
+                <tr class="say-price">
+                    <td colspan="10">
+                        <div>
+                            <div>报价</div>
+                            <div>
+                                <i>*</i>单价
+                                <!-- <select v-model="sayPriceObj.currency">
+                                   <option value="RMB">￥</option>
+                                   <option value="USD">$</option>
+                                 </select>-->
+                                <div>￥</div>
+                                <input type="text" class="form-control">
+                            </div>
+                            <div>
+                                <i>*</i>交期&nbsp;
+                                <input type="number" class="form-control">&nbsp;-&nbsp;<input type="number" class="form-control">&nbsp;天
+                            </div>
+                            <div>
+                                生产日期&nbsp;<input type="text" class="form-control">
+                            </div>
+                            <div>
+                                <span ng-click="setSeekActive(seek, false)">取消</span>
+                                <span>提交</span>
+                            </div>
+                        </div>
                     </td>
-                    <tr class="expand-row">
-                        <td colspan="10">
-                            <div style="width: 173px;">历史报价</div>
-                            <div style="width: 180px;">单价：<span>￥986</span></div>
-                            <div style="width: 182px;">交期：<span>6天</span></div>
-                            <div style="width: 271px;">生产时间：2016-12-12</div>
-                        </td>
-                    </tr>
                 </tr>
             </tbody>
         </table>

src/main/webapp/resources/view/vendor/modal/groundingSeek.html

@@ -0,0 +1,37 @@
+<style>
+    .modal-dialog {
+        width: 527px;
+    }
+    .modal-dialog .modal-header {
+        display: flex;
+        justify-content: space-between;
+        height: 44px;
+        line-height: 44px;
+        background: #4290f7;
+        padding: 0 0 0 66px;
+    }
+    .modal-dialog .modal-header div {
+        font-size: 14px;
+        color: #fff;
+    }
+    .modal-dialog .modal-header a {
+        color: #fff;
+        margin: 4px 8px 0 0;
+        font-size: 18px;
+        opacity: 1;
+    }
+    .modal-dialog .modal-body {
+        min-height: 257px;
+    }
+</style>
+<div class="modal-header">
+    <div>型号：<span ng-bind="seek.seekPurchase.code"></span></div>
+    <div>品牌：<span ng-bind="seek.seekPurchase.brand"></span></div>
+    <a ng-click="cancel()" class="close">&times;</a>
+</div>
+<div class="modal-body">
+    222
+</div>
+<div class="modal-footer">
+    333
+</div>