添加删除券及远程搜索下拉选择券

liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/static/js/remote-search-coupon.js

+;(function ($) {
+    //这里放入插件代码
+    var RemoteSearchPerformance = function (element, options) {
+        this.$element = $(element);
+        this.options = $.extend(true, {}, $.fn.remoteSearchPerformance.defaults, options);
+        this.id = $(element).attr('id');
+        this.ulID = '#' + this.id + '_ul';
+        this.ulFoucus = false;
+
+        // Method overrides
+        this.render = this.options.render || this.render;
+        this.select = this.options.select || this.select;
+
+        this.ajax = $.extend({}, $.fn.remoteSearchPerformance.defaults.ajax, this.options.ajax);
+
+        this.listen();
+    }
+    
+    RemoteSearchPerformance.prototype = {
+    	listen: function () {
+            this.$element.on('blur', $.proxy(this.blur, this))
+                .on('keyup', $.proxy(this.keyup, this));
+			
+			this.$element.parent('div.remote_wrapper').on('click',this.ulID, $.proxy(this.click, this));
+        },
+        blur: function (e) {
+            var that = this;
+            e.stopPropagation();
+            e.preventDefault();
+            setTimeout(function () {
+                if (!that.ulFoucus) {
+                    that.$element.val(that.$element.attr('data-name'));
+                    that.hide();
+                }
+            }, 150)
+        },
+        keyup: function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            switch (e.keyCode) {
+                case 40:
+                	// down arrow
+                case 38:
+                    // up arrow
+                    break;
+                case 9:
+                	// tab
+                case 13:
+                    // enter
+                    this.ajaxer();
+                case 27:
+                    // escape
+                    break;
+                default:
+                    this.ajaxer();
+            }
+        },
+        hide: function () {
+            $(this.ulID).remove();
+            return this;
+        },
+        ajaxer: function () {
+            var that = this,
+                keyword = that.$element.val();
+                busiType = window.typeRadio;
+                couType = window.typeCoupe;
+            // Query changed
+            that.keyword = keyword;
+            // Cancel last timer if set
+            if (that.ajax.timerId) {
+                clearTimeout(that.ajax.timerId);
+                that.ajax.timerId = null;
+            }
+
+            // Query is good to send, set a timer
+            that.ajax.timerId = setTimeout(function() {
+                var params = {
+                    keyword : keyword,
+                    busiType: busiType,
+                    couType: couType
+                };
+                var jAjax =  $.post;
+                jAjax(that.ajax.url, params, function(data){
+                	return that.render(data.rows);
+                });
+                that.ajax.timerId = null;
+            }, that.ajax.timeout);
+
+            return that;
+        },
+        render: function (data) {
+        	this.ulFoucus = false;
+            var liList = data || [];
+			var num = this._getNum();
+			//添加 ul
+			if($(this.ulID).length == 0) {
+				this.$element.after("<ul id='" + this.id + "_ul' class='remote_search remote_search_top'></ul>");
+			};
+			//添加li
+			var str = "";
+			if(num) {
+				if(liList.length) {
+					for(var i = 0; i < liList.length; i++) {
+						str += "<li data-id='"+liList[i].couponId+"' data-name='"+liList[i].title+"' title='"+liList[i].title+"' value='"+liList[i].couponId+"'>" + liList[i].title + "</li>";
+					}
+				} else {
+					str = "<li data-id='' data-name=''>搜索无数据</li>"
+				}
+			} else {
+				this.$element.attr('data-name',"");
+				this.$element.attr('data-id',"");
+			}
+			$(this.ulID).html(str);
+			var bodyHeight = $(document.body).height();
+			var offsetTop = this.$element.offset().top;
+			var height = $(this.ulID).outerHeight(true);
+			if(offsetTop + height > bodyHeight){
+				$(this.ulID).addClass('remote_search_bottom').removeClass('remote_search_top');
+			}else{
+				$(this.ulID).addClass('remote_search_top').removeClass('remote_search_bottom');
+			}
+            return this;
+       },
+       	click: function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            var dataName = $(e.target).attr('data-name');
+			var dataID = $(e.target).attr('data-id');
+			this.$element.val(dataName);
+			this.$element.attr('data-name',dataName);
+			this.$element.attr('data-id',dataID);
+            this.options.chose(dataName,dataID);
+            this.ulFoucus = true;
+            return this.hide();
+       	},
+       	_getNum: function(){
+
+       		return this.$element.val().length;
+       }
+    }
+    
+    
+    $.fn.remoteSearchPerformance = function (option) {
+        return this.each(function () {
+            var $this = $(this),
+                data = $this.data('remoteSearchPerformance'),
+                options = typeof option === 'object' && option;
+
+            if (!data) {
+                $this.data('remoteSearchPerformance', (data = new RemoteSearchPerformance(this, options)));
+            }
+
+            if (typeof option === 'string') {
+                data[option]();
+            }
+        });
+    }
+    
+    $.fn.remoteSearchPerformance.defaults = {
+        hiddenVal: '',
+        chose: function () { },
+
+        ajax: {
+            url: null,
+            timeout: 300,
+            method: 'get',
+            timerId: null
+        },
+        success: function(res){
+        }
+    }
+    
+    $.fn.remoteSearchPerformance.Constructor = RemoteSearchPerformance;
+    
+})(jQuery);
\ No newline at end of file

liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/include.html

@@ -43,6 +43,7 @@
 	<script th:src="@{/ruoyi/js/ry-ui.js?v=4.6.1}"></script>
 	<!--远程搜索下拉框-->
 	<script th:src="@{/js/remote-search-performance.js}"></script>
+	<script th:src="@{/js/remote-search-coupon.js}"></script>
 </div>
 
 <!-- ztree树插件 -->

liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/adam/member/info.html

@@ -3,6 +3,7 @@
 <head>
     <th:block th:include="include :: header('会员设置')" />
     <th:block th:include="include :: bootstrap-fileinput-css" />
+    <script src="../../../../static/js/remote-search-coupon.js"></script>
 </head>
 <style>
     .avatar_img {
@@ -72,6 +73,7 @@
     }
     .pop_inner .form-group {
         float: left;
+        width: 100%;
         padding-top: 20px;
     }
     .pop_inner .form-group .discount {
@@ -123,6 +125,19 @@
         margin-left: 5px;
         background: #f00;
     }
+    .radio-box {
+        float: left;
+    }
+    .goods_track {
+        display: none;
+    }
+    .user_rules {
+        display: none;
+    }
+    /*误删   该样式是控制动态添加数据的*/
+    .remote_search {
+        padding-left: 0;
+    }
 </style>
 <body class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
 <section class="section-content">
@@ -267,7 +282,6 @@
                                         <div class="form-group">
                                             <label class="col-sm-2 control-label">权益描述：</label>
                                         </div>
-
                                         <div th:if="${#lists.isEmpty(memberRightsList)}">
                                             <div class="form-group interests_item">
                                                 <div class="text-center">
@@ -413,9 +427,9 @@
         <div class="pop_inner">
             <input type="hidden" class="parentsIndex"/>
             <input type="hidden" class="childIndex"/>
-            <div class="col-sm-10">
-                <input type="text" id="coupeAdd_title" name="coupeAdd_title" placeholder="券标题"/>
-            </div>
+<!--            <div class="col-sm-10">-->
+<!--                <input type="text" id="coupeAdd_title" name="coupeAdd_title" placeholder="券标题"/>-->
+<!--            </div>-->
             <div class="form-group">
                 <label class="col-sm-2 control-label">类别：</label>
                 <div class="col-sm-10 coupenColumn">
@@ -454,10 +468,27 @@
                             <input type="radio" id="coupetypr1" class="coupeAddVal" name="coupe_type" value="1"/>代金券
                         </label>
                     </div>
+                    <div class="radio-box goods_track">
+                        <label for="radio2" onclick="coupetType(this)">
+                            <input type="radio" id="coupetypr3" class="coupeAddVal" name="coupe_type" value="4"/>折扣券
+                        </label>
+                    </div>
                 </div>
+<!--                <div class="col-sm-10 discount">-->
+<!--                    <div class="coupetypr_discount">满 ￥ <input type="text" id="valOver"/> 减 ￥ <input type="text" id="valMinus"/></div>-->
+<!--                    <div class="coupetypr_price" style="display: none;">金额 ￥ <input type="text" id="valFace"/></div>-->
+<!--                </div>-->
                 <div class="col-sm-10 discount">
