glhcp/server/app/admin/view/setting/basic/website_base.html

<style>
    .pay-li {
        float: left;
        opacity: 1;
        position: relative;
    }
    .pay-img {
        width: 80px;
        height: 80px;
        padding: 4px;
    }
    .pay-img-del-x {
        position: absolute;
        z-index: 100;
        top: -4px;
        right: -2px;
        width: 20px;
        height: 20px;
        font-size: 16px;
        line-height: 16px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background: hsla(0, 0%, 60%, .6);
        border-radius: 10px;
    }
    .upload-cert-a{
        cursor: pointer;
        position: absolute;
        z-index: 100;
        top: 58px;
        right: -10%;
        width: 100px;
        height: 20px;
        font-size: 8px;
        line-height: 16px;
        text-align: center;
        border-radius: 10px;
        color: #4e8bff;
    }
    .upload-cert-a:hover {
        color: #0641cb;
    }
    .pay-cert{
        height:80px;line-height:80px
    }
    .cert-add,.key-add{
        height: 80px;
        width: 80px;
        float: left;
        opacity: 1;
        position: relative;
        border:1px dashed #a0a0a0;
        background-image:url('/static/common/image/default/add_file.png');
        background-repeat: no-repeat;
        background-position: 50% 35%;
        background-size:40px 40px;
        margin: 4px;
        text-align: center;
    }
</style>
<div class="layui-form" lay-filter="">
    <input type="hidden" name="type" value="base">
    <!--商城名称-->
    <div class="layui-form-item">
        <label class="layui-form-label">商城名称：</label>
        <div class="layui-input-block">
            <div class="layui-col-md4">
                <input type="text" name="name" lay-verify="required" lay-verType="tips" autocomplete="off"
                       value="{$config.name}" class="layui-input">
                <div class=" layui-form-mid layui-word-aux">管理后台登录页表单标题</div>
            </div>
        </div>
    </div>

    <!--商家后台登录页logo-->
    <div class="layui-form-item">
        <label class="layui-form-label">商城浏览器图标：</label>
        <div class="layui-input-inline">
            <div class="like-upload-image">
                {if !empty($config.web_favicon)}
                <div class="upload-image-div">
                    <img src="{$config.file_url}{$config.web_favicon}" alt="img" style="background-color:#EEEEEE;height: 80px;width:auto">
                    <input name="web_favicon" type="hidden" value="{$config.web_favicon}">
                    <div class="del-upload-btn">x</div>
                </div>
                <div class="upload-image-elem" style="display:none;"><a class="add-upload-image web_favicon"> + 添加图片</a></div>
                {else}
                <div class="upload-image-elem"><a class="add-upload-image web_favicon"> + 添加图片</a></div>
                {/if}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <label class=" layui-form-mid layui-word-aux">商城在浏览器标签页显示的图标，favicon.ico文件</label>
        </div>
    </div>

    <!--商城logo-->
    <div class="layui-form-item">
        <label class="layui-form-label">商城logo：</label>
        <div class="layui-input-inline">
            <div class="like-upload-image">
                {if !empty($config.client_login_logo)}
                <div class="upload-image-div">
                    <img src="{$config.file_url}{$config.client_login_logo}" alt="img" style="background-color:#EEEEEE;height: 80px;width:auto">
                    <input name="client_login_logo" type="hidden" value="{$config.client_login_logo}">
                    <div class="del-upload-btn">x</div>
                </div>
                <div class="upload-image-elem" style="display:none;"><a class="add-upload-image client_login_logo"> + 添加图片</a></div>
                {else}
                <div class="upload-image-elem"><a class="add-upload-image client_login_logo"> + 添加图片</a></div>
                {/if}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <label class=" layui-form-mid layui-word-aux">移动端登录页logo，建议尺寸：宽172px*高48px。jpg，jpeg，png格式</label>
        </div>
    </div>

    <!--PC端登录封面-->
    <div class="layui-form-item">
        <label class="layui-form-label">PC登录封面：</label>
        <div class="layui-input-inline">
            <div class="like-upload-image">
                {if !empty($config.pc_client_login_logo)}
                <div class="upload-image-div">
                    <img src="{$config.file_url}{$config.pc_client_login_logo}" alt="img" style="background-color:#EEEEEE;height: 80px;width:auto">
                    <input name="pc_client_login_logo" type="hidden" value="{$config.pc_client_login_logo}">
                    <div class="del-upload-btn">x</div>
                </div>
                <div class="upload-image-elem" style="display:none;"><a class="add-upload-image pc_client_login_logo"> + 添加图片</a></div>
                {else}
                <div class="upload-image-elem"><a class="add-upload-image pc_client_login_logo"> + 添加图片</a></div>
                {/if}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <label class=" layui-form-mid layui-word-aux">PC端登录封面，建议尺寸：宽750px*高440px。jpg，jpeg，png格式</label>
        </div>
    </div>

    <!--会员默认头像-->
    <div class="layui-form-item">
        <label class="layui-form-label">会员默认头像：</label>
        <div class="layui-input-inline">
            <div class="like-upload-image">
                {if !empty($config.user_image)}
                <div class="upload-image-div">
                    <img src="{$config.file_url}{$config.user_image}" alt="img" style="background-color:#EEEEEE;height: 80px;width:auto">
                    <input name="user_image" type="hidden" value="{$config.user_image}">
                    <div class="del-upload-btn">x</div>
                </div>
                <div class="upload-image-elem" style="display:none;"><a class="add-upload-image user_image"> + 添加图片</a></div>
                {else}
                <div class="upload-image-elem"><a class="add-upload-image user_image"> + 添加图片</a></div>
                {/if}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <label class=" layui-form-mid layui-word-aux">商城会员默认头像，建议尺寸：宽200px*高200px。jpg，jpeg，png格式</label>
        </div>
    </div>

    <!--商品默认封面图-->
    <div class="layui-form-item">
        <label class="layui-form-label">商品默认封面图：</label>
        <div class="layui-input-inline">
            <div class="like-upload-image">
                {if !empty($config.goods_image)}
                <div class="upload-image-div">
                    <img src="{$config.file_url}{$config.goods_image}" alt="img" style="background-color:#EEEEEE;height: 80px;width:auto">
                    <input name="goods_image" type="hidden" value="{$config.goods_image}">
                    <div class="del-upload-btn">x</div>
                </div>
                <div class="upload-image-elem" style="display:none;"><a class="add-upload-image goods_image"> + 添加图片</a></div>
                {else}
                <div class="upload-image-elem"><a class="add-upload-image goods_image"> + 添加图片</a></div>
                {/if}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <label class=" layui-form-mid layui-word-aux">商城商品默认封面图，建议尺寸：宽400px*高400px。jpg，jpeg，png格式</label>
        </div>
    </div>

    <!--合同模版-->
    <div class="layui-form-item">
        <label class="layui-form-label">合同模版：</label>
        <div class="layui-inline">
            <div class="pay-cert" id="kkk">
                <input class="text" type="hidden" name="order_contract_template" value="{$config.order_contract_template | default = ''}" >
                {if !empty($config.order_contract_template)}
                <div class="file-add" style="display: none;cursor: pointer;">
                    <a class="upload-cert-a">+ 添加文件</a>
                </div>
                <div class="pay-li">
                    <img class="pay-img"  src="/static/common/image/default/upload.png">
                    <a class="pay-img-del-x" style="display: none">x</a>
                </div>
                {else/}
                <div class="file-add" style="cursor: pointer;">
                    <a class="upload-cert-a">+ 添加文件</a>
                </div>
                {/if}
            </div>
            <div class=" layui-form-mid layui-word-aux">
                前置订单的合同模版，建议大小不超过：10M。pdf格式
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm {$view_theme_color}" lay-submit lay-filter="setWebsite">确认
            </button>
        </div>
    </div>
</div>

<script>
    layui.use(['form'], function(){
        var $ = layui.$
            ,form = layui.form;

        like.delUpload();
        // $(document).on("click", ".add-upload-image", function () {
        //     like.imageUpload({
        //         limit: 1,
        //         field: "image",
        //         that: $(this)
        //     });
        // });

        //删除图片/证书
        $(document).on('click', '.pay-img-del-x', function () {
            $(this).parent().siblings('input').val('');
            $(this).parent().siblings().css('display','block');
            $(this).parent().remove();
        });
        //==========================================上传证书start=========================================================


        like.fileUpload('.file-add', '{:url("file/other")}?local=1&sub_dir=contract', '{$storageUrl}');

        //==========================================上传证书end===========================================================
        //  删除按钮的显示与隐藏
        $(document).on('mouseover', '.pay-img', function () {
            $(this).next().show();
        });
        $(document).on('mouseout', '.pay-img', function () {
            $(this).next().hide();
        });
        $(document).on('mouseover', '.pay-img-del-x', function () {
            $(this).show();
        });
        $(document).on('mouseout', '.pay-img-del-x', function () {
            $(this).hide();
        });

    })
</script>