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

{extend name="public/layout" /} {block name="title"}视频列表{/block} {block name="body"}
<style type="text/css">
    html,
    body {
        display: block;
        min-width: 1100px;
        height: 100%;
        overflow: hidden;
    }

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

    .layui-table-sort {
        display: inline-block !important;
    }

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

    .layui-card {
        box-shadow: none !important;
        height: 100%;
    }

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

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

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

    .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;
    }

    .flexBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .flex,
    .layui-inline {
        display: flex;
    }

    .layui-input-inline {
        flex: 1;
    }

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

    .layui-form-item .layui-input-inline {
        width: auto !important;
        max-width: 200px;
    }

    /* 视频预览 */
    .page_video_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;
    }

    .page_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: #000;
        border-radius: 30px;
        margin-right: 4px;
        position: relative;
        overflow: hidden;
    }

    .video_show_msg {
        width: 270px;
        position: absolute;
        bottom: 80px;
        left: 20px;
        color: #fff;
        font-size: 14px;
        z-index: 9999999;
    }

    .video_msg_title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
    }

    .video_msg_content {
        margin-top: 3px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 这里是超出几行省略 */
        overflow: hidden;
        font-size: 14px;
    }

    .video_msg_type {
        font-size: 14px;
        margin-top: 3px;
    }

    .video_right_box {
        position: absolute;
        right: 10px;
        bottom: 180px;
        font-size: 12px;
        color: #fff;
        z-index: 9999999;
    }

    .video_right_item {
        width: 50px;
        height: 52px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    .video_right_avatar {
        width: 32px;
        height: 32px;
        background-color: #ccc;
        border-radius: 50%;
    }

    .video_right_img>img {
        width: 23px;
        height: 21px;
    }

    .video_right_name {
        margin-top: 5px;
    }

    .videoDiv {
        display: block;
        width: 100%;
        height: auto;
        min-height: 100%;
        overflow: hidden;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
    }

    .videoMsg .videoDiv video {
        display: block;
        width: 100%;
        position: absolute;
        max-height: 100%;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: fill;
        z-index: 8;
    }

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

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

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

    .layadmin-iframe {
        position: absolute;
        width: 100%;
        height: 100% !important;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
</style>

<body>
    <div class="layui-fluid">
        <div class="layui-card">

            <div class="layui-tab layui-tab-brief height100_">
                <ul class="layui-tab-title rst_box_top">
                    <!-- <li data-index="1" class="font16 layui_video_list layui-this">视频列表</li>
					<li data-index="2" class="font16 layui_video_tjss">数据统计</li> -->
                    <li data-index="1" class="font16 layui_video_list layui-this"><a
                            href="{:url('video/index')}">视频列表</a></li>
                    <li data-index="2" class="font16 layui_video_tjss"><a
                            href="{:url('video/statistics_data_list')}">数据统计</a></li>
                </ul>
                <div class="layui-tab-content pd0 mdt20" style="padding: 0;">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                            <div class="layui-form-item flexBox">
                                {auth:check name="video/add"}
                                <div class="layui-inline">
                                    <button class="layui-btn layuiadmin-btn-list layui-btn-primary"
                                        data-type="add">添加视频</button>
                                    <a type="button" class="layui-btn layui-btn-primary"
                                        id="cate_administration">分类管理</a>
                                    <a type="button" class="layui-btn layui-btn-primary"
                                        id="cate_administration_labels">标签管理</a>
                                    <!-- <a class="layui-btn layui-btn-primary" href="{:url('Video/statistics_data_list')}" class="lanse lpjdbtn">统计数据</a> -->
                                </div>
                                {/auth:check}
                                <div class="flex-sub">
                                    <div class="layui-inline" style="margin-right: 0px;">
                                        <label class="layui-form-label">标题</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="title" placeholder="请输入标题" autocomplete="off"
                                                class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline" style="margin-right: 0px;">
                                        <label class="layui-form-label">分类</label>
                                        <div class="layui-input-inline">
                                            <select name="type" lay-filter="type" id="type" lay-search>
                                                <option value="">请选择分类</option>
                                                {volist name="type" id="t"}
                                                <option value="{$t.id}">{$t.name}</option>
                                                {/volist}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline" style="margin-right: 0px;">
                                        <label class="layui-form-label">标签</label>
                                        <div class="layui-input-inline">
                                            <select name="label" id="label">
                                                <option value="">请选择标签</option>
                                            </select>
                                        </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" style="margin-right: 0;">
                                        <button class="layui-btn layuiadmin-btn-list submitbtn" id="searchBbtns"
                                            lay-submit lay-filter="LAY-app-contlist-search">
                                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-card-body">

                            <table id="layui-table-video" lay-filter="layui-table-video"></table>
                            <script type="text/html" id="layui-tagsbar">
						        {auth:check name="video/edit"}
						        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
						                {/auth:check}
						                {auth:check name="data/cluedata"}
								<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="evidence-clue-list">线索记录</a>
						        {/auth:check}
						        {auth:check name="video/del"}
						        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</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="show">
							    <input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="show" {{ d.publish == 1 ? 'checked' : '' }}>
							</script>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <iframe class="data_lists layadmin-iframe" src="" style="width: 100%;height:100%;" scrolling="0"
                            frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 手机端效果预览 -->
    <div class="page_video_mask layui-hide">
        <div class="page_phone">

        </div>
        <i class="layui-icon layui-icon-close lay-close"></i>
    </div>
    {/block} {block name="js"}
    <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="video_label">
        {{# if(d.label){ }}
        <span>{{d.label}}</span>
        {{# }else{ }}
        <span style="color: #cccccc;">无</span>
        {{# } }}
    </script>
    <script type="text/html" id="description">
	    {{# if(d.description){ }}
	    <span>{{d.description}}</span>
	    {{# }else{ }}
	    <span style="color: #cccccc;">无</span>
	    {{# } }}
	</script>
    <script src="__STATIC__/js/xgplayer.js" type="text/javascript"></script>
    <script src="__STATIC__/js/jquery.min.js" type="text/javascript"></script>
    <script src="__STATIC__/js/keydown.js" type="text/javascript"></script>
    <script>
        layui.config({
            base: '__LAYUI__/',
            urlbase: '/sys'
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'laydate'], function () {
            var $ = layui.$,
                table = layui.table,
                form = layui.form,
                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");
                }
            };
            $('.layui_video_tjss').on('click', function () {
                // $('.layui-fluid').css({'height':'100%'})
                $('.data_lists').attr('src', "{:url('Video/statistics_data_list')}");
            })
            $('.layui_video_list').on('click', function () {
                // $('.layui-fluid').css({'height':'auto'})
            })

            keydowns("#searchBbtns");
            //监听搜索
            form.on('submit(LAY-app-contlist-search)', function (data) {
                var field = data.field;

                //执行重载
                table.reload('layui-table-video', {
                    where: field
                    , page: { curr: 1 }
                });
            });
            //分类管理
            $("#cate_administration").click(function () {
                layer.open({
                    type: 2,
                    title: ['分类管理', 'color:#333333;background-color:#D8E6F1;'],
                    content: '{:url("video/cate_video")}',
                    resize: false,
                    area: ['80%', '80%'],
                    end: function () {
                        location.reload();
                    }
                });
            })
            //标签管理
            $("#cate_administration_labels").click(function () {
                layer.open({
                    type: 2,
                    title: ['标签管理', 'color:#333333;background-color:#D8E6F1;'],
                    content: '{:url("video/cate_video_labels")}',
                    resize: false,
                    area: ['80%', '80%'],
                    end: function () {
                        location.reload();
                    }
                });
            })
            //下拉框关联
            var typeData = JSON.parse('{$label|raw}');
            form.on('select(type)', function (data) {
                var typeJson = typeData[data.value];
                var typeLabel = $('#label');
                typeLabel.empty().append('<option value="">请选择标签</option>');
                for (r in typeJson) {
                    typeLabel.append('<option value=' + r + '>' + typeJson[r] + '</option>');
                }
                form.render();
            });

            var $ = layui.$,
                active = {
                    add: function () {
                        layer.open({
                            type: 2,
                            title: ['添加视频', 'color:#333333;background-color:#D8E6F1;'],
                            content: '{:url("video/add")}',
                            resize: false,
                            area: ['80%', '80%'],
                            // btn: ['确定', '取消'],
                            yes: function (index, layero) {
                                //点击确认触发 iframe 内容中的按钮提交
                                var submit = layero.find('iframe').contents().find(
                                    "#layuiadmin-app-form-submit");
                                submit.click();
                            }
                        });
                    }
                };

            $('.layui-btn.layuiadmin-btn-list').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            table.render({
                elem: '#layui-table-video',
                url: '{:url("video/index")}',
                page: true,
                limit: 50,
                height: 'full-200',
                cols: [
                    [{
                        type: 'numbers',
                        field: 'id',
                        fixed: 'left',
                        title: '序号',
                    }, {
                        align: 'center',
                        field: 'title',
                        title: '标题',
                        minWidth: 150
                    }, {
                        align: 'center',
                        // field: 'description',
                        templet: '#description',
                        title: '描述',
                        maxWidth: 100
                    }, {
                        align: 'center',
                        field: 'type',
                        title: '分类',
                        maxWidth: 100
                    }, {
                        align: 'center',
                        templet: '#video_label',
                        title: '标签',
                        maxWidth: 100
                    }, {
                        align: 'center',
                        field: 'view_times',
                        title: '浏览次数',
                        sort: true,
                        minWidth: 110
                    }, {
                        align: 'center',
                        title: '转发次数',
                        sort: true,
                        field: 'shared_times',
                        minWidth: 110
                    }, {
                        align: 'center',
                        title: '浏览时长',
                        sort: true,
                        field: 'visit_due_time',
                        minWidth: 110
                    }, {
                        align: 'center',
                        title: '展示',
                        minWidth: 100,
                        templet: '#show'
                    }, {
                        align: 'center',
                        field: 'uploadtime',
                        title: '上传时间',
                        sort: true,
                        minWidth: 110
                    }, {
                        align: 'center',
                        title: '上传人',
                        minWidth: 100,
                        templet: '#employee_name'
                    }, {
                        title: '操作',
                        width: 380,
                        align: 'center',
                        fixed: 'right',
                        toolbar: '#layui-tagsbar'
                    }]
                ],
                text: '对不起，加载出现异常！'
            });
            table.on('sort(layui-table-video)', function (obj) {
                table.reload('layui-table-video', {
                    initSort: obj
                    , where: {
                        order: obj.field + ' ' + obj.type
                    }
                });
            });
            //监听工具条
            table.on('tool(layui-table-video)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('确定删除此视频？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
                        $.ajax({
                            url: "{:url('video/del')}",
                            data: {
                                id: data.id
                            },
                            type: 'post'
                        });
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 2,
                        title: ['编辑标签', 'color:#333333;background-color:#D8E6F1;'],
                        content: '{:url("video/edit")}?id=' + data.id,
                        resize: false,
                        area: ['80%', '80%'],
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            var submit = layero.find('iframe').contents().find(
                                "#layuiadmin-app-form-submit");
                            submit.click();
                        },
                        end: function () {
                            scrollPostion(scrollTopNum);
                            setTimeout(() => {
                                $('.layui-table-main').scroll(function (e) {
                                    scrollTopNum = $(this).scrollTop();
                                    console.log(scrollTopNum, '<<<记录位置');
                                })
                            }, 800)
                        }
                    });
                } else if (obj.event === 'evidence-clue-list') {
                    layer.open({
                        type: 2,
                        title: ['素材线索数据', 'color:#333333;background-color:#D8E6F1;'],
                        content: "{:url('data/cluedata')}?type=video&id=" + data.id,
                        resize: false,
                        area: ['80%', '80%']
                    });
                } else if (obj.event === 'daily-tasks') {
                    layer.open({
                        type: 2,
                        title: ['设置任务', 'color:#333333;background-color:#D8E6F1;'],
                        content: "{:url('dailyTasks/assign_org')}?type=video&id=" + data.id,
                        resize: false,
                        area: ['80%', '80%']
                    });
                } else if (obj.event === 'preview') {
                    requestVideoDetail(data.id);
                }
            });

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

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

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

            function requestVideoDetail(id) {
                $.ajax({
                    type: 'post',
                    url: '{:url("video/preview_read")}',
                    data: {
                        id: id
                    },
                    success: function (res) {
                        if (res.code == 0) {
                            $('.page_video_mask').removeClass('layui-hide');
                            setVideoDetailHtml(res.data)
                        }
                    }
                })
            }

            function setVideoDetailHtml(data) {
                let htmls = `<div class="page_box">
                    <div class="videoDiv" id="mse"></div>
                    <div class="video_right_box">
                        <div class="video_right_item">
                            <div class="video_right_avatar">
                                <img src="__STATIC__/img/default.png" width="100%" height="100%" />
                            </div>
                            <span class="video_right_name">分享人</span>
                        </div>
                        <div class="video_right_item">
                            <div class="video_right_img">
                                <img src="__STATIC__/img/addedwx.png" alt="">
                            </div>
                            <span class="video_right_name">微信咨询</span>
                        </div>
                        <div class="video_right_item">
                            <div class="video_right_img">
                                <img src="__STATIC__/img/whitemobile.png" alt="">
                            </div>
                            <span class="video_right_name">电话预约</span>
                        </div>
                        <div class="video_right_item">
                            <div class="video_right_img">
                                <img src="__STATIC__/img/wcollect.png" alt="">
                            </div>
                            <span class="video_right_name">收藏</span>
                        </div>
                        <div class="video_right_item">
                            <div class="video_right_img">
                                <img src="__STATIC__/img/zhuanfaicon.png" alt="">
                            </div>
                            <span class="video_right_name">转发</span>
                        </div>
                    </div>
                    <div class="video_show_msg">
                        <div class="video_msg_title">${data.title}</div>
                        <div class="video_msg_content">${data.description}</div>
                        <div class="video_msg_type">#${data.type}</div>
                    </div>
                </div>`;
                $('.page_phone').html(htmls);
                setTimeout(() => {
                    var posters = data.cover;
                    if (posters == null || posters == '') {
                        posters = `${data.video_url}?x-oss-process=video/snapshot,t_100,f_jpg`;
                    }
                    let player = new Player({
                        id: 'mse',
                        autoplay: false,
                        volume: 0.3,
                        url: data.video_url,
                        poster: posters,
                        'x5-video-player-type': 'h5',
                        playsinline: true,
                        thumbnail: {
                            pic_num: 44,
                            width: 160,
                            height: 90,
                            col: 10,
                            row: 10,
                        },
                        lang: 'zh-cn',
                        fitVideoSize: 'fixWidth',
                        width: 375,
                        whitelist: ['']
                    });
                }, 300)
            }

            form.on('switch(show)', function (obj) {
                var id = obj.value;
                $.ajax({
                    type: "post",
                    url: '{:url("video/publish")}',
                    data: {
                        id: id
                    },
                    success: function (res) {
                        layer.msg(res.msg);
                    }
                });
            });

            // $(window).resize(function(){
            //       $('.data_lists').height($('.layui-fluid').height()-50)
            // }).resize();
            // $('.data_lists').height($('.layui-fluid').height()-50)
        });
    </script>
</body>
{/block}