feat(mall): 重构轮播图模块

Administrator

2025-05-09 286c0308534688baf50d93c1fc8c2f372912bd40

 src/main/resources/templates/febs/views/modules/leader/leaderUpdate.html

@@ -18,6 +18,10 @@
    #febs-leader-update img{
        max-width:200px
    }
    .map{
        width: 50%;
        height: 500px!important;
    }

</style>
<div class="layui-fluid" id="febs-leader-update">
@@ -31,62 +35,75 @@
        <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" class="layui-input" readonly>
                <input type="text" name="name" 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" class="layui-input" readonly>
                <input type="text" name="phone" 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="province" 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">
                <input type="text" name="city" 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">
                <input type="text" name="township" 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">-->
<!--                <input type="text" name="bonusPercent"-->
<!--                       lay-verify="text" autocomplete="off" class="layui-input" >-->
<!--                <div class="layui-form-mid layui-word-aux">请输入0到1之间的小数,团长收益百分比如0.15表示15%</div>-->
<!--            </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="detailAddress" class="layui-input" readonly>
                <input type="text" id="detailAddress" name="detailAddress" class="layui-input">
                <div class="layui-form-mid layui-word-aux">地图选择后，可以继续填写楼栋单元号</div>
            </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="addressArea" class="layui-input" readonly>
                <input type="text" name="addressArea" class="layui-input">
                <div class="layui-form-mid layui-word-aux">小区名称(自提点名称)</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">自提点照片：</label>
            <div class="layui-input-block">
                <img alt="头像" data-th-src="${leaderInfo.addressPic}" readonly>
                <button type="button" class="layui-btn" id="imageUpload" style="background-color: #009688; margin-bottom: 2px">图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    <div class=" layui-upload-list view-images" id="addressPicImage">
                    </div>
                </blockquote>
                <div>
                    <input type="text" id="addressPic"  name="addressPic" lay-verify="required" placeholder="" autocomplete="off" class="layui-input" readonly>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">地图选择：</label>
            <div class="layui-input-block">
                <div class="layui-fluid layui-anim febs-anim" id="febs-map-demo-update" lay-title="高德地图">
                    <div class="layui-row febs-container">
                        <div class="layui-card">
                            <div style="padding: .1rem;">
                                <div id="container" class="map"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-mid layui-word-aux">自提点位置,修改团长位置，请点击地图上的具体位置，待弹出【地址】，即可保存新位置</div>
            </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="longitude" class="layui-input" readonly>
                <input type="text" id="longitude"  name="longitude" 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">
                <input type="text" name="latitude" class="layui-input" readonly>
                <input type="text" id="latitude"  name="latitude" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
@@ -103,30 +120,106 @@
</div>

<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'formSelects',  'treeSelect', 'eleTree'], function () {
    layui.use(['febs', 'form', 'formSelects',  'treeSelect', 'eleTree', 'upload'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form,
            leaderInfo = [[${leaderInfo}]],
            $view = $('#febs-leader-update'),
            $viewMap = $('#febs-map-demo-update'),
            upload = layui.upload,
            _deptTree;

        $viewMap.find('#container').css({"height": document.documentElement.clientHeight - 97 + 'px'});
        var map = new AMap.Map("container", {
            center: [leaderInfo.longitude, leaderInfo.latitude],
            resizeEnable: true,
            zoom: 16.8 //初始地图级别
        });
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', function (e) {
            console.log(e);
            febs.alert.success('经度：' + e.lnglat.getLng() + '，纬度：' + e.lnglat.getLat());
            $("#longitude").val(e.lnglat.getLng());
            $("#latitude").val(e.lnglat.getLat());

            //这边是数组
            var lnglatXY=[e.lnglat.getLng(),e.lnglat.getLat()];
            regeocoder(lnglatXY);
        });
        //坐标-地址
        function regeocoder(lnglatXY) {  //逆地理编码
            var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
            });
            geocoder.getAddress(lnglatXY, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    geocoder_CallBack(result);
                }
            });
        }
        function geocoder_CallBack(data) {
            var address = data.regeocode.formattedAddress; //返回地址描述
            febs.alert.success('地址：' +address);
            document.getElementById("detailAddress").value=address;
        }

        upload.render({
            elem: '#imageUpload'
            ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
            ,multiple: false
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#addressPicImage').html('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px">')
                });
            }
            ,done: function(res){
                $("#addressPic").val(res.data.src);
            }
        });
        form.render();

        initUserValue();

        function initUserValue() {
            var marker = new AMap.Marker({
                position: map.getCenter(),
                icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                anchor:'bottom-center',
                offset: new AMap.Pixel(0, 0)
            });

            marker.setMap(map);

            // 设置鼠标划过点标记显示的文字提示
            marker.setTitle('团长位置');

            // 设置label标签
            // label默认蓝框白底左上角显示，样式className为：amap-marker-label
            marker.setLabel({
                direction:'right',
                offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
                content: "<div class='info'>团长位置</div>", //设置文本标注内容
            });
            //图片回显
            if(leaderInfo.addressPic != null || leaderInfo.addressPic != ''){
                $('#addressPicImage').append('<img src="'+ leaderInfo.addressPic +'" class="layui-upload-img" style="width: 100px">')
            }
            form.val("febs-leader-update-form", {
                "id": leaderInfo.id,
                "name": leaderInfo.name,
                "phone": leaderInfo.phone,
                "addressPic": leaderInfo.addressPic,
                "province": leaderInfo.province,
                "city": leaderInfo.city,
                "township": leaderInfo.township,
                // "province": leaderInfo.province,
                // "city": leaderInfo.city,
                // "township": leaderInfo.township,
                "addressArea": leaderInfo.addressArea,
                "detailAddress": leaderInfo.detailAddress,
                "longitude": leaderInfo.longitude,
                // "bonusPercent": leaderInfo.bonusPercent,
                "latitude": leaderInfo.latitude
            });
        }