From c53d5c0d6ac40434d89910edd228a082b4a2998b Mon Sep 17 00:00:00 2001
From: Administrator <15274802129@163.com>
Date: Fri, 16 May 2025 15:55:43 +0800
Subject: [PATCH] feat(commentList): 优化评论列表图片展示功能
---
src/main/resources/templates/febs/views/modules/order/commentList.html | 90 +++++++++++++++++++++++++++++++++++++++-----
1 files changed, 79 insertions(+), 11 deletions(-)
diff --git a/src/main/resources/templates/febs/views/modules/order/commentList.html b/src/main/resources/templates/febs/views/modules/order/commentList.html
index 36aae45..00f34da 100644
--- a/src/main/resources/templates/febs/views/modules/order/commentList.html
+++ b/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>'
+ });
+ });
+ }
});
}
--
Gitblit v1.9.1