crm/app/sys/view/material/caselisting.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .ml10 {
        margin-left: 10px;
    }

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

    .flex-end {
        padding-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .layuiadmin-card-header-auto {}

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

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

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

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

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

    .relative {
        position: relative;
    }

    .noneClass {
        display: none !important;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .designer_person {
        font-size: 15px;
    }

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

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

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

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

    .houseType_msg>span {
        display: block;
    }

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

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

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

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

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

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

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

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

    .richText {
        padding: 10px;
    }

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

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

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

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

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

    .relative {
        position: relative;
    }

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

    video {
        background-color: #000;
    }

    .colorA9A9A9 {
        color: #A9A9A9 !important;
    }

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

<body>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">公司上传</li>
            <li id="details"><a class="ablock" href="{:url('material/personal_case_list')}">案例审核</a></li>
            <li id="details"><a class="ablock" href="{:url('material/case_data_statistics')}">数据统计</a></li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-card">
                    <div class="layui-card-header layuiadmin-card-header-auto" style="padding: 15px 15px 20px;">
                        <div class="layui-form flex-end">
                            <div class="layui-inline" style="margin-right: 0px;">
                                <label class="layui-form-label">小区</label>
                                <div class="layui-input-inline relative" id="box212">
                                    <select name="community" lay-filter="community" id="community" lay-search>
                                        <option value="">请选择小区</option>
                                        {notempty name="communityList"}
                                        {volist name="communityList.arr" id="t"}
                                        <option data-py="{$t.s}" value="{$t.id}">{$t.name}</option>
                                        {/volist}
                                        {/notempty}
                                    </select>
                                    <ul class="c_wordlist noneClass">
                                        {notempty name="communityList"}
                                        {volist name="communityList.sort" id="vo"}
                                        <li data-py="{$vo}">{$vo}</li>
                                        {/volist}
                                        {/notempty}
                                    </ul>
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-right: 0px;">
                                <label class="layui-form-label">风格</label>
                                <div class="layui-input-inline">
                                    <select name="decostyle" lay-filter="type" id="type" lay-search>
                                        <option value="">请选择分类</option>
                                        {volist name="decostyle" id="t"}
                                        <option value="{$t.id}">{$t.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">案例标题</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="title" placeholder="请输入标题" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-right: 0px;">
                                <label class="layui-form-label">设计师</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="designer_name" placeholder="请输入设计师名称" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-right: 0px;">
                                <label class="layui-form-label">上传人</label>
                                <div class="layui-input-inline">
                                    <select name="employee_id" id="employee" lay-search>
                                        <option value="">请选择人员</option>
                                        {volist name="employee" id="e"}
                                        <option value="{$e.id}">{$e.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">上传时间</label>
                                <div class="layui-input-inline select-date">
                                    <input type="text" name="add_time" id="select_date" placeholder="开始时间 - 结束时间" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline ml10">
                                <button class="layui-btn layuiadmin-btn-list submitbtn" lay-submit
                                    lay-filter="LAY-app-contlist-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                        <div class="operateBtn">
                            {auth:check name="material/casedetail"}
                            <a type="button" class="layui-btn layui-btn-primary caseaddbtn">
                                添加装修案例
                            </a>
                            {/auth:check}
                            <a type="button" class="layui-btn layui-btn-primary" id="cate_administration">分类管理</a>
                        </div>
                    </div>
                    <div class="layui-card-body" style="text-align: center;">
                        <table id="anli-table" lay-filter="anli-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="preview_mask layui-hide">
        <div class="preview_phone">
        </div>
        <i class="layui-icon layui-icon-close lay-close"></i>
    </div>
</body>
{/block} {block name="js"}
<script type="text/html" id="cover_img">
	{{# if(d.cover_img != ''){ }}
		<img src="{{d.cover_img}}?x-oss-process=image/resize,w_50" style="width: 30px;height: 30px;"/>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="community_name">
	{{# if(d.community){ }}
		<span>{{d.community.name}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="designer_name">
	{{# if(d.designer){ }}
		<span>{{d.designer.name}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="style_name">
	{{# if(d.decostyle){ }}
		<span>{{d.decostyle.name}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="housetype_name">
	{{# if(d.housetype){ }}
		<span>{{d.housetype.name}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="roomtpl">
	{{# if(d.room){ }}
		<span>{{d.room}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="halltpl">
	{{# if(d.hall){ }}
		<span>{{d.hall}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="toilettpl">
	{{# if(d.toilet){ }}
		<span>{{d.toilet}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="titletpl">
	{{# if(d.title){ }}
		<span>{{d.title}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="moneytpl">
	{{# if(d.money){ }}
	{{# if(d.money == '暂无报价'){ }}
    <span style="color: #cccccc;">暂无报价</span>
    {{# }else{ }}
    <span>{{d.money}}</span>
    {{# } }}
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
	
</script>
<script type="text/html" id="squaretpl">
	{{# if(d.square){ }}
		<span>{{d.square}}㎡</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
	
</script>
<script type="text/html" id="employee_name">
	{{# if(d.employee){ }}
	<span>{{d.employee.opt_name}}</span>
	{{# }else{ }}
	<span style="color: #cccccc;">无</span>
	{{# } }}
</script>

<script type="text/html" id="show">
	<input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="show" {{ d.publish == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="table-anli-action">
	{auth:check name="material/casedetail"}
	<a class="layui-btn layui-btn-xs" lay-event="anli-details">编辑</a>
	{/auth:check}
	{auth:check name="data/cluedata"}
	<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="anli-clue-list">线索记录</a>
	{/auth:check}
	{auth:check name="material/apicasedelete"}
	<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="anli-delete">删除</a>
	{/auth:check}
	{auth:check name="dailyTasks/assign_org"}
		<a class="layui-btn layui-btn-xs" lay-event="daily-tasks">设置任务</a>
	{/auth:check}
	<a class="layui-btn layui-btn-xs" lay-event="preview">预览</a>
</script>
<script type="text/html" id="recommend">
    {{# if(d.recommend){ }}
	<span>是</span>
	{{# }else{ }}
	<span style="color: #cccccc;">否</span>
	{{# } }}
</script>
<script src="__STATIC__/js/swiper.min.js"></script>
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'element','laydate'], function () {
        var $ = layui.$,
            form = layui.form,
            element = layui.element,
            table = layui.table,
            laydate = layui.laydate,
            scrollTopNum = 0;
             //日期范围
		laydate.render({
			elem: '#select_date'
			, type: 'date'
			, range: true
			, trigger: 'click'//呼出事件改成click
		});
		document.onkeydown=function(event){
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if(e && e.keyCode==13){ 
				$(".submitbtn").trigger("click");
			}
		};
        //分类管理
        $("#cate_administration").click(function () {
            layer.open({
                type: 2,
                title: ['分类管理', 'color:#333333;background-color:#D8E6F1;'],
                content: '{:url("material/cate_administration")}?type=',
                resize: false,
                area: ['80%', '80%'],
                // yes: function(index, layero){
                // 	parent.location.reload(); // 父页面刷新
                // 	console.log(index)
                // 	// var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                // 	// parent.layer.close(index); 
                // }
                end: function () {
                    location.reload();
                }
            });
        })

        $('.caseaddbtn').click(function () {
            layer.open({
                type: 2,
                title: ['添加装修案例', 'color:#333333;background-color:#D8E6F1;'],
                content: '{:url("material/case_add")}',
                resize: false,
                area: ['80%', '80%'],
            });
        })


        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function (data) {
            var field = data.field;
            console.log(data)
            //执行重载
            table.reload('anli-table', {
                where: field
                , page: { curr: 1 }
            });
        });
        ///default entery
        var firstTabTableLoad = function () {
            //装修案例列表
            table.render({
                elem: '#anli-table',
                autoSort: false,
                url: "{:url('material/caselist')}",
                cols: [
                    [{
                        align: 'center',
                        type: 'numbers',
                        field: 'id',
                        width: 80,
                        title: '序号',
                        sort: true
                    }, {
                        align: 'center',
                        templet: '#cover_img',
                        width: 100,
                        title: '封面图',
                    }, {
                        align: 'center',
                        field: 'title',
                        title: '案例标题',
                        minWidth: 100,
                        templet: '#titletpl'
                    }, {
                        align: 'center',
                        title: '小区',
                        templet: '#community_name'
                    }, {
                        align: 'center',
                        title: '设计师',
                        templet: '#designer_name'
                    }, {
                        align: 'center',
                        title: '风格',
                        templet: '#style_name'
                    }, {
                        align: 'center',
                        title: '户型',
                        templet: '#housetype_name'
                    },
                    {
                        align: 'center',
                        field: 'square',
                        title: '面积',
                        minWidth: 100,
                        templet: '#squaretpl'
                    }
                        , {
                        align: 'center',
                        field: 'money',
                        title: '价格',
                        minWidth: 100,
                        templet: '#moneytpl'
                    },
                    {
                        align: 'center',
                        field: 'addtime',
                        title: '上传时间',
                        minWidth: 100
                    }, {
                        align: 'center',
                        field: 'view_times',
                        sort: true,
                        title: '浏览次数',
                        minWidth: 100
                    }, {
                        align: 'center',
                        field: 'shared_times',
                        sort: true,
                        title: '转发次数',
                        minWidth: 100
                    }, {
                        align: 'center',
                        field: 'visit_due_time',
                        sort: true,
                        title: '浏览时长',
                        minWidth: 100
                    }, {
                        align: 'center',
                        title: '展示',
                        minWidth: 100,
                        templet: '#show'
                    }, {
                        align: 'center',
                        title: '推荐',
                        minWidth: 100,
                        templet: '#recommend'
                    }, {
                        align: 'center',
                        title: '上传人',
                        minWidth: 100,
                        templet: '#employee_name'
                    }, {
                        align: 'center',
                        title: '操作',
                        width: 380,
                        align: 'center',
                        fixed: 'right',
                        templet: "#table-anli-action"
                    }]
                ],
                page: true,
                limit: 50,
                height: 'full-220',
                text: '对不起，加载出现异常！'
            });

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

                var data = obj.data;
                console.log(data.id);
                if (obj.event === 'anli-details') {
                    layer.open({
                        type: 2,
                        title: ['编辑装修案例', 'color:#333333;background-color:#D8E6F1;'],
                        content: "{:url('material/casedetail')}?id=" + data.id,
                        resize: false,
                        area: ['80%', '85%'],
                        end: function () {
                            scrollPostion(scrollTopNum)
                            setTimeout(() => {
                                $('.layui-table-main').scroll(function (e) {
                                    scrollTopNum = $(this).scrollTop();
                                    console.log(scrollTopNum, '<<<回滚到指定位置');
                                })
                            }, 800)
                        }
                    });
                }
                if (obj.event === 'anli-clue-list') {
                    layer.open({
                        type: 2,
                        title: ['素材线索数据', 'color:#333333;background-color:#D8E6F1;'],
                        content: "{:url('data/cluedata')}?type=materialCase&id=" + data.id,
                        resize: false,
                        area: ['80%', '80%']
                    });
                }
                if (obj.event === 'anli-delete') {
                    layer.confirm('确定要删除此素材么？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function () {
                        $.get("{:url('material/apicasedelete')}?id=" + data.id, function (res) {
                            if (res.code === 0) {
                                layer.msg(res.msg, { anim: 0, time: 400 }, function () {
                                    table.reload('anli-table');
                                });
                            } else {
                                layer.msg(res.msg, { anim: 6, time: 400 });
                            }
                        });
                    });
                }
                if (obj.event === 'daily-tasks') {
                    layer.open({
                        type: 2,
                        title: ['设置任务', 'color:#333333;background-color:#D8E6F1;'],
                        content: "{:url('dailyTasks/assign_org')}?type=material_case&id=" + data.id,
                        resize: false,
                        area: ['80%', '80%']
                    });
                }
                if (obj.event === 'preview') {
                    requestCaseDetail(data.id);
                }
            });
        };
        firstTabTableLoad();

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

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

        /*---------------------------------------------------------*/
        $(document).click((e) => {
            let c_element = $('#community').next();
            if (c_element[0].className.indexOf('layui-form-selected') < 0) {
                $('.c_wordlist').addClass('noneClass');
            }
        })

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

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

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

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

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

        $('.layui-select-title input').on('input', function (e) {
            if (e.target.placeholder == '请选择小区') {
                let val = $(this).val();
                if (!val) {
                    $('.c_wordlist').removeClass('noneClass');
                    return;
                }
                $('.c_wordlist').addClass('noneClass');
            }
        })
        /*--------------------------------------------*/

        function requestCaseDetail(id) {
            $.ajax({
                type: 'post',
                url: '{:url("material/preview_casedetail")}',
                data: {
                    id: id
                },
                success: function (res) {
                    if (res.code == 0) {
                        randerPhonePage(res.data);
                        $('.preview_mask').removeClass('layui-hide');
                    }
                }
            })
        }

        function randerPhonePage(data) {
            let htmls = `<div class="page_box">
				<div class="page_cover_img">
					${data.vr_case || data.video_case ? `<div class="swiper-container">
						<div class="swiper-wrapper">
							${data.vr_case ? `<div class="swiper-slide relative">
								<img src="${data.cover_img}" width="100%" height="225px"/>
								<div data-vrlink="${data.vr_case}" class="enter_vr">
									<img src="__STATIC__/img/interVr.png" width="100%"/>
								</div>
							</div>` : ''}
							${data.video_case ? `<div class="swiper-slide">
								<video width="100%" height="100%" x5-video-orientation="portraint" poster="${data.video_case}?x-oss-process=video/snapshot,t_100,f_jpg" controls>
									<source src="${data.video_case}" type="video/mp4">
									<source src="${data.video_case}" type="video/ogg">
								</video>
							</div>`: ''}
						</div>
					</div>` : ''}
					${!data.vr_case && !data.video_case ? `<img src="${data.cover_img}" width="100%" height="225px"/>` : ''}
					${data.vr_case || data.video_case ? `<div class="cover_tab">
						${data.vr_case ? `<div data-index="0" class="ss-vrlink activeTab">VR案例</div>` : ''}
						${data.video_case ? `<div data-index="1" class="ss-video ${!data.vr_case ? 'activeTab' : ''}">视频案例</div>` : ''}
					</div>`: ''}
				</div>
				<div class="page_title">
					<span>${data.title}</span>
				</div>
				<div class="designer_box">
					<div class="designer_avatar">
						<img src="${data.designer && data.designer.image_photo ? data.designer.image_photo : data.designer && data.designer.headimgurl ? data.designer.headimgurl : data.company_info && data.company_info.logo ? data.company_info.logo : '__STATIC__/img/default.png'}" width="100%" height="100%" />
					</div>
					<div class="designer_msg">
						${data.designer ? `<div class="designer_person">
							设计师：${data.designer && data.designer.name ? data.designer.name : '无'}
							${data.designer && data.designer.position ? `<span class="designer_position">【${data.designer.position}】</span>` : ''}
						</div>`: `<div class="designer_person">
							${data.company_info.company_name}
						</div>`}
						${data.designer ? `<div class="designer_style">
							擅长风格：${data.designer && data.designer.good_at ? data.designer.good_at.join(',') : '暂未设置'}
						</div>`: `<div class="designer_style">
							公司地址：${data.company_info.company_address || '无'}
						</div>`}
					</div>
				</div>
				<div class="page_houseType">
					<div class="houseType_msg">
						<span class="houseType_name">户型</span>
						<span class="houseType_val">${data.housetype ? data.housetype.name : '未知'}</span>
					</div>
					<div class="houseType_msg">
						<span class="houseType_name">风格</span>
						<span class="houseType_val">${data.decostyle ? data.decostyle.name : '未知'}</span>
					</div>
					<div class="houseType_msg">
						<span class="houseType_name">面积</span>
						<span class="houseType_val">${data.square}㎡</span>
					</div>
					<div class="houseType_msg">
						<span class="houseType_name">价格</span>
						<span class="houseType_val ${data.money == '暂无报价' ? 'colorA9A9A9' : ''}">${data.money}${data.money == '暂无报价' ? '' : '起'}</span>
					</div>
				</div>
				<div class="page_line"></div>
				<div class="page_tab_box ${data.desc && data.real_case ? '' : 'layui-hide'}">
					<div data-type="1" class="nowtitbox">效果案例</div>
					<div data-type="2">实景案例</div>
				</div>
				<div class="richText rt1 ${!data.desc ? 'layui-hide' : ''}">${data.desc}</div>
				<div class="richText rt2 ${!data.desc && data.real_case ? '' : 'layui-hide'}">${data.real_case}</div>
				<div class="page_time">本案例发布于${data.addtime.split(' ')[0]}</div>
			</div>`;
            $('.preview_phone').html(htmls);
            setTimeout(() => {
                swiperBox = new Swiper('.swiper-container', {
                    on: {
                        slideChangeTransitionEnd: function () {
                            //切换结束时，告诉我现在是第几个slide
                            let index = parseInt(this.activeIndex) + 1;
                            if (index > 1) {
                                $('.ss-video').addClass("activeTab").siblings().removeClass("activeTab");
                            } else {
                                $('.ss-vrlink').addClass("activeTab").siblings().removeClass("activeTab");
                            }
                        },
                    },
                });

                $('.cover_tab div').click(function () {
                    let props = $(this).prop('dataset');
                    $(this).addClass("activeTab").siblings().removeClass("activeTab");
                    swiperBox.slideTo(parseInt(props.index), 1000, false);
                })

                $('.page_tab_box div').click(function () {
                    let type = $(this).prop('dataset').type;
                    $(`.rt${type}`).removeClass('layui-hide');
                    if (type == 1) {
                        $(`.rt${2}`).addClass('layui-hide');
                    } else {
                        $(`.rt${1}`).addClass('layui-hide');
                    }
                    $(this).addClass('nowtitbox').siblings().removeClass("nowtitbox");
                })
            }, 300)
        }

        $('.cover_tab div').click(function () {
            $(this).addClass('activeTab').siblings().removeClass("activeTab");
        })

        $('.lay-close').click(function () {
            $('.preview_phone').html('')
            $('.preview_mask').addClass('layui-hide');
        })

        var field = {};
        form.on('select(state)', function (data) {
            field['state'] = data.value;
            table.reload('anli-table', {
                where: field
                , page: { curr: 1 }
            });
        });
        form.on('select(user_id)', function (data) {
            field['user_id'] = data.value;
            table.reload('anli-table', {
                where: field
                , page: { curr: 1 }
            });
        });
        form.on('select(means)', function (data) {
            field['means'] = data.value;
            table.reload('anli-table', {
                where: field
                , page: { curr: 1 }
            });
        });
        form.on('select(date)', function (data) {
            field['date'] = data.value;
            table.reload('anli-table', {
                where: field
                , page: { curr: 1 }
            });
        });

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


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

        //添加案例
        $('.add_al').click(function () {
            layer.open({
                type: 2,
                title: ['新建案例', 'color:#333333;background-color:#D8E6F1;'],
                content: "{:url('material/case_add')}",
                resize: false,
                area: ['80%', '80%'],
                // btn: ['确定','关闭'],
                //             yes: function(index){
                //                 //当点击‘确定’按钮的时候，获取弹出层返回的值
                //                 // var res = window["layui-layer-iframe" + index].callbackdata();
                //                 //打印返回的值，看是否有我们想返回的值。
                //                 console.log(index);
                //                 //最后关闭弹出层
                //                 layer.close(index);
                //             },
                //             cancel: function(){
                //                 //右上角关闭回调
                //             }
            });
        });
    });
</script>
{/block}