server_ahbcqz/app/admin/view/community/organ/add.html

{layout name="layout2" /}
<style>
    .layui-form-item .layui-input-inline { width: 340px; }
    .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-card layui-form" style="box-shadow:none;">
    <div class="layui-card-body">
        <div class="layui-form-item">
            <label for="name" class="layui-form-label"><span style="color:red;">*</span>名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="name" lay-verType="tips" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label for="intro" class="layui-form-label">简介：</label>
            <div class="layui-input-inline">
                <input type="text" name="intro" id="intro" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="company" class="layui-form-label">企业名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="company" id="company" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="sort" class="layui-form-label">排序：</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" id="sort" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">封面图：</label>
            <div class="layui-input-block">
                <div class="like-upload-image" switch-tab="0" lay-verType="tips">
                    <div class="upload-image-elem"><a class="add-upload-image"> + 添加图片</a></div>
                </div>
                <div class="layui-form-mid layui-word-aux">建议尺寸：500*500像</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="contact" class="layui-form-label">联系方式：</label>
            <div class="layui-input-inline">
                <input type="text" name="contact" id="contact"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">区域：</label>
            <div class="layui-input-block">
                <div class="layui-input-inline" style="width:120px;">
                    <select name="province_id" id="province" lay-filter="province"></select>
                </div>
                <div class="layui-input-inline" style="width:120px;">
                    <select name="city_id" id="city" lay-filter="city"></select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-inline">
                <input type="radio" name="is_show" value="1" title="显示">
                <input type="radio" name="is_show" value="0" title="隐藏" checked>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="content" class="layui-form-label">内容：</label>
            <div class="layui-input-block">
                <textarea name="content" id="content" lay-verify="content"></textarea>
            </div>
        </div>


        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="addSubmit" id="addSubmit" value="确认">
        </div>
    </div>
</div>
<script src="__PUBLIC__/static/common/js/area.js"></script>
<script>
    layui.config({
        base: "/static/lib/"

    }).extend({
        likeedit: "likeedit/likeedit",
        likeArea: "likeArea/likeArea",
    }).use(["likeedit","likeArea", "form"], function(){
        var form = layui.form;
        var likeedit = layui.likeedit;
        var likeArea = layui.likeArea;
        var content = likeedit.build("content", {
            uploadImage: {
                url: '{:url("file/lists")}?type=10'
            }
        });

        form.verify({
            content: function() {
                likeedit.sync(content)
            }
        });

        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.certUpload('.cert-add', '{:url("file/other")}?local=1&sub_dir=resource', '{$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();
        });


        likeArea.init(
            "province", "city", "district", "province_id", "city_id", "district_id",
            "", "", ""
        );
        likeArea.init(
            "refund_province", "refund_city", "refund_district", "refund_province_id", "refund_city_id", "refund_district_id",
            "", "", ""
        );

    })
</script>