crm/app/sys/view/smart_screen/index.html

{extend name="public/layout"/} {block name="title"}{/block} {block name="body"}
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3820309_6r1qmg91u8u.css">
<style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
        min-width: 1000px;
    }

    .layui-card {
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: #EEEEEE;
    }

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

    .flex {
        display: flex;
    }

    .leftBox {
        flex: 3;
        margin: 10px 5px 10px 10px;
        background-color: #fff;
        box-sizing: border-box;
        padding: 15px;
        border-radius: 4px;
        overflow-y: auto;
    }

    .rightBox {
        flex: 2;
        margin: 10px 10px 10px 5px;
        background-color: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 15px;
    }

    .labeltips {
        border-left: 4px solid #249EFB;
        box-sizing: border-box;
        padding-left: 5px;
        display: flex;
        align-items: center;
        font-weight: 600;
    }

    .switchBox {
        display: flex;
        align-items: center;
        padding: 10px;
    }

    .switchBox>span {
        margin-right: 10px;
    }

    .layui-form-switch {
        margin-top: 0px;
    }

    .smartScreen {
        width: 100%;
        max-width: 600px;
        height: auto;
        overflow: hidden;
        margin: 15px auto 0px;
    }

    .smartScreenTop {
        width: 100%;
        height: 160px;
        display: flex;
        margin-bottom: 30px !important;
    }

    .smartScreenItem1 {
        width: 160px;
        height: 180px;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .smartScreenItem1:hover .smartBottomMsg {
        display: flex;
    }
    .smartScreenItem2:hover .smartBottomMsg {
        display: flex;
    }
    .smartScreenItem3:hover .smartBottomMsg {
        display: flex;
    }
    .smartScreenItem4:hover .smartBottomMsg {
        display: flex;
    }
    .smartScreenItem5:hover .smartBottomMsg {
        display: flex;
    }
    .smartScreenItem6:hover .smartBottomMsg {
        display: flex;
    }
    .smartScreenItem7:hover .smartBottomMsg {
        display: flex;
    }
    .smartScreenItem8:hover .smartBottomMsg {
        display: flex;
    }
    .smartScreenItem9:hover .smartBottomMsg {
        display: flex;
    }

    .smartScreenItem1>img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 0;
    }

    .smartScreenItem2>img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 0;
    }

    .smartScreenItem3>img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 0;
    }

    .smartScreenItem4>img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 0;
    }

    .smartScreenItem4 {
        width: 160px;
        height: 180px;
        background-color: green;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .smartScreenBox {
        flex: 1;
        margin: 0px 10px;
    }

    .smartScreenItem2 {
        width: 100%;
        height: 85px;
        background-color: slateblue;
        margin-bottom: 10px;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0px 20px;
    }

    .smartScreenItem3 {
        width: 100%;
        height: 85px;
        background-color: palevioletred;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0px 20px;
    }

    .smartScreenBottom {
        width: 100%;
        height: auto;
        display: flex;
        align-items: flex-end;
    }

    .smartScreenItem5 {
        width: 75px;
        height: 80px;
        background-color: orange;
        margin-right: 10px;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .smartScreenItem6 {
        width: 75px;
        height: 80px;
        background-color: orange;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .smartScreenBox1 {
        flex: 1;
        display: flex;
        margin: 0px 10px;
    }

    .smartScreenItem7 {
        flex: 1;
        height: 80px;
        background-color: orange;
        margin-right: 5px;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .smartScreenItem8 {
        flex: 1;
        height: 80px;
        background-color: orange;
        margin-left: 5px;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .smartScreenItem9 {
        width: 160px;
        height: 80px;
        background-color: powderblue;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .relative {
        position: relative;
    }

    .smartBottomMsg {
        position: absolute;
        width: 100%;
        height: 25px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 10px;
        display: none;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0px 5px;
        bottom: 0px;
        left: 0px;
        z-index: 9;
    }

    .circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 9;
    }

    .textmsg {
        font-size: 14px;
        color: #fff;
        margin-top: 8px;
        font-weight: 600;
        position: relative;
        z-index: 9;
    }

    .textmsg1 {
        font-size: 14px;
        color: #fff;
        font-weight: 600;
        margin-left: 10px;
        position: relative;
        z-index: 9;
    }

    .spanWidth5 {
        display: inline-block;
        max-width: 50px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .spanWidth6 {
        display: inline-block;
        max-width: 90px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .layui-icon-set-fill {
        cursor: pointer;
    }

    .rightHeader {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        font-size: 14px;
    }

    .rightName {
        margin: 0px 5px;
        color: #249EFB;
    }

    .hraderline {
        width: 4px;
        height: 20px;
        border-radius: 2px;
        background-color: #249EFB;
    }

    .nameInput {
        padding: 10px;
    }

    .nameInput>input {
        border: 1px solid #CCCCCC;
        height: 30px;
        box-sizing: border-box;
        padding: 0px 5px;
        margin-top: 10px;
        border-radius: 2px;
    }

    .uploadbgBox {
        width: 100px;
        height: 100px;
        border: 1px dotted #999999;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .uploadbgBox>span {
        font-size: 14px;
        color: #999;
    }

    .tootips {
        color: #999;
        margin-top: 8px;
        font-size: 12px;
    }

    .fixedBtn {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 54px;
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        padding: 0px 20px;
        align-items: center;
        border-top: 1px solid #CCCCCC;
    }

    .bgimage {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 0;
    }
    i {
        position: relative;
        z-index: 9;
    }
    .zindex9 {
        position: relative;
        z-index: 9;
    }

    .mtbauto {
        margin: 40px 0px 20px;
    }

    .listBoxElement {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .listItemBox {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0px 10px;
        border-bottom: 1px solid #f2f2f2;
    }

    .moveElement {
        cursor: move;
    }

    .sortRight {
        cursor: pointer;
    }

    .listItemBox>div {
        display: flex;
        align-items: center;
    }

    .listItemBox>div>span {
        margin-left: 5px;
    }

    .sortlistbtn {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        box-sizing: border-box;
        padding: 0px 20px;
        margin: 30px 0px;
    }

    .tipsspan {
        font-size: 12px;
        color: #999999;
        margin-left: 5px;
    }
    .saveBtnTime {
        background-color: #249DFA;
        padding: 6px 15px;
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
    }
    .timeInput {
        border: 1px solid #CCCCCC;
        height: 28px;
    }
</style>
<div class="layui-card flex">
    <form class="layui-form flex" id="admin" enctype="multipart/form-data">
        <div class="leftBox">
            <div class="labeltips">智慧屏链接</div>
            <div class="switchBox">{$url}</div>
            <div class="labeltips">智慧屏录音</div>
            <div class="switchBox">
                <span>开启/关闭</span>
                <input type="checkbox" lay-skin="switch" lay-filter="switchElement" {if condition="$data.switch eq 1" }
                    checked {/if} lay-text="开启|关闭">
            </div>
            <div class="labeltips">谈单有效时长</div>
            <div class="switchBox">
                <input class="timeInput" id="longTimeElement" type="number" min="0" style="width: 100px;" value="{$data['smartScreenValidMinutes']}" />
                <span style="margin-left: 5px;">分钟</span>
                <span class="saveBtnTime">保存</span>
            </div>
            <div class="labeltips">电脑端示例</div>
            <div class="smartScreen">
                <div class="smartScreenTop">
                    <!-- 公司简介 -->
                    <div class="smartScreenItem1 relative">
                        {if condition='$data.row.introduce.background_img'}
                            <img src="{$data.row.introduce.background_img}" alt="">
                        {else/}
                            <img src="/static/img/wisdom/introduce.png" alt="">
                        {/if}
                        
                        <div class="circle">
                            {if condition='$data.row.introduce.lcon_img'}
                            <img src="{$data.row.introduce.lcon_img}" width="25px" alt="">
                            {else/}
                            <i class="iconfont icon-gongsi" style="font-size: 25px;color: #fff;"></i>
                            {/if}
                        </div>
                        <span class="textmsg">{$data.row.introduce.title}</span>
                        <div class="smartBottomMsg">
                            <span>{$data.row.introduce.title}</span>
                            <i data-type="introduce" data-title="{$data.row.introduce.title}"
                                class="layui-icon layui-icon-set-fill"></i>
                        </div>
                    </div>
                    <div class="smartScreenBox">
                        <!-- 模式优势 -->
                        <div class="smartScreenItem2 relative">
                            {if condition='$data.row.pattern.background_img'}
                            <img src="{$data.row.pattern.background_img}" alt="">
                            {else/}
                                <img src="/static/img/wisdom/pattern.png" alt="">
                            {/if}
                            
                            <div class="circle">
                                {if condition='$data.row.pattern.lcon_img'}
                                <img src="{$data.row.pattern.lcon_img}" width="25px" alt="">
                                {else/}
                                <i class="iconfont icon-a-jiangbeipaihangbang-m"
                                    style="font-size: 25px;color: #fff;"></i>
                                {/if}
                            </div>
                            <span class="textmsg1">{$data.row.pattern.title}</span>
                            <div class="smartBottomMsg">
                                <span>{$data.row.pattern.title}</span>
                                <i data-type="pattern" data-title="{$data.row.pattern.title}"
                                    class="layui-icon layui-icon-set-fill"></i>
                            </div>
                        </div>
                        <!-- 精品设计 -->
                        <div class="smartScreenItem3 relative">
                            {if condition='$data.row.boutique.background_img'}
                                <img src="{$data.row.boutique.background_img}" alt="">
                            {else/}
                                <img src="/static/img/wisdom/boutique.png" alt="">
                            {/if}
                            <div class="circle">
                                {if condition='$data.row.boutique.lcon_img'}
                                <img src="{$data.row.boutique.lcon_img}" width="25px" alt="">
                                {else/}
                                <i class="iconfont icon-sheji" style="font-size: 25px;color: #fff;"></i>
                                {/if}
                            </div>
                            <span class="textmsg1">{$data.row.boutique.title}</span>
                            <div class="smartBottomMsg">
                                <span>{$data.row.boutique.title}</span>
                                <i data-type="boutique" data-title="{$data.row.boutique.title}"
                                    class="layui-icon layui-icon-set-fill"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 材料 -->
                    <div class="smartScreenItem4 relative">
                        {if condition='$data.row.science.background_img'}
                            <img src="{$data.row.science.background_img}" alt="">
                        {else/}
                            <img src="/static/img/wisdom/science.png" alt="">
                        {/if}
                        <div class="circle">
                            {if condition='$data.row.science.lcon_img'}
                            <img src="{$data.row.science.lcon_img}" width="25px" alt="">
                            {else/}
                            <i class="iconfont icon-cailiaogongcheng" style="font-size: 25px;color: #fff;"></i>
                            {/if}
                        </div>
                        <span class="textmsg">{$data.row.science.title}</span>
                        <div class="smartBottomMsg">
                            <span>{$data.row.science.title}</span>
                            <i data-type="science" data-title="{$data.row.science.title}"
                                class="layui-icon layui-icon-set-fill"></i>
                        </div>
                    </div>
                </div>
                <div class="smartScreenBottom">
                    <!-- 铂金工程 -->
                    <div class="smartScreenItem5 relative">
                        {if condition='$data.row.platinum.background_img'}
                            <img class="bgimage" src="{$data.row.platinum.background_img}" alt="">
                        {else/}
                            <img class="bgimage" src="/static/img/wisdom/platinum.png" alt="">
                        {/if}
                        {if condition='$data.row.platinum.lcon_img'}
                        <img class="zindex9" src="{$data.row.platinum.lcon_img}" width="25px" alt="">
                        {else/}
                        <i class="iconfont icon-shigongdian" style="font-size: 25px;color: #fff;"></i>
                        {/if}
                        <span class="textmsg">{$data.row.platinum.title}</span>
                        <div class="smartBottomMsg">
                            <span class="spanWidth5">{$data.row.platinum.title}</span>
                            <i data-type="platinum" data-title="{$data.row.platinum.title}"
                                class="layui-icon layui-icon-set-fill"></i>
                        </div>
                    </div>
                    <!-- 定制家具 -->
                    <div class="smartScreenItem6 relative">
                        {if condition='$data.row.customized.background_img'}
                            <img class="bgimage" src="{$data.row.customized.background_img}" alt="">
                        {else/}
                            <img class="bgimage" src="/static/img/wisdom/customized.png" alt="">
                        {/if}
              
                        {if condition='$data.row.customized.lcon_img'}
                        <img class="zindex9" src="{$data.row.customized.lcon_img}" width="25px" alt="">
                        {else/}
                        <i class="iconfont icon-fenzu" style="font-size: 25px;color: #fff;"></i>
                        {/if}
                        <span class="textmsg">{$data.row.customized.title}</span>
                        <div class="smartBottomMsg">
                            <span class="spanWidth5">{$data.row.customized.title}</span>
                            <i data-type="customized" data-title="{$data.row.customized.title}"
                                class="layui-icon layui-icon-set-fill"></i>
                        </div>
                    </div>
                    <div class="smartScreenBox1">
                        <!-- 大牌软装 -->
                        <div class="smartScreenItem7 relative">
                            {if condition='$data.row.major.background_img'}
                                <img class="bgimage" src="{$data.row.major.background_img}" alt="">
                            {else/}
                                <img class="bgimage" src="/static/img/wisdom/major.png" alt="">
                            {/if}
        
                            {if condition='$data.row.major.lcon_img'}
                            <img class="zindex9" src="{$data.row.major.lcon_img}" width="25px" alt="">
                            {else/}
                            <i class="iconfont icon-taideng" style="font-size: 25px;color: #fff;"></i>
                            {/if}
                            <span class="textmsg">{$data.row.major.title}</span>
                            <div class="smartBottomMsg">
                                <span class="spanWidth6">{$data.row.major.title}</span>
                                <i data-type="major" data-title="{$data.row.major.title}"
                                    class="layui-icon layui-icon-set-fill"></i>
                            </div>
                        </div>
                        <!-- 口碑及服务 -->
                        <div class="smartScreenItem8 relative">
                            {if condition='$data.row.praise.background_img'}
                                <img class="bgimage" src="{$data.row.praise.background_img}" alt="">
                            {else/}
                                <img class="bgimage" src="/static/img/wisdom/praise.png" alt="">
                            {/if}

                            {if condition='$data.row.praise.lcon_img'}
                            <img class="zindex9" src="{$data.row.praise.lcon_img}" width="25px" alt="">
                            {else/}
                            <i class="iconfont icon-koubei" style="font-size: 25px;color: #fff;"></i>
                            {/if}
                            <span class="textmsg">{$data.row.praise.title}</span>
                            <div class="smartBottomMsg">
                                <span class="spanWidth6">{$data.row.praise.title}</span>
                                <i data-type="praise" data-title="{$data.row.praise.title}"
                                    class="layui-icon layui-icon-set-fill"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 实景样板房 -->
                    <div class="smartScreenItem9 relative">
                        {if condition='$data.row.realistic.background_img'}
                            <img class="bgimage" src="{$data.row.realistic.background_img}" alt="">
                        {else/}
                            <img class="bgimage" src="/static/img/wisdom/realistic.png" alt="">
                        {/if}
                        {if condition='$data.row.realistic.lcon_img'}
                        <img class="zindex9" src="{$data.row.realistic.lcon_img}" width="25px" alt="">
                        {else/}
                        <i class="iconfont icon-zhuliuyangbanjian-" style="font-size: 25px;color: #fff;"></i>
                        {/if}
                        <span class="textmsg">{$data.row.realistic.title}</span>
                        <div class="smartBottomMsg">
                            <span>{$data.row.realistic.title}</span>
                            <i data-type="realistic" data-title="{$data.row.realistic.title}"
                                class="layui-icon layui-icon-set-fill"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="labeltips mtbauto">智慧屏列表排序<span class="tipsspan">(拖动图标排列顺序)</span></div>
            <div class="listBoxElement" id="listBoxElement">
                {volist name='menus' id='v'}
                    <div data-id="{$v.id}" class="listItemBox">
                        <div>
                            <img src="/static/img/move.png" class="moveElement" width="16px" alt="">
                            <span>{$v.name}</span>
                        </div>
                        <img src="/static/img/sTop.png" class="sortRight" width="20px" alt="">
                    </div>
                {/volist}
            </div>
            <div class="sortlistbtn">
                <div class="cancelSort layui-btn layui-btn-primary">取消</div>
                <div class="saveSort layui-btn layui-btn-normal">保存排序</div>
            </div>
        </div>
        <div class="rightBox relative">
            <div class="rightHeader">
                <div class="hraderline"></div>
                <span class="rightName">公司简介</span>
                <span>设置</span>
            </div>
            <div class="nameInput">
                <div>板块名称</div>
                <input type="text" name="title" id="moduleNameEl">
            </div>
            <div class="nameInput">
                <div>背景设置</div>
                <div class="uploadbgBox" id="upload-drag0">
                    <span>上传背景</span>
                </div>
            </div>
            <div class="nameInput">
                <div>图标上传</div>
                <div class="uploadbgBox" id="upload-drag1">
                    <span>上传图标</span>
                </div>
                <div class="tootips">注意：上传的图标比例1:1,大小尺寸64 X 64</div>
            </div>
            <div class="fixedBtn">
                <div class="layui-btn layui-btn-primary" id="activity-submits">恢复默认</div>
                <div class="layui-btn layui-btn-primary">取消</div>
                <input type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="activity-submit"
                    id="activity-submit" value="保存" />
            </div>
        </div>
    </form>
</div>
{/block} {block name="js"}
<script type="text/javascript" src="__STATIC__/js/Sortable.js"></script>
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table', 'upload', 'element'], function () {
        var $ = layui.$,
            element = layui.element,
            upload = layui.upload,
            form = layui.form,
            rType = "introduce",
            bgFile = null,
            iconFile = null,
            iconurl = null,
            bgurl = null;
        var field = {};
        form.render();
        new Sortable($('.listBoxElement')[0], {
            handle: '.moveElement', // handle's class
            animation: 150
        });
        $('.sortRight').click(function () {
            var ops1 = {
                draggable: ".listItemBox",
                onChoose: function (evt) {
                    var index = evt.oldIndex;
                    $("#listBoxElement .listItemBox").eq(index).insertBefore($("#listBoxElement .listItemBox").eq(0));
                }
            };
            var sortable1 = Sortable.create($('#listBoxElement')[0], ops1);
        })

        $('.cancelSort').click(function() {
            location.reload();
        })

        $('.saveSort').click(function() {
            let arr = [];
            $('.listItemBox').each(function() {
                let props = $(this).prop('dataset');
                arr.push(props.id);
            })
            $.ajax({
                url: '{:url("smartScreen/saveOrder")}',
                type: 'post',
                data: {ids: arr.join(',')},
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, {
                            anim: 0
                            , time: 1500
                        });
                        setTimeout(() => {
                            location.reload();
                            // window.parent.parent.reloadInternet();
                        },1500)
                    } else {
                        layer.msg(res.msg, {
                            anim: 6
                            , time: 1500
                        });
                    }
                }
            });
            return false;
        })

        /* 监听提交 */
        form.on('submit(activity-submit)', function (obj) {
            let formData = new FormData();
            let title = $('#moduleNameEl').val();
            formData.append('title', title);
            formData.append('type', rType);
            if (bgFile) {
                formData.set('background_img', bgFile)
            } else {
                if (bgurl) {
                    formData.set('background_img', bgurl)
                }
            }
            if (iconFile) {
                formData.set('lcon_img', iconFile)
            } else {
                if (iconurl) {
                    formData.set('lcon_img', iconurl)
                }
            }
            $.ajax({
                url: '{:url("smartScreen/saveModularRead")}',
                type: 'post',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, {
                            anim: 0
                            , time: 2000
                        });
                        location.reload();
                    } else {
                        layer.msg(res.msg, {
                            anim: 6
                            , time: 2000
                        });
                    }
                }
            });
            return false;
        });

        $(".saveBtnTime").click(function () {
            let minutes = $("#longTimeElement").val();
            if (!minutes||minutes <= 0) {
                layer.msg('请输入有效时长', {
                    anim: 0
                    , time: 2000
                });
                return false;
            }
            $.ajax({
                url: '{:url("smartScreen/setValidMinutes")}',
                type: 'post',
                data: {minutes: minutes},
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, {
                            anim: 0
                            , time: 2000
                        },function () {
                            location.reload();
                        });

                    } else {
                        layer.msg(res.msg, {
                            anim: 6
                            , time: 2000
                        });
                    }
                }
            });
            return false;
        })

        $('.layui-icon-set-fill').click(function (e) {
            rType = $(this).prop('dataset').type;
            let title = $(this).prop('dataset').title;
            $('.rightName').text(title)
            getCurData();
        })
        getCurData();
        function getCurData() {
            $.ajax({
                url: '{:url("smartScreen/getModularRead")}',
                type: 'post',
                data: {
                    type: rType
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        $('#moduleNameEl').val(res.data.title);
                        if (res.data.background_img) {
                            bgurl = res.data.background_img
                            $('#upload-drag0').html('<img src="' + res.data.background_img + '" style="width:100%;height:auto;">')
                        } else {
                            bgurl = null;
                            $('#upload-drag0').html('<span>上传背景</span>')
                        }
                        if (res.data.lcon_img) {
                            iconurl = res.data.lcon_img
                            $('#upload-drag1').html('<img src="' + res.data.lcon_img + '" style="width:100%;height:auto;">')
                        } else {
                            iconurl = null;
                            $('#upload-drag1').html('<span>上传图标</span>')
                        }
                    } else {
                        layer.msg(res.msg, {
                            anim: 6
                            , time: 2000
                        });
                    }
                }
            });
        }

        form.on('switch(switchElement)', function (data) {
            $.ajax({
                url: '{:url("smartScreen/recordingSwitch")}',
                type: 'post',
                data: {},
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, {
                            anim: 0
                            , time: 2000
                        });
                    } else {
                        layer.msg(res.msg, {
                            anim: 6
                            , time: 2000
                        });
                    }
                }
            });
        })

        //拖拽上传
        upload.render({
            elem: '#upload-drag0',
            accept: 'image',
            exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
            auto: false,
            field: 'background_img',
            size: 1 * 1024,
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    bgFile = file;
                    $('#upload-drag0').html('<img src="' + result + '" style="width:100%;height:auto;">');
                });
            }
        });

        //拖拽上传
        upload.render({
            elem: '#upload-drag1',
            accept: 'image',
            exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
            auto: false,
            field: 'lcon_img',
            size: 1 * 1024,
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    iconFile = file
                    $('#upload-drag1').html('<img src="' + result + '" style="width:100%;height:auto;">');
                });
            }
        });

        //恢复默认
        $('#activity-submits').click(function(){
            let title = $('#moduleNameEl').val();
            $.get("{:url('smartScreen/recovery')}?type="+rType, function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, { anim: 0, time: 1000 }, function () {
                        location.reload();
                    });
                } else {
                    layer.msg(res.msg, { anim: 6, time: 1000 });
                }
            });
        });
    });
</script>

{/block}