-                    <div class="coupetypr_discount">满 ￥ <input type="text" id="valOver"/> 减 ￥ <input type="text" id="valMinus"/></div>
-                    <div class="coupetypr_price" style="display: none;">金额 ￥ <input type="text" id="valFace"/></div>
+                    <div class="coupetypr_search">
+                        <div class="remote_wrapper" style="position: relative;">
+                            <input name="ids" type="hidden">
+                            <input type="text" id="remoteSearch">
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group user_rules">
+                    <label class="col-sm-2 control-label">适用范围：</label>
+                    <div class="col-sm-10 rules_inner"></div>
                 </div>
             </div>
             <div class="form-group">
@@ -503,6 +534,9 @@
     var typeRadio = '';
 
     var prefix = ctx + "adam/member";
+    var candyfix = ctx + "candy/coupon";
+
+    console.log(memberRightsList);
     // 弹窗
     $(function () {
         $("#fileinput-demo-1").fileinput({
@@ -604,6 +638,8 @@
             var mrightsId = this.mrightsId;
             var couponId = this.couponId;
 
+            console.log(this.couponId);
+
             var MembercoupenData = {
                 busiType: Number(busiType),
                 couType:  Number(busiType) == 3 ? 101 : Number(couType),
@@ -619,7 +655,7 @@
                 valFace: valFace ? valFace : 1,
                 valOver: valOver ? valOver : 1,
                 valMinus: valMinus ? valMinus : 1,
-                state: 1
+                oper: 1
             };
             $.operate.saveModalBody(prefix + "/edit_coupon", JSON.stringify(MembercoupenData), function () {
                 $('.coupe_pop').hide();
@@ -640,12 +676,19 @@
         $(obj).find('input').attr('checked', true);
 
         this.typeRadio = typeRadio;
+        $('#remoteSearch').val('');
+        $('.user_rules').hide();
         if (typeRadio == 3) {
             $('.alltrack').hide();
             $('.alltrack_limit').show();
         } else {
             $('.alltrack').show();
             $('.alltrack_limit').hide();
+            if (typeRadio == 2) {
+                $('.goods_track').show();
+            } else {
+                $('.goods_track').hide();
+            }
         }
     }
 
@@ -653,6 +696,8 @@
     function coupetType (obj) {
         var typeCoupe = $(obj).find('input').val();
         this.typeCoupe = typeCoupe;
+        $('#remoteSearch').val('');
+        $('.user_rules').hide();
         if (typeCoupe == 1) {
             $('.coupetypr_price').show();
             $('.coupetypr_discount').hide();
@@ -662,6 +707,47 @@
         }
     }
 
+    // 远程搜索券
+    $('#remoteSearch').remoteSearchPerformance({
+        ajax:{
+            url: candyfix + "/list",
+            type: "post"
+        },
+        chose: function(text,val){
+            window.couponId = val;
+            $('.user_rules').show();
+            // document.getElementsByName("ids")[0].value = val;
+            $.ajax({
+                url: candyfix + "/info",
+                async: false,
+                data: {
+                    couponId: val
+                },
+                dataType: 'json',
+                type: 'get',
+                success: function (res) {
+                    var coupenData = res.data;
+                    if (coupenData.busiType == 0) {
+                        $('.user_rules .rules_inner').text('全部演出、商品');
+                    } else if (coupenData.busiType == 1 || coupenData.busiType == 2) {
+                        var coupenDataArr = [];
+                        if (coupenData.useRules.length > 0) {
+                            for (var i = 0; i < coupenData.useRules.length; i++ ) {
+                                coupenDataArr.push(coupenData.useRules[i].busiName);
+                            }
+                            coupenDataArr.join("/");
+                            $('.user_rules .rules_inner').text(coupenDataArr.join("/"));
+                        }
+                    } else if (coupenData.busiType == 3) {
+                        $('.user_rules .rules_inner').text('全部演出');
+                    }
+                }
+            })
+        },
+        success: function(){
+        }
+    })
+
     // 权益图片上传
     function icon (obj, num) {
         $('.coverFunNum').val(num);
@@ -723,7 +809,7 @@
             valFace: valFace ? valFace : 1,
             valOver: valOver ? valOver : 1,
             valMinus: valMinus ? valMinus : 1,
-            state: 2
+            oper: 2
         };
         $.operate.saveModalBody(prefix + "/edit_coupon", JSON.stringify(MembercoupenData));
         thisVal.remove();