443 lines
21 KiB
PHP
443 lines
21 KiB
PHP
@extends('layouts.base')
|
||
@section('content')
|
||
<script type="text/javascript"
|
||
src="https://api.map.baidu.com/api?v=2.0&ak=QXSZyPZk26shrYzAXjTkDLx5LbRCHECz"></script>
|
||
<style>
|
||
.panel{
|
||
margin-bottom:10px!important;
|
||
padding-left: 20px;
|
||
border-radius: 10px;
|
||
}
|
||
.panel .active a {
|
||
background-color: #29ba9c!important;
|
||
border-radius: 18px!important;
|
||
color:#fff;
|
||
}
|
||
.panel a{
|
||
border:none!important;
|
||
background-color:#fff!important;
|
||
}
|
||
.content{
|
||
background: #eff3f6;
|
||
padding: 10px!important;
|
||
}
|
||
.con{
|
||
padding-bottom:20px;
|
||
position:relative;
|
||
min-height:100vh;
|
||
background-color:#fff;
|
||
border-radius: 8px;
|
||
}
|
||
.con .setting .block{
|
||
padding:10px;
|
||
background-color:#fff;
|
||
border-radius: 8px;
|
||
}
|
||
.con .setting .block .title{
|
||
display:flex;
|
||
align-items:center;
|
||
margin-bottom:15px;
|
||
}
|
||
.confirm-btn{
|
||
width: calc(100% - 266px);
|
||
position:fixed;
|
||
bottom:0;
|
||
right:0;
|
||
margin-right:10px;
|
||
line-height:63px;
|
||
background-color: #ffffff;
|
||
box-shadow: 0px 8px 23px 1px
|
||
rgba(51, 51, 51, 0.3);
|
||
background-color:#fff;
|
||
text-align:center;
|
||
}
|
||
|
||
b{
|
||
font-size:14px;
|
||
}
|
||
</style>
|
||
<div id='re_content' >
|
||
@include('layouts.newTabs')
|
||
<div class="con">
|
||
<div class="setting">
|
||
<div class="block">
|
||
<div class="title"><span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>基础设置</b></div>
|
||
<el-form ref="form" :model="form" label-width="15%">
|
||
<el-form-item label="客服电话">
|
||
<el-input v-model="form.phone" placeholder="请输入客服电话" style="width:70%;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="所在地址">
|
||
<el-input v-model="form.address" placeholder="请输入所在地址" style="width:70%;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="商城简介">
|
||
<el-input v-model="form.description" type="textarea" placeholder="请输入商城简介" style="width:70%;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="店铺名称">
|
||
<el-input v-model="form.store_name" placeholder="请输入店铺名称" style="width:70%;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="店铺位置">
|
||
<el-select @change="changeProvince" v-model="form.province_id" :clearable="true" :filterable="true">
|
||
<el-option :label="v.areaname" :value="v.id" v-for="(v,k) in province_list"></el-option>
|
||
</el-select>
|
||
<el-select @change="changeCity" v-model="form.city_id" :clearable="true" :filterable="true">
|
||
<el-option :label="v.areaname" :value="v.id" v-for="(v,k) in city_list" v-if="v.parentid==form.province_id"></el-option>
|
||
</el-select>
|
||
<el-select @change="changeDistrict" v-model="form.district_id" :clearable="true" :filterable="true">
|
||
<el-option :label="v.areaname" :value="v.id" v-for="(v,k) in district_list" v-if="v.parentid==form.city_id"></el-option>
|
||
</el-select>
|
||
<el-select v-model="form.street_id" :clearable="true" :filterable="true">
|
||
<el-option :label="v.areaname" :value="v.id" v-for="(v,k) in street_list" v-if="v.parentid==form.district_id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="店铺地址">
|
||
<el-input v-model="form.store_address" placeholder="请输入店铺地址" style="width:70%;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="店铺定位">
|
||
<el-input v-model="form.store_longitude" placeholder="请输入店铺经度" style="width:30%;">
|
||
<template slot="prepend">经度</template>
|
||
</el-input>
|
||
<el-input v-model="form.store_latitude" placeholder="请输入店铺纬度" style="width:30%;">
|
||
<template slot="prepend">纬度</template>
|
||
</el-input>
|
||
<el-button @click="openMap">选择坐标</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog :visible.sync="map_show" width="60%" center title="选择坐标">
|
||
<div>
|
||
<div>
|
||
<input v-model="map_keyword" style="width:70%" @keyup.enter="searchMap"
|
||
class="el-input__inner">
|
||
<el-button type="primary" @click="searchMap()">搜索</el-button>
|
||
</div>
|
||
<div ref="ditucontent" style="width:100%;height:450px;margin:20px 0"></div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="sureMap">确 定</el-button>
|
||
<el-button @click="map_show = false">取 消</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<div class="confirm-btn">
|
||
<el-button type="primary" @click="submit">提交</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
|
||
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
|
||
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
|
||
var top_right_navigation = new BMap.NavigationControl({
|
||
anchor: BMAP_ANCHOR_TOP_RIGHT,
|
||
type: BMAP_NAVIGATION_CONTROL_SMALL
|
||
}); //右上角，仅包含平移和缩放按钮
|
||
/*缩放控件type有四种类型:
|
||
BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
|
||
|
||
var vm = new Vue({
|
||
el: "#re_content",
|
||
delimiters: ['[[', ']]'],
|
||
data() {
|
||
return {
|
||
activeName: 'first',
|
||
form:{
|
||
phone:'',
|
||
address:'',
|
||
description:'',
|
||
store_name:'',
|
||
store_address:'',
|
||
store_longitude:113.275995,
|
||
store_latitude:23.117055,
|
||
province_id: '',
|
||
city_id: '',
|
||
district_id: '',
|
||
street_id: '',
|
||
},
|
||
map: "",
|
||
marker: "",
|
||
centerParam: [113.275995, 23.117055],
|
||
zoomParam: "",
|
||
markersParam: [113.275995, 23.117055],
|
||
pointNew: "",
|
||
choose_center: [],
|
||
choose_marker: [],
|
||
map_show: false,
|
||
map_keyword: '',
|
||
province_list: [],
|
||
city_list: [],
|
||
district_list: [],
|
||
street_list: [],
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getData();
|
||
this.initProvince();
|
||
},
|
||
methods: {
|
||
openMap() {
|
||
this.map_show = true;
|
||
setTimeout(() => {
|
||
this.initMap();
|
||
}, 100);
|
||
this.map_keyword = "";
|
||
},
|
||
searchMap() {
|
||
console.log(this.marker);
|
||
let that = this;
|
||
geo.getPoint(this.map_keyword, function (point) {
|
||
|
||
that.choose_marker = [point.lng, point.lat];
|
||
that.choose_center = [point.lng, point.lat];
|
||
console.log(point)
|
||
that.map.panTo(point);
|
||
that.marker.setPosition(point);
|
||
that.marker.setAnimation(BMAP_ANIMATION_BOUNCE);
|
||
setTimeout(function () {
|
||
that.marker.setAnimation(null)
|
||
}, 3600);
|
||
});
|
||
|
||
},
|
||
|
||
sureMap() {
|
||
let that = this;
|
||
this.markersParam = [];
|
||
this.centerParam = [];
|
||
this.markersParam = this.choose_marker.length <= 0 ? [113.275995, 23.117055] : this.choose_marker;
|
||
this.centerParam = this.choose_center.length <= 0 ? [113.275995, 23.117055] : this.choose_center;
|
||
this.form.store_longitude = this.markersParam[0];
|
||
this.form.store_latitude = this.markersParam[1];
|
||
console.log(this.centerParam);
|
||
console.log(this.markersParam);
|
||
that.map_show = false;
|
||
|
||
},
|
||
//创建和初始化地图函数：
|
||
initMap() {
|
||
let that = this;
|
||
// [FF]切换模式后报错
|
||
if (!window.BMap) {
|
||
return;
|
||
}
|
||
|
||
console.log(this.$refs['ditucontent']);
|
||
for (let i in this.$refs) {
|
||
console.log(i)
|
||
}
|
||
this.createMap(); //创建地图
|
||
this.setMapEvent(); //设置地图事件
|
||
this.addMapControl(); //向地图添加控件
|
||
geo = new BMap.Geocoder();
|
||
|
||
|
||
// 创建标注
|
||
|
||
var point = new BMap.Point(this.markersParam[0], this.markersParam[1]);
|
||
this.marker = new BMap.Marker(point);
|
||
this.marker.enableDragging();
|
||
|
||
this.map.addOverlay(this.marker); // 将标注添加到地图中
|
||
this.marker.addEventListener('dragend', function (e) {//拖动标注结束
|
||
that.pointNew = e.point;
|
||
var point = that.marker.getPosition();
|
||
geo.getLocation(point, function (address) {
|
||
console.log(address.address);
|
||
that.map_keyword = address.address;
|
||
});
|
||
console.log(e);
|
||
console.log("使用拖拽获取的百度坐标" + that.pointNew.lng + "," + that.pointNew.lat);
|
||
that.choose_marker = [that.pointNew.lng, that.pointNew.lat];
|
||
that.choose_center = [that.pointNew.lng, that.pointNew.lat];
|
||
});
|
||
this.marker.setLabel(new BMap.Label('请您移动此标记，选择您的坐标！', {'offset': new BMap.Size(10, -20)}));
|
||
if (parent.editor && parent.document.body.contentEditable == "true") {
|
||
//在编辑状态下
|
||
setMapListener(); //地图改变修改外层的iframe标签src属性
|
||
}
|
||
},
|
||
|
||
//创建地图函数：
|
||
createMap() {
|
||
this.map = new BMap.Map(this.$refs['ditucontent']); //在百度地图容器中创建一个地图
|
||
// this.centerParam = '116.712617,24.778619';
|
||
// var centerArr = this.centerParam.split(",");
|
||
var point = new BMap.Point(
|
||
this.centerParam[0],
|
||
this.centerParam[1]
|
||
); //
|
||
|
||
this.zoomParam = 12;
|
||
this.map.centerAndZoom(point, parseInt(this.zoomParam)); //设定地图的中心点和坐标并将地图显示在地图容器中
|
||
},
|
||
|
||
//地图事件设置函数：
|
||
setMapEvent() {
|
||
// this.map.disableDragging(); //启用地图拖拽事件，默认启用(可不写)
|
||
this.map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
|
||
this.map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
|
||
this.map.enableKeyboard(); //启用键盘上下左右键移动地图
|
||
},
|
||
|
||
//地图控件添加函数：
|
||
addMapControl() {
|
||
this.map.addControl(new BMap.NavigationControl());
|
||
this.map.addControl(top_left_control);
|
||
this.map.addControl(top_left_navigation);
|
||
this.map.addControl(top_right_navigation);
|
||
},
|
||
|
||
setMapListener() {
|
||
var editor = parent.editor,
|
||
containerIframe,
|
||
iframes = parent.document.getElementsByTagName("iframe");
|
||
for (var key in iframes) {
|
||
if (iframes[key].contentWindow == window) {
|
||
containerIframe = iframes[key];
|
||
break;
|
||
}
|
||
}
|
||
if (containerIframe) {
|
||
this.map.addEventListener("moveend", mapListenerHandler);
|
||
this.map.addEventListener("zoomend", mapListenerHandler);
|
||
this.marker.addEventListener("dragend", mapListenerHandler);
|
||
}
|
||
|
||
function mapListenerHandler() {
|
||
var zoom = this.map.getZoom();
|
||
this.center = this.map.getCenter();
|
||
this.marker = window.marker.getPoint();
|
||
containerIframe.src = containerIframe.src
|
||
.replace(
|
||
new RegExp("([?#&])center=([^?#&]+)", "i"),
|
||
"$1center=" + center.lng + "," + center.lat
|
||
)
|
||
.replace(
|
||
new RegExp("([?#&])markers=([^?#&]+)", "i"),
|
||
"$1markers=" + this.marker.lng + "," + this.marker.lat
|
||
)
|
||
.replace(new RegExp("([?#&])zoom=([^?#&]+)", "i"), "$1zoom=" + zoom);
|
||
editor.fireEvent("saveScene");
|
||
}
|
||
},
|
||
getData(){
|
||
this.$http.post('{!! yzWebFullUrl('setting.shop.contact') !!}').then( (response)=>{
|
||
if (response.data.result == 1) {
|
||
if(response.data.data.set){
|
||
for(let i in response.data.data.set){
|
||
this.form[i]=response.data.data.set[i]
|
||
}
|
||
if (this.form.store_longitude && this.form.store_latitude) {
|
||
this.centerParam = [this.form.store_longitude, this.form.store_latitude];
|
||
this.markersParam = [this.form.store_longitude, this.form.store_latitude];
|
||
}
|
||
|
||
let set = response.data.data.set;
|
||
// 省市区
|
||
if(set.province_id) {
|
||
this.changeProvince(set.province_id);
|
||
this.form.province_id = set.province_id;
|
||
}
|
||
if(set.city_id) {
|
||
this.changeCity(set.city_id);
|
||
this.form.city_id = set.city_id;
|
||
}
|
||
if(set.district_id) {
|
||
this.changeDistrict(set.district_id);
|
||
this.form.district_id = set.district_id;
|
||
this.form.street_id = set.street_id;
|
||
}
|
||
}
|
||
}else {
|
||
this.$message({message: response.data.msg,type: 'error'});
|
||
}
|
||
|
||
}, (response)=> {
|
||
this.$message({message: response.data.msg,type: 'error'});
|
||
})
|
||
},
|
||
initProvince() {
|
||
this.areaLoading = true;
|
||
this.$http.get("{!! yzWebUrl('area.list.init', ['area_ids'=>'']) !!}").then(response => {
|
||
this.province_list = response.data.data;
|
||
this.areaLoading = false;
|
||
}, response => {
|
||
this.areaLoading = false;
|
||
});
|
||
},
|
||
changeProvince(val) {
|
||
this.city_list = [];
|
||
this.district_list = [];
|
||
this.street_list = [];
|
||
this.form.city_id = "";
|
||
this.form.district_id = "";
|
||
this.form.street_id = "";
|
||
this.areaLoading = true;
|
||
let url = "<?php echo yzWebUrl('area.list', ['parent_id'=> '']); ?>" + val;
|
||
this.$http.get(url).then(response => {
|
||
if (response.data.data.length) {
|
||
this.city_list = response.data.data;
|
||
} else {
|
||
this.city_list = null;
|
||
}
|
||
this.areaLoading = false;
|
||
}, response => {
|
||
this.areaLoading = false;
|
||
});
|
||
},
|
||
// 市改变
|
||
changeCity(val) {
|
||
this.district_list = [];
|
||
this.street_list = [];
|
||
this.form.district_id = "";
|
||
this.form.street_id = "";
|
||
this.areaLoading = true;
|
||
let url = "<?php echo yzWebUrl('area.list', ['parent_id'=> '']); ?>" + val;
|
||
this.$http.get(url).then(response => {
|
||
if (response.data.data.length) {
|
||
this.district_list = response.data.data;
|
||
} else {
|
||
this.district_list = null;
|
||
}
|
||
this.areaLoading = false;
|
||
}, response => {
|
||
this.areaLoading = false;
|
||
});
|
||
},
|
||
// 区改变
|
||
changeDistrict(val) {
|
||
this.street_list = [];
|
||
this.form.street_id = "";
|
||
this.areaLoading = true;
|
||
let url = "<?php echo yzWebUrl('area.list', ['parent_id'=> '']); ?>" + val;
|
||
this.$http.get(url).then(response => {
|
||
if (response.data.data.length) {
|
||
this.street_list = response.data.data;
|
||
} else {
|
||
this.street_list = null;
|
||
}
|
||
this.areaLoading = false;
|
||
}, response => {
|
||
this.areaLoading = false;
|
||
});
|
||
},
|
||
submit() {
|
||
let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
|
||
this.$http.post('{!! yzWebFullUrl('setting.shop.contact') !!}',{'contact':this.form}).then(function (response){
|
||
if (response.data.result) {
|
||
this.$message({message: response.data.msg,type: 'success'});
|
||
}else {
|
||
this.$message({message: response.data.msg,type: 'error'});
|
||
}
|
||
loading.close();
|
||
location.reload();
|
||
},function (response) {
|
||
this.$message({message: response.data.msg,type: 'error'});
|
||
})
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
@endsection
|