crm/app/sys/view/agents/agent_article_list.html

{extend name="public/layout" /} {block name="title"}装修案例列表{/block} {block name="body"}
<link rel="stylesheet" href="__STATIC__/css/swiper.min.css">
<style type="text/css">
    html,
    body {
        display: block;
        min-width: 1000px;
    }

    .layui-fluid {
        display: block;
        box-shadow: 0 0 4px 0 #B6CADE;
        border-radius: 5px;
        margin: 15px;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .layui-table thead tr,
    .layui-table-header {
        background-color: #D8E6F1 !important;
    }

    .layui-tab {
        padding: 15px;
        height: 100%;
        box-sizing: border-box;
    }

    .layui-form-item {
        width: 100%;
    }

    .layui-form-item .layui-inline {
        display: block;
        float: left;
        width: 145px;
        height: 38px;
        line-height: 38px;
        background: #FFFFFF;
        margin-right: 16px;
    }

    .layui-form-item .layui-input-inline {
        width: 145px;
        height: 38px;
        line-height: 38px;
        margin-bottom: 0;
    }

    .layui-form-item .layui-input-inline .layui-input {
        border: 1px solid #9DB6CF;
        border-radius: 5px;
    }

    .layui-form-select dl dd.layui-this {
        background-color: #249EFB;
    }

    .layui-form-item div.searchBox {
        width: 320px;
        background: #FFFFFF;
        border: 1px solid #B6CADE;
        border-radius: 24px;
        height: 38px;
        overflow: hidden;
        padding-left: 18px;
        position: relative;
        margin-bottom: 0px;
        float: right;
    }

    .searchBox .inputBox {
        width: 240px;
        float: left;
        height: 36px;
        line-height: 36px;
        border-width: 0;
    }

    .searchBtn {
        position: absolute;
        top: 0;
        right: 0;
        width: 51px;
        height: 38px;
        background-color: #fff;
    }

    .searchBtn img {
        position: absolute;
        width: 26px;
        top: 6px;
        left: 0;
    }

    .layui-form-label {
        width: auto;
    }

    .layui-btn-primary {
        color: #249EFB;
        border: 1px solid #249EFB;
    }

    .layui-btn-primary:hover {
        background-color: #E3F7FF;
        color: #249EFB;
    }

    .layui-table-page>div {
        display: flex;
        justify-content: flex-start;
    }

    .layui-btn-xs,
    .layui-btn-xs:hover {
        border: 1px solid #249EFB;
        background-color: #fff;
        color: #249EFB;
        padding: 0px 10px;
    }

    .layui-btn-danger,
    .layui-btn-danger:hover {
        color: #FF5722;
        background-color: #fff;
        border: 1px solid #FF5722;
        padding: 0px 10px;
    }

    .ml10 {
        margin-left: 10px;
    }

    .operateBtn {
        display: flex;
        justify-content: flex-start;
    }

    .flex-end {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .layuiadmin-card-header-auto {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }

    .layui-tab {
        width: 98%;
        background-color: #fff;
        margin: 15px auto;
        box-shadow: 0 0 4px 0 #B6CADE;
        border-radius: 5px;
    }

    .layui-tab-title .layui-this {
        color: #249EFB;
    }

    .layui-tab-title .layui-this:after {
        width: 50px;
        height: 4px;
        background-color: #249EFB;
        top: 36px !important;
        left: 50%;
        transform: translateX(-50%);
        border: none;
    }

    .layui-tab-title li {
        margin: 0px 5px;
    }

    .li_active {
        font-weight: 700;
        background-color: #249EFB;
        color: #fff;
    }

    .relative {
        position: relative;
    }

    .noneClass {
        display: none !important;
    }

    .c_wordlist {
        width: 20px;
        position: absolute;
        top: 43px;
        right: 1px;
        display: flex;
        flex-direction: column;
        z-index: 99999;
        height: auto;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 4px 0px;
        overflow: hidden;
        max-height: 297px;
        -ms-overflow-style: none;
        /* IE 10+ */
        scrollbar-width: none;
        /* Firefox */
        overflow-y: scroll;
        background-color: #f5f5f5;
    }

    .c_wordlist::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .c_wordlist>li {
        width: 20px;
        height: 37px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0px;
        line-height: 37px;
    }

    dd {
        border-bottom: 1px solid #EFEFEF;
    }

    .layui-anim-upbit {
        -ms-overflow-style: none;
        /* IE 10+ */
        scrollbar-width: none;
        /* Firefox */
        overflow-y: scroll;
        background-color: #fff;
    }

    .layui-anim-upbit::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .layui-tab-title {
        border-bottom: 1px solid #f5f5f5;
    }

    .layui-form-select dl {
        width: 100% !important;
    }

    /* 手机预览效果--样式 */
    .preview_mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .preview_phone {
        width: 410px;
        height: 95vh;
        max-height: 820px !important;
        background: url('__STATIC__/img/phoneModel.png');
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .page_box {
        width: 375px;
        height: 96%;
        background-color: #fff;
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 30px;
        margin-right: 4px;
    }

    /* 设置滚动条的样式 */
    .page_box::-webkit-scrollbar {
        width: 2px;
    }

    /* 滚动槽 */
    .page_box::-webkit-scrollbar-track {
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }

    /* 滚动条滑块 */
    .page_box::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }

    .page_cover_img {
        width: 100%;
        height: 225px;
        background-color: #ccc;
        position: relative;
    }

    .cover_tab {
        max-width: 130px;
        height: 28px;
        position: absolute;
        bottom: 10px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 14px;
        display: flex;
        align-items: center;
        font-size: 12px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999999;
    }

    .cover_tab>div {
        width: 65px;
        height: 100%;
        display: inline-block;
        text-align: center;
        border-radius: 15px;
        line-height: 28px;
        cursor: pointer;
    }

    .activeTab {
        background-color: #249EFB;
        color: #fff;
    }

    .enter_vr {
        position: absolute;
        width: 60px;
        height: 30px;
        left: 50%;
        top: 45%;
        transform: translateX(-50%);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .page_title {
        padding: 15px 5px 0px;
        font-size: 18px;
        color: #000;
    }

    .designer_box {
        width: 96%;
        height: auto;
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px;
        margin: auto;
        background-color: #EFF4F8;
        margin-top: 10px;
        display: flex;
        align-items: center;
    }

    .designer_avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
    }

    .designer_msg {
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0px 10px;
    }

    .designer_person {
        font-size: 15px;
    }

    .designer_position {
        font-size: 10px !important;
    }

    .designer_style {
        margin-top: 4px;
        font-size: 12px;
        line-height: 18px;
        color: #A0BDD4;
    }

    .page_houseType {
        width: 96%;
        margin: 10px auto 20px;
        border: 1px solid #ececec;
        box-sizing: border-box;
        padding: 20px;
        overflow: hidden;
    }

    .houseType_msg {
        width: 25%;
        float: left;
    }

    .houseType_msg>span {
        display: block;
    }

    .houseType_name {
        color: #A9A9A9;
        font-size: 14px;
    }

    .houseType_val {
        font-size: 14px;
        color: #000;
        margin-top: 10px;
    }

    .page_line {
        width: 100%;
        height: 8px;
        background-color: #ECECEC;
    }

    .page_tab_box {
        width: 100%;
        padding: 10px 5px 0px;
        display: flex;
        font-size: 18px;
    }

    .page_tab_box>div {
        margin-right: 20px;
        cursor: pointer;
    }

    .nowtitbox {
        font-size: 18px;
        font-weight: bold;
        position: relative;
    }

    .nowtitbox::before {
        content: ' ';
        display: block;
        width: 6px;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform-origin: 100% 0;
        transform: translateX(-150%) rotate(-30deg);
        background-color: #333333;
    }

    .nowtitbox::after {
        content: ' ';
        display: block;
        width: 6px;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 50%;
        background-color: #333333;
        transform-origin: 0 0;
        transform: translateX(-50%) rotate(390deg);
    }

    .richText {
        padding: 10px;
    }

    .richText img {
        max-width: 100% !important;
        margin: 0px !important;
        padding: 0px !important;
    }

    .richText video {
        max-width: 100% !important;
    }

    .page_time {
        color: #b8b8b8;
        font-size: 12px;
        padding: 0px 5px 16px;
    }

    .swiper-container {
        width: 100%;
        height: 225px;
        display: block;
    }

    .swiper-slide {
        width: 100%;
        height: 100%;
        display: inline-block;
        text-align: center;
        font-size: 18px;
        background: #fff;
        clear: both;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .relative {
        position: relative;
    }

    .lay-close {
        position: absolute;
        top: 30px;
        right: 25%;
        color: #fff;
        font-size: 38px !important;
        font-weight: 700;
        cursor: pointer;
    }

    video {
        background-color: #000;
    }

    .colorA9A9A9 {
        color: #A9A9A9 !important;
    }

    .ablock {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this" data-type="2">公司分享</li>
            <li id="details" data-type="1">推荐分享</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-card">
                    <div class="layui-card-header layuiadmin-card-header-auto" style="padding: 15px 15px 20px;">
                        <div class="operateBtn">
                            <a type="button" class="layui-btn layui-btn-primary caseaddbtn">
                                添加内容
                            </a>
                        </div>
                        <div class="layui-form flex-end">
                            <div class="layui-inline">
                                <label class="layui-form-label">文章标题</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="title" placeholder="请输入标题" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-right: 0px;">
                                <label class="layui-form-label">上传人</label>
                                <div class="layui-input-inline">
                                    <select name="employee_id" id="employee" lay-search>
                                        <option value="">请选择人员</option>
                                        {volist name="employee" id="e"}
                                        <option value="{$e.id}">{$e.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">上传时间</label>
                                <div class="layui-input-inline select-date">
                                    <input type="text" name="add_time" id="select_date" placeholder="开始时间 - 结束时间"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline ml10">
                                <button class="layui-btn layuiadmin-btn-list submitbtn" lay-submit
                                    lay-filter="LAY-app-contlist-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body" style="text-align: center;">
                        <table id="anli-table" lay-filter="anli-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="preview_mask layui-hide">
        <div class="preview_phone">
        </div>
        <i class="layui-icon layui-icon-close lay-close"></i>
    </div>
</body>
{/block} {block name="js"}
<script type="text/html" id="cover_img">
	{{# if(d.file_img != ''){ }}
    {{# if(d.file_type == 1 || d.difference == 1){ }}
        <img src="{{d.file_img}}?x-oss-process=video/snapshot,t_100,f_jpg,w_375,m_fast" style="width: 30px;height: 30px;"/>
        {{# }else{ }}
        <img src="{{d.file_img}}?x-oss-process=image/resize,w_50" style="width: 30px;height: 30px;"/>
        {{# } }}
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>

<script type="text/html" id="titletpl">
	{{# if(d.title){ }}
		<span>{{d.title}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="employee_name">
	{{# if(d.employee){ }}
	<span>{{d.employee.opt_name?d.employee.opt_name:d.employee.name}}</span>
	{{# }else{ }}
	<span style="color: #cccccc;">无</span>
	{{# } }}
</script>

<script type="text/html" id="show">
	<input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="开启|关闭" lay-filter="show" {{ d.disable == 0 ? 'checked' : '' }}>
</script>
<script type="text/html" id="table-anli-action">
	<a class="layui-btn layui-btn-xs" lay-event="anli-details">编辑</a>
	<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="anli-delete">删除</a>
</script>
<script src="__STATIC__/js/swiper.min.js"></script>
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'element', 'laydate'], function () {
        var $ = layui.$,
            form = layui.form,
            element = layui.element,
            table = layui.table,
            laydate = layui.laydate,
            scrollTopNum = 0,
            fromType = '2';
        //日期范围
        laydate.render({
            elem: '#select_date'
            , type: 'date'
            , range: true
            , trigger: 'click'//呼出事件改成click
        });
        document.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 13) {
                $(".submitbtn").trigger("click");
            }
        };
        $('.caseaddbtn').click(function () {
            layer.open({
                type: 2,
                title: ['添加内容', 'color:#333333;background-color:#D8E6F1;'],
                content: '{:url("agents/add_article")}',
                resize: false,
                area: ['80%', '80%'],
                end: function() {
                    //执行重载
                    table.reload('anli-table');
                }
            });
        })

        $(".layui-tab-title li").click(function () {
            fromType = $(this).prop("dataset").type;
            firstTabTableLoad();
            if (fromType == 2) {
                $(".caseaddbtn").removeClass('layui-hide');
            } else {
                $(".caseaddbtn").addClass('layui-hide');
            }
        })
        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function (data) {
            var field = data.field;
            console.log(data)
            //执行重载
            table.reload('anli-table', {
                where: field
                , page: { curr: 1 }
            });
        });
        ///default entery
        var firstTabTableLoad = function () {
            let colsVal = getColsArr();
            //装修案例列表
            table.render({
                elem: '#anli-table',
                autoSort: false,
                url: fromType == 2 ? "{:url('agents/agent_article_list')}" : "{:url('agents/agtemp_artlist')}",
                cols: [colsVal],
                page: true,
                limit: 50,
                height: 'full-220',
                text: '对不起，加载出现异常！'
            });

            table.on('sort(anli-table)', function (obj) {
                table.reload('anli-table', {
                    initSort: obj
                    , where: {
                        order: obj.field + ' ' + obj.type
                    }
                });
            });
            //监听列表
            table.on('tool(anli-table)', function (obj) {

                var data = obj.data;
                console.log(data.id);
                if (obj.event === 'anli-details') {
                    layer.open({
                        type: 2,
                        title: ['编辑文章', 'color:#333333;background-color:#D8E6F1;'],
                        content: "{:url('agents/edit_article')}?id=" + data.id,
                        resize: false,
                        area: ['80%', '85%'],
                        end: function () {
                            //执行重载
                            table.reload('anli-table');
                        }
                    });
                }
                if (obj.event === 'anli-clue-list') {
                    layer.open({
                        type: 2,
                        title: ['素材线索数据', 'color:#333333;background-color:#D8E6F1;'],
                        content: "{:url('data/cluedata')}?type=materialCase&id=" + data.id,
                        resize: false,
                        area: ['80%', '80%']
                    });
                }
                if (obj.event === 'anli-delete') {
                    layer.confirm('确定要删除此素材么？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function () {
                        $.get("{:url('agents/del_article')}?id=" + data.id, function (res) {
                            if (res.code === 0) {
                                layer.msg(res.msg, { anim: 0, time: 400 }, function () {
                                    table.reload('anli-table');
                                });
                            } else {
                                layer.msg(res.msg, { anim: 6, time: 400 });
                            }
                        });
                    });
                }
            });
        };
        firstTabTableLoad();

        function getColsArr() {
            let colsArr = [{
                align: 'center',
                type: 'numbers',
                field: 'id',
                width: 80,
                title: '序号',
                sort: true
            }, {
                align: 'center',
                templet: '#cover_img',
                width: 100,
                title: '封面图',
            }, {
                align: 'center',
                field: 'title',
                title: '案例标题',
                minWidth: 100,
                templet: '#titletpl'
            },
            {
                align: 'center',
                field: 'addtime',
                title: '上传时间',
                minWidth: 100
            },
            {
                align: 'center',
                title: '展示',
                minWidth: 100,
                templet: '#show'
            }, {
                align: 'center',
                title: '上传人',
                minWidth: 100,
                templet: '#employee_name'
            }];
            if (fromType == '2') {
                colsArr.push({
                    align: 'center',
                    title: '操作',
                    width: 380,
                    align: 'center',
                    fixed: 'right',
                    templet: "#table-anli-action"
                })
                return colsArr;
            } else {
                return colsArr;
            }
        }

        setTimeout(() => {
            $('.layui-table-main').scroll(function (e) {
                scrollTopNum = $(this).scrollTop();
                console.log(scrollTopNum, '<<<记录位置');
            })
        }, 800)

        function scrollPostion(num) {
            $('.layui-table-main').scrollTop(num)
        }

        /*---------------------------------------------------------*/
        $('dd').click(() => {
            $('.c_wordlist').addClass('noneClass');
        })

        $('#box212').click(() => {
            $('.c_wordlist').toggleClass('noneClass');
        })

        let xqElement = $('.layui-anim-upbit')[0];
        xqElement.classList.add('xqElement');

        let options = [];
        let xqDatalist = $('#community').children();
        for (let i = 0; i < xqDatalist.length; i++) {
            if (xqDatalist[i].dataset.py) {
                options.push(xqDatalist[i].dataset.py)
            }
        }

        $('.c_wordlist').click((e) => {
            if (e.target.localName != 'li') {
                e.stopPropagation();
                return;
            }
            let index = 0;
            let curWord = e.target.dataset.py;
            let lilist = $('.c_wordlist').children();
            for (let i = 0; i < lilist.length; i++) {
                lilist[i].className = '';
            }
            if (parseInt(curWord) != NaN) {
                let word1 = curWord.toLowerCase();
                index = options.indexOf(word1)
            } else {
                index = options.indexOf(curWord)
            }
            setTimeout(() => {
                e.target.className = 'li_active';
                let num = index * 37 + 37;
                $('.xqElement').scrollTop(num);
            }, 50)
            e.stopPropagation();
        })

        $('.layui-select-title input').on('input', function (e) {
            if (e.target.placeholder == '请选择小区') {
                let val = $(this).val();
                if (!val) {
                    $('.c_wordlist').removeClass('noneClass');
                    return;
                }
                $('.c_wordlist').addClass('noneClass');
            }
        })
        /*--------------------------------------------*/
        var field = {};
        form.on('select(state)', function (data) {
            field['state'] = data.value;
            table.reload('anli-table', {
                where: field
                , page: { curr: 1 }
            });
        });
        form.on('select(user_id)', function (data) {
            field['user_id'] = data.value;
            table.reload('anli-table', {
                where: field
                , page: { curr: 1 }
            });
        });
        form.on('select(means)', function (data) {
            field['means'] = data.value;
            table.reload('anli-table', {
                where: field
                , page: { curr: 1 }
            });
        });
        form.on('select(date)', function (data) {
            field['date'] = data.value;
            table.reload('anli-table', {
                where: field
                , page: { curr: 1 }
            });
        });

        //备注
        $('body').on('mouseover', '.remarksInfo', function () {
            var type = $(this).data('type');
            layer.tips(type, this, {
                tips: [1, '#3595CC'],
                time: 2000
            });
        });


        form.on('switch(show)', function (obj) {
            var id = obj.value;
            $.ajax({
                type: "post",
                url: '{:url("agents/apipublish")}',
                data: {
                    id: id,
                    cate: 'case'
                },
                success: function (res) {
                    layer.msg(res.msg, { time: 2000 });
                }
            });
        });
    });
</script>
{/block}