更换字体图片

ansel0926

2022-05-17 00b733dc6ae372be365a01046ead5c062d8f5617

 view/project/editPoint.html

@@ -8,15 +8,21 @@
        .text{
            float:left;
            color:white;
            font-size:16px;
            font-size:14px;
            margin-left: 30px;
            margin-top: 5px;
        }
        .text2{
            float:left;
            color:white;
            font-size:14px;
            margin-left: 35px;
            margin-top: 20px;
        }
        .labelInput {
            width: 180px;
            width: 150px;
            height: 30px;
            margin-left: 25px;
            margin-right: 50px;
            margin-left: 30px;
            line-height: 40px;
            font-size: 16px;
            text-indent: 8px;
@@ -77,12 +83,65 @@
    <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>
                <span class="text" style="margin-top: 10px;">图片</span>
                <button type="button" class="layui-btn layui-bg-black" style="width:180px;height:30px;margin-top:10px;margin-left: 25px;line-height: 30px;float: left;" id="uploadImg">
                <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 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>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                        <option value="50">50</option>
                        <option value="60">60</option>
                        <option value="70">70</option>
                        <option value="80">80</option>
                        <option value="90">90</option>
                        <option value="100">100</option>
                        <option value="110">110</option>
                        <option value="120">120</option>
                        <option value="130">130</option>
                        <option value="140">140</option>
                        <option value="150">150</option>
                    </select>
                </div> 
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    标签字体
                </div> 
                <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">微软雅黑</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>
            <div style="clear: both">
                <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="uploadImg">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
@@ -90,7 +149,7 @@
    </div>
    <script>
       var currentPointId
       function child(id,text) { 
       function child(id,text,fontColor,fontSize,fontfamily) { 
           currentPointId=id
           layui.use(['element', 'layer', 'form','colorpicker','upload'], function () {
            var element = layui.element;
@@ -98,6 +157,38 @@
            var colorpicker = layui.colorpicker;
            var upload=layui.upload;
            $("#input").val(text)
            colorpicker.render({
                elem: '#colorSelect',
                color: fontColor,
                size:'20px',
                done: function (color) {
                    parent.updatePoint(2,currentPointId,color);
                },
            });
            fontSize=parseInt(fontSize);
            $("#fontsize").val(fontSize);
            form.on("select(fontsize)", function (data) {
                parent.updatePoint(3,currentPointId,data.value);
            })
            $("#fontfamily").val(fontfamily);
            form.on("select(fontfamily)", function (data) {
                parent.updatePoint(4,currentPointId,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.updatePoint(6,currentPointId, res.url);
                    }
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.msg(res.msg, { time: 1000 });
                    });
                }
            });
            upload.render({
                elem: '#uploadImg', //绑定元素
                accept: 'images',
@@ -105,7 +196,7 @@
                done: function (res) {
                    if (res.code == 0) {
                        let popId="pop_"+id;
                        parent.updatePoint(2,currentPointId, res.url);
                        parent.updatePoint(5,currentPointId, res.url);
                    }
                    layui.use('layer', function () {
                        var layer = layui.layer;