省市区使用element-china-area-data插件写的
现在我需要省市区、具体地址、vue-baidu-map来联合
效果图
代码
<template>
<div>
<el-form ref="addruleForm" v-if="dialogShow" :model="addShopRuleForm" :rules="addShopRules" label-width="80px">
<el-form-item label="门店名称" prop="store_name">
<el-input v-model="addShopRuleForm.store_name" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="门店图片">
<div class="uploadData" v-if="!addShopRuleForm.images">
<input type="file" accept="image/*" id="uploadImg" @change="changeImg" />
<i class="el-icon-plus"></i>
</div>
<div class="uploadData" v-else>
<img :src="addShopRuleForm.images" />
<i class="iconfont iconshanchu" @click="delImg"></i>
</div>
</el-form-item>
<el-form-item label="联系人" prop="store_man">
<el-input v-model="addShopRuleForm.store_man" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="store_tel">
<el-input v-model="addShopRuleForm.store_tel" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="门店地址" prop="shopAddress">
<el-cascader
clearable
size="large"
:options="options"
v-model="addShopRuleForm.selectedOptions"
placeholder="请选择省/市/区"
@change="handleChange">
</el-cascader>
</el-form-item>
<el-form-item label="详细地址" prop="address" id="r-result">
<div class="app-container">
<el-autocomplete
v-model="addShopRuleForm.address"
:fetch-suggestions="querySearch"
placeholder="请输入详细地址"
style="width: 100%"
:trigger-on-focus="false"
@select="handleSelect"
clearable
/>
</div>
</el-form-item>
<el-form-item label="营业时间" prop='total_time'>
<el-time-picker
is-range
v-model="addShopRuleForm.total_time"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
value-format="HH:mm:ss"
@input='testClick'>
</el-time-picker>
</el-form-item>
<div class="checkBoxList" prop='open_day'>
<el-checkbox-group v-model="open_day">
<el-checkbox label="周一"></el-checkbox>
<el-checkbox label="周二"></el-checkbox>
<el-checkbox label="周三"></el-checkbox>
<el-checkbox label="周四"></el-checkbox>
<el-checkbox label="周五"></el-checkbox>
<el-checkbox label="周六"></el-checkbox>
<el-checkbox label="周日"></el-checkbox>
</el-checkbox-group>
</div>
<el-form-item label="是否启用">
<el-switch
v-model="addShopRuleForm.statuss"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
@change="changeSwitch($event)"
></el-switch>
<span class="textStatus" v-if="addShopRuleForm.statuss == 1">启用</span>
<span class="textStatus" v-else-if="addShopRuleForm.statuss == 0">禁用</span>
</el-form-item>
<el-form-item label="详细地址">
<!-- 地图容器 -->
<div style="margin: 5px">
<baidu-map class="bm-view" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true" ak="baidu-ak" @ready="handlerBMap" />
</div>
</el-form-item>
<el-form-item>
<el-button @click="resetForm('addruleForm')">重置</el-button>
<el-button type="primary" @click="onSubmit('addruleForm')">确定</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {
getStoreLists,
addStoreSave,
statusStore,//状态修改
} from "@/api/shop.js";
// 引入三级联动
import {regionData,CodeToText} from 'element-china-area-data'
// 百度地图
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import {
uploadfile
} from '@/common/uploadFile.js'
export default {
name: 'BaiduMapDemo',
components: {
BaiduMap
},
props: {
// ["data-form"],
// 标签内容
content: {
type: Object,
default () {
return {};
}
},
dialogShow: {
type: Boolean,
default () {
return false;
}
},
},
data() {
return {
open_day:[],
mapZoom: 15,
mapCenter: { lng: 0, lat: 0 },
input:'',//地图输入框的值
tabelData:[],
selectedOptions:[],
fileList:[],//图片列表
allid:'',
// 门店状态按钮
status: true,
// 表单验证规则
addShopRules: {
store_name: [{
required: true,
message: "请输入门店名称",
trigger: "blur"
}, {
min: 3,
max: 12,
message: "长度在 3 到 12 个字符",
trigger: "blur",
}, ],
// shopImg: [{ required: true, message: "请选择图片", trigger: "change" }],
store_man: [{
required: true,
message: "请输入联系人",
trigger: "blur"
}, ],
store_tel: [{
required: true,
message: "请输入联系电话",
trigger: "blur"
}, ],
// shopAddress: [{ required: true, message: "请选择", trigger: "change" }],
address: [{
required: true,
message: "请输入详细地址",
trigger: "blur"
}, ],
total_time:[{
required: true,
message: "请选择时间",
trigger: "blur"
}],
deliverCommit: [{
required: true,
message: "请输入",
trigger: "blur"
}],
commodityPoster: [{
required: true,
message: '请上传商品主图',
trigger: 'blur'
}],
},
// 选择地区数据
options: regionData,//regionData省市区数据
// 到店自提自动发货表单以及添加数据
addShopRuleForm: {
address: undefined,
coordinate: undefined,
unid: "",
store_name: "",
store_man: "",
store_tel: "",
province_id: "1",
province_name: "1",
city_id: "1",
city_name: "1",
area_id: "1",
area_name: "1",
open_day: [],
total_time:"",
statuss: true,
open_hour: "1",
longitude: "1",
latitude: "1",
end_hour: "1",
create_time: "",
update_time: "1",
images: [],//自定义门店图片
},
// 上传图片框数据
dialogImageUrl: "",//
dialogVisible: false,
addShopRuleForm:{},//操作数据
};
},
created(){
// this.getStoreList();//主页数据
this.addShopRuleForm = this.content;
this.dialogImageUrl = this.content.images;//保存数据原始图片路径
this.$forceUpdate();
},
methods:{
// 省市区三级
handleChange (value) {
console.log(value)
},
// 计算属性时间
testClick(e) {
this.$nextTick(() => {
this.$set(this.addShopRuleForm, 'total_time', [e[0], e[1]]);
});
},
// 提交表单
onSubmit(formName) {
var _this = this;
this.$refs.addruleForm.validate(valid=>{
if(valid){
var data = {
store_name:_this.addShopRuleForm.store_name,
store_man:_this.addShopRuleForm.store_man,
store_tel:_this.addShopRuleForm.store_tel,
// province_id:_this.value,省市区获得的ID以及name
// province_name:_this.dz,
// city_id:_this.value,
// city_name:_this.dz,
// area_id:_this.value,
// area_name:_this.dz,
address:_this.addShopRuleForm.address,
open_day:_this.open_day,
status:_this.addShopRuleForm.statuss,
open_hour:_this.addShopRuleForm.total_time[0],
end_hour:_this.addShopRuleForm.total_time[1],
longitude:_this.mapCenter.lng,
latitude:_this.mapCenter.lat,
images:_this.addShopRuleForm.images,
}
if (_this.addShopRuleForm.unid) {
data.unid = _this.addShopRuleForm.unid;
}
addStoreSave(data).then(rs=>{
if(rs.code == 200){
var msg = '添加成功';
if(_this.addShopRuleForm.unid){
var msg = '编辑成功'
}
this.$message({
type:'success',
message:msg
})
}else{
var msg = '添加失败';
if(_this.addShopRuleForm.unid){
var msg = '编辑失败'
}
this.$message({
type:'success',
message:msg
})
}
})
}
})
},
// 重置表单
resetForm(formName) {
this.$refs.addruleForm.resetFields();
this.addShopRuleForm.images = this.dialogImageUrl;
this.$forceUpdate();
},
// 选择上传图片
changeImg(event) {
var _this = this;
uploadfile(event.target.files).then((res) => {
setTimeout(function() {
_this.addShopRuleForm.images = res[0];
_this.$forceUpdate();
}, 500);
});
},
// 删除图片
delImg() {
this.addShopRuleForm.images = '';
this.$forceUpdate();
},
// 开关事件
changeSwitch(value){
this.addShopRuleForm.statuss = value;//这里value为当前行的数据
},
// 地图输入框内容
handlerBMap({ BMap, map }) {
this.BMap = BMap
this.map = map
if (this.addShopRuleForm.coordinate && this.addShopRuleForm.coordinate.lng) {
this.mapCenter.lng = this.addShopRuleForm.coordinate.lng
this.mapCenter.lat = this.addShopRuleForm.coordinate.lat
this.mapZoom = 15
map.addOverlay(new this.BMap.Marker(this.addShopRuleForm.coordinate))
} else {
this.mapCenter.lng = 113.271429
this.mapCenter.lat = 23.135336
this.mapZoom = 10
}
},
querySearch(queryString, cb) {
var that = this
var myGeo = new this.BMap.Geocoder()
myGeo.getPoint(queryString, function(point) {
if (point) {
that.addShopRuleForm.coordinate = point
that.makerCenter(point)
} else {
that.addShopRuleForm.coordinate = null
}
}, this.locationCity)
var options = {
onSearchComplete: function(results) {
if (local.getStatus() === 0) {
// 判断状态是否正确
var s = []
for (var i = 0; i < results.getCurrentNumPois(); i++) {
var x = results.getPoi(i)
var item = { value: x.address + x.title, point: x.point }
s.push(item)
cb(s)
}
} else {
cb()
}
}
}
var local = new this.BMap.LocalSearch(this.map, options)
local.search(queryString)
},
handleSelect(item) {
var { point } = item
this.addShopRuleForm.coordinate = point
this.makerCenter(point)
},
makerCenter(point) { //标注
if (this.map) {
this.map.clearOverlays()
this.map.addOverlay(new this.BMap.Marker(point))
this.mapCenter.lng = point.lng
this.mapCenter.lat = point.lat
this.mapZoom = 15
}
},
syncCenterAndZoom (e) {
const {lng, lat} = e.target.getCenter()
this.center.lng = lng
this.center.lat = lat
this.zoom = e.target.getZoom()
},
},
watch: {
// 获取主页面传递数据
content(newVal) {
console.log(newVal)
this.addShopRuleForm = newVal;
this.dialogImageUrl = newVal.images; //保存数据原始图片路径
this.$forceUpdate();
},
}
};
</script>
