b2b公共询价引导功能

src/main/webapp/WEB-INF/views/normal/index.html

@@ -341,6 +341,30 @@
 		</div>
 	</div>
 	<!-- footer End -->
+	<!--新手引导-->
+	<div ng-init="currentStep = 1" class="guide">
+		<ul  ui-tour="currentStep">
+			<li target="h1:eq(0)" class="popover right in" overlay>
+				<img src="static/img/guide/more1.png" alt=""/>
+				<!--点击下一步-->
+				<span class="guide01" ng-click="currentStep = currentStep + 1">下一步 <i class="fa fa-angle-double-right"></i></span>
+				<div class="close" ng-click="currentStep = false">&times;</div>
+			</li>
+			<li target="h1:eq(1)" class="popover right in">
+				<img src="static/img/guide/more2.png" alt=""/>
+				<!--点击下一步-->
+				<span class="guide02" ng-click="currentStep = currentStep + 1">下一步 <i class="fa fa-angle-double-right"></i></span>
+				<div class="close close02" ng-click="currentStep = false">&times;</div>
+			</li>
+			<li target="h1:eq(2)" class="popover right in">
+				<img src="static/img/guide/more3.png" alt=""/>
+				<!--点击下一步-->
+				<span class="guide03" ng-click="currentStep = false">完成</span>
+				<div class="close close03" ng-click="currentStep = false">&times;</div>
+			</li>
+		</ul>
+		<div class="tour-overlay fade"></div>
+	</div>
 	<!-- 消息提示框  Start-->
 	<toaster-container
 		toaster-options="{'position-class': 'toast-top-center'}"></toaster-container>

src/main/webapp/resources/css/index.css

@@ -4432,4 +4432,94 @@ input[required]:invalid, input:focus:invalid, textarea[required]:invalid, textar
 
 a.order-detail {
 	color: #327ebe !important;
+}
+
+/*新手引导*/
+[ui-tour] > li {
+	display: none;
+}
+.active {
+	display: block !important;
+}
+.tour-overlay {
+	display: none;
+	height: 500px;
+	width: 500px;
+	top: -4100px;
+	left: -4100px;
+	background: transparent;
+	border-radius: 8000px;
+	border: 4000px solid rgba(0,0,0,.5);
+	position: fixed;
+	-webkit-transition: all 1s ease;
+	-moz-transition: all 1s ease;
+	-ms-transition: all 1s ease;
+	-o-transition: all 1s ease;
+	transition: all 1s ease;
+}
+.tour-overlay.in {
+	top: -4000px;
+	left: -4000px;
+	height: 300px;
+	width: 300px;
+}
+.popover.right {
+	margin-left: 0 !important;
+}
+.popover {
+	padding: 0 !important;
+	border: none !important;
+}
+.guide {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 100000;
+}
+.guide ul li span {
+	display: inline-block;
+	position: absolute;
+	width: 108px;
+	height: 40px;
+	line-height: 40px;
+	text-align: center;
+	font-size: 16px;
+	color: #fff;
+	border-radius: 4px;
+	background: #d32526;
+	cursor: pointer ;
+}
+.guide ul li span.guide01 {
+	top: 489px;
+	left: 1069px;
+}
+.guide ul li span.guide02 {
+	top: 650px;
+	left: 1066px;
+}
+.guide ul li span.guide03 {
+	top: 776px;
+	left: 1084px;
+}
+.guide ul li div.close{
+	position: absolute;
+	top: 106px;
+	left: 1168px;
+	width: 50px;
+	height: 50px;
+	line-height: 45px;
+	text-align: center;
+	font-size: 50px;
+	background: rgba(0,0,0,.6);
+	border-radius: 50%;
+}
+.guide ul li div.close02{
+	top: 269px;
+	left: 1165px;
+}
+.guide ul li div.close03{
+	top: 297px;
+	left: 1520px;
 }

src/main/webapp/resources/js/common/directives.js

@@ -58,4 +58,71 @@ define(['angular'], function(angular) {
 			}
 		}
 	});
+	/**
+	 * uiTour directive
+	 *
+	 * @example:
+	 *   <ul ui-tour="currentStep">
+	 *     <li target="#someId">
+	 *       First Tooltip
+	 *       <a ng-click="currentStep=currentStep+1">Next</a>
+	 *     </li>
+	 *     <li target=".items:eq(2)" name="two">
+	 *       Second Tooltip
+	 *       <a ng-click="currentStep=currentStep-1">Prev</a>
+	 *     </li>
+	 *     <li target=".items:eq(2)">
+	 *       Third Tooltip
+	 *       <a ng-click="currentStep='two'">Go directly to 'two'</a>
+	 *       <a ng-click="currentStep=0">Done</a>
+	 *     </li>
+	 *   </ul>
+	 */
+	angular.module('ui.tour', [])
+
+		.directive('uiTour', ['$timeout', '$parse', function($timeout, $parse){
+			return {
+				link: function($scope, $element, $attributes) {
+					var model = $parse($attributes.uiTour);
+
+					// Watch model and change steps
+					$scope.$watch($attributes.uiTour, function(newVal, oldVal){
+						if (angular.isNumber(newVal)) {
+							showStep(newVal)
+						} else {
+							if (angular.isString(newVal)) {
+								var stepNumber = 0,
+									children = $element.children()
+								angular.forEach(children, function(step, index) {
+									if (angular.element(step).attr('name') === newVal)
+										stepNumber = index+1;
+								});
+								model.assign($scope, stepNumber);
+							} else {
+								model.assign($scope, newVal && 1 || 0);
+							}
+						}
+					});
+
+					// Show step
+					function showStep(stepNumber) {
+						var elm, at, children = $element.children().removeClass('active');
+						elm = children.eq(stepNumber - 1);
+						if (stepNumber) {
+							at = elm.attr('at');
+							$timeout(function(){
+								var target = angular.element(elm.attr('target'))[0];
+								if (elm.attr('overlay') !== undefined) {
+									$('.tour-overlay').addClass('active').css({}).addClass('in');
+								}
+								elm.addClass('active');
+							});
+						} else {
+							$('.tour-overlay').removeClass('in');
+							$('.tour-overlay').removeClass('active');
+						}
+					}
+				}
+			};
+		}]);
 });

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

