9169-php/Public/Admin/js/tabBtn15.js

$(document).ready(function () {
    let url = window.location.search;
    let id;
    let data;
    let videoSrc;
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = unescape(
                decodeURI(strs[i].split("=")[1])
            );
        }
    }

    let tabId = theRequest.TabId || 1;

    // 上传文件-视频
    let spFilesArr = [];

    let spInputFile1 = document.getElementById("uploadAddSP1");
    let spTheFile1;
    spInputFile1.onchange = function () {
        // 获取用户上传的文件对象
        spTheFile1 = spInputFile1.files;
        // 回显

        // 实例化一个文件读取器
        let fileReader = new FileReader();
        fileReader.onload = function () {
            let videoLineDataHtml = `<div class="HoutaiContainerDialogLine4VideoFile btn" id="HoutaiContainerDialogLine4VideoFile1">
                            <div class="videoFileName">视频文件  ${spTheFile1[0].name}</div>
                            <div class="delVideo">删除</div>
                        </div>`;

            $("#HoutaiContainerDialogLine4RightAdd1").append(videoLineDataHtml);
            $("#HoutaiContainerDialogLine4AddSP1").hide();
            spFilesArr.push(spTheFile1[0]);

            // 功能-添加中删除-反差内容-视频
            $("#HoutaiContainerDialogLine4VideoFile1").on("click", function () {
                console.log($(this).index());
                spFilesArr.splice($(this).index(), 1);
                console.log(spFilesArr);
                this.remove();
                $("#HoutaiContainerDialogLine4AddSP1").show();
                $("#uploadNum1").text("进度: 0%");
            });
        };

        //读取文件
        fileReader.readAsDataURL(spTheFile1[0]);
        fileReader.onprogress = updateProgress1;
    };

    // 上传文件-视频
    let spInputFile2 = document.getElementById("uploadAddSP2");
    let spTheFile2;
    spInputFile2.onchange = function () {
        // 获取用户上传的文件对象
        spTheFile2 = spInputFile2.files;
        // 回显

        // 实例化一个文件读取器
        let fileReader = new FileReader();
        fileReader.onload = function () {
            let videoLineDataHtml = `<div class="HoutaiContainerDialogLine4VideoFile btn" id="HoutaiContainerDialogLine4VideoFile2">
                        <div class="videoFileName">视频文件  ${spTheFile2[0].name}</div>
                        <div class="delVideo">删除</div>
                    </div>`;
            $("#HoutaiContainerDialogLine4RightAdd2").append(videoLineDataHtml);
            $("#HoutaiContainerDialogLine4AddSP2").hide();
            spFilesArr.push(spTheFile2[0]);

            // 功能-添加中删除-反差内容-视频
            $("#HoutaiContainerDialogLine4VideoFile2").on("click", function () {
                console.log($(this).index());
                spFilesArr.splice($(this).index() - 1, 1);
                console.log(spFilesArr);
                this.remove();
                $("#HoutaiContainerDialogLine4AddSP2").show();
                $("#uploadNum2").text("进度: 0%");
            });
        };

        //读取文件
        fileReader.readAsDataURL(spTheFile2[0]);
        fileReader.onprogress = updateProgress2;
        // console.log(fileReader.onprogress);
        // $(".uploadNum").text(`进度: ${percentLoaded}%`)
    };
    // 上传文件-视频
    let spInputFile3 = document.getElementById("uploadAddSP3");
    let spTheFile3;
    spInputFile3.onchange = function () {
        // 获取用户上传的文件对象
        spTheFile3 = spInputFile3.files;
        // 回显

        // 实例化一个文件读取器
        let fileReader = new FileReader();
        fileReader.onload = function () {
            let videoLineDataHtml = `<div class="HoutaiContainerDialogLine4VideoFile btn" id="HoutaiContainerDialogLine4VideoFile3">
                                <div class="videoFileName">视频文件  ${spTheFile3[0].name}</div>
                                <div class="delVideo">删除</div>
                            </div>`;
            $("#HoutaiContainerDialogLine4RightAdd3").append(videoLineDataHtml);
            $("#HoutaiContainerDialogLine4AddSP3").hide();
            spFilesArr.push(spTheFile3[0]);

            // 功能-添加中删除-反差内容-视频
            $("#HoutaiContainerDialogLine4VideoFile3").on("click", function () {
                console.log($(this).index());
                spFilesArr.splice($(this).index() - 1, 1);
                console.log(spFilesArr);
                this.remove();
                $("#HoutaiContainerDialogLine4AddSP3").show();
                $("#uploadNum3").text("进度: 0%");
            });
        };

        //读取文件
        fileReader.readAsDataURL(spTheFile3[0]);
        fileReader.onprogress = updateProgress3;
        // console.log(fileReader.onprogress);
        // $(".uploadNum").text(`进度: ${percentLoaded}%`)
    };
    // 上传文件-视频
    let spInputFile4 = document.getElementById("uploadAddSP4");
    let spTheFile4;
    spInputFile4.onchange = function () {
        // 获取用户上传的文件对象
        spTheFile4 = spInputFile4.files;
        // 回显

        // 实例化一个文件读取器
        let fileReader = new FileReader();
        fileReader.onload = function () {
            let videoLineDataHtml = `<div class="HoutaiContainerDialogLine4VideoFile btn" id="HoutaiContainerDialogLine4VideoFile4">
                        <div class="videoFileName">视频文件  ${spTheFile4[0].name}</div>
                        <div class="delVideo">删除</div>
                    </div>`;
            $("#HoutaiContainerDialogLine4RightAdd4").append(videoLineDataHtml);
            $("#HoutaiContainerDialogLine4AddSP4").hide();
            spFilesArr.push(spTheFile4[0]);

            // 功能-添加中删除-反差内容-视频
            $("#HoutaiContainerDialogLine4VideoFile4").on("click", function () {
                console.log($(this).index());
                spFilesArr.splice($(this).index() - 1, 1);
                console.log(spFilesArr);
                this.remove();
                $("#HoutaiContainerDialogLine4AddSP4").show();
                $("#uploadNum4").text("进度: 0%");
            });
        };

        //读取文件
        fileReader.readAsDataURL(spTheFile4[0]);
        fileReader.onprogress = updateProgress4;
        // console.log(fileReader.onprogress);
        // $(".uploadNum").text(`进度: ${percentLoaded}%`)
    };
    // 上传文件-视频
    let spInputFile5 = document.getElementById("uploadAddSP5");
    let spTheFile5;
    spInputFile5.onchange = function () {
        // 获取用户上传的文件对象
        spTheFile5 = spInputFile5.files;
        // 回显

        // 实例化一个文件读取器
        let fileReader = new FileReader();
        fileReader.onload = function () {
            let videoLineDataHtml = `<div class="HoutaiContainerDialogLine4VideoFile btn" id="HoutaiContainerDialogLine4VideoFile5">
                                <div class="videoFileName">视频文件  ${spTheFile5[0].name}</div>
                                <div class="delVideo">删除</div>
                            </div>`;
            $("#HoutaiContainerDialogLine4RightAdd5").append(videoLineDataHtml);
            $("#HoutaiContainerDialogLine4AddSP5").hide();
            spFilesArr.push(spTheFile5[0]);

            // 功能-添加中删除-反差内容-视频
            $("#HoutaiContainerDialogLine4VideoFile5").on("click", function () {
                console.log($(this).index());
                spFilesArr.splice($(this).index() - 1, 1);
                console.log(spFilesArr);
                this.remove();
                $("#HoutaiContainerDialogLine4AddSP5").show();
                $("#uploadNum5").text("进度: 0%");
            });
        };

        //读取文件
        fileReader.readAsDataURL(spTheFile5[0]);
        fileReader.onprogress = updateProgress5;
        // console.log(fileReader.onprogress);
        // $(".uploadNum").text(`进度: ${percentLoaded}%`)
    };
    // 接口调用-数据获取-反差列表
    function getData() {
        $.ajax({
            type: "post",
            url: "https://api.9169kkxstzsjkdd222.app/Admin/Adminback/take_photo_on_street_list",
            dataType: "json",
            data: {
                type: "3",
                page: tabId,
            },
            success: function (res) {
                console.log(res);

                data = res.data;
                $(".SLHeader p").text(`厕所偷拍( ${res.all_num} )`);
                let AppleListHTML = "";
                $.each(data, function (index, value) {
                    AppleListHTML += `
                        <div id="${value.id}" class="HoutaiContainerBottomAppleListHeaders">
                            <p class="HoutaiContainerBottomAppleListHeaderFM">`;
                    if (value.top_img) {
                        AppleListHTML += `<img src="${value.top_img}" alt="">`;
                    }
                    AppleListHTML += `</p>
                            <p class="HoutaiContainerBottomAppleListHeaderBT">${value.title}</p>`;

                    if (value.type == "0") {
                        AppleListHTML += ` <p class="HoutaiContainerBottomAppleListHeaderNR chulizhong">待处理`;
                    } else if (value.type == "1") {
                        AppleListHTML += ` <p class="HoutaiContainerBottomAppleListHeaderNR chulizhong">处理中`;
                    } else {
                        AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderNR">完成`;
                    }

                    AppleListHTML += `
                            </p>
                            <div class="HoutaiContainerBottomAppleListHeaderCZ">
                                <p class="HoutaiContainerBottomAppleListHeaderCZck" type="${value.type}" url="${value.m3u8_url}">预览</p>
                                <p class="HoutaiContainerBottomAppleListHeaderCZsc">删除</p>
                            </div>
                        </div>
                        `;
                });
                $("#AppleList").html(AppleListHTML);
            },
            complete: function (res, status) {

                console.log(res);
                $("#page").paging({
                    pageNo: tabId,
                    totalPage: Math.ceil(res.responseJSON.all_num / 50),
                    callback: function (num) {
                        window.location.href =
                            "https://api.9169kkxstzsjkdd222.app/tabBtn15?TabId=" +
                            num;
                    },
                });
                let index;

                // 功能-删除-反差内容-弹窗展示
                $(".HoutaiContainerBottomAppleListHeaderCZsc").on(
                    "click",
                    function () {
                        id = $(this).parent().parent().attr("id");
                        $(".HoutaiContainerDialogSC").show();
                    }
                );

                // 功能-删除-反差内容-取消删除
                $(".HoutaiContainerDialogASCdvertLeft").on(
                    "click",
                    function () {
                        $(".HoutaiContainerDialogSC").hide();
                    }
                );

                // 功能-删除-反差内容-确定删除
                $(".HoutaiContainerDialogSCAdvertRight").on(
                    "click",
                    function () {
                        $.ajax({
                            type: "post",
                            url: "https://api.9169kkxstzsjkdd222.app/Admin/Adminback/delete_take_photo",
                            dataType: "json",
                            data: {
                                id: id,
                            },
                            success: function (res) {
                                console.log(res);
                                window.location.reload();
                            },
                        });
                    }
                );

                // 功能-查看-反差内容-弹窗展示
                $(".HoutaiContainerBottomAppleListHeaderCZck").on(
                    "click",
                    function () {
                        id = $(this).parent().parent().attr("id");
                        index = $(this).parent().parent().index();
                        let url = $(this).attr("url");

                        let type = $(this).attr("type");
                        if (type == "2") {

                            let videoHTML = `
                        <div>
                        <div id="h5">
                            <img class="toogleImg" src="/Public/Admin/img/end.png" alt="">
                        </div>
                        </div>

                         <div class="HoutaiContainerDialogLine4Check">
                             <p class="HoutaiContainerDialogLine4CheckBtn btn checkbtn" id="qr">确认</p>
                         </div>
                        `;

                            $(".HoutaiContainerDialogDeputyCheck").html(videoHTML);
                            let videoSrc = url;
                            let videoImg = "";
                            var md = new MuiPlayer({
                                container: "#h5",
                                title: "",
                                // autoplay: true,
                                initFullFixed: true,
                                autoplay: false,
                                themeColor: "#FF6A00",
                                lang: "en",
                                poster: videoImg,
                                src: videoSrc,
                                // src: 'https://www.9169slck.com/video/414958811/test/test.m3u8',
                                parse: {
                                    type: "hls",
                                    loader: Hls,
                                    config: {
                                        debug: false,
                                    },
                                },
                                videoAttribute: [
                                    {
                                        attrKey: "webkit-playsinline",
                                        attrValue: "webkit-playsinline",
                                    },
                                    {
                                        attrKey: "playsinline",
                                        attrValue: "playsinline",
                                    },
                                    {
                                        attrKey: "x5-video-player-type",
                                        attrValue: "h5-page",
                                    },
                                ],
                                plugins: [
                                    new MuiPlayerMobilePlugin({
                                        key: "01F01D01G01I01F01H01H01K01C01J01F01J01D01H01K",
                                        showMenuButton: true,
                                    }),
                                ],
                            });
                            md.on("ready", function () {
                                $("#h5").show();
                                $(".quanquan").hide();
                                document.querySelector(
                                    ".mplayer-header"
                                ).style.display = "none";
                                md.on("seek-progress", function (e) {
                                    // console.log("names");
                                    md.video().play();
                                });
                                md.video().onended = function () {
                                    console.log("播放完成");
                                    // if (ad.video.currentTime > '33') {//视频时间，单位’秒‘，建议减1秒
                                    $("#mui-player").remove();
                                };

                                $(".toogleImg").on("click", function (e) {
                                    e.stopPropagation();
                                    console.log($(this).attr("src"));
                                    let toogleStatus = $(this).attr("src");
                                    if (toogleStatus == "/Public/Admin/img/end.png") {
                                        md.video().play();
                                        $(".toogleImg").attr(
                                            "src",
                                            "/Public/Admin/img/star.png"
                                        );
                                    } else {
                                        md.video().pause();
                                        $(".toogleImg").attr(
                                            "src",
                                            "/Public/Admin/img/end.png"
                                        );
                                    }
                                });

                                md.video().addEventListener(
                                    "playing",
                                    function () {
                                        $(".toogleImg").attr(
                                            "src",
                                            "/Public/Admin/img/star.png"
                                        );
                                        console.log("开始播放");
                                        md.toggleControls(false);
                                    }
                                );
                                md.video().addEventListener(
                                    "pause",
                                    function () {
                                        console.log("暂停播放");
                                        md.video().pause();
                                        $(".toogleImg").attr(
                                            "src",
                                            "/Public/Admin/img/end.png"
                                        );
                                    }
                                );
                            });

                            $(".HoutaiContainerDialogCheck").show();
                            // 功能-查看-反差内容-弹窗隐藏
                            $(".HoutaiContainerDialogLine4CheckBtn").on(
                                "click",
                                function () {
                                    $(".HoutaiContainerDialogDeputyCheck").html("");
                                    $(".HoutaiContainerDialogCheck").hide();
                                }
                            );
                        }

                    }
                );

            },
        });
    }

    getData();

    // 功能-上传视频-打开上传视频窗口
    $("#SPImg1").on("click", function () {
        $("#uploadAddSP1").click();
    });
    // 功能-上传视频-打开上传视频窗口
    $("#SPImg2").on("click", function () {
        $("#uploadAddSP2").click();
    });
    // 功能-上传视频-打开上传视频窗口
    $("#SPImg3").on("click", function () {
        $("#uploadAddSP3").click();
    });
    // 功能-上传视频-打开上传视频窗口
    $("#SPImg4").on("click", function () {
        $("#uploadAddSP4").click();
    });
    // 功能-上传视频-打开上传视频窗口
    $("#SPImg5").on("click", function () {
        $("#uploadAddSP5").click();
    });

    // 功能-新增-反差内容-弹窗展示
    $(".SLHeaderCreate").on("click", function () {
        $(".HoutaiContainerDialogAdd").show();
    });

    // 功能-新增-反差内容-弹窗隐藏
    $(".HoutaiContainerDialogLine5LeftAdd").on("click", function () {
        $(".HoutaiContainerDialogAdd").hide();
    });

    // 功能-新增-反差内容-确认新增
    $(".HoutaiContainerDialogLine5RightAdd").on("click", function () {
        if ($(this).text() == "正在上传中") {
            alert("正在上传中!请耐心等待!!!");
            return
        }
        $(this).text("正在上传中");
        $(this).css("background", "#575f6e");

        var formFile = new FormData();

        formFile.append(
            "title",
            `${$("#inputtext1").val()},${$("#inputtext2").val()},${$(
                "#inputtext3"
            ).val()},${$("#inputtext4").val()},${$("#inputtext5").val()}`
        );

        formFile.append("uploader", "3");
        formFile.append("token", "b8e3bb6ef8747d7");

        console.log(spFilesArr);
        for (let i in spFilesArr) {
            formFile.append("mp4[]", spFilesArr[i]);
            console.log(spFilesArr[i]);
        }
        $.ajax({
            type: "post",
            url: "https://api.9169kkxstzsjkdd222.app/Admin/Adminback/upload_video_new",
            dataType: "json",
            data: formFile,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            success: function (res) {
                // alert("添加成功");
                console.log(res);

                window.location.reload();
            },
        });
    });

    // 更新进度条
    function updateProgress1(e) {
        // e 是一个 ProgressEvent.
        if (e.lengthComputable) {
            var percentLoaded = Math.round((e.loaded / e.total) * 100);
            // 更新进度条长度
            if (percentLoaded <= 100) {
                // progress.style.width = percentLoaded + "%";
                // progress.textContent = percentLoaded + "%";
                $(`#uploadNum1`).text(`进度: ${percentLoaded}%`);
            }
        }
    }
    function updateProgress2(e) {
        // e 是一个 ProgressEvent.
        if (e.lengthComputable) {
            var percentLoaded = Math.round((e.loaded / e.total) * 100);
            // 更新进度条长度
            if (percentLoaded <= 100) {
                // progress.style.width = percentLoaded + "%";
                // progress.textContent = percentLoaded + "%";
                $(`#uploadNum2`).text(`进度: ${percentLoaded}%`);
            }
        }
    }
    function updateProgress3(e) {
        // e 是一个 ProgressEvent.
        if (e.lengthComputable) {
            var percentLoaded = Math.round((e.loaded / e.total) * 100);
            // 更新进度条长度
            if (percentLoaded <= 100) {
                // progress.style.width = percentLoaded + "%";
                // progress.textContent = percentLoaded + "%";
                $(`#uploadNum3`).text(`进度: ${percentLoaded}%`);
            }
        }
    }
    function updateProgress4(e) {
        // e 是一个 ProgressEvent.
        if (e.lengthComputable) {
            var percentLoaded = Math.round((e.loaded / e.total) * 100);
            // 更新进度条长度
            if (percentLoaded <= 100) {
                // progress.style.width = percentLoaded + "%";
                // progress.textContent = percentLoaded + "%";
                $(`#uploadNum4`).text(`进度: ${percentLoaded}%`);
            }
        }
    }
    function updateProgress5(e) {
        // e 是一个 ProgressEvent.
        if (e.lengthComputable) {
            var percentLoaded = Math.round((e.loaded / e.total) * 100);
            // 更新进度条长度
            if (percentLoaded <= 100) {
                // progress.style.width = percentLoaded + "%";
                // progress.textContent = percentLoaded + "%";
                $(`#uploadNum5`).text(`进度: ${percentLoaded}%`);
            }
        }
    }
});