feat(mall): 添加小程序首页头部背景功能

Administrator

2025-05-22 f4297e7b0fbe68c528a4a16ecff3edcdb0cb8ba3

 src/main/resources/templates/febs/views/modules/system/indexVideo.html

@@ -1,13 +1,29 @@
<div class="layui-fluid layui-anim febs-anim" id="index-video-set" lay-title="充值设置">
<div class="layui-fluid layui-anim febs-anim" id="index-video-set" lay-title="首页头部背景">
    <div class="layui-row layui-col-space8 febs-container">
        <form class="layui-form" action="" lay-filter="index-video-set-form">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频：</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn upload" id="upload" style="background-color: #009688; margin-bottom: 2px">上传文件</button>
                            <input type="text" name="videoUrl" autocomplete="off" value="" id="videoUrl" class="layui-input" readonly>
                        <div class="layui-row layui-col-space10 layui-form-item">
                            <div class="layui-col-lg6">
                                <label class="layui-form-label febs-form-item-require">图片：</label>
                                <div class="layui-input-block">
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn layui-btn-normal layui-btn" id="videoUrlUploadButton">上传</button>
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            <div class="layui-upload-list" id="videoUrlUpload"></div>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space10 layui-form-item febs-hide">
                            <div class="layui-col-lg6">
                                <label class="layui-form-label">图片链接：</label>
                                <div class="layui-input-block">
                                    <input type="text" id="videoUrl" lay-verify="required" name="videoUrl" autocomplete="off" class="layui-input" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
@@ -52,6 +68,9 @@
            form.val("index-video-set-form", {
                "videoUrl": indexVideoSet.videoUrl,
            });

            $('#videoUrlUpload').append('<img src="' + indexVideoSet.videoUrl + '" alt="" class="layui-upload-img single-image" style="width: 130px">');
            $("#videoUrl").val(indexVideoSet.videoUrl);
        }

        form.on('submit(index-video-set-form-submit)', function (data) {
@@ -68,26 +87,20 @@

        bindUpload();
        function bindUpload() {
            //图片上传
            upload.render({
                elem: '.upload'
                elem: '#videoUrlUploadButton'
                ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
                ,accept: 'file'
                ,accept: 'file' //普通文件
                ,size: 102400 //限制文件大小，单位 KB
                ,before: function(obj){
                    layer.msg('上传中', {icon: 16, time: 0});
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#videoUrlUpload').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img single-image" style="width: 130px">')
                    });
                }
                ,done: function(res){
                    var item = this.item;
                    //如果上传失败
                    if(res.code !== 0){
                        return layer.msg('上传失败');
                    }

                    // $(item).parent().prev().find('input').val(res.data[0]);
                    $("#videoUrl").val(res.data.src);
                    layer.msg('上传完毕', {icon: 1});
                }
                ,error: function(err){
                    return layer.msg('上传失败');
                }
            });
        }