@@ -1,6 +1,6 @@
 +define(['toaster', 'charts', 'ngTable', 'common/services', 'common/directives', 'service/Purc', 'service/Make', 'service/Fa', 'service/Account', 'service/Alert', 'service/CheckTel', 'ui.router', 'ui.bootstrap', 'file-upload', 'ngSanitize', 'service/BaseInfo', 'service/Cart', 'service/ApprovalFlow', 'service/DeputyOrder', 'service/Product', 'service/Token', 'service/ProductUsers'], function () {
     'use strict';
-    var app = angular.module('myApp', ['toaster', 'angularCharts', 'ngTable', 'ui.router', 'common.services', 'common.directives', 'PurcServices', 'MakeServices', 'FaServices', 'AccountServices', 'AlertServices', 'ui.bootstrap', 'angularFileUpload', 'ngSanitize', 'CheckTelModule', 'ProductServices', 'CartServices', 'ApprvoalFlowService', 'DeputyOrderService', 'ProductInfoServices', 'TokenService', 'ProductUserService']);
+    var app = angular.module('myApp', ['toaster', 'angularCharts', 'ngTable', 'ui.router', 'common.services', 'common.directives', 'PurcServices', 'MakeServices', 'FaServices', 'AccountServices', 'AlertServices', 'ui.bootstrap', 'angularFileUpload', 'ngSanitize', 'CheckTelModule', 'ProductServices', 'CartServices', 'ApprvoalFlowService', 'DeputyOrderService', 'ProductInfoServices', 'TokenService', 'ProductUserService', 'ui.tour']);
     app.init = function () {
         angular.bootstrap(document, ['myApp']);
     };

src/main/webapp/resources/js/ui-tour/tour.js

@@ -0,0 +1,102 @@
+/*global angular */
+/**
+ * uiTour directive
+ *
+ * @example:
+ *   <ul ui-tour="currentStep">
+ *     <li target="#someId">
+ *       First Tooltip
+ *       <a ng-click="currentStep=currentStep+1">Next</a>
+ *     </li>
+ *     <li target=".items:eq(2)" name="two">
+ *       Second Tooltip
+ *       <a ng-click="currentStep=currentStep-1">Prev</a>
+ *     </li>
+ *     <li target=".items:eq(2)">
+ *       Third Tooltip
+ *       <a ng-click="currentStep='two'">Go directly to 'two'</a>
+ *       <a ng-click="currentStep=0">Done</a>
+ *     </li>
+ *   </ul>
+ */
+angular.module('ui.tour', [])
+
+.directive('uiTour', ['$timeout', '$parse', function($timeout, $parse){
+  return {
+    link: function($scope, $element, $attributes) {
+      var model = $parse($attributes.uiTour);
+
+      // Watch model and change steps
+      $scope.$watch($attributes.uiTour, function(newVal, oldVal){
+        if (angular.isNumber(newVal)) {
+          showStep(newVal)
+        } else {
+          if (angular.isString(newVal)) {
+            var stepNumber = 0,
+              children = $element.children()
+            angular.forEach(children, function(step, index) {
+              if (angular.element(step).attr('name') === newVal)
+                stepNumber = index+1;
+            });
+            model.assign($scope, stepNumber);
+          } else {
+            model.assign($scope, newVal && 1 || 0);
+          }
+        }
+      });
+
+      // Show step
+      function showStep(stepNumber) {
+        var elm, at, children = $element.children().removeClass('active');
+        elm = children.eq(stepNumber - 1);
+        if (stepNumber && elm.length) {
+          at = elm.attr('at');
+          $timeout(function(){
+            var target = angular.element(elm.attr('target'))[0];
+
+
+            if (elm.attr('overlay') !== undefined) {
+              $('.tour-overlay').addClass('active').css({
+                marginLeft: target.offsetLeft + target.offsetWidth / 2 - 150,
+                marginTop: target.offsetTop + target.offsetHeight / 2 - 150
+              }).addClass('in');
+            } else {
+              $('.tour-overlay').removeClass('in');
+              setTimeout(function(){
+                $('.tour-overlay').removeClass('active');
+              }, 1000);
+            }
+            offset = {};
+            
+            offset.top = target.offsetTop;
+            offset.left = target.offsetLeft;
+
+            elm.addClass('active');
+              
+            if (at.indexOf('bottom') > -1) {
+              offset.top += target.offsetHeight;
+            } else if (at.indexOf('top') > -1) {
+              offset.top -= elm[0].offsetHeight;
+            } else {
+              offset.top += target.offsetHeight / 2 - elm[0].offsetHeight / 2;
+            }
+            if (at.indexOf('left') > -1) {
+              offset.left -= elm[0].offsetWidth;
+            } else if (at.indexOf('right') > -1) {
+              offset.left += target.offsetWidth;
+            } else {
+              offset.left += target.offsetWidth / 2 - elm[0].offsetWidth / 2;
+            }
+            
+            elm.css(offset);
+          });
+        } else {
+          $('.tour-overlay').removeClass('in');
+          setTimeout(function(){
+            $('.tour-overlay').removeClass('active');
+          }, 1000);
+        }
+      }
+    }
+  };
+}]);