feat(commentList): 优化评论列表图片展示功能

Administrator

2025-05-16 c53d5c0d6ac40434d89910edd228a082b4a2998b

feat(commentList): 优化评论列表图片展示功能

- 添加缩略图样式和放大功能
- 修复图片路径分隔符问题
- 增加会员图标查看功能
- 优化表格列配置

 src/main/resources/templates/febs/views/modules/order/commentList.html

@@ -28,12 +28,30 @@
                            </div>
                        </div>
                    </form>
                    <table lay-filter="commetTable" lay-data="{id: 'commetTable'}"></table>
                    <table lay-filter="commentTable" lay-data="{id: 'commentTable'}"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    /* 缩略图样式 */
    .thumb-img {
        width: 50px;
        height: 50px;
        margin: 2px;
        cursor: zoom-in;
        object-fit: cover;
        border-radius: 3px;
        box-shadow: 0 2px 5px rgba(0,0,0,.1);
    }

    /* 相册放大样式 */
    .layui-layer-photos img {
        max-width: 90vw;
        max-height: 90vh;
    }
</style>
<!-- 表格操作栏 start -->
<script type="text/html" id="showStateSwitch">
    {{# if(d.showState === 1) { }}
@@ -42,12 +60,16 @@
    <input type="checkbox" value={{d.id}} lay-text="是|否" lay-skin="switch" lay-filter="showStateSwitch">
    {{# } }}
</script>
<script id="showScreenhost" type="text/html">
    {{# var srr=d.images.split(",");
    for(var j in srr) { srr[j] }}
    <div style="margin:0 10px; display:inline-block !important; display:inline;  max-width:100px; max-height:100px;">
        <img style=" max-width:100px; max-height:100px;" src="{{srr[j]}}" alt=""/>
    </div>
<!-- 图片模板 -->
<script type="text/html" id="imgTpl">
    {{#
    var urls = d.images.split(',');
    }}
    {{# for(var i = 0; i < urls.length; i++) { }}
    <img src="{{ urls[i] }}"
         class="thumb-img"
         data-urls="{{ urls[i] }}"
         data-index="{{ i }}">
    {{# } }}
</script>

@@ -72,9 +94,31 @@
        initTable();

        // 初始化表格操作栏各个按钮功能
        table.on('tool(commetTable)', function (obj) {
        table.on('tool(commentTable)', function (obj) {
            var data = obj.data,
                layEvent = obj.event;
        });
        // 初始化表格操作栏各个按钮功能
        table.on('tool(commentTableToolbar)', function (obj) {
            console.log("触发事件:", obj.event); // 调试信息
            var data = obj.data,
                layEvent = obj.event;

            if (layEvent === 'seeIconPng') {
                var t = $view.find('#seeIconPng'+data.id+'');
                //页面层
                layer.open({
                    type: 1,
                    title: "会员图标",
                    skin: 'layui-layer-rim', //加上边框
                    area: ['100%', '100%'], //宽高
                    shadeClose: true, //开启遮罩关闭
                    end: function (index, layero) {
                        return false;
                    },
                    content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
                });
            }
        });

        // 查询按钮
@@ -93,17 +137,21 @@
        function initTable() {
            tableIns = febs.table.init({
                elem: $view.find('table'),
                id: 'commetTable',
                id: 'commentTable',
                url: ctx + 'admin/order/commentList',
                toolbar:"#commentTableToolbar",
                defaultToolbar:[],
                // toolbar: '#tableToolBar',
                cols: [[
                        {type: 'numbers', title: '', width: 80},
                        {field: 'memberName', title: '昵称', minWidth: 100,align:'left'},
                        {field: 'orderNo', title: '订单编号', minWidth: 80,align:'left'},
                        {field: 'goodsName', title: '商品名称', minWidth: 80,align:'left'},
                        // {field: 'styleName', title: '样式', minWidth: 80,align:'left'},
                        {field: 'skuName', title: '规格', minWidth: 80,align:'left'},
                        {field: 'showState', title: '是否展示', templet: '#showStateSwitch', minWidth: 80,align:'center'},
                        {field: 'images', title: '图片', align: 'center', templet: '#showScreenhost', width: 400},
                        // {field: 'images', title: '图片', align: 'center', templet: '#showScreenhost', width: 400},
                        {field: 'images', title: '图片', templet: '#imgTpl'}, // 使用模板
                        {field: 'star', title: '评分', minWidth: 50,align:'left'},
                        {field: 'comment', title: '评论', minWidth: 120,align:'left'},
                        {field: 'createdTime', title: '评价时间', minWidth: 180,align:'left'},
@@ -117,7 +165,27 @@
                                    return ''
                                }
                            }, minWidth: 80,align:'center'},
                ]]
                ]],
                done: function(res) {
                    // 绑定图片点击事件
                    $('.thumb-img').on('click', function() {
                        // 关键修复：使用原生方法获取未转义的属性值
                        var urls = this.getAttribute('data-urls');
                        console.log("点击的图片:", urls);
                        //页面层
                        layer.open({
                            type: 1,
                            title: "图片",
                            skin: 'layui-layer-rim', //加上边框
                            area: ['100%', '100%'], //宽高
                            shadeClose: true, //开启遮罩关闭
                            end: function (index, layero) {
                                return false;
                            },
                            content: '<div style="text-align:center"><img src="' + urls + '" /></div>'
                        });
                    });
                }
            });
        }