20221221

xiaoyong931011

2022-12-23 e256a4b20ab92ea7ab6baf3a0e5ebad2c835cfbf

 src/main/resources/templates/febs/views/modules/mallMember/shopApplyInfo.html

@@ -28,48 +28,140 @@
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">法人名称：</label>
            <div class="layui-input-block">
                <input type="text" name="name" data-th-id="${apply.name}" autocomplete="off" class="layui-input" readonly>
                <input type="text" name="name" data-th-id="${apply.name}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">联系方式：</label>
            <div class="layui-input-block">
                <input type="text" name="phone" data-th-id="${apply.phone}" autocomplete="off" class="layui-input" readonly>
                <input type="text" name="phone" data-th-id="${apply.phone}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">商铺名称：</label>
            <div class="layui-input-block">
                <input type="text" name="shopName" data-th-id="${apply.shopName}" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">身份证：</label>
            <div class="layui-input-block">
                <blockquote id="cardUrl"></blockquote>
                <div class="layui-upload">
                    <button type="button"
                            class="layui-btn layui-btn-normal layui-btn"
                            id="cardUrlUpload">上传
                    </button>
                    <blockquote class="layui-elem-quote layui-quote-nm"
                                style="margin-top: 10px;">
                        <div class="layui-upload-list" id="cardUrl"></div>
                    </blockquote>
                    <div class="layui-word-aux">双击图片删除</div>
                </div>
            </div>
        </div>

        <div class="layui-form-item febs-hide">
            <label class="layui-form-label">缩略图链接：</label>
            <div class="layui-input-block">
                <input type="text" id="idcard" lay-verify="required" name="idcard"
                       autoComplete="off" class="layui-input" readOnly>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">营业执照：</label>
            <div class="layui-input-block">
                <blockquote id="businessLicense"></blockquote>
                <div class="layui-upload">
                    <button type="button"
                            class="layui-btn layui-btn-normal layui-btn"
                            id="businessLicenseUpload">上传
                    </button>
                    <blockquote class="layui-elem-quote layui-quote-nm"
                                style="margin-top: 10px;">
                        <div class="layui-upload-list" id="businessLicenseUrl"></div>
                    </blockquote>
                    <div class="layui-word-aux">双击图片删除</div>
                </div>
            </div>
        </div>

        <div class="layui-form-item febs-hide">
            <label class="layui-form-label">缩略图链接：</label>
            <div class="layui-input-block">
                <input type="text" id="businessLicense" lay-verify="required" name="businessLicense"
                       autoComplete="off" class="layui-input" readOnly>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">经营场地：</label>
            <div class="layui-input-block">
                <blockquote id="areaUrl"></blockquote>
                <div class="layui-upload">
                    <button type="button"
                            class="layui-btn layui-btn-normal layui-btn"
                            id="saleAreaUpload">上传
                    </button>
                    <blockquote class="layui-elem-quote layui-quote-nm"
                                style="margin-top: 10px;">
                        <div class="layui-upload-list" id="saleAreaUrl"></div>
                    </blockquote>
                    <div class="layui-word-aux">双击图片删除</div>
                </div>
            </div>
        </div>

        <div class="layui-form-item febs-hide">
            <label class="layui-form-label">缩略图链接：</label>
            <div class="layui-input-block">
                <input type="text" id="saleArea" lay-verify="required" name="saleArea"
                       autoComplete="off" class="layui-input" readOnly>
            </div>
        </div>

        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="shop-apply-form-agree" id="agree"></button>
            <button class="layui-btn" lay-submit="" lay-filter="shop-apply-form-disagree" id="disagree"></button>
            <button class="layui-btn" lay-submit="" lay-filter="shop-apply-form-update" id="applyUpdate"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript" type="text/html" id="urlTemplate">
    {{#  layui.each(d, function(index, item){ }}
        <img src="{{item}}" style="width: 120px" />
        <img src="{{item}}" class="layui-upload-img multi-images" style="width: 120px" />
    {{# }) }}
</script>

<script data-th-inline="javascript" type="text/html" id="urlTemplateBl">
    {{#  layui.each(d, function(index, item){ }}
        <img src="{{item}}" class="layui-upload-img multi-images-bl" style="width: 120px" />
    {{# }) }}
</script>

<script data-th-inline="javascript" type="text/html" id="urlTemplateSa">
    {{#  layui.each(d, function(index, item){ }}
        <img src="{{item}}" class="layui-upload-img multi-images-sa" style="width: 120px" />
    {{# }) }}
</script>

<style>

    .layui-upload-list {
        margin: 0 !important;
    }
    .multi-images {
        margin: 0 5px !important;
    }
    .multi-images-bl {
        margin: 0 5px !important;
    }
    .multi-images-sa {
        margin: 0 5px !important;
    }
</style>
<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','laytpl'], function () {
    layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','upload' ,'laytpl'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
@@ -77,9 +169,153 @@
            apply = [[${apply}]],
            laytpl = layui.laytpl,
            $view = $('#shop-apply-detail'),
            upload = layui.upload,
            templateHtml = urlTemplate.innerHTML;
            templateHtmlBl = urlTemplateBl.innerHTML;
            templateHtmlSa = urlTemplateSa.innerHTML;

        form.render();

        //多图片上传
        upload.render({
            elem: '#cardUrlUpload'
            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#cardUrl').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img multi-images" style="width: 130px">')
                });
            }
            ,done: function(res){
                var idcard = $("#idcard").val();
                if(idcard == ''){
                    $("#idcard").val(res.data.src);
                }else{
                    $("#idcard").val(idcard + ',' + res.data.src);
                }

                imgUnBind(".multi-images");
                imgMultiBind();
            }
        });

        function imgUnBind(className) {
            $(className).each(function() {
                $(this).unbind('dblclick');
            })
        }

        function imgMultiBind() {
            $(".multi-images").each(function(index, element) {
                $(this).on("dblclick", function() {
                    var imgThumb = $(".multi-images")[index];
                    $(imgThumb).remove();

                    var images = $("#idcard").val();
                    var imagesArr;
                    if (images) {
                        imagesArr = images.split(",");
                        imagesArr.splice(index, 1);
                        images = imagesArr.join(",");
                    }
                    $("#idcard").val(images);

                    imgUnBind(".multi-images");
                    imgMultiBind();
                });
            })
        }

        //多图片上传
        upload.render({
            elem: '#businessLicenseUpload'
            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#businessLicenseUrl').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img multi-images-bl" style="width: 130px">')
                });
            }
            ,done: function(res){
                var businessLicense = $("#businessLicense").val();
                if(businessLicense == ''){
                    $("#businessLicense").val(res.data.src);
                }else{
                    $("#businessLicense").val(businessLicense + ',' + res.data.src);
                }

                imgUnBind(".multi-images-bl");
                businessLicenseImgMultiBind();
            }
        });

        function businessLicenseImgMultiBind() {
            $(".multi-images-bl").each(function(index, element) {
                $(this).on("dblclick", function() {
                    var imgThumb = $(".multi-images-bl")[index];
                    $(imgThumb).remove();

                    var images = $("#businessLicense").val();
                    var imagesArr;
                    if (images) {
                        imagesArr = images.split(",");
                        imagesArr.splice(index, 1);
                        images = imagesArr.join(",");
                    }
                    $("#businessLicense").val(images);

                    imgUnBind(".multi-images-bl");
                    businessLicenseImgMultiBind();
                });
            })
        }
        //多图片上传
        upload.render({
            elem: '#saleAreaUpload'
            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#saleAreaUrl').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img multi-images-sa" style="width: 130px">')
                });
            }
            ,done: function(res){
                var saleArea = $("#saleArea").val();
                if(saleArea == ''){
                    $("#saleArea").val(res.data.src);
                }else{
                    $("#saleArea").val(saleArea + ',' + res.data.src);
                }

                imgUnBind(".multi-images-sa");
                saleAreaImgMultiBind();
            }
        });

        function saleAreaImgMultiBind() {
            $(".multi-images-sa").each(function(index, element) {
                $(this).on("dblclick", function() {
                    var imgThumb = $(".multi-images-sa")[index];
                    $(imgThumb).remove();

                    var images = $("#saleArea").val();
                    var imagesArr;
                    if (images) {
                        imagesArr = images.split(",");
                        imagesArr.splice(index, 1);
                        images = imagesArr.join(",");
                    }
                    $("#saleArea").val(images);

                    imgUnBind(".multi-images-sa");
                    saleAreaImgMultiBind();
                });
            })
        }

        initUrl();
        function initUrl() {
            var cardUrl = apply.idcard;
@@ -93,25 +329,37 @@
            var businessUrl = apply.businessLicense;
            if (businessUrl) {
                var businessList = businessUrl.split(",")
                laytpl(templateHtml).render(businessList, function(html) {
                    $('#businessLicense').append(html);
                laytpl(templateHtmlBl).render(businessList, function(html) {
                    $('#businessLicenseUrl').append(html);
                })
            }

            var areaUrl = apply.saleArea;
            if (areaUrl) {
                var areaList = areaUrl.split(",")
                laytpl(templateHtml).render(areaList, function(html) {
                    $('#areaUrl').append(html);
                laytpl(templateHtmlSa).render(areaList, function(html) {
                    $('#saleAreaUrl').append(html);
                })
            }
        }
        initUserValue();
        function initUserValue() {
            form.val("shop-apply-detail-form", {
                "id": apply.id,
                "name": apply.name,
                "phone": apply.phone,
                "shopName": apply.shopName,
                "idcard": apply.idcard,
                "businessLicense": apply.businessLicense,
                "saleArea": apply.saleArea,
            });

            imgUnBind(".multi-images");
            imgMultiBind();
            imgUnBind(".multi-images-bl");
            businessLicenseImgMultiBind();
            imgUnBind(".multi-images-sa");
            saleAreaImgMultiBind();
        }

        form.on('submit(shop-apply-form-agree)', function (data) {
@@ -136,5 +384,15 @@
            });
            return false;
        });


        form.on('submit(shop-apply-form-update)', function (data) {
            febs.post(ctx + 'admin/mallMember/updateShopApply', data.field, function () {
                layer.closeAll();
                febs.alert.success('操作成功');
                $('#febs-shop-apply').find('#query').click();
            });
            return false;
        });
    });
</script>