297 行
13 KiB
HTML
可执行文件
297 行
13 KiB
HTML
可执行文件
<!--[1.7.18]-->
|
||
<style>
|
||
/**百度地图搜索提示下拉框样式，请勿删除**/
|
||
.tangram-suggestion-main {
|
||
z-index: 999999;
|
||
}
|
||
</style>
|
||
<div id="concat" class="goodsBox">
|
||
<div style="width:600px;">
|
||
<el-form label-width="130px">
|
||
<el-form-item label="公司名称">
|
||
<el-input v-model="corporate_name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="公司地址">
|
||
<div style="display: inline-block">
|
||
<span>经度</span>
|
||
<div style="display: inline-block">
|
||
<el-input v-model="longitude" placeholder="地理经度" :disabled="true"></el-input>
|
||
</div>
|
||
</div>
|
||
<div style="display: inline-block">
|
||
<span>纬度</span>
|
||
<div style="display: inline-block">
|
||
<el-input v-model="latitude" placeholder="地理纬度" :disabled="true"></el-input>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:10px;">
|
||
<div class="el-input">
|
||
<input type="text" v-model="map_input" autocomplete="off" id="map_input" placeholder="可直接搜索(点击需要选取的位置或移动红色标注)" class="el-input__inner">
|
||
</div>
|
||
</div>
|
||
<div id="container"
|
||
style="border: 1px solid silver;height: 500px;width: 700px;margin-top: 10px;">
|
||
</div>
|
||
<div id="searchResultPanel"
|
||
style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
|
||
</el-form-item>
|
||
<el-form-item label="官方二维码">
|
||
<div>
|
||
<img :src="wxurl" id="img" style="width:100px;height: 100px;">
|
||
</div>
|
||
<el-button type="primary" size="small" @click="showTouch=true">上传二维码</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="邮政编码">
|
||
<el-input v-model="postal_code"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="ICP备案信息">
|
||
<el-input type="input" v-model="record_no" placeholder="请填写备案号"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="公安备案地址">
|
||
<el-input type="input" v-model="police_record_address" placeholder="例如：京公网安备"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="公安备案号">
|
||
<el-input type="input" v-model="police_record_no" placeholder="例如：1100000200001"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="登录-备案号颜色">
|
||
<el-color-picker show-alpha v-model="login_record_color"></el-color-picker>
|
||
</el-form-item>
|
||
<el-form-item label="网站底部其他信息">
|
||
<el-input type="textarea" v-model="information"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">立即提交</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!--二维码图片-->
|
||
<el-dialog :visible.sync="showTouch" :modal-append-to-body="false" :width="'400px'">
|
||
<form id="touch">
|
||
<div class="list" style="margin-left: 56px;margin-bottom: 10px;">
|
||
<label class="left_name">二维码图片</label>
|
||
<div class="el-upload el-upload--picture-card el-upload-list--picture-card upload-img-small-auto"
|
||
@click="selectImage()">
|
||
<i v-if="!touch_url" class="el-icon-plus"></i>
|
||
<img v-else class="el-upload-list__item-thumbnail img-auto" :src="touch_url">
|
||
</div>
|
||
</div>
|
||
<div class="center">
|
||
<el-button plain size="small" @click="selectImage()">选择图片</el-button>
|
||
</div>
|
||
</form>
|
||
<div class="center" style="margin-top: 50px">
|
||
<el-button type="primary" size="medium" @click="setTouch">保存</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog title="选择图片" :modal-append-to-body="false" :visible.sync="showSelectImage"
|
||
custom-class="select-image-el-dialog"
|
||
:top="'50px'">
|
||
<template-select-image :can-select-num="1" @selectfile="selectFile"></template-select-image>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
<script>
|
||
var concat = new Vue({
|
||
el: '#concat',
|
||
data: {
|
||
corporate_name: `{$info['companyname']}`,
|
||
postal_code: `{$info['code']}`,
|
||
information: `{$info['footone']}`,
|
||
record_no: `{$info['record_no']}`,
|
||
police_record_address: `{$info['police_record_address']}`,
|
||
police_record_no: `{$info['police_record_no']}`,
|
||
login_record_color: `{$info['login_record_color']}`,
|
||
longitude: `{$info['longitude']}`,
|
||
latitude: `{$info['latitude']}`,
|
||
map_input: `{$info['address']}`,
|
||
wxurl: `{$info['wxurl']}`,
|
||
touch_url: `{$info['wxurl']}`,
|
||
showTouch: false,
|
||
actFileName: '',
|
||
showSelectImage: false,
|
||
},
|
||
methods: {
|
||
onSubmit() {
|
||
this.$confirm('确定提交保存吗？', '', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
$.ajax({
|
||
url: "{:U('addconcat')}",
|
||
data: {
|
||
companyname: this.corporate_name,
|
||
footone: this.information,
|
||
record_no: this.record_no,
|
||
police_record_address: this.police_record_address,
|
||
police_record_no: this.police_record_no,
|
||
login_record_color: this.login_record_color,
|
||
code: this.postal_code,
|
||
longitude: this.longitude,
|
||
latitude: this.latitude,
|
||
address: this.map_input
|
||
},
|
||
type: 'post',
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message.success(res.msg);
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
},
|
||
error: (error) => {
|
||
console.log(error);
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
});
|
||
},
|
||
selectImage() {
|
||
//将选择图片
|
||
this.showSelectImage = true;
|
||
},
|
||
selectFile(item) {
|
||
//选择文件
|
||
this.showSelectImage = false;
|
||
if (item.length) {
|
||
this.touch_url = item[0].path;
|
||
}
|
||
},
|
||
//保存
|
||
setTouch() {
|
||
//设置头像
|
||
if (!this.touch_url) {
|
||
return this.$message.warning('您未修改二维码');
|
||
}
|
||
$.ajax({
|
||
url: "{:U('add_touch')}",
|
||
type: "post",
|
||
data: {
|
||
touch_url: this.touch_url,
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.wxurl = this.touch_url;
|
||
this.$message({
|
||
type: 'success',
|
||
message: res.msg,
|
||
duration: 1000,
|
||
onClose: () => {
|
||
this.showTouch = false;
|
||
}
|
||
});
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted() {
|
||
/**
|
||
* 百度地图
|
||
*/
|
||
var map = new BMap.Map("container"); // 创建地图实例
|
||
var lng = this.longitude;
|
||
var lat = this.latitude;
|
||
var num = 18;
|
||
if (!lng) {
|
||
lng = 116.404;
|
||
num = 12;
|
||
}
|
||
if (!lat) {
|
||
lat = 39.915;
|
||
}
|
||
var point = new BMap.Point(lng, lat); // 创建点坐标
|
||
map.centerAndZoom(point, num); // 初始化地图，设置中心点坐标和地图级别
|
||
var marker = new BMap.Marker(point); // 创建标注
|
||
map.addOverlay(marker);
|
||
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
||
marker.enableDragging();
|
||
//添加地图类型控件
|
||
map.addControl(new BMap.MapTypeControl({
|
||
mapTypes: [
|
||
BMAP_NORMAL_MAP,
|
||
BMAP_HYBRID_MAP
|
||
]
|
||
}));
|
||
var geoc = new BMap.Geocoder();
|
||
// 添加带有定位的导航控件
|
||
var navigationControl = new BMap.NavigationControl({
|
||
// 靠左上角位置
|
||
anchor: BMAP_ANCHOR_TOP_LEFT,
|
||
// LARGE类型
|
||
type: BMAP_NAVIGATION_CONTROL_LARGE,
|
||
// 启用显示定位
|
||
enableGeolocation: true
|
||
});
|
||
map.addControl(navigationControl);
|
||
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
|
||
{
|
||
"input": "map_input"
|
||
, "location": map
|
||
});
|
||
|
||
ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件
|
||
var str = "";
|
||
var _value = e.fromitem.value;
|
||
var value = "";
|
||
if (e.fromitem.index > -1) {
|
||
value = _value.province + _value.city + _value.district + _value.street + _value.business;
|
||
}
|
||
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
|
||
|
||
value = "";
|
||
if (e.toitem.index > -1) {
|
||
_value = e.toitem.value;
|
||
value = _value.province + _value.city + _value.district + _value.street + _value.business;
|
||
}
|
||
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
|
||
document.getElementById("searchResultPanel").innerHTML = str;
|
||
});
|
||
|
||
var myValue;
|
||
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
|
||
var _value = e.item.value;
|
||
console.log(e);
|
||
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
|
||
concat.map_input = _value.province + _value.city + _value.district + _value.street + _value.business;
|
||
document.getElementById("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
|
||
setPlace();
|
||
});
|
||
|
||
function setPlace() {
|
||
map.clearOverlays(); //清除地图上所有覆盖物
|
||
function myFun() {
|
||
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
|
||
map.centerAndZoom(pp, 18);
|
||
map.addOverlay(new BMap.Marker(pp)); //添加标注
|
||
//将对应的HTML元素设置值
|
||
concat.longitude = pp.lng;
|
||
concat.latitude = pp.lat;
|
||
}
|
||
|
||
var local = new BMap.LocalSearch(map, { //智能搜索
|
||
onSearchComplete: myFun
|
||
});
|
||
local.search(myValue);
|
||
}
|
||
|
||
//获取标记的经纬度
|
||
marker.addEventListener("dragend", function (e) {
|
||
var pt = e.point;
|
||
geoc.getLocation(pt, function (rs) {
|
||
//addressComponents对象可以获取到详细的地址信息
|
||
var addComp = rs.addressComponents;
|
||
var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
|
||
//将对应的HTML元素设置值
|
||
concat.map_input = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
|
||
concat.longitude = pt.lng;
|
||
concat.latitude = pt.lat;
|
||
});
|
||
})
|
||
}
|
||
});
|
||
</script>
|