推荐活动edit

liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/java/com/liquidnet/client/admin/web/controller/zhengzai/LocalAdminController.java

@@ -211,5 +211,10 @@ public class LocalAdminController extends BaseController
     {
         return activityPrefix + "/affiliatedActivity/list";
     }
+    @GetMapping("/affiliatedActivityEdit") // 关联活动-编辑
+    public String affiliatedActivityEdit()
+    {
+        return activityPrefix + "/affiliatedActivity/edit";
+    }
 
 }

liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/static/js/searchSelect.js

+/*
+一个模糊搜索组件
+基于jq，还算好看，使用简单，有点有趣
+用法非常简单，你甚至不需要引入css
+使用方法：引入然后new一下,在标签上写placeholder和name就和在input上写这两个属性的性质一样。是你需要的效果
+<div id="search" placeholder="请搜索" name="searchSelect"></div>
+const search = new searchSelect('#search',[{id:1,value:'许嵩'},{id:2,value:'周杰伦'},{id:3,value:'林俊杰'}])
+类似这样子，第一个值是元素名，第二个是一个模糊搜索用的数组，它还有第三个参数是个回调函数，这个是一个选填项目，
+这个回调函数会在触发input事件被执行
+所以这个回调你想写异步搜索也许有用
+const search = new searchSelect('#search',[],function(){
+$..ajax........
+})
+update方法,用于更新下拉列表的数据，使用方法
+ search.update([{id:1,value:'乌鸦'},{id:2,value:'冰柜'}])
+search方法,一般配合回调函数用及update方法做异步请求用，
+传入true会一直显示搜索中的字样,如果关掉它可以传入false，调用update也一样会清空搜索状态
+search.search(true)
+disabled方法，实现disabled效果，传入true开启传入false关闭
+search.disabled(true)
+empty方法，帮你清空所有内容
+search.empty()
+assignment方法,你也许有类似编辑页需要直接给搜索框赋值的操作，可以这样做
+search.assignment({id:3,value:'苏格拉没有底'})
+会帮你选中下拉框中对应的值，没有就帮你加上且自动选中
+你也可以直接传个id
+search.assignment(1)
+这样做会帮你选中对应id的下拉框但是无法实现找不到就自动添加
+大清都亡了所以抛弃ie
+*/
+(function(){
+    $('head').append(`
+  <style>
+  .searchSelect_box {
+    position: relative;
+  }
+  .searchSelect_box>.searchSelect {
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid #dcdee2;
+    transition: all .2s ease-in-out;
+    position: relative;
+    width: 100%;
+    padding:5px;
+  }
+  .searchSelect_box>.searchSelect:focus {
+    border-color: #57a3f3 !important;
+    outline: 0;
+    box-shadow: 0 0 0 2px rgb(45 140 240 / 20%) !important;
+  }
+  .searchSelect_box>.drawer {
+    width: 100%;
+      max-height: 200px;
+      overflow-x: hidden;
+      overflow-y: auto;
+      margin: 5px 0;
+      padding: 5px 0;
+      background-color: #fff;
+      box-sizing: border-box;
+      border-radius: 4px;
+      box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
+      position: absolute;
+      z-index: 900;
+      left: 0;
+      top: 30px;
+      display:none;
+  }
+  .searchSelect_box>.drawer>li {
+    margin: 0;
+      line-height: normal;
+      padding: 7px 16px;
+      clear: both;
+      color: #515a6e;
+      font-size: 14px!important;
+      white-space: nowrap;
+      list-style: none;
+      cursor: pointer;
+      transition: background .2s ease-in-out;
+      overflow:hidden; 
+      text-overflow:ellipsis; 
+      white-space:nowrap; 
+  }
+  .searchSelect_box>.drawer>.none {
+    padding: 0 16px;
+    text-align: center;
+    color: #ccc;
+  }
+  .searchSelect_box>.drawer>li:hover {
+    background-color: rgba(0, 0, 0, .1);
+  }
+  .searchSelect_box>.drawer>.active {
+    color: #57a3f3;
+  }
+  /*定义滚动条高宽及背景
+ 高宽分别对应横竖滚动条的尺寸*/
+ .searchSelect_box>.drawer::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+    background-color: #fff;
+}
+/*定义滚动条轨道
+  内阴影+圆角*/
+.searchSelect_box>.drawer::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+    border-radius: 2px;
+    background-color: #fff;
+}
+/*定义滑块
+  内阴影+圆角*/
+.searchSelect_box>.drawer::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+    background-color: #ccc;
+}
+  </style>
+  `)
+})()
+class searchSelect {
+    constructor(dom,list,fn) {
+        this.list = []
+        this.dom = dom
+        this.params = {}
+        this.loading = false
+        this.fn = fn
+        if(list instanceof Array) {
+            this.list = list
+        }
+        $(this.dom).addClass('searchSelect_box')
+        let name = $(this.dom).attr('name');
+        let placeholder= $(this.dom).attr('placeholder')
+        $(this.dom).append('<input placeholder="'+(placeholder||'')+'" type="text" name="'+(name||'')+'" class="searchSelect">')
+        $(this.dom).append('<ul class="drawer"></ul>')
+        this.getList()
+        let that = this
+        $(this.dom).children('.searchSelect').on('input',function(){
+            let val = $(that.dom).children('.searchSelect').val().trim()
+            $(that.dom).children('.searchSelect').val(val)
+            if(!(val === $(that.dom).children('.drawer').find('.active').text())) {
+                $(that.dom).children('.searchSelect').attr('data-id','')
+                $(that.dom).children('.drawer').find('.active').removeClass('active')
+                that.params = {}
+                fn && fn($(this).val())
+            }
+            $(that.dom).children('.drawer').stop(true,true).fadeIn()
+            if(!that.loading) {
+                that.getList(val)
+            }
+            // that.list.filter((item)=>item.value.inc)
+
+        })
+        $(this.dom).children('.searchSelect').on('focus',function(){
+            $(that.dom).children('.drawer').stop(true,true).fadeIn()
+        })
+        $(this.dom).children('.searchSelect').on('blur',function(){
+            setTimeout(()=>{
+                if(!($(that.dom).children('.searchSelect').attr('data-id'))) {
+                    $(that.dom).children('.searchSelect').val('')
+                }
+                $(that.dom).children('.drawer').stop(true,true).fadeOut()
+            },100)
+        })
+    }
+    // 模糊搜索方法
+    getList(str) {
+        // let list = arr || JSON.parse(JSON.stringify(this.list))
+        if(this.list.length<1) {
+            $(this.dom).children('.drawer').html('<li class="none">暂无其他数据</li>')
+            return this
+        }
+        let domlist = str?this.list.filter(item => item.value.includes(str)):JSON.parse(JSON.stringify(this.list))
+        if(domlist.length<1){
+            $(this.dom).children('.drawer').html('<li class="none">暂无其他数据</li>')
+            return this
+        }
+        let listDom = ''
+        $(this.dom).children('.drawer').html('')
+        domlist.forEach(item => {
+            let isActive = $(this.dom).children('.searchSelect').attr('data-id')==item.id
+            listDom+='<li class="item '+(isActive?'active':'')+' " data-id="'+item.id+'">'+item.value+'</li>'
+            if(isActive) {
+                $(this.dom).children('.searchSelect').val(item.value)
+            }
+        })
+        $(this.dom).children('.drawer').append(listDom)
+        let dom = this.dom
+        let that = this
+        $(this.dom).children('.drawer').children('.item').on('click',function(){
+            if($(this).hasClass('active')) return
+            $(dom).children('.searchSelect').attr('data-id',$(this).attr('data-id'))
+            $(dom).children('.searchSelect').val($(this).text())
+            that.params.id = $(this).attr('data-id')
+            that.params.value = $(this).text()
+            $(this).addClass('active').siblings().removeClass('active')
+            setTimeout(()=>{
+                $(dom).children('.drawer').stop(true,true).fadeOut()
+                that.getList($(this).text())
+            },300)
+        })
+        return this
+    }
+    // 更新数据 传入一个数组，更新下拉框内容
+    update(list) {
+        if(!(list instanceof Array)) {
+            console.error('请传入一个数组！')
+            return this
+        }
+        this.list = list
+        this.getList($(this.dom).children('.searchSelect').val())
+        this.loading=false
+        return this
+    }
+    // 搜索方法 ，传入true会显示搜索中的loading，一般在input的钩子中触发ajax请求模糊搜索数据可用
+    search(bol) {
+        bol && $(this.dom).children('.drawer').html('<li class="none">正在搜索....</li>')
+        bol && (this.loading=true)
+        !bol && this.getList()
+        !bol && (this.loading=false)
+        return this
+    }
+    // 清空所有内容的方法
+    empty() {
+        $(this.dom).children('.drawer').html('<li class="none">暂无其他数据</li>')
+        $(this.dom).children('.searchSelect').val('')
+        return this
+    }
+    isFunction(fn) {
+        return Object.prototype.toString.call(fn)=== '[object Function]';
+    }
+//  disabled选项
+    disabled(bol) {
+        bol && $(this.dom).children('.searchSelect').prop('disabled',true)
+        !bol && $(this.dom).children('.searchSelect').prop('disabled',false)
+        return this
+    }
+    // 你也许需要强行赋值，用它
+    assignment(obj) {
+        if(obj instanceof Object && obj.id) {
+            for(let i=0;i<this.list.length;i++) {
+                if(this.list[i].id == obj.id) {
+                    $(this.dom).children('.drawer').html('<li class="item active" data-id="'+obj.id+'">'+obj.value+'</li>')
+                    $(this.dom).children('.searchSelect').val(obj.value)
+                    $(this.dom).children('.searchSelect').attr('data-id',obj).id
+                    this.fn()
+                    return this
+                }
+            }
+            this.list.push(obj)
+            $(this.dom).children('.drawer').html('<li class="item active" data-id="'+obj.id+'">'+obj.value+'</li>')
+            $(this.dom).children('.searchSelect').val(obj.value)
+            $(this.dom).children('.searchSelect').attr('data-id',obj.id)
+            this.params.id = obj.id
+            this.params.value = obj.value
+        } else if(typeof obj==='string'||typeof obj==='number'){
+            this.list.forEach(item => {
+                if(item.id == obj) {
+                    $(this.dom+' .item[data-id="'+obj+'"]').addClass('active')
+                    $(this.dom).children('.searchSelect').val($(this.dom+' .item[data-id="'+obj+'"]').text())
+                    $(this.dom).children('.searchSelect').attr('data-id',obj)
+                    this.params.id = item.id
+                    this.params.value = $(this.dom+' .item[data-id="'+obj+'"]').text()
+                }
+            })
+        }
+        this.fn()
+        return this
+    }
+}
\ No newline at end of file

liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/sweet/affiliatedActivity/edit.html

+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<head>
+    <th:block th:include="include :: header('编辑关联活动')" />
+    <th:block th:include="include :: select2-css" />
+    <link rel="stylesheet" href="">
+    <style>
+        body .layui-layer-btn {
+            display: none !important;
+        }
+        #layui-layer1 {
+            z-index: 1001 !important;
+        }
+        #layui-layer-shade1 {
+            z-index: 1000 !important;
+        }
+
+        .required {
+            font-style: normal;
+            color: red;
+        }
+        .content_item {
+            padding: 20px;
+        }
+        /* .content_item .content_title {
+            display: flex;
+        } */
+        .content_item .content_title h3 span {
+            display: inline-block;
+            width: 4px;
+            height: 18px;
+            background: skyblue;
+            margin-right: 6px;
+            vertical-align: top;
+        }
+        .basis_data {
+            display: flex;
+            font-size: 14px;
+            padding: 0 20px;
+            margin-top: 20px;
+            /* align-items: center; */
+        }
+        .basis_data span {
+            width: 100px;
+            text-align: right;
+
+        }
+        #startTime, #endTime {
+            width: 272px;
+            margin-right: 10px;
+        }
+        .storeList, #selectShow, .dropdown-menu, .input-group {
+            width: 270px !important;
+        }
+        .activityStore_item {
+            display: flex;
+            margin-bottom: 12px;
+        }
+        #basis_data {
+            align-items: flex-start;
+        }
+        .add_footer {
+            width: 100%;
+            height: 45px;
+            line-height: 45px;
+            padding-left: 60px;
+        }
+
+        #addClassify2, #detailPro {
+            width: 450px;
+            height: 260px;
+            padding-top: 20px;
+        }
+        .addAvatarItem .selectClassifyOne {
+            display: flex;
+        }
+        .addAvatarItem .selectClassifyOne .span-label {
+            width: 85px;
+        }
+        .picker {
+            display: flex;
+            justify-content: flex-start;
+        }
+        #addClassify .addAvatarItem label {
+            display: flex;
+            margin-right: 20px;
+            align-items: center;
+        }
+        #addClassify .addAvatarItem label input {
+            margin: 0;
+            margin-right: 2px;
+        }
+        #detailPro .detail_inner {
+            margin-bottom: 20px;
+        }
+        #detailPro .detail_title {
+            margin-top: 50px;
+            font-weight: bold;
+            font-size: 16px;
+        }
+        .bottomBtn {
+            text-align: left;
+            padding: 30px 15px 12px;
+        }
+        .layui-layer-shade{
+            opacity: 30%;
+        }
+        .item div {
+            display: flex;
+        }
+        .item div a{
+            margin-left: 12px;
+        }
+        /* 星星 */
+        .required-group-name {
+            color: red;
+            font-size: 20px;
+            position: relative;
+            top: 6px;
+        }
+        .groupName {
+            border: 1px solid #dfdfdf;
+        }
+        .required-province {
+            color: red;
+            display: inline-block;
+            margin-right: 3px;
+            position: relative;
+            top: 6px;
+            font-size: 20px;
+        }
+        /* 必填红色文字 */
+        .required-group-text {
+            height: 20px;
+            color: red;
+        }
+        .required-province-text {
+            color: red;
+            height: 20px;
+        }
+        .search-wrapper {
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+<div>
+    <div class="content_item">
+        <div class="content_title">
+            <h3><span></span>编辑关联活动</h3>
+        </div>
+        <!-- row -->
+        <div class="basis_data">
+            <span>
+                <em class="required">*</em>
+                活动名称：
+            </span>
+            <div class="input-group" style="width: 300px;">
+                <input type="text" class="form-control" id="activeName" placeholder="">
+            </div>
+        </div>
+
+        <div class="basis_data">
+            <span>
+                <em class="required">*</em>
+                关联类型：
+            </span>
+            <div class="input-group" style="width: 300px;">
+                <select name="activeType" id="activeType" class="form-control m-b">
+                    <option value="">所有</option>
+                    <option value="1">NFT</option>
+                    <option value="2">组合购</option>
+                    <option value="3">演出</option>
+                    <option value="4">商品</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="basis_data">
+            <span>
+                <em class="required">*</em>
+                关联名称：
+            </span>
+            <div class="input-group" style="width: 300px;">
+                <div class="search-wrapper" style="margin-bottom: 15px;">
+                    <!-- 关联 模糊搜索 回显的话添加id再赋值 -->
+                    <div id="search"  placeholder="请搜索" name="seaarchSelect"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="basis_data">
+            <span>
+                <em class="required">*</em>
+                状态：
+            </span>
+            <div class="input-group" style="width: 300px;">
+                <select name="status" id="status" class="form-control m-b">
+                    <option value="">所有</option>
+                    <option value="0">开启</option>
+                    <option value="1">未开启</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- row -->
+        <div class="basis_data">
+            <span>
+                <em class="required">*</em>
+                时间范围：
+            </span>
+            <input type="text" class="layui-input form-control" id="startTime" autocomplete="off" placeholder="开始时间选择">
+            ~
+            <input type="text" class="layui-input form-control"  id="endTime" style="margin-left: 10px;" autocomplete="off" placeholder="结束时间选择">
+        </div>
+
+        <div class="basis_data">
+            <span>
+                <em class="required">*</em>
+                推荐：
+            </span>
+            <div class="input-group" id="addClassify2">
+
+
+
+            </div>
+        </div>
+
+        <div class="basis_data">
+            <a class="btn btn-primary btn-xs" href="javascript:void(0)">添加dom</a>
+        </div>
+
+        <!--  -->
+        <div class="first_footer editshow" style="padding-left: 60px; margin-top: 12px;">
+            <button class="btn btn-primary" onclick="nextBtn()">确定</button>
+        </div>
+    </div>
+
+    <!-- 提交 -->
+    <div class="add_footer" style="display: none;">
+        <button class="btn btn-success" onclick="save()">保存</button>
+        <!-- <button class="btn" onclick="addItem()">取消</button> -->
+    </div>
+</div>
+<th:block th:include="include :: footer" />
+<th:block th:include="include :: bootstrap-suggest-js" />
+</body>
+
+<script th:src="@{/js/searchSelect.js}"></script>
+<script th:inline="javascript">
+
+    let prefix2 = ctx + "local";
+    let itemId = Number(getUrlParms('id'))
+
+    let isOneDom = $('#addClassify2').find($('.addAvatarItem')).length === 1 // 判断是否默认一组表单
+
+    // init
+    $(function() {
+
+        layui.use('laydate', function() {
+            let laydate = layui.laydate;
+
+            // 执行一个laydate实例
+            laydate.render({
+                elem: '#startTime', //指定元素
+                type: 'datetime'
+            });
+            laydate.render({
+                elem: '#endTime', //指定元素
+                type: 'datetime'
+            });
+        });
+
+    }) // init end
+
+    getPageData() // 最开始加载
+
+    // 获得当前页面回显数据
+    function getPageData () {
+        let list = []
+
+        if (itemId) {
+            // 请求数据
+            promiseMethods('/kylin-recommend-active/getActiveById', 'post', { mid: itemId }).then(res => {
+                console.log('res', res)
+                if (res) {
+                    // $.operate.successCallback(res);
+
+                    list = res.list
+
+                    assembleDom(list)
+
+                    setTimeout(() => {
+                        for (let i = 0; i < list.length; i++) {
+                            createListenerSearch(i + 1)
+                        }
+                    })
+
+
+
+                } else {
+                    layer.msg(res.message)
+                }
+
+            })
+        }
+
+    }
+
+    // 组装 html
+    function assembleDom (list) {
+        list.forEach((item, index) => {
+            let dynamicAddDom = `<div class="addAvatarItem" style="padding: 20px;">
+                <div class="selectClassifyOne" style="margin-bottom: 20px;">
+                    <span class="span-label"><i style="color: red;">*</i>推荐商品：</span>
+                    <div class="search-wrapper">
+                        <div class="search-wrapper" style="margin-bottom: 15px;">
+                            <div id="listRemoteSearch${index}" placeholder="请搜索" name="seaarchSelect${index}">11</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="selectClassifyOne">
+                    <span class="span-label"><i style="color: red;">*</i>推荐类型：</span>
+                    <select id="listActiveType${index}" value="${item.type}" class="form-control m-b" style="width: 170px;">
+                        <option value="">所有</option>
+                        <option value="1">NFT</option>
+                        <option value="2">组合购</option>
+                        <option value="3">演出</option>
+                        <option value="4">商品</option>
+                    </select>
+                </div>`
+
+            $('#addClassify2').append(dynamicAddDom) // 组装好，添加进去
+
+
+        })
+    }
+
+    // 添加关联推荐 html 单个添加
+    function addDom () {
+        let dynamicAddDom = `<div class="addAvatarItem" style="padding: 20px;">
+                <div class="selectClassifyOne" style="margin-bottom: 20px;">
+                    <span class="span-label"><i style="color: red;">*</i>推荐商品：</span>
+                    <div class="search-wrapper">
+                        <div class="search-wrapper" style="margin-bottom: 15px;">
+                            <div id="listRemoteSearch${index}"  placeholder="请搜索" name="seaarchSelect${index}"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="selectClassifyOne">
+                    <span class="span-label"><i style="color: red;">*</i>推荐类型：</span>
+                    <select id="listActiveType${index}" class="form-control m-b" style="width: 170px;">
+                        <option value="">所有</option>
+                        <option value="1">NFT</option>
+                        <option value="2">组合购</option>
+                        <option value="3">演出</option>
+                        <option value="4">商品</option>
+                    </select>
+                </div>`
+
+
+        // 只有一组，可添加
+        if (isOneDom) {
+            $('#addClassify2').append(dynamicAddDom)
+        } else {
+            layer.msg('不能添加')
+        }
+
+        // const new search
+
+    }
+
+    // 添加dom同时，添加表单监听
+    function createListenerSearch (index) {
+        console.log('createListenerSearch', index)
+        // 监听 模糊搜索
+        new searchSelect(`listRemoteSearch${index}`, [], function(val) {})
+    }
+
+    // 保存/更新
+    function save () {
+
+        // 修改活动
+        promiseMethods('/kylin-recommend-active/updateKylinRecommendActive','post', JSON.stringify(data), 'application/json').then(res => {
+
+            if (res.code == 200) {
+                $.operate.successCallback(res);
+            } else {
+                layer.msg(res.message)
+            }
+
+        })
+    }
+
+    // 请求方法封装
+    function promiseMethods (url, type, data, contentType) {
+        return new Promise((resolve,reject)=>{
+            $.ajax({
+                url,
+                type,
+                data,
+                contentType,
+                success:function(res) {
+                    resolve(res);
+                }
+            })
+        })
+    }
+
+    function getUrlParms (name) {
+        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if(r != null)
+            return unescape(r[2]);
+        return null;
+    }
+
+</script>
+</html>

liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/sweet/affiliatedActivity/list.html

@@ -102,6 +102,44 @@
         .date-range {
             width: 100%;
         }
+        .banner_list {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+        }
+        .banner_item, .items {
+            border-radius: 10px;
+            padding: 12px;
+            margin-bottom: 20px;
+        }
+        .img_show, .set_method, .set_function {
+            display: flex;
+        }
+        .title {
+            font-size: 16px;
+            font-weight: 600;
+            width: 80px;
+            text-align: right;
+        }
+        .kv-upload-progress {
+            display: none !important;
+        }
+        .ibox-content .imgBox {
+            width: 350px;
+            max-height: 180px;
+        }
+        .jump, .ticket_name, .set_function_time {
+            display: flex;
+            flex-grow: 1;
+            align-items: center;
+        }
+        .iptOrSelect {
+            flex: 1;
+        }
+        .img_box {
+            display: flex;
+            flex-direction: column;
+        }
 
     </style>
 </head>
@@ -146,27 +184,14 @@
 
     </div>
     <!-- modal -->
-    <div id="addClassify"></div>
-
-    <!-- modal -->
-    <div id="addClassify2"></div>
-</div>
-<th:block th:include="include :: footer"/>
-<th:block th:include="include :: datetimepicker-js"/>
-<th:block th:include="include :: bootstrap-suggest-js"/>
-<script th:src="@{/js/remote-search-performance.js}"></script>
-
-<script th:inline="javascript">
-    var prefix = ctx + "stone/logs";
-    var prefix2 = ctx + "local";
-    var couType = [[${couType}]];
-    var formData = new FormData();
-    var roadShowId = '[[${roadShowId}]]'.replaceAll("\"", "");
-    let listData = []
-
-    // 下线 modal
-    let addActivityModalDom = `<div class="selectClassify">
+    <div id="addClassify">
+        <div class="selectClassify">
             <div class="addAvatarItem">
+                <div class="selectClassifyOne">
+                    <span class="span-label"><i style="color: red;">*</i>活动名称：</span>
+                    <input type="text" class="form-control" id="activeName" style="margin-bottom: 15px;">
+                </div>
+
                 <div class="selectClassifyOne">
                     <span class="span-label"><i style="color: red;">*</i>关联类型：</span>
                     <select name="activeType" id="activeType" class="form-control m-b">
@@ -181,11 +206,8 @@
                 <div class="selectClassifyOne">
                     <span class="span-label"><i style="color: red;">*</i>关联ID：</span>
                     <div class="search-wrapper" style="margin-bottom: 15px;">
-                                <input name="roadShowId" th:value="*{roadShowId}" type="hidden">
-                                <div class="remote_wrapper" style="position: relative;">
-                                    <input name="recommendId" type="hidden">
-                                    <input type="text" class="form-control" id="remoteSearch">
-                                </div>
+                        <!-- 关联 模糊搜索 -->
+                        <div id="search"  placeholder="请搜索" name="seaarchSelect"></div>
                     </div>
                 </div>
 
@@ -222,25 +244,25 @@
         <div class="bottomBtn">
             <a src="javascript:;" class="layui-layer-btn0 paddings" onclick="saveActivity()">确定</a>
             <a class="layui-layer-btn1 layui-layer-btn1" onclick="closeModal()">取消</a>
-            </div>`
+        </div>
+    </div>
 
-    let affiliatedChildModal = `<div class="selectClassify">
+    <!-- modal -->
+    <div id="addClassify2">
+        <div class="selectClassify">
             <div class="addAvatarItem" style="padding: 20px;">
                 <div class="selectClassifyOne" style="margin-bottom: 20px;">
                     <span class="span-label"><i style="color: red;">*</i>推荐商品：</span>
                     <div class="search-wrapper">
-                    <div class="search-item">
-                        <input name="roadShowId" th:value="*{roadShowId}" type="hidden">
-                        <div class="remote_wrapper" style="position: relative;">
-                            <input name="recommendBindId" type="hidden">
-                            <input type="text" class="form-control" id="listRemoteSearch">
-                        </div>
+                        <div class="search-wrapper" style="margin-bottom: 15px;">
+                            <!-- 关联 模糊搜索 -->
+                            <div id="listRemoteSearch1"  placeholder="请搜索" name="seaarchSelect"></div>
                         </div>
                     </div>
                 </div>
                 <div class="selectClassifyOne">
                     <span class="span-label"><i style="color: red;">*</i>推荐类型：</span>
-                <select name="activeType" id="listActiveType" class="form-control m-b" style="width: 170px;">
+                    <select name="activeType" id="listActiveType1" class="form-control m-b" style="width: 170px;">
                         <option value="">所有</option>
                         <option value="1">NFT</option>
                         <option value="2">组合购</option>
@@ -254,13 +276,37 @@
         <div class="bottomBtn">
             <a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="saveListAffiliated()">确定</a>
             <a class="btn btn-default btn-xs layui-layer-btn2" href="javascript:void(0)" onclick="closeModal2()">取消</a>
-    </div>`
+        </div>
+    </div>
+</div>
+<th:block th:include="include :: footer"/>
+<th:block th:include="include :: datetimepicker-js"/>
+<th:block th:include="include :: bootstrap-suggest-js"/>
+<th:block th:include="include :: bootstrap-fileinput-js" />
+<script th:src="@{/js/searchSelect.js}"></script>
+
+<script th:inline="javascript">
+    let prefix = ctx + "stone/logs";
+    let prefix2 = ctx + "local";
+    let couType = [[${couType}]];
+    let formData = new FormData()
+    let listData = [] // 临时暂存 嵌套活动推荐
+    let activeTypeChangeVal = 0 // 关联id select
+    let activeTypeChangeValChild = 0 // list 中 关联id select
+    let affiliatedUrl = ['', 'goblin/common/sku', 'goblin/common/mix', 'kylin/performances/roadShow/performance/status', 'compilations/goodsList']
+    let currentUrl = ''
+    let currentChildUrl = ''
+
+    // 下线 modal
+    let addActivityModalDom = ``
+
+    let affiliatedChildModal = ``
 
     function clickAffiliatedList(val, index) {
         openAffiliatedModal(val, index)
     }
 
-
+    // document 加载
     $(function () {
         var options = {
             url: '/kylin-recommend-active/pageActive',
@@ -303,25 +349,133 @@
                     // align: 'center',
                     formatter: function (value, row, index) {
                         let dataArr = [];
-                        dataArr.push(`<span class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="opendTicketList('${row.activeId}')"><i class="fa fa-search"></i>查看券列表</span>`)
+                        dataArr.push(`<span class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="toEdit('${row.mid}')"><i class="fa fa-edit"></i>编辑</span>`)
                         return dataArr.join('  ')
                     }
                 }]
         };
         $.table.init(options);
+
+        $("input[name='startTime']").datetimepicker({
+            format: "yyyy-mm-dd hh:ii:ss",
+            autoclose: true
+        });
+
+        $("input[name='endTime']").datetimepicker({
+            format: "yyyy-mm-dd hh:ii:ss",
+            autoclose: true
+        });
+
+        // 选择select
+        $('#activeType').change(function () {
+            activeTypeChangeVal = Number($(this).val()) // 1 2 3 4
+            currentUrl = affiliatedUrl[activeTypeChangeVal]
+
+        })
+
+        $('#listActiveType1').change(function () {
+            activeTypeChangeValChild = Number($(this).val()) // 1 2 3 4
+            currentChildUrl = affiliatedUrl[activeTypeChangeValChild]
+        })
+
+        // 监听 模糊搜索
+        let search = new searchSelect('#search', [], function(val) {
+            let _params = {}
+            if (activeTypeChangeVal === 1) {
+                _params['type'] = 1
+                _params['title'] = val
+            } else if (activeTypeChangeVal === 2) { // 组合购
+                _params['title'] = val
+            } else if (activeTypeChangeVal === 3) { // 演出
+                _params['status'] = '(3,6,7,9,10)'
+                _params['title'] = val
+            } else { // 商品
+                _params['name'] = 1
+                _params['title'] = val
+            }
+            $.ajax({
+                type: 'get',
+                url: ctx + currentUrl,
+                contentType: "application/json;charset=UTF-8",
+                data: _params,
+                success: function(res) {
+                    let forData = activeTypeChangeVal === 3 ? res.value : res.data
+                    let _data = forData.map(item => {
+                        if (activeTypeChangeVal === 1) { // NFT
+                            return { id: item.spuId, value: item.spuName }
+                        } else if (activeTypeChangeVal === 2) {
+                            return { id: item.mixId, value: item.name }
+                        } else if (activeTypeChangeVal === 3) {
+                            return { id: item.performancesId, value: item.title }
+                        } else { // 商品
+                            return { id: item.spuId, value: item.name }
+                        }
+                    })
+                    search.update(_data)
+
+                }
+            })
+        })
+        search.search(true)
+
+        // 监听 模糊搜索 list
+        let listRemoteSearch1 = new searchSelect('#listRemoteSearch1', [], function(val) {
+            let _params = {}
+            if (activeTypeChangeValChild === 1) {
+                _params['type'] = 1
+                _params['title'] = val
+            } else if (activeTypeChangeValChild === 2) { // 组合购
+                _params['title'] = val
+            } else if (activeTypeChangeValChild === 3) { // 演出
+                _params['status'] = '(3,6,7,9,10)'
+                _params['title'] = val
+            } else { // 商品
+                _params['name'] = 1
+                _params['title'] = val
+            }
+            $.ajax({
+                type: 'get',
+                url: ctx + currentChildUrl,
+                contentType: 'application/json;charset=UTF-8',
+                data: _params,
+                success: function(res) {
+                    let forData = activeTypeChangeValChild === 3 ? res.value : res.data
+                    let _data = forData.map(item => {
+                        if (activeTypeChangeValChild === 1) { // NFT
+                            return { id: item.spuId, value: item.spuName }
+                        } else if (activeTypeChangeValChild === 2) {
+                            return { id: item.mixId, value: item.name }
+                        } else if (activeTypeChangeValChild === 3) {
+                            return { id: item.performancesId, value: item.title }
+                        } else { // 商品
+                            return { id: item.spuId, value: item.name }
+                        }
+                    })
+                    search.update(_data)
+
+                }
+            })
+        })
+        listRemoteSearch1.search(true)
+
+
+        // list 部分
+
+
     });
 
     // 保存
     function saveActivity () {
         let data = {
-            recommendId: $('#recommendId').val() || '111',
+            activeName: $('#activeName').val(),
+            activeBindId: $('#activeBindId').val(),
             startTime: $('#startTime').val(),
             endTime: $('#endTime').val(),
             activeType: Number($("#activeType").find("option:selected").val()),
             status: Number($("#status").find("option:selected").val()),
             list: listData
         }
-        let isRequired = data.recommendId && data.startTime &&data.endTime &&data.activeType
+        let isRequired = data.startTime &&data.endTime &&data.activeType
         console.log('saveActivity-params', data)
         if (isRequired) { // 必填ok
             $.ajax({
@@ -330,7 +484,6 @@
                 headers: {"Content-Type": "application/json;charset=UTF-8"},
                 data: JSON.stringify(data),
                 success: function(res) {
-                    console.log('success', res)
                     if (res.code == 200) {
                         alert('新增成功')
                         layer.close(layer.index)
@@ -347,9 +500,9 @@
     // 保存关联活动内容
     function saveListAffiliated() {
         let _recommendBindId = document.getElementsByName("recommendBindId")[0].value
-        let _type = $("#listActiveType").find("option:selected").val() // 已经获取
+        let _type = $("#listActiveType1").find("option:selected").val() // 已经获取
         listData.push({
-            recommendBindId: _recommendBindId || '666',
+            recommendBindId: _recommendBindId,
             type: Number(_type)
         })
         layer.close(layer.index)
@@ -357,32 +510,6 @@
 
     // 打开增加活动 modal
     function openAddActivityModal () {
-        $('#addClassify').html('')
-        $('#addClassify').append(addActivityModalDom)
-
-        $("input[name='startTime']").datetimepicker({
-            format: "yyyy-mm-dd hh:ii:ss",
-            autoclose: true
-        });
-
-        $("input[name='endTime']").datetimepicker({
-            format: "yyyy-mm-dd hh:ii:ss",
-            autoclose: true
-        });
-
-        // 输入检索功能
-        $('#remoteSearch').remoteSearchPerformance({
-            ajax: {
-                url: ctx + `goblin/common/mix`,
-                type: "get"
-            },
-            chose: function(text, val) { // 关闭重置
-                document.getElementsByName("recommendId")[0].value = val;
-            },
-            success: function(res) { // 选择，赋值
-                console.log('remoteSearch-res', res)
-            }
-        })
 
         layer.open({
             type: 1,
@@ -396,24 +523,8 @@
         });
     }
 
-    // 打开 list 选择
+    // 打开 list 选择 modal
     function openAffiliatedModal (val, index) {
-        $('#addClassify2').html('')
-        $('#addClassify2').append(affiliatedChildModal)
-
-        // 输入检索功能
-        $('#listRemoteSearch').remoteSearchPerformance({
-            ajax: {
-                url: ctx + `goblin/common/mix`,
-                type: "get"
-            },
-            chose: function(text, val) {
-                document.getElementsByName("recommendBindId")[0].value = val;
-            },
-            success: function(res) {
-                console.log('remoteSearch-res', res)
-            }
-        })
 
         layer.open({
             type: 1,
@@ -426,11 +537,18 @@
             }
         });
 
-        $('#listActiveType').find(`option[value=${index}]`).attr('selected', true)
+        // 设置 代入的 点击
+        $('#listActiveType1').find(`option[value=${index}]`).attr('selected', true)
 
 
     }
 
+    // 跳转 编辑
+    function toEdit (id) {
+        let url = ctx + 'local/affiliatedActivityEdit?id=' + id;
+        $.modal.openTab("关联活动编辑", url);
+    }
+
     // 关闭模态框
     function closeModal () {
         $("#addClassify").empty()
@@ -439,9 +557,8 @@
 
     // 关闭模态框2
     function closeModal2 () {
-        // $("#addClassify2").empty()
+        $("#addClassify2").empty()
         layer.close(layer.index)
-        $('#addClassify2').html('')
     }