{extend name="public/layout" /} {block name="title"}客户转化设置{/block} {block name="body"}
<style type="text/css">
    html,
    body {
        display: block;
        width: 1300px;
        height: auto;
        overflow-y: hidden;
        overflow-x: auto;
        width: calc(100% - 6px);
    }

    .lay-main {
        background-color: #EEEEEE;
        width: 100%;
        height: 100%;
    }

    .flex {
        display: flex;
    }

    .lay-leftBox {
        width: 500px;
        height: calc(100vh - 35px);
        background-color: #fff;
        margin: 10px 13px 10px;
        box-sizing: border-box;
        overflow-y: auto;
    }

    .lay-rightBox {
        width: calc(100% - 500px);
        height: calc(100vh - 35px);
        background-color: #fff;
        margin-top: 10px;
        margin-left: 0px;
        box-sizing: border-box;
        padding: 10px;
    }

    .lay-leftTips {
        width: 100%;
        height: 18px;
        line-height: 18px;
        border-left: 5px solid #249EFB;
        box-sizing: border-box;
        padding-left: 6px;
    }

    .lay-rightTips {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
    }

    .labelIcon {
        width: 5px;
        height: 18px;
        border-radius: 2px;
        background-color: #249EFB;
    }

    .valid {
        color: #249EFB;
        font-weight: 700;
    }

    .ml6 {
        margin-left: 6px;
    }

    .layui-border-blue,
    .layui-border-blue:hover {
        color: #249EFB;
        border-color: #249EFB;
    }

    .visitlistBox {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
    }

    .visitItemBox {
        flex: 1;
    }

    .layui-border-black {
        margin: 0px 5px 6px !important;
        position: relative;
    }

    .lay-close {
        position: absolute;
        top: -15px;
        right: -10px;
        z-index: 99 !important;
    }

    .fieldBox {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        padding: 10px 0px;
        height: 100%;
    }

    .fieldLeftBox {
        width: 60%;
        box-sizing: border-box;
        height: 100%;
    }

    .fieldRightBox {
        flex: 1;
        margin-left: 10px;
        box-sizing: border-box;
    }

    .fieldTitle {
        font-size: 13px;
        color: #333333;
        font-weight: 600;
        line-height: 25px;
    }

    .fieldViewBox {
        border: 1px solid #EEEEEE;
        padding: 5px;
        border-radius: 4px;
        box-sizing: border-box;
        height: 550px;
        overflow: auto;
    }

    /*里面的代码可以根据自己需求去进行更改*/
    /* 设置滚动条的样式 */
    .fieldViewBox::-webkit-scrollbar {
        width: 4px;
    }

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

    /* 滚动条滑块 */
    .fieldViewBox::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #cccccc;
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }

    .searchBox {
        width: 100%;
        height: 40px;
        border: 1px solid #EEEEEE;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 0px 10px;
        display: flex;
        align-items: center;
    }

    .searchBox>input {
        flex: 1;
        height: 100%;
        margin-left: 10px;
        outline: none;
        border: none;
    }

    .selectFieldBox {
        width: 100%;
        height: auto;
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px 0px 10px;
        display: flex;
        flex-wrap: wrap;
    }

    .layui-icon-ok:before {
        font-size: 12px !important;
    }

    .layui-form-checkbox {
        margin-bottom: 5px;
    }

    .sortItemBox {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
    }

    .sortLeft>img {
        width: 16px;
    }

    .sortRight>img {
        width: 16px;
    }

    .moveElement {
        cursor: move;
    }

    .fixed-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 10px;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #cccccc;
        margin-top: 110px;
    }

    .lay-tab {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #cccccc;
        display: flex;
        align-items: center;
    }

    .lay-tab>div {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .lay-active {
        color: #249EFB;
        font-weight: 700;
        position: relative;
    }

    .lay-active::after {
        content: " ";
        width: 30px;
        height: 4px;
        background-color: #249EFB;
        border-radius: 2px;
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
    }

    .layleft-content {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
    }

    .layleft-switch {
        padding: 15px 10px;
        display: flex;
        align-items: center;
    }

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

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

    .fieldItem {
        width: 50%;
    }

    .checkedDel {
        cursor: pointer;
    }

    .layui-icon-search {
        cursor: pointer;
    }

    .allCheckedField {
        padding-top: 10px;
    }

    .layui-card .layui-tab-brief .layui-tab-content {
        padding: 0 !important;
    }

    .fieldViewBox {
        height: 94% !important;
    }

    .fieldBox {
        height: calc(98% - 50px);
    }

    .fixed-btn {
        width: 30% !important;
        padding: 0 !important;
        margin-top: 0 !important;
        border-top: 0 !important;
    }

    .class_disabled .layui-form-checkbox[lay-skin=primary] i {
        border-color: #c2c2c2 !important;
        background-color: #c2c2c2 !important;
    }

    .leftTrackBox {
        width: 100%;
        height: 700px;
        margin-top: 20px;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        box-sizing: border-box;
        padding: 0px 40px;
    }

    /*里面的代码可以根据自己需求去进行更改*/
    /* 设置滚动条的样式 */
    .leftTrackBox::-webkit-scrollbar {
        width: 2px;
    }

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

    /* 滚动条滑块 */
    .leftTrackBox::-webkit-scrollbar-thumb {
        border-radius: 1px;
        background: #cccccc;
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }

    .leftHeader {
        width: 100%;
        height: 40px;
        background-color: #71c4ff;
        color: #fff;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0px 10px;
    }

    .leftHeaderText {
        width: calc(100% - 80px);
        display: flex;
        align-items: center;
    }

    .rightHeaderIcon {
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .leftHeaderTab {
        width: 100%;
        height: 42px;
        display: flex;
        align-items: center;
    }

    .leftHeaderTab>div {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .leftActive {
        color: #249EFB;
        font-weight: 600;
        position: relative;
    }

    .leftActive::after {
        content: " ";
        width: 100%;
        height: 4px;
        background-color: #249EFB;
        border-radius: 2px;
        position: absolute;
        bottom: 0px;
        left: 0px;
    }

    .switchTabBox {
        width: 100%;
        height: 42px;
        display: flex;
        align-items: center;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .switchTabBox>div {
        flex: none;
        display: inline-block;
        padding: 2px 10px;
        background-color: #d4e4ed;
        color: #384855;
        font-size: 13px;
        border-radius: 3px;
        margin: 0px 5px;
    }

    .switchActive {
        background-color: #249EFB !important;
        color: #fff !important;
    }

    .dateItemBox {
        width: 100%;
        height: 40px;
        font-size: 13px;
        display: flex;
        box-sizing: border-box;
        border-bottom: 1px solid #e7f1f7;
    }

    .dlabel {
        width: 150px;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .dContent {
        width: calc(100% - 150px);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .dContent>span {
        margin-right: 5px;
    }

    .dlineIcon {
        width: 40px;
        height: 30px;
        border: 1px solid #d4e4ed;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dtips {
        color: #9db6cf;
    }

    .mt5 {
        margin-top: 5px;
    }

    .ml5 {
        margin-left: 5px;
    }

    .textareaBox {
        width: 100%;
        background-color: #f0f4f7;
        outline: none;
        border: none;
        box-sizing: border-box;
        padding: 5px;
        margin-top: 20px;
        font-size: 13px;
    }

    .leftnextDateBox {
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 20px 0px;
    }

    .leftNextDateContent {
        width: 100%;
        height: 42px;
        display: flex;
        align-items: center;
    }

    .leftNextDateContent>div {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .leftSubmitBtn {
        width: 95%;
        height: 40px;
        background-color: #249EFB;
        color: #fff;
        text-align: center;
        line-height: 40px;
        margin: 20px auto 20px;
    }

    .leftProgressBox {
        width: 100%;
    }

    .leftProgressHeader {
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #249EFB;
        font-size: 13px;
        box-sizing: border-box;
        padding: 0px 10px;
        margin-bottom: 20px;
    }

    .leftpItemBox {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: relative;
        padding: 0px 10px;
    }

    .circle {
        width: 10px;
        height: 10px;
        background-color: #fddde1;
        position: absolute;
        left: 0px;
        top: 3px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9;
    }

    .circle1 {
        width: 7px;
        height: 7px;
        background-color: #f54d64;
        border-radius: 50%;
    }

    .leftlinep1 {
        width: 1px;
        height: 100%;
        border-left: 1px dotted #b6cade;
        position: absolute;
        left: 4px;
        top: 8px;
    }

    .leftpBoxMsg {
        width: 80%;
        height: 60px;
        background-color: #fff;
        box-shadow: 0 3px 5px 0 rgb(36 158 251 / 17%);
        margin: 20px 0px 20px 20px;
        border-left: 3px solid #f54d64;
        border-top: 0.5px solid #f54d64;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 5px;
    }

    .leftpBoxtop {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        position: relative;
    }

    .leftpBoxBottom {
        font-size: 12px;
        margin-top: 10px;
    }

    .visitBoxp {
        position: absolute;
        padding: 2px 5px;
        background-color: #f0f4f7;
        color: #249EFB;
        border-radius: 10px;
        right: 0px;
        top: 0px;
        font-size: 12px;
    }

    .circle3 {
        width: 7px;
        height: 7px;
        background-color: #f54d64;
        border-radius: 50%;
        position: absolute;
        left: 1px;
        top: 55%;
        transform: translateY(-50%);
    }

    .leftCustomField {
        width: 100%;
        height: auto;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0px 0px 10px;
    }

    .layinputtext {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #DEEAF1;
        display: flex;
        font-size: 13px;
    }

    .textlabel {
        width: 150px;
        height: 100%;
        line-height: 40px;
    }

    .textinput {
        width: calc(100% - 150px);
        height: 100%;
        line-height: 40px;
    }

    .radiocontent {
        width: calc(100% - 150px);
        height: 100%;
        display: flex;
    }

    .radiocontent>div {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .gradecontent {
        width: calc(100% - 150px);
        height: 100%;
        display: flex;
        align-items: center;
    }

    .gradecontent>span {
        flex: none;
        display: inline-block;
        padding: 2px 8px;
        height: 18px;
        border: 1px solid #9DB6CF;
        font-size: 13px;
        margin-right: 5px;
    }

    .selectContent {
        width: calc(100% - 150px);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .selectContent>img {
        width: 8px;
    }

    .dateContent {
        width: calc(100% - 150px);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .dateContent>img {
        width: 14px;
    }

    .leftlineMiddle {
        width: 100%;
        height: 10px;
        background-color: #f0f4f7;
        margin: 30px 0px 10px;
    }
    .layui-form-checked[lay-skin=primary] i {
		border-color: #249EFB;
		background-color: #249EFB;
	}
</style>

<body>
    <div class="lay-main">
        <form class="layui-form flex" action="">
            <div class="lay-leftBox">
                <div class="lay-tab">
                    <div data-index="0" data-type="changeLF" class="lay-active">量房设置</div>
                    <div data-index="1" data-type="changeDD">到店设置</div>
                    <div data-index="2" data-type="changeHD">活动设置</div>
                    <div data-index="3" data-type="changeJD">{if $xinjushang == 0}定金设置{else/}定金设置{/if}</div>
                    <div data-index="4" data-type="changeZD">{if $xinjushang == 0}合同设置{else/}合同设置{/if}</div>
                    <div data-index="5" data-type="changeMK">无忧设置</div>
                </div>
                <div class="layleft-content">
                    <div class="lay-leftTips">显示设置</div>
                    <div>
                        <div class="layleft-switch">
                            <span>开启/关闭</span>
                            <input type="checkbox" lay-filter="switchoff" name="switch" {if $lf_switch}checked{/if}
                                lay-skin="switch">
                        </div>
                        <div class="layleft-switch layui-hide">
                            <span>开启/关闭</span>
                            <input type="checkbox" lay-filter="switchoff" name="switch" {if $dd_switch}checked{/if}
                                lay-skin="switch">
                        </div>
                        <div class="layleft-switch layui-hide">
                            <span>开启/关闭</span>
                            <input type="checkbox" lay-filter="switchoff" name="switch" {if $hd_switch}checked{/if}
                                lay-skin="switch">
                        </div>
                        <div class="layleft-switch layui-hide">
                            <span>开启/关闭</span>
                            <input type="checkbox" lay-filter="switchoff" name="switch" {if $qd_switch}checked{/if}
                                lay-skin="switch">
                        </div>
                        <div class="layleft-switch layui-hide">
                            <span>开启/关闭</span>
                            <input type="checkbox" lay-filter="switchoff" name="switch" {if $zd_switch}checked{/if}
                                lay-skin="switch">
                        </div>
                        <div class="layleft-switch layui-hide">
                            <span>开启/关闭</span>
                            <input type="checkbox" lay-filter="switchoff" name="switch" {if $mk_switch}checked{/if}
                                lay-skin="switch">
                        </div>
                    </div>
                    <div class="ddnhdElement layui-hide">
                        <div class="lay-leftTips">内场活动设置</div>
                        <div class="layleft-switch ddnhdinputswitch">
                            <span>开启/关闭</span>
                            <input type="checkbox" lay-filter="switchoff" name="ddhd_switch" {if $ddhd_switch}checked{/if}
                                lay-skin="switch">
                        </div>
                    </div>
                    <div class="lay-leftTips">手机端示例</div>
                    <div class="leftTrackBox">
                        <div class="leftHeader">
                            <div class="leftHeaderText">李逍遥 | XXX小区 | 200㎡</div>
                            <div class="rightHeaderIcon">
                                <img src="__STATIC__/img/collect.png" width="16px" alt="">
                            </div>
                        </div>
                        <div class="leftHeaderTab">
                            <div>客户跟踪</div>
                            <div>信息完善</div>
                            <div class="leftActive">客户转化</div>
                            <div>客户预约</div>
                        </div>
                        <div class="switchTabBox">
                            <div class="switchActive">量房</div>
                            <div>到店</div>
                            <div>活动</div>
                            <div id="qdElement">定金</div>
                            <div id="zdElement">合同</div>
                            <div>无忧</div>
                        </div>
                        <div class="allElement">
                            <div class="lfElement">
                                <div class="dateItemBox">
                                    <div class="dlabel">选择量房时间</div>
                                    <div class="dContent">
                                        <span>2022-12-12</span>
                                        <img src="__STATIC__/img/rili.png" width="14px" alt="">
                                    </div>
                                </div>
                                <div class="dateItemBox mt5">
                                    <div class="dlabel">上传量房图片</div>
                                    <div class="dContent">
                                        <div class="dlineIcon">
                                            <img src="__STATIC__/img/addimg.png" width="24px" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div class="dlabel">选择量房设计师<span class="dtips ml5">(可多选)</span></div>
                                    <div class="dContent">
                                        <img src="__STATIC__/img/cjtimg.png" width="8px" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="ddElement layui-hide">
                                {if $ddhd_switch}
                                <div class="dateItemBox">
                                    <div class="dlabel">参加的内场活动</div>
                                    <div class="dContent">
                                        <span style="color: #999999;font-size: 12px;">请选择活动</span>
                                        <img src="__STATIC__/img/cjtimg.png" width="8px" alt="">
                                    </div>
                                </div>
                                {/if}
                                <div class="dateItemBox">
                                    <div class="dlabel">选择到店时间</div>
                                    <div class="dContent">
                                        <span>2022-12-12</span>
                                        <img src="__STATIC__/img/rili.png" width="14px" alt="">
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div class="dlabel">请输入到店人数</div>
                                    <div class="dContent">
                                        <span>1</span>
                                        <span style="color: #9DB6CF;font-size: 12px;">人</span>
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div class="dlabel">所到店面</div>
                                    <div class="dContent">
                                        <span style="color: #999999;font-size: 12px;">请选择店面</span>
                                        <img src="__STATIC__/img/cjtimg.png" width="8px" alt="">
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div class="dlabel">谈单时长</div>
                                    <div class="dContent">
                                        <span style="color: #999999;font-size: 12px;">请输入</span>
                                        <span style="color: #9DB6CF;font-size: 12px;">min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="hdElement layui-hide">
                                <div class="dateItemBox">
                                    <div class="dlabel">参加的活动</div>
                                    <div class="dContent">
                                        <span style="color: #999999;font-size: 12px;">请选择活动</span>
                                        <img src="__STATIC__/img/cjtimg.png" width="8px" alt="">
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div class="dlabel">到场时间</div>
                                    <div class="dContent">
                                        <span>2022-12-12</span>
                                        <img src="__STATIC__/img/rili.png" width="14px" alt="">
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div class="dlabel">请输入到场人数</div>
                                    <div class="dContent">
                                        <span>1</span>
                                        <span style="color: #9DB6CF;font-size: 12px;">人</span>
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div class="dlabel">停留时间</div>
                                    <div class="dContent">
                                        <span style="color: #999999;font-size: 12px;">请输入</span>
                                        <span style="color: #9DB6CF;font-size: 12px;">min</span>
                                    </div>
                                </div>
                            </div>
                            <div class="qdElement layui-hide">
                                <div class="dateItemBox">
                                    <div id="qdsjElement" class="dlabel">定金时间</div>
                                    <div class="dContent">
                                        <span>2022-12-12</span>
                                        <img src="__STATIC__/img/rili.png" width="14px" alt="">
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div id="qdjeElement" class="dlabel">定金金额</div>
                                    <div class="dContent">
                                        <span>1</span>
                                        <span style="color: #9DB6CF;font-size: 12px;">元</span>
                                    </div>
                                </div>
                                <div class="layinputtext">
                                    <div id="qdfsElement" class="textlabel">定金方式</div>
                                    <div class="radiocontent">
                                        <div>
                                            <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px"
                                                alt="">
                                            <span style="margin-left: 5px;">线上交定</span>
                                        </div>
                                        <div>
                                            <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px"
                                                alt="">
                                            <span style="margin-left: 5px;">线下交定</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="dateItemBox mt5">
                                    <div id="scqdyjElement" class="dlabel">上传定金依据</div>
                                    <div class="dContent">
                                        <div class="dlineIcon">
                                            <img src="__STATIC__/img/addimg.png" width="24px" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div id="qdcpElement" class="dlabel">签单产品</div>
                                    <div class="dContent">
                                        <span style="color: #999999;font-size: 12px;">请选择产品</span>
                                        <img src="__STATIC__/img/cjtimg.png" width="8px" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="zdElement layui-hide">
                                <div class="dateItemBox">
                                    <div id="zdsjElement" class="dlabel">合同时间</div>
                                    <div class="dContent">
                                        <span>2022-12-12</span>
                                        <img src="__STATIC__/img/rili.png" width="14px" alt="">
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div id="htjeElement" class="dlabel">合同金额</div>
                                    <div class="dContent">
                                        <span>1</span>
                                        <span style="color: #9DB6CF;font-size: 12px;">元</span>
                                    </div>
                                </div>
                                <div class="dateItemBox">
                                    <div class="dlabel">首付款</div>
                                    <div class="dContent">
                                        <span>1</span>
                                        <span style="color: #9DB6CF;font-size: 12px;">元</span>
                                    </div>
                                </div>
                                <div class="dateItemBox mt5">
                                    <div id="schtyjElement" class="dlabel">上传合同依据</div>
                                    <div class="dContent">
                                        <div class="dlineIcon">
                                            <img src="__STATIC__/img/addimg.png" width="24px" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mkElement layui-hide">
                                <div class="dateItemBox">
                                    <div class="dlabel">无忧时间</div>
                                    <div class="dContent">
                                        <span>2022-12-12</span>
                                        <img src="__STATIC__/img/rili.png" width="14px" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="leftCustomField"></div>
                        <textarea class="textareaBox" rows="5" readonly placeholder="请输入备注信息"></textarea>
                        <div class="leftnextDateBox">
                            <div>设置下次回访时间</div>
                            <div class="leftNextDateContent">
                                <div>
                                    <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px"
                                        alt="">
                                    <span class="ml5">今天</span>
                                </div>
                                <div>
                                    <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px"
                                        alt="">
                                    <span class="ml5">1天后</span>
                                </div>
                                <div>
                                    <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px"
                                        alt="">
                                    <span class="ml5">3天后</span>
                                </div>
                                <div>
                                    <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px"
                                        alt="">
                                    <span class="ml5">7天后</span>
                                </div>
                                <div style="width: 80px !important;flex: none !important;">
                                    <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" height="15px"
                                        alt="">
                                    <span class="ml5">其他时间</span>
                                </div>
                            </div>
                        </div>
                        <div class="leftSubmitBtn">提交本次转化数据</div>
                        <div class="leftlineMiddle"></div>
                        <div class="changeRecordBox">
                            <div class="leftProgressBox">
                                <div class="leftProgressHeader">
                                    <span>量房记录</span>
                                    <span>量房次数：3次</span>
                                </div>
                                <div class="leftpItemBox">
                                    <div class="circle">
                                        <div class="circle1"></div>
                                    </div>
                                    <div class="ml5">2022-12-02</div>
                                    <div class="leftlinep1"></div>
                                    <div class="leftpBoxMsg">
                                        <div class="leftpBoxtop">
                                            <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                                            <span class="ml5">销售：李XX</span>
                                            <span class="ml5">11:50:12</span>
                                            <span class="visitBoxp">已量房</span>
                                        </div>
                                        <div class="leftpBoxBottom">这是一段量房记录</div>
                                        <div class="circle3"></div>
                                    </div>
                                </div>
                                <div class="leftpItemBox">
                                    <div class="circle">
                                        <div class="circle1"></div>
                                    </div>
                                    <div class="ml5">2022-12-02</div>
                                    <div class="leftlinep1"></div>
                                    <div class="leftpBoxMsg">
                                        <div class="leftpBoxtop">
                                            <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                                            <span class="ml5">销售：李XX</span>
                                            <span class="ml5">11:24:12</span>
                                            <span class="visitBoxp">已量房</span>
                                        </div>
                                        <div class="leftpBoxBottom">这是一段量房记录</div>
                                        <div class="circle3"></div>
                                    </div>
                                </div>
                                <div class="leftpItemBox">
                                    <div class="circle">
                                        <div class="circle1"></div>
                                    </div>
                                    <div class="ml5">2022-12-02</div>
                                    <div class="leftlinep1"></div>
                                    <div class="leftpBoxMsg">
                                        <div class="leftpBoxtop">
                                            <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                                            <span class="ml5">销售：李XX</span>
                                            <span class="ml5">11:12:12</span>
                                            <span class="visitBoxp">已量房</span>
                                        </div>
                                        <div class="leftpBoxBottom">这是一段量房记录</div>
                                        <div class="circle3"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="leftProgressBox layui-hide">
                                <div class="leftProgressHeader">
                                    <span>到店记录</span>
                                    <span>到店次数：3次</span>
                                </div>
                                <div class="leftpItemBox">
                                    <div class="circle">
                                        <div class="circle1"></div>
                                    </div>
                                    <div class="ml5">2022-12-02</div>
                                    <div class="leftlinep1"></div>
                                    <div class="leftpBoxMsg">
                                        <div class="leftpBoxtop">
                                            <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                                            <span class="ml5">销售：李XX</span>
                                            <span class="ml5">11:50:12</span>
                                            <span class="visitBoxp">已到店</span>
                                        </div>
                                        <div class="leftpBoxBottom">这是一段到店记录</div>
                                        <div class="circle3"></div>
                                    </div>
                                </div>
                                <div class="leftpItemBox">
                                    <div class="circle">
                                        <div class="circle1"></div>
                                    </div>
                                    <div class="ml5">2022-12-02</div>
                                    <div class="leftlinep1"></div>
                                    <div class="leftpBoxMsg">
                                        <div class="leftpBoxtop">
                                            <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                                            <span class="ml5">销售：李XX</span>
                                            <span class="ml5">11:24:12</span>
                                            <span class="visitBoxp">已到店</span>
                                        </div>
                                        <div class="leftpBoxBottom">这是一段到店记录</div>
                                        <div class="circle3"></div>
                                    </div>
                                </div>
                                <div class="leftpItemBox">
                                    <div class="circle">
                                        <div class="circle1"></div>
                                    </div>
                                    <div class="ml5">2022-12-02</div>
                                    <div class="leftlinep1"></div>
                                    <div class="leftpBoxMsg">
                                        <div class="leftpBoxtop">
                                            <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                                            <span class="ml5">销售：李XX</span>
                                            <span class="ml5">11:12:12</span>
                                            <span class="visitBoxp">已到店</span>
                                        </div>
                                        <div class="leftpBoxBottom">这是一段到店记录</div>
                                        <div class="circle3"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="leftProgressBox layui-hide">
                                <div class="leftProgressHeader">
                                    <span>活动到场记录</span>
                                    <span>活动到场次数：3次</span>
                                </div>
                                <div class="leftpItemBox">
                                    <div class="circle">
                                        <div class="circle1"></div>
                                    </div>
                                    <div class="ml5">2022-12-02</div>
                                    <div class="leftlinep1"></div>
                                    <div class="leftpBoxMsg">
                                        <div class="leftpBoxtop">
                                            <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                                            <span class="ml5">销售：李XX</span>
                                            <span class="ml5">11:50:12</span>
                                            <span class="visitBoxp">已到场</span>
                                        </div>
                                        <div class="leftpBoxBottom">这是一段活动到场记录</div>
                                        <div class="circle3"></div>
                                    </div>
                                </div>
                                <div class="leftpItemBox">
                                    <div class="circle">
                                        <div class="circle1"></div>
                                    </div>
                                    <div class="ml5">2022-12-02</div>
                                    <div class="leftlinep1"></div>
                                    <div class="leftpBoxMsg">
                                        <div class="leftpBoxtop">
                                            <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                                            <span class="ml5">销售：李XX</span>
                                            <span class="ml5">11:24:12</span>
                                            <span class="visitBoxp">已到场</span>
                                        </div>
                                        <div class="leftpBoxBottom">这是一段活动到场记录</div>
                                        <div class="circle3"></div>
                                    </div>
                                </div>
                                <div class="leftpItemBox">
                                    <div class="circle">
                                        <div class="circle1"></div>
                                    </div>
                                    <div class="ml5">2022-12-02</div>
                                    <div class="leftlinep1"></div>
                                    <div class="leftpBoxMsg">
                                        <div class="leftpBoxtop">
                                            <img src="__STATIC__/img/default.png" width="18px" height="18px" alt="">
                                            <span class="ml5">销售：李XX</span>
                                            <span class="ml5">11:12:12</span>
                                            <span class="visitBoxp">已到场</span>
                                        </div>
                                        <div class="leftpBoxBottom">这是一段活动到场记录</div>
                                        <div class="circle3"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lay-rightBox">
                <div class="lay-rightTips">
                    <div class="labelIcon"></div>
                    <span class="ml6">跟进字段设置</span>
                </div>
                <div class="fieldBox">
                    <div class="fieldLeftBox">
                        <div class="fieldTitle" id="visitAllField"></div>
                        <div class="fieldViewBox">
                            <div class="searchBox">
                                <i class="layui-icon layui-icon-search"></i>
                                <input type="text" id="allFieldInput" autocomplete="off">
                            </div>
                            <div class="allCheckedField">
                                <input lay-filter="checkedAll" name="all" title="全选" type="checkbox" lay-skin="primary">
                            </div>
                            <div class="selectFieldBox">

                            </div>
                        </div>
                    </div>
                    <div class="fieldRightBox">
                        <div class="fieldTitle" id="checkedFieldEl"></div>
                        <div class="fieldViewBox" id="scrollTargetEl">
                            <div class="searchBox">
                                <i class="layui-icon layui-icon-search"></i>
                                <input type="text" id="checkedSearchEl" autocomplete="off">
                            </div>
                            <div class="checkedFieldBox" id="checkedFieldBox">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="lay-default" style="overflow: hidden;">
                    <div class="layui-btn layui-btn-primary" id="recoveryDefault" style="float:left;">恢复默认</div>
                    <div class="fixed-btn" style="float:right;">
                        <div class="layui-btn layui-btn-primary">取消</div>
                        <div class="layui-btn layui-btn-normal" lay-submit lay-filter="layuiadmin-app-form-submit">确认
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
</body>
{/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', 'layedit', 'element', 'upload'], function () {
        var $ = layui.$,
            table = layui.table,
            element = layui.element,
            upload = layui.upload,
            form = layui.form,
            rType = 'changeLF',
            visitFieldAll = [],
            checkedArr = [],
            defaultArr = [];
        var rTypeIndex = 0;
        form.render();

        $('.lay-tab div').click(function () {
            rType = $(this).prop('dataset').type;
            let index = parseInt($(this).prop('dataset').index);
            rTypeIndex = index;
            $(this).addClass('lay-active').siblings().removeClass("lay-active");
            $('.layleft-switch').eq(index).removeClass('layui-hide').siblings().addClass('layui-hide');
            $('.imgview').children().eq(index).removeClass('layui-hide').siblings().addClass('layui-hide');
            getVisitFiled();
            $('.allElement').children().eq(index).removeClass('layui-hide').siblings().addClass('layui-hide');
            $('.switchTabBox').children().eq(index).addClass('switchActive').siblings().removeClass('switchActive');
            if (index < 3) {
                $('.changeRecordBox').children().eq(index).removeClass('layui-hide').siblings().addClass('layui-hide')
            } else {
                $('.changeRecordBox').children().eq(0).addClass('layui-hide');
                $('.changeRecordBox').children().eq(1).addClass('layui-hide');
                $('.changeRecordBox').children().eq(2).addClass('layui-hide');
            }
            if (index == 1) {
                $('.ddnhdElement').removeClass('layui-hide');
            } else {
                $('.ddnhdElement').addClass('layui-hide');
            }
        })

        getVisitFiled();
        function getVisitFiled() {
            $.ajax({
                type: "get",
                url: "{:url('customerSetting/moduleField')}",
                data: {
                    type: rType
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        visitFieldAll = res.all;
                        checkedArr = res.checked;
                        defaultArr = res.default;
                        renderVisitFieldHtmls(visitFieldAll);
                        renderCheckedFieldHtmls(checkedArr);
                        setExampleHtml(checkedArr)
                    }
                }
            })
        }

        function setExampleHtml(dataArr) {
            let htmls = dataArr.map(v => {
                if (v.type == 1) {
                    return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="textinput">请输入</div>
                  </div>`;
                } else if (v.type == 2) {
                    return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="textinput">请输入</div>
                  </div>`;
                } else if (v.keyname == 'level') {
                    return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="gradecontent">
                      ${v.select.map(o => {
                        return `<span>${o.name}类</span>`;
                    }).join('')}
                    </div>
                  </div>`;
                } else if (v.type == 3 && v.select.length == 2) {
                    return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="radiocontent">
                      ${v.select.map(o => {
                        return `<div>
                    <img src="https://o.nczyzs.com/xcx/unselected.png" width="15px" alt="">
                      <span style="margin-left: 5px;">${o.name}</span>
                    </div>`;
                    }).join('')}
                    </div>
                  </div>`;
                } else if (v.type == 3 && v.select.length > 2 && v.keyname != 'level') {
                    return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="selectContent">
                      <span>请选择</span>
                      <img src="__STATIC__/img/cjtimg.png" alt="">
                    </div>
                  </div>`;
                } else if (v.type == 4) {
                    return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="selectContent">
                      <span>请选择</span>
                      <img src="__STATIC__/img/cjtimg.png" alt="">
                    </div>
                  </div>`;
                } else if (v.type == 5) {
                    return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="dateContent">
                      <span>请选择</span>
                      <img src="__STATIC__/img/rili.png" alt="">
                    </div>
                  </div>`;
                } else if (v.type == 6) {
                    return `<div class="layinputtext">
                    <div class="textlabel">${v.name}</div>
                    <div class="dateContent">
                      <span></span>
                      <img src="__STATIC__/img/addimg.png" alt="">
                    </div>
                  </div>`;
                }
            }).join('');
            $('.leftCustomField').html(htmls);
        }

        function renderVisitFieldHtmls(fields) {
            $('#visitAllField').text(`可选择字段(共${fields.length}个）`);
            let htmls = fields.map((item, index) => {
                return `<div class="fieldItem ${item.other_checked == 1 ? 'class_disabled' : ''}"><input lay-filter="checkboxs" class="visitFieldElement${item.id}" type="checkbox" ${(returnCheckedStatus(item.id)) ? 'checked' : ''} ${item.other_checked == 1 ? 'disabled' : ''} name="visit" value="${item.id}" title="${item.name}" lay-skin="primary"></div>`;
            }).join('');
            $('.selectFieldBox').html(htmls);
            setTimeout(() => {
                form.render();

                form.on('checkbox(checkboxs)', function (data) {
                    if (data.elem.checked) {
                        let OneValue = [];
                        $(`input:checkbox[name='visit']:checked`).each(function (i) {
                            OneValue.push({ id: $(this).val(), name: $(this).prop('title') });
                        });
                        let itemArr = [];
                        OneValue.forEach(k => {
                            let item = checkedArr.filter(o => o.id == k.id);
                            if (!item.length) {
                                itemArr.push(k)
                            }
                        })
                        checkedArr.push(...itemArr);
                        renderCheckedFieldHtmls(checkedArr);
                    } else {
                        checkedArr.forEach((y, i) => {
                            if (data.value == y.id) {
                                checkedArr.splice(i, 1);
                                renderCheckedFieldHtmls(checkedArr);
                                return;
                            }
                        })
                    }
                })

                form.on('checkbox(checkedAll)', function (data) {
                    if (data.elem.checked) {
                        $(`input:checkbox[name='visit']`).each(function (i) {
                            $(this).prop('checked', true);
                        });
                        checkedArr = visitFieldAll;
                        renderCheckedFieldHtmls(checkedArr);
                        form.render();
                    } else {
                        checkedArr = [];
                        renderCheckedFieldHtmls(checkedArr);
                        $(`input:checkbox[name='visit']:checked`).each(function (i) {
                            $(this).prop('checked', false);
                        });
                        form.render();
                    }
                })
            }, 600);
        }

        function renderCheckedFieldHtmls(checkedFields) {
            $('#checkedFieldEl').text(`已选择字段(共${checkedFields.length}个）`);
            let htmls = checkedFields.map((item, index) => {
                return `<div data-id="${item.id}" class="sortItemBox">
                  <div data-id="${item.id}" class="sortLeft">
                    <img data-id="${item.id}" class="moveElement" src="/static/img/move.png" alt="">
                    <span data-id="${item.id}" class="getSortName">${item.name}</span>
                  </div>
                  <div data-id="${item.id}" class="sortRight">
                    <img data-id="${item.id}" src="/static/img/sTop.png" alt="">
                    <img data-id="${item.id}" src="/static/img/sDel.png" class="checkedDel" alt="">
                  </div>
                </div>`;
            }).join('');
            $('.checkedFieldBox').html(htmls);
            setTimeout(() => {
                new Sortable($('.checkedFieldBox')[0], {
                    handle: '.moveElement', // handle's class
                    animation: 150
                });
                $('.sortRight').click(function () {
                    var ops1 = {
                        draggable: ".sortItemBox",
                        onChoose: function (evt) {
                            var index = evt.oldIndex;
                            $("#checkedFieldBox .sortItemBox").eq(index).insertBefore($("#checkedFieldBox .sortItemBox").eq(0));
                        }
                    };
                    var sortable1 = Sortable.create($('.checkedFieldBox')[0], ops1);
                })
                $('.checkedDel').click(function () {
                    let id = $(this).prop('dataset').id;
                    $(this).parent().parent().remove();
                    checkedArr.forEach((item, index) => {
                        if (item.id == id) {
                            $(`.visitFieldElement${id}`).removeAttr('checked');
                            checkedArr.splice(index, 1);
                            form.render();
                            return;
                        }
                    })
                })
            }, 600);
        }

        function returnCheckedStatus(vid) {
            let ids = checkedArr.map(v => parseInt(v.id));
            return ids.includes(parseInt(vid));
        }

        $('#checkedSearchEl').on('keyup', function (e) {
            let val = $(this).val();
            if (e.keyCode == 13 && val) {
                let eleArr = $('.getSortName');
                eleArr.each(function (index) {
                    let name = $(this).text();
                    if (name === val || name.indexOf(val) > -1) {
                        $('#scrollTargetEl').scrollTop((parseInt(index) + 1) * 40);
                        return;
                    }
                })
            }
        });

        $('#allFieldInput').on('keyup', function (e) {
            let val = $(this).val();
            if (e.keyCode == 13) {
                if (val) {
                    let itemArr = visitFieldAll.filter(item => {
                        if (val == item.name || item.name.search(val) > -1) {
                            return item;
                        }
                    })
                    renderVisitFieldHtmls(itemArr);
                } else {
                    renderVisitFieldHtmls(visitFieldAll);
                }
            }
        })

        $('#recoveryDefault').click(function () {
            layer.confirm('确定要恢复默认设置吗?', { title: '提示' }, function (index) {
                checkedArr = defaultArr;
                renderVisitFieldHtmls(visitFieldAll);
                renderCheckedFieldHtmls(checkedArr);
                layer.close(index);
            });
        })

        /* 监听提交 */
        form.on('submit(layuiadmin-app-form-submit)', function (obj) {
            var switchoff = $('.layleft-switch').eq(rTypeIndex).find('input').prop('checked') == true ? '1' : '0';
            var ddnhdinputswitch = $('.ddnhdinputswitch').find('input').prop('checked') == true ? '1' : '0';
            let getCheckedField = $('.sortItemBox');
            let itemArr = [];
            let subtype = 'LF';
            getCheckedField.each(function (i) {
                let id = $(this).prop('dataset').id;
                itemArr.push({ id: id, sort: i + 1 });
            })
            if (rType == 'changeLF') {
                subtype = 'LF';
            } else if (rType == 'changeDD') {
                subtype = 'DD';
            } else if (rType == 'changeHD') {
                subtype = 'HD';
            } else if (rType == 'changeJD') {
                subtype = 'QD';
            } else if (rType == 'changeZD') {
                subtype = 'ZD';
            } else if (rType == 'changeMK') {
                subtype = 'MK';
            }
            $.ajax({
                url: '{:url("customerSetting/moduleChange")}',
                type: 'post',
                data: {
                    type: subtype,
                    content: itemArr,
                    switch: switchoff,
                    ddhd_switch: ddnhdinputswitch
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, { anim: 0 });
                        setTimeout(() => {
                            window.parent.reloadFunc();
                        }, 1000)
                    } else {
                        layer.msg(res.msg, { anim: 6 });
                    }
                }
            });
            return false;
        });
    });
</script>
{/block}