yn_img_tool/src/main/resources/static/js/imageUpload/photoView.js

let form, laydate, flow,layer;
let pageNum = 1, pageSize = 20; // 定义分页
let objParams = {};
function setParams(obj){
    objParams = JSON.parse(obj);
    layui.config({
        base: "../../js/layui-v2.9.14/layui/", //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        rightPopup: "rightPopup",
    }).use(["form", 'laydate', 'flow','layer'], function () {
        form = layui.form;
        laydate = layui.laydate;
        flow = layui.flow;
        layer = layui.layer;
        dataFlow();
    });
}

/**数据流加载*/
function dataFlow() {
    flow.load({
        elem: '#ID-flow-demo', // 流加载容器
        scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
        end: '数据加载完毕',
        direction: 'bottom',
        done: function (page, next) { // 执行下一页的回调
            console.error(page);
            pageNum = page;
            let lis = [];
            let returnData = loadData();
            if (returnData != null) {
                lis = initImgData(returnData.data.list)
                next(lis.join(''), page < returnData.data.total / 15);
                $('.img-info2').on('mouseenter', function () {
                    this.querySelector('.hidden-actions3').style.display = 'block';
                });
                $('.img-info2').on('mouseleave', function () {
                    this.querySelector('.hidden-actions3').style.display = 'none';
                });
            }
        }
    });
}

/**加载图片数据*/
function loadData() {
    let returnData = null;
    let url = dataUrl + "/backstage/synthesisQuery/getPhotoImgList"
    let obj = {
        pageNum: pageNum,
        pageSize: pageSize,
        id:objParams.id,
        sourceType: objParams.sourceType
    }
    let params = {
        encryptedData: encryptCBC(JSON.stringify(obj))
    }
    ajaxRequest(url, "POST", params, false, function () {
    }, function (result) {
        if (result.status === 200) {
            console.log(result)
            returnData = result;
        } else {
            layer.msg(result.msg, {icon: 2})
        }
    }, function (xhr) {
        error(xhr)
    });
    return returnData;
}

/**渲染图片*/
function initImgData(list) {
    let htmlArr = [];
    if (list && list.length > 0) {
        $.each(list, function (index, item) {
            let filePath = imgUrl + item.compressFilePath + "?token=" + tokens
            htmlArr.push("<div class='img-info2'>" +
                "        <div class='img-viewer layout'>\n" +
                "             <img src='" + filePath + "'>" +
                "        </div>" +
                "        <div class='hidden-actions3'><div class='hidden-btn layout'>" +
                "           <div class='layout' onclick='viewImg(" + JSON.stringify(item) + ")'><div class='img-view' title='放大'></div></div>" +
                "           <div class='layout' onclick='imgDownLoad(" + JSON.stringify(item) + ",1)'><div title='原图下载' class='img-download'></div></div>" +
                "           <div class='layout' onclick='generateWatermark(" + JSON.stringify(item) + ")'><div title='水印下载' class='img-water'></div></div>" +
                // setCollectImg(item) +
                "         </div></div>" +
                "    </div>");
        })
    }
    return htmlArr;


    // 设置收藏按钮
    function setCollectImg(item) {
        if (item.collectStatus === '0') {
            return "<div class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",0)'><div title='收藏' class='img-collect'></div></div>" +
                "<div style='display: none;' class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",1)'><div title='取消收藏' class='img-collect-check'></div></div>";
        } else {
            return "<div style='display: none;' class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",0)'><div title='收藏' class='img-collect'></div></div>" +
                "<div class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",1)'><div title='取消收藏' class='img-collect-check'></div></div>";
        }
    }

}

/**收藏*/
function collectImg(that, item, type) {
    if (type === 0) { // 收藏
        let flag = collectData({
            collectType: 1,
            id: item.id
        });
        if (flag) {
            $(that).next().removeAttr("style");
            $(that).css({'display': 'none'})
            layer.msg("收藏成功",{icon:1})
        }else{
            layer.msg("收藏失败",{icon:2})
        }

    } else if (type === 1) { // 取消收藏
        let flag = collectData({
            collectType: 2,
            id: item.id
        });
        if (flag) {
            $(that).prev().removeAttr("style");
            $(that).css({'display': 'none'});
            layer.msg("取消收藏成功",{icon:1})
        }else{
            layer.msg("取消收藏失败",{icon:2})
        }
    }
}