This commit is contained in:
xman 2025-06-22 18:25:14 +08:00
parent a5294041d9
commit e74a3ff6e0
2 changed files with 54 additions and 8 deletions

View File

@ -196,18 +196,34 @@
<!-- <div class="form-group">-->
<!-- <label class="control-label col-xs-12 col-sm-2">{:__('师傅收款码')}:</label>-->
<!-- <div class="col-xs-12 col-sm-8">-->
<!-- <div class="input-group">-->
<!-- <input readonly id="c-worker_images" class="form-control" size="50" value="{$worker.images}" type="text">-->
<!-- <div class="input-group-addon no-border no-padding">-->
<!-- <span><button readonly type="button" id="faupload-worker_images" class="btn btn-danger faupload" data-input-id="c-worker_images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="true" data-preview-id="p-worker_images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>-->
<!-- <span><button readonly type="button" id="fachoose-worker_images" class="btn btn-primary fachoose" data-input-id="c-worker_images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>-->
<!-- </div>-->
<!-- <span class="msg-box n-right" for="c-worker_images"></span>-->
<!-- </div>-->
<!-- <ul class="row list-inline faupload-preview" id="p-worker_images"></ul>-->
<!-- </div>-->
<!-- </div>-->
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('师傅收款码')}:</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input readonly id="c-worker_images" class="form-control" size="50" value="{$worker.images}" type="text">
<div class="input-group-addon no-border no-padding">
<span><button readonly type="button" id="faupload-worker_images" class="btn btn-danger faupload" data-input-id="c-worker_images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="true" data-preview-id="p-worker_images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
<span><button readonly type="button" id="fachoose-worker_images" class="btn btn-primary fachoose" data-input-id="c-worker_images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
</div>
<span class="msg-box n-right" for="c-worker_images"></span>
<div class="progress-images">
{if $worker.images}
{foreach name="worker.images|explode=','" item="img"}
<img src="{$img|cdnurl}" data-preview="true"
style="width:40px;height:40px;border-radius:4px;border:1px solid #ccc;margin-right:5px;"
onerror="this.style.display='none'" />
{/foreach}
{/if}
</div>
<ul class="row list-inline faupload-preview" id="p-worker_images"></ul>
</div>
</div>
@ -259,3 +275,15 @@
</div>
</div>
</form>
<!-- 图片预览弹窗 -->
<div id="image-preview-overlay" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6);z-index:9999;justify-content:center;align-items:center;">
<img id="image-preview-img" src="" style="max-width:90%;max-height:90%;box-shadow:0 0 20px #000;border-radius:6px;" />
</div>
<style>
.progress-images img:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
</style>

View File

@ -130,6 +130,24 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
},
edit: function () {
Controller.api.bindevent();
// 图片点击预览逻辑
$(function () {
var $overlay = $('#image-preview-overlay');
var $previewImg = $('#image-preview-img');
// 委托点击预览
$('body').on('click', 'img[data-preview="true"]', function () {
var src = $(this).attr('src');
$previewImg.attr('src', src);
$overlay.fadeIn(100).css('display', 'flex');
});
// 点击遮罩关闭
$overlay.on('click', function () {
$previewImg.attr('src', '');
$overlay.fadeOut(100);
});
});
},
api: {
bindevent: function () {