新手引导功能

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

@@ -867,4 +867,99 @@ define(['angular', 'showdown', 'angular-toaster'], function(angular) {
 			}
 		};
 	}]);
+	/*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) {
+							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');
+								}
+								// 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');
+								$('.tour-overlay').removeClass('active');
+						}
+					}
+				}
+			};
+		}]);
 });

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

@@ -8,7 +8,7 @@ define([ 'angularAMD', 'ngLocal', 'common/services', 'common/directives', 'commo
 		return this.length > 0 ? this[this.length - 1] : null;
 	};
 
-	var app = angular.module('myApp', [ 'ui.router', 'ui.bootstrap', 'ng.local', 'ui.form', 'ui.jquery', 'toaster', 'ngDraggable', 'tool.directives', 'ngSanitize', 'common.query.kind', 'common.services', 'brandServices', 'componentServices', 'goodsServices',  'rateServices','cartServices', 'orderServices', 'addressServices', 'invoiceServices', 'common.query.propertyAdvice', 'propertyServices', 'returnServices' , 'changeServices',  'logisticsServices', 'common.query.kindAdvice', 'ngTable', 'ngDynamicInput', 'common.directives', 'angularFileUpload', 'urlencryptionServices', 'purchaseServices', 'vendorServices', 'goodsServices', 'bankTransfer', 'common.query.enterprise', 'billServices', 'receiptServices', 'collection', 'expressServices', 'bankInfo','Charge', 'statisticsServices', 'currencyService', 'responseLogisticsService', 'PriceServices', 'addressServices', 'searchService', 'urlencryptionServices', 'ReleaseProductByBatchService', 'makerDemand', 'afterSaleService', 'messageBoardServices', 'logisticsServices', 'table.directives', 'storeInfoServices', 'recommendation', 'common.query.user', 'logisticsPortService', 'cmsService', 'materialServices', 'StoreCmsServices', 'productImportModule', 'stockInOutModule', 'StoreCmsModule', 'WebChatModule', 'StandardPutOnAdminModule', 'StoreViolationsServices', 'internalMessageServices', 'installmentServices']);
+	var app = angular.module('myApp', [ 'ui.router', 'ui.bootstrap', 'ng.local', 'ui.form', 'ui.jquery', 'toaster', 'ngDraggable', 'tool.directives', 'ngSanitize', 'common.query.kind', 'common.services', 'brandServices', 'componentServices', 'goodsServices',  'rateServices','cartServices', 'orderServices', 'addressServices', 'invoiceServices', 'common.query.propertyAdvice', 'propertyServices', 'returnServices' , 'changeServices',  'logisticsServices', 'common.query.kindAdvice', 'ngTable', 'ngDynamicInput', 'common.directives', 'angularFileUpload', 'urlencryptionServices', 'purchaseServices', 'vendorServices', 'goodsServices', 'bankTransfer', 'common.query.enterprise', 'billServices', 'receiptServices', 'collection', 'expressServices', 'bankInfo','Charge', 'statisticsServices', 'currencyService', 'responseLogisticsService', 'PriceServices', 'addressServices', 'searchService', 'urlencryptionServices', 'ReleaseProductByBatchService', 'makerDemand', 'afterSaleService', 'messageBoardServices', 'logisticsServices', 'table.directives', 'storeInfoServices', 'recommendation', 'common.query.user', 'logisticsPortService', 'cmsService', 'materialServices', 'StoreCmsServices', 'productImportModule', 'stockInOutModule', 'StoreCmsModule', 'WebChatModule', 'StandardPutOnAdminModule', 'StoreViolationsServices', 'internalMessageServices', 'installmentServices', 'ui.tour']);
 	//初始化，启动时载入app
 	app.init = function() {
 		angularAMD.bootstrap(app);

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

@@ -251,17 +251,10 @@
 		text-decoration: underline ;
 	}
 	/*新手引导*/
-	.popover{
-		display: block!important ;
-		max-height: 0;
-		max-width: 0;
-	}
-	.tour-overlay{
-		display: block;
-	}
-	.fade{
-		opacity: 1;
-	}
+
+	/*.fade{*/
+		/*opacity: 1;*/
+	/*}*/
 	h1 { width: 50%; margin: 100px auto; text-align: center; background: lightblue; color: white;}
 
 	[ui-tour] > li {
@@ -294,6 +287,87 @@
 		top: -4000px;
 		left: -4000px;
 	}
+
+	.popover{
+		/*display: block!important ;*/
+		max-height: 0;
+		max-width: 0;
+	}
+	.guide ul.guide-content{
+		position: relative;
+	}
+	.guide ul.guide-content li{
+		position: absolute ;
+	}
+	.guide ul.guide-content li.guide01{
+		top: -127px;
+		left: -374px;
+	}
+	.guide ul.guide-content li.guide02{
+		top: -127px;
+		left: -370px;
+	}
+	.guide ul.guide-content li.guide03{
+		top: -130px;
+		left: -367px;
+	}
+	.guide ul.guide-content li.guide04{
+		top: -193px;
+		left: -365px;
+	}
+	.guide ul.guide-content li span.next-btn{
+		position: absolute;
+		top: 430px;
+		left: 624px;
+		display: inline-block;
+		width: 95px;
+		height: 44px;
+		background: transparent ;
+		cursor: pointer;
+	}
+	.guide ul.guide-content li div.click2{
+		position: absolute;
+		top: 837px;
+		left: 598px;
+		width: 250px;
+	}
+	.guide ul.guide-content li div.click3{
+		position: absolute;
+		top: 547px;
+		left: 563px;
+		width: 250px;
+	}
+	.guide ul.guide-content li div.click4{
+		position: absolute;
+		top: 714px;
+		left: 1245px;
+		width: 330px;
+	}
+	.guide ul.guide-content li div.click4 .next{
+		display: inline-block;
+		width: 120px;
+		height: 44px;
+		background: transparent;
+		cursor: pointer;
+	}
+	.guide ul.guide-content li div.click4 input{
+		margin-left: 32px;
+		margin-top: -12px;
+		width: 20px;
+		height: 20px;
+		background: transparent;
+		color: transparent;
+	}
+	.guide ul.guide-content li div span{
+		display: inline-block;
+		width: 95px;
+		height: 44px;
+		background: transparent;
+		cursor: pointer;
+	}
+	.guide ul.guide-content li div span.pre{
+		margin-right: 23px;
+	}
 </style>
 <script src="static/lib/ui-tour/tour.js"></script>
 <!--右侧主体部分-->
@@ -680,29 +754,30 @@
 	</div>
 </div>
 <!--新手引导页面-->
-<div ng-if="tab=='editRule'" ng-init="currentStep=1">
-	<ul  ui-tour="currentStep">
-		<li target="h1:eq(0)" class="popover right in">
+<div ng-if="tab=='editRule'" ng-init="currentStep=1" class="guide">
+	<ul  ui-tour="currentStep" class="guide-content" id="one">
+		<li target="h1:eq(0)" class="popover right in guide01" overlay>
 			<img src="static/img/tour/1.gif" alt=""/>
-			<a href="">1111</a>
+			<!--点击下一步-->
+			<span class="next-btn" ng-click="currentStep=currentStep+1"></span>
 		</li>
-		<li target="h1:eq(1)" at="top" class="popover top in">
-			<!--<img src="static/img/tour/2.gif" alt=""/>-->
+		<li target="h1:eq(1)" at="top" class="popover top in guide02">
+			<img src="static/img/tour/2.gif" alt=""/>
+			<!--点击上一步 下一步-->
+			<div class="click2"><span class="pre"  ng-click="currentStep=currentStep-1"></span><span class="next" ng-click="currentStep=currentStep+1"></span></div>
 		</li>
-		<li target="h1:eq(2) a" at="left" name="chapter3" class="popover left in" overlay>
-			<!--<img src="static/img/tour/3.gif" alt=""/>-->
+		<li target="h1:eq(2) a" at="left" name="chapter3" class="popover left in guide03">
+			<img src="static/img/tour/3.gif" alt=""/>
+			<!--点击上一步 下一步-->
+			<div class="click3"><span class="pre" ng-click="currentStep=currentStep-1"></span><span class="next"  ng-click="currentStep=currentStep+1"></span></div>
 		</li>
-		<li target="h1:eq(3)" at="bottom" class="popover bottom in">
-			<!--<img src="static/img/tour/4.png" alt=""/>-->
+		<li target="h1:eq(3)" at="bottom" class="popover bottom in guide04">
+			<img src="static/img/tour/4.png" alt=""/>
+			<!--点击上一步 下一步-->
+			<div class="click4"><span class="pre"  ng-click="currentStep=currentStep-1"></span><span class="next" ng-click="currentStep=false"></span> <input type="checkbox"  ng-click="currentStep=false"></div>
 		</li>
 	</ul>
-	<!--<pre>{{currentStep|json}}</pre>-->
 	<div class="tour-overlay fade"></div>
-	<style>
-		.tour-overlay{
-			display: block;
-		}
-	</style>
 </div>
 <!--防误删-->
 <div class="com-del-box" ng-if="deleteFrame">
@@ -715,6 +790,9 @@
 	</div>
 </div>
 <style>
+	.tour-overlay{
+		display: block;
+	}
 	.count .count01 {
 		display: block;
 	}
@@ -1215,4 +1293,4 @@
 	.rule-main .rule-content .common-style .row .add-box span{
 		width: auto;
 	}
-</style>
+</style>

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

@@ -186,6 +186,6 @@
     </div>
     <div class="content">
         <p><i class="fa fa-exclamation-circle"></i><span>您的店铺尚未设置配送规则，无法计算运费，建议尽快设置！</span></p>
-        <div><a ng-click="cancelDelete()">以后再说</a><a href="">立即设置</a></div>
+        <div><a ng-click="cancelDelete()">以后再说</a><a href="vendor#/vendor_deliveryRule">立即设置</a></div>
     </div>
 </div>

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

@@ -715,7 +715,7 @@
 	</div>
 	<div class="content">
 		<p><i class="fa fa-exclamation-circle"></i><span>您当前尚未设置配送规则，买家将无法下单，建议尽快设置！</span></p>
-		<div><a >立即设置</a></div>
+		<div><a href="vendor#/vendor_deliveryRule">立即设置</a></div>
 	</div>
 </div>