添加标签

ansel0926

2022-05-18 f0efddd9e32b9c5dc828401c4092be004b4826cf

 view/project/editLabel.html

@@ -12,6 +12,13 @@
            margin-left: 30px;
            margin-top: 5px;
        }
        .text2{
            float:left;
            color:white;
            font-size:16px;
            margin-left: 30px;
            margin-top: 20px;
        }
        .labelInput {
            width: 150px;
            height: 30px;
@@ -29,6 +36,24 @@
            border-bottom-left-radius: 2px;
            background-color: rgba(63, 72, 84, 0.7);
            color: white;
        }
        .textarea{
            width: 260px;
            height: 140px;
            margin-left: 25px;
            margin-right: 50px;
            margin-top: 20px;
            font-size: 16px;
            text-indent: 8px;
            outline: 0;
            border: none;
            border-color: #3b403f;
            /* box-shadow: 0 2px 6px #3a3c42; */
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            background-color: rgba(63, 72, 84, 0.7);
            color: white;
            resize:none;
        }
        .my-save-btn{
         margin-top: 80px;
@@ -77,20 +102,20 @@
    <div style="margin-top: 20px;">
        <form class="layui-form" action="">
            <div>
                <span class="text">内容</span>
                <span class="text">标签</span>
                <input id="input" class="labelInput" type="text" placeholder="输入文字" autocomplete="off" oninput="labelChange(event)" onporpertychange="labelChange(event)"/>
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    字体颜色
                    标签颜色
                </div> 
                <div id="colorSelect" style="display:inline-block;margin-top: 5px;">
                </div> 
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    字体大小
                </div> 
                    标签大小
                </div>
                <div style="display:inline-block;margin-top: 5px; width: 150px;">
                    <select id="fontsize" lay-verify="required" class="my-select" lay-filter="fontsize">
                        <option value="10">10</option>
@@ -113,33 +138,47 @@
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    字体
                    标签字体
                </div> 
                <div style="display:inline-block;margin-top: 5px; margin-left:28px;;width: 150px;">
                <div style="display:inline-block;margin-top: 5px;width: 150px;">
                    <select id="fontfamily" lay-verify="required" class="my-select" lay-filter="fontfamily">
                        <option value="SimSun">宋体</option>
                        <option value="SimHei">黑体</option>
                        <option value="Microsoft Yahei">微软雅黑</option>
                        <option value="Microsoft">微软雅黑</option>
                        <option value="KaiTi">楷体</option>
                        <option value="FangSong">仿宋</option>
                        <option value="LiSu">隶书</option>
                        <option value="MingLiU">细明体</option>

                    </select>
                </div> 
            </div>
            <div>
                <span class="text2">图标</span>
                <button type="button" class="layui-btn layui-bg-black" style="width:150px;height:30px;margin-top:15px;margin-left: 30px;line-height: 30px;float: left;" id="uploadIcon">
                    <i class="layui-icon">&#xe67c;</i>上传图标
                </button>
            </div>
            <br/>
            <div>
                <!-- <span class="text2" >内容</span> -->
                <textarea id="textarea" class="textarea" placeholder="输入内容" autocomplete="off" oninput="contentChange(event)" onporpertychange="contentChange(event)"></textarea>
            </div>

        <!-- <button class="my-save-btn" onclick="closeframe()">完成</button> -->
        </form>
    </div>
    <script>
       var currentLabelId
       function child(id,text,fontColor,fontSize,fontfamily) { 
       function child(id,text,fontColor,fontSize,fontfamily,content) { 
           currentLabelId=id
           layui.use(['element', 'layer', 'form','colorpicker'], function () {
           layui.use(['element', 'layer', 'form','colorpicker','upload'], function () {
            var element = layui.element;
            var form = layui.form;
            var colorpicker = layui.colorpicker;
            var upload=layui.upload;
            $("#input").val(text)
            let textarea=document.getElementById("textarea")
            textarea.innerHTML=content;
            colorpicker.render({
                elem: '#colorSelect',
                color: fontColor,
@@ -151,6 +190,7 @@
                //     parent.updateLabel(2,currentLabelId,color);
                // },
            });
            fontSize=parseInt(fontSize);
            $("#fontsize").val(fontSize);
            form.on("select(fontsize)", function (data) {
                parent.updateLabel(3,currentLabelId,data.value);
@@ -159,13 +199,30 @@
            form.on("select(fontfamily)", function (data) {
                parent.updateLabel(4,currentLabelId,data.value);
            })
            upload.render({
                elem: '#uploadIcon', //绑定元素
                accept: 'images',
                url: parent.httpConfig.webApiUrl + "landstamp/front/upload",
                done: function (res) {
                    if (res.code == 0) {
                        let popId="pop_"+id;
                        parent.updateLabel(6,currentLabelId, res.url);
                    }
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.msg(res.msg, { time: 1000 });
                    });
                }
            });
            form.render();
        });
       }
       function labelChange(e) {
           parent.updateLabel(1,currentLabelId,$("#input").val());
       }

       function contentChange(e) {
           parent.updateLabel(5,currentLabelId,$("#textarea").val());
       }
    </script>