新增买家中心分析悬浮

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

@@ -2,7 +2,7 @@
  * Created by yujia on 2017/3/19.
  *  求购的控制器
  */
-define(['app/app'], function (app) {
+define(['app/app', 'clipboard', 'QRCode'], function (app, clipboard, QRCode) {
   'use strict';
   app.register.controller('seekPurchaseCtrl',
       ['$scope', '$rootScope', 'seekPurchase', 'toaster', 'BaseService',
@@ -16,6 +16,7 @@ define(['app/app'], function (app) {
             clearSeekStatus();
             $scope.activeType = type;
           }
+          $rootScope.ShaRETimer = {}
 
           var clearSeekStatus = function () {
             angular.forEach($scope.seekListData.content, function (item) {
@@ -858,6 +859,93 @@ define(['app/app'], function (app) {
           $scope.setLinkBoxIndex = function (index) {
             $scope.linkBoxIndex = index;
           }
+          // 分享移入
+          $scope.setShowShare = function(seek, index) {
+
+            clearTimeout($rootScope.ShaRETimer[index] ? $rootScope.ShaRETimer[index]: '')
+
+
+            angular.element('.sharescancode').eq(index).css({
+              display: 'block'
+            })
+            var canvas = document.getElementsByClassName('qrccode-canvas_' + index)[0]
+
+            var shareMurl =  window.location.protocol +'//' + window.location.host + '/mobile/share/purChase/' + seek.id
+            if($(canvas).children().length> 1){
+              return false
+            }
+            console.log(QRCode)
+            // QRCode.toCanvas(shareMurl, canvas, function (error) {
+            //   if (error){ console.error(error);return;}
+            //   console.log('success!');
+            // });
+            var qrcode = new QRCode(canvas, {
+              text: 'your content',
+              width: 98,
+              height: 98,
+              colorDark : '#000000',
+              colorLight : '#ffffff',
+              correctLevel : QRCode.CorrectLevel.H
+            });
+
+
+            copyurl(index,seek)
+          }
+          // 分享移出
+          $scope.hideShare = function(index){
+            $rootScope.ShaRETimer[index] = setTimeout(function(){
+              angular.element('.sharescancode').eq(index).css({
+                display: 'none'
+              })
+            },300)
+
+          }
+          // 父元素移入
+          $scope.pauseTimer = function(index) {
+            clearTimeout($rootScope.ShaRETimer[index] ? $rootScope.ShaRETimer[index]: '')
+          }
+          // 父元素出
+          $scope.startTimer = function(index) {
+            clearTimeout($rootScope.ShaRETimer[index] ? $rootScope.ShaRETimer[index]: '')
+            $rootScope.ShaRETimer[index] = setTimeout(function(){
+              angular.element('.sharescancode').eq(index).css({
+                display: 'none'
+              })
+            },300)
+          };
+
+          $scope.caleUrl = function(seek){
+            return window.location.protocol + '//' +  window.location.host + '/mobile/share/purChase/' + seek.id
+          };
+
+          // 针对tr 标签不允许 相对定位的情况，作以下处理，兼容性目前不知
+          $scope.caleTop = function(index){
+            if( index == 0) {
+              return {
+                top: '110' * (index + 1) + 'px'
+              }
+            } else {
+              return {
+                top: 40 + 70 * (index + 1) + 'px'
+              }
+            }
+          }
+
+          function copyurl (index,seek){
+            var s = window.location.protocol + '//' +  window.location.host + '/mobile/share/purChase/' + seek.id
+            var _clipboard = new clipboard('.copyLink_' + index, {
+              text: s
+            });
+            _clipboard.on('success', function (e) {
+
+            });
+            _clipboard.on('error',  function (e) {
+              _clipboard.destroy()
+            });
+            document.addEventListener('click', function() {
+              // _this.showShare = false
+            })
+          }
           });
         }]);
 });

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

@@ -26,7 +26,9 @@ require.config({
 		'showdown' : 'lib/showdown/showdown.min',
 		'calendar': 'lib/calendar/calendar',
 		'big': 'lib/decimal/big.min',
-		'angular-filter' : 'lib/angular/angular-filter.min'
+		'angular-filter' : 'lib/angular/angular-filter.min',
+		'clipboard': 'lib/clipboard.min',
+    'QRCode': 'lib/qrcode.min'
 	},
 	shim : {
 		'angular' : {
@@ -62,7 +64,15 @@ require.config({
 		},
 		'calendar': ['jquery'],
 		'big' : ['jquery'],
-		'angular-filter' : ['angular']
+		'angular-filter' : ['angular'],
+		'clipboard': {
+      'exports' : 'clipboard',
+      'deps' : [ 'jquery' ]
+		},
+    'QRCode': {
+      'exports' : 'QRCode',
+      'deps' : [ 'jquery' ]
+    }
 	}
 });
 require([ 'app/app', 'common/controllers/commonCtrls', 'common/controllers/GoodsPickUpCtrl' ], function(app) {

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

@@ -201,6 +201,7 @@
     .seek-purchase .seek-purchase-content >table {
         width: 1000px;
         margin: 0 auto;
+        position: relative;
     }
     .seek-purchase .seek-purchase-content >table >thead {
         background: #89aefa;
@@ -231,6 +232,7 @@
     }
     .seek-purchase .seek-purchase-content >table >tbody >tr.default-row {
         border-bottom: 1px solid #dae5fd;
+        position: relative;
     }
     .seek-purchase .seek-purchase-content >table >tbody >tr.default-row:hover {
         background: #f1f5ff;
@@ -239,10 +241,20 @@
         font-size: 14px;
         text-align: center;
         height: 70px;
+        /*position: relative;*/
+    }
+    .seek-purchase .seek-purchase-content >table >tbody >tr.default-row td.operate-seek{
+        text-align: left;
+        text-indent: 12px;
     }
     .seek-purchase .seek-purchase-content >table >tbody >tr.default-row td.operate-seek >span {
         color: #4290f7;
         cursor: pointer;
+        text-indent: 12px;
+        text-align: left
+    }
+    .seek-purchase .seek-purchase-content >table >tbody >tr.default-row td.operate-seek >span i{
+        text-indent: 0px
     }
     .seek-purchase .red-text {
         color: #f62d37;
@@ -653,6 +665,107 @@
         margin: 18px 0 13px 0;
         border-radius: 2px;
     }
+    .seek-purchase .sharecode {
+        /*position: absolute;*/
+        right: 0;
+        top: 0;
+        z-index: 99;
+        text-indent: 0 !important;
+        text-align: center;
+        float: right
+    }
+    .seek-purchase .sharecode .sharecodeBtn {
+        width: 28px;
+        height: 28px;
+        margin-top: 2px;
+    }
+    .seek-purchase .sharecode .sharecodeBtn img {
+        float: left;
+    }
+    .seek-purchase .sharecode .sharecodeBtn::after {
+         content: ' ';
+         clear: both;
+         display: inline;
+         visibility: hidden;
+     }
+    .seek-purchase .sharecode .sharecodeT {
+        padding-top: 2px;
+        margin-top: 2px;
+        width: 28px;
+        height: 34px;
+        background-color: #3c7cf5;
+        border-radius: 2px;
+        color: #ffffff;
+        font-size: 14px;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        line-height: 14px;
+    }
+    .seek-purchase .sharescancodekuang {
+        width: 100%;
+        height: 220px;
+        position: absolute;
+        top: 110px;
+        left: 0px;
+        background: rgba(0, 0, 0, 0);
+        height: 220px !important;
+
+    }
+    .seek-purchase .sharescancode {
+        position: absolute;
+        background: url('/images/mobile/@2x/purChase/codebg.png');
+        width: 248px;
+        height: 207px;
+        top: 0px;
+        right: 0px;
+        z-index: 98;
+        display: none;
+        line-height: 14px;
+    }
+    .seek-purchase .sharescancode canvas {
+        display: block;
+        text-align: center;
+        margin: 0 auto;
+        line-height: 14px;
+    }
+    .seek-purchase .sharescancode .title {
+        color: #3c7cf5;
+        font-size: 16px;
+        margin: 21px auto;
+        margin-bottom: 0px;
+        text-align: center;
+        line-height: 14px;
+    }
+    .seek-purchase .sharescancode div input {
+        display: inline-block;
+        width: 140px;
+        overflow: hidden;
+        height: 35px;
+        vertical-align: middle;
+        margin-left: 14px;
+        line-height: 35px;
+    }
+    .seek-purchase .sharescancode div span {
+        display: inline-block;
+        color: #fff;
+        background: #4290f7;
+        height: 36px;
+        line-height: 36px;
+        width: 70px;
+        font-style: normal;
+        vertical-align: middle;
+        cursor: pointer;
+        text-align: center;
+        text-indent: 0px;
+    }
+    .seek-purchase .sharescancode img{
+        margin: 0 auto;
+        text-align: center;
+    }
+    .seek-purchase .sharescancode .qrccode{
+        margin: 15px auto;
+        margin-bottom: 10px
+    }
 </style>
 <div class="user_right fr seek-purchase">
     <!--求购询价-->
@@ -785,9 +898,9 @@
         <table ng-table="seekPurchaseTableParams">
             <thead>
             <tr>
-                <th width="165">发布时间</th>
-                <th width="202">型号 / 品牌</th>
-                <th width="93">采购数量</th>
+                <th width="160">发布时间</th>
+                <th width="200">型号 / 品牌</th>
+                <th width="90">采购数量</th>
                 <th width="78">单价预算</th>
                 <th width="70">封装</th>
                 <th width="105">生产日期</th>
@@ -802,11 +915,11 @@
                     </select>-->
                     状态
                 </th>
-                <th width="92">操作</th>
+                <th width="102">操作</th>
             </tr>
             </thead>
-            <tbody ng-repeat="seek in seekListData.content">
-            <tr class="default-row">
+            <tbody >
+            <tr class="default-row" ng-repeat="seek in seekListData.content" ng-mouseover="pauseTimer($index)" ng-mouseleave="startTimer($index)">
                 <td ng-bind="seek.date | date:'yyyy-MM-dd HH:mm'"></td>
                 <td style="text-align: left;">
                     <p title="{{seek.cmpCode}}" class="text-bold" style="width: 205px;">
@@ -832,7 +945,24 @@
                     <span ng-if="seek.offerAmount > 0" ng-show="!seek.$status || seek.$status == 0" ng-click="setSeekStatus(seek, 2)">查看报价&nbsp;<i class="fa fa-angle-double-down"></i></span>
                     <span ng-if="seek.goodsAmount > 0" ng-show="!seek.$status || seek.$status == 0" ng-click="setSeekStatus(seek, 1)">查看现货&nbsp;<i class="fa fa-angle-double-down"></i></span>
                     <span ng-show="seek.$status && (seek.$status == 1 || seek.$status == 2)" ng-click="setSeekStatus(seek, 0)">收起&nbsp;<i class="fa fa-angle-double-up"></i></span>
+                    <div class="sharecode" ng-mouseover="setShowShare(seek,$index)" ng-mouseleave="hideShare($index)">
+                        <div class="sharecodeT">分<br/>享</div>
+                        <div class="sharecodeBtn">
+                            <img src="/images/mobile/@2x/purChase/code.png" />
+                        </div>
+                    </div>
+                    <div ng-style="caleTop($index)" class="sharescancode icon-style" ref="sharescancode" @mouseover="showShowShare(!showShare, index, purchaseMan.id)" @mouseout="hideShowShare(!showShare, index, purchaseMan.id)">
+                        <div class="share">
+                            <div>
+                                <div class="title">求购分享</div>
+                                <div class="qrccode" ng-class="'qrccode-canvas_'+$index" width="98" height="98"></div>
+                                <input readonly ng-value="caleUrl(seek)" ng-class="'qrccode_'+$index" >
+                                <span ng-class="'copyLink_'+$index" ng-attr-data-clipboard-text={{caleUrl(seek)}}>复制链接</span>
+                            </div>
+                        </div>
+                    </div>
                 </td>
+
             </tr>
             <tr class="expand-row" ng-if="seek.$status == 1 || seek.$status == 2">
                 <td colspan="10">
@@ -961,6 +1091,7 @@
             </tbody>
         </table>
     </div>
+
     <div class="bom-manage" ng-show="activeType == 'bomManage'">
         <div class="bom-manage-header">
             <p><span ng-bind="bomTotal">56</span>&nbsp;个BOM清单</p>