From d4801f6c6d821c3b1ebd6174498149ee0e0159ee Mon Sep 17 00:00:00 2001 From: xiaoyong931011 <15274802129@163.com> Date: Thu, 22 Sep 2022 14:49:04 +0800 Subject: [PATCH] 20220902 --- src/main/resources/templates/febs/views/modules/leader/leaderUpdate.html | 151 ++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 122 insertions(+), 29 deletions(-) diff --git a/src/main/resources/templates/febs/views/modules/leader/leaderUpdate.html b/src/main/resources/templates/febs/views/modules/leader/leaderUpdate.html index 3286716..b7c033b 100644 --- a/src/main/resources/templates/febs/views/modules/leader/leaderUpdate.html +++ b/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 }); } -- Gitblit v1.9.1