Skip to content

S
SuperMan
Commit 091bb195 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 9ecdb166
Hide whitespace changes
Inline Side-by-side
Showing with 364 additions and 216 deletions
index.html
View file @ 091bb195
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
}); });
</script> </script>
<script type="text/javascript" src="http://www.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&libraries=geometry&language=zh_CN"></script> <script type="text/javascript" src="http://www.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&libraries=geometry&language=zh_CN"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OV7BZ-ZT3HP-6W3DE-LKHM3-RSYRV-ULFZV"></script>
<title></title> <title></title>
</head> </head>
<body> <body>
......
src/components/Hotel/GnHotelInfo.vue
View file @ 091bb195
<style> <style>
@import "../../assets/css/DMC.css"; @import "../../assets/css/DMC.css";
.jz_HotelName {
color: #111111;
font-size: 20px;
}
</style> </style>
<template> <template>
<div class="flexOne changInfo"> <div class="flexOne changInfo">
<div class="resource-content clearfix"> <div class="resource-content clearfix">
<el-form :model="addMsg" :rules="rules" ref="addMsg"> <el-form :model="addMsg" :rules="rules" ref="addMsg">
<el-tabs v-model="activeName">
<el-tab-pane label="基础资料" name="1"></el-tab-pane>
<el-tab-pane label="酒店信息" name="2"></el-tab-pane>
<el-tab-pane label="规则设施" name="3"></el-tab-pane>
<el-tab-pane label="周边交通" name="4"></el-tab-pane>
</el-tabs>
<div class="resource-baseinfo"> <div class="resource-baseinfo">
<span class="resource-lititle">{{$t('hotel.hotel_baseinfo')}}</span> <template v-if="activeName==1">
<el-form-item :label="$t('hotel.hotel_name')" prop="Name"> <el-form-item :label="$t('ground.jiudianmingzi')">
<el-input type="text" v-model="addMsg.Name" maxlength="100" class="w300"></el-input> <el-input type="text" v-model="addMsg.HotelRealName" maxlength="100" class="w300"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('ground.jiudianmingzi')"> <el-form-item :label="$t('hotel.hotel_openplatform')">
<el-input type="text" v-model="addMsg.HotelRealName" maxlength="100" class="w300"></el-input> <el-select v-model="openplatString" class='multiple_input w300' multiple
</el-form-item> :placeholder="$t('pub.pleaseSel')">
<el-form-item :label="$t('hotel.hotel_describle')" prop="Descriptions"> <el-option v-for="item in openplatform" :key="item.ID" :label="item.Name" :value="item.ID">
<el-input type="textarea" v-model="addMsg.Descriptions" class="w300"></el-input>
</el-form-item>
<el-form-item :label="$t('hotel.hotel_openplatform')">
<el-select v-model="openplatString" class='multiple_input w300' multiple :placeholder="$t('pub.pleaseSel')">
<el-option v-for="item in openplatform" :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('hotel.hotel_brand')">
<el-input type="text" v-model="addMsg.ChainBrand" maxlength="50" class="w300"></el-input>
</el-form-item>
<el-form-item :label="$t('hotel.hotel_starlevel')">
<el-select class="w300" :placeholder="$t('pub.unlimitedSel')" v-model="addMsg.Star">
<el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
<el-option v-for="item in starslevel" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('hotel.hotel_website')">
<el-input class="w300" v-model="addMsg.URL" maxlength="50">
<template slot="prepend">https://</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('ground.shifouyuyue')">
<el-switch v-model="addMsg.AppointmentStyle" :active-value="inActive" :inactive-value="notInActive">
</el-switch>
</el-form-item>
<el-form-item :label="$t('ground.zhifufangshi')">
<el-select v-model="addMsg.PayStyle" class='multiple_input w300' :placeholder="$t('pub.pleaseSel')"
:disabled="IsHaveAuth==1?false:true">
<el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
<el-option v-for="item in PayList" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('ground.jiudianleixing')">
<el-select v-model="addMsg.HotelType" class='multiple_input w300' :placeholder="$t('pub.pleaseSel')">
<el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
<el-option v-for="item in HotelTypeList" :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('Operation.Op_price')">
<el-select v-model="addMsg.HotelPriceType" class='multiple_input w300' :placeholder="$t('pub.pleaseSel')">
<el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
<el-option v-for="item in HotelPirceTypeList" :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
</el-select>
</el-form-item>
<span class="resource-lititle sheshi">{{$t('hotel.hotel_services')}}</span>
<div class="res-span" v-for="item in serviceList" :key="item.subCode">
<span class="common-lefttit">{{item.Content}}</span>
<span>
<el-select multiple :placeholder="$t('pub.pleaseSel')" class='multiple_input w300' v-model="item.checked">
<el-option v-for="subitem in item.list" :key="subitem.ID" :label="subitem.Content" :value="subitem.ID">
</el-option> </el-option>
</el-select> </el-select>
</span>
</div>
<span class="resource-lititle sheshi">{{$t('ground.jiudianyouhui')}} <el-button icon="el-icon-plus" circle
@click="addAir"></el-button>
</span>
<div class="jiudianyouhuiDiv">
<el-row v-for="(list,index) in addMsg.DiscountList" :key="index">
<el-col :span="6" :gutter="35">
<el-form-item :label="$t('ground.kaishishuliang')">
<el-input class='w80' type="text" v-model="list.StartNum"
@keyup.native="checkInteger(list,'StartNum')" maxlength="2"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :gutter="35">
<el-form-item :label="$t('ground.jieshushuliang')">
<el-input class='w80' type="text" v-model="list.EndNum" @keyup.native="checkInteger(list,'EndNum')"
maxlength="2"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :gutter="35">
<el-form-item :label="$t('ground.fanhuanshuliang')">
<el-input class='w80' type="text" v-model="list.DisCountNum"
@keyup.native="checkInteger(list,'DisCountNum')" maxlength="2"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :gutter="35" v-if="index==0">
</el-col>
<el-col :span="6" :gutter="35">
<el-button icon="el-icon-minus" circle @click="deleteAir(index)"> </el-button>
</el-col>
</el-row>
</div>
</div>
<div class="resource-imginfo">
<div class="resourcerightTop">
<div class="toolOne">
<span class="fanbili">{{$t('restaurant.res_commissionColumn')}}</span>
<div class="RabateDiv clearfix">
<div class="RebateCount reOne">
<div class="leftPnum">{{$t('admin.admin_personNumber')}}></div>
<input type="text" class="toolInput inpuOne" v-model="addMsg.RebateCount"
onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="20">
</div>
<div class="RebateCount reTwo">
<div class="fanNum">{{$t('restaurant.res_return')}}</div>
<input type="text" class="toolInput inpuTwo" v-model="addMsg.RebateRatio"
onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="20">
<div class="percentCon">%</div>
</div>
</div>
</div>
<el-form-item :label="$t('hotel.hotel_landline')">
<el-input type="text" v-model="addMsg.Tel" maxlength="20" :placeholder="$t('hotel.hotel_landline')"
class="w300"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('system.table_country')"> <el-form-item :label="$t('hotel.hotel_starlevel')">
<el-select :placeholder="$t('visaT.qxzguojia')" filterable v-model="addMsg.Country" <el-select class="w300" :placeholder="$t('pub.unlimitedSel')" v-model="addMsg.Star">
class='multiple_input w300' @change="GetSubAreaList(addMsg.Country,1)">
<el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option> <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
<el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name" <el-option v-for="item in starslevel" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
:value="childItem.ID">
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('hotel.hotel_landline')">
<el-input type="text" v-model="addMsg.Tel" maxlength="20" :placeholder="$t('hotel.hotel_landline')"
class="w300"></el-input>
</el-form-item>
<el-form-item :label="$t('hotel.hotel_province')"> <el-form-item :label="$t('hotel.hotel_province')">
<el-select :placeholder="$t('ground.qingxuanzesheng')" filterable class='multiple_input w300' <el-select :placeholder="$t('ground.qingxuanzesheng')" filterable class='multiple_input w300'
v-model="addMsg.Province" @change="GetSubAreaList(addMsg.Province,2)"> v-model="addMsg.Province" @change="GetSubAreaList(addMsg.Province,2)">
...@@ -156,8 +58,8 @@ ...@@ -156,8 +58,8 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('hotel.hotel_detailinfo')" prop="Address"> <el-form-item :label="$t('hotel.hotel_detailinfo')" prop="Address">
<el-input :placeholder="$t('fnc.qsrneirong')" class="w300 addAddress" v-model="addMsg.Address"> <el-input type="text" class="w300" v-model="addMsg.addAddress" size="small">
<el-button slot="append" @click="selectAddress = true" icon="iconfont icon-img_dw"></el-button> <el-button slot="append" @click="getMapShow">地图</el-button>
</el-input> </el-input>
</el-form-item> </el-form-item>
<div class="toolOne"> <div class="toolOne">
...@@ -173,97 +75,80 @@ ...@@ -173,97 +75,80 @@
</div> </div>
</div> </div>
</div> </div>
<el-form-item :label="$t('hotel.hotel_fax')"> <el-form-item label="标签">
<el-input type="text" v-model="addMsg.Fax" maxlength="20" class="w300"></el-input> <el-tag :key="tag" v-for="(tag,index) in TagsList" style="margin-right:5px;" closable :disable-transitions="false"
</el-form-item> @close="handleClose(tag,index)">
<el-form-item :label="$t('hotel.hotel_deadday')" prop="DieLine"> {{tag}}
<el-input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="50" v-model="addMsg.DieLine" </el-tag>
class="w300"></el-input><span class="hotelDay">{{$t('hotel.hotel_day')}}</span> <el-input class="input-new-tag w80" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
</el-form-item> @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
<el-form-item :label="$t('hotel.hotel_remark')"> </el-input>
<el-input type="textarea" v-model="addMsg.Remark" class="w300"></el-input> <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增标签</el-button>
</el-form-item>
<el-form-item :label="$t('Operation.Op_Warmprompt')">
<el-input type="textarea" v-model="addMsg.WarmTip" class="w300"></el-input>
</el-form-item>
<el-form-item>
<el-switch v-model="isBook" active-color="#13ce66" inactive-color="#ff4949"
:active-text="$t('hotel.hotel_Supplier')" :inactive-text="$t('ground.ziding')"></el-switch>
</el-form-item>
<el-form-item>
<el-switch v-model="isDinner" active-color="#13ce66" @change="getDinnerList" inactive-color="#ff4949"
:active-text="$t('commonPickUp.Pick_Ding')" :inactive-text="$t('ground.buyongcan')"></el-switch>
</el-form-item>
<el-form-item :label="$t('ground.yongcanleixing')" v-show="isDinner">
<el-select v-model="UseDinnerString" class='multiple_input w300' multiple
:placeholder="$t('pub.pleaseSel')">
<el-option v-for="item in dinerList" :key="item.Id" :label="item.Name" :value="item.Id">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('ground.tingchechang')">
<el-switch v-model="addMsg.IsHavearking" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item :label="$t('ground.tingchefei')" v-if="addMsg.IsHavearking==1">
<el-input type="text" v-model="addMsg.ParkFee" class="w300" maxlength="10"
@keyup.native="checkPrice(addMsg,'ParkFee')"></el-input>
</el-form-item>
<el-form-item :label="$t('ground.rutangshui')">
<el-input type="text" v-model="addMsg.InTangTax" class="w300" maxlength="10"
@keyup.native="checkPrice(addMsg,'InTangTax')"></el-input>
</el-form-item>
<el-form-item :label="$t('ground.chengshishui')">
<el-input type="text" v-model="addMsg.CityTax" class="w300" maxlength="10"
@keyup.native="checkPrice(addMsg,'CityTax')"></el-input>
</el-form-item>
<el-form-item :label="$t('ground.fanyongleixing')">
<el-select v-model="addMsg.RebateType" class='multiple_input w300' :placeholder="$t('pub.pleaseSel')">
<el-option :key="0" :label="$t('pub.unlimitedSel')" :value="0"> </el-option>
<el-option :key="1" :label="$t('ground.hanshuifanyong')" :value="1"> </el-option>
<el-option :key="2" :label="$t('ground.bhanshuifanyong')" :value="2"> </el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('ground.sidaojianshifoufany')">
<el-select v-model="addMsg.DriverGuideIsRebate" class='multiple_input w300'
:placeholder="$t('pub.pleaseSel')">
<el-option :key="0" :label="$t('ground.bufanyong')" :value="0"> </el-option>
<el-option :key="1" :label="$t('hotel.hotel_commission')" :value="1"> </el-option>
</el-select>
</el-form-item> </el-form-item>
</div> <div class="resource-imginfo">
<span class="resource-lititle">{{$t('hotel.hotel_imgintroduce')}}</span> <span class="resource-lititle">{{$t('hotel.hotel_imgintroduce')}}</span>
<div class="resource-list"> <div class="resource-list">
<div class="resource-imglist clearfix"> <div class="resource-imglist clearfix">
<div class="re-img" v-for="(item,index) in HotelImageArray" :key="item.subCode"> <div class="re-img" v-for="(item,index) in HotelImageArray" :key="item.subCode">
<img :src="item.ShowPath" /> <img :src="item.ShowPath" />
<div class="imgzhe"> <div class="imgzhe">
<div class="re-delte"><i @click.stop="showImg(item.ShowPath)" class="iconfont icon-img_cz"></i></div> <div class="re-delte"><i @click.stop="showImg(item.ShowPath)" class="iconfont icon-img_cz"></i>
<div class="re-delte" @click="delImg(index)"><i class="iconfont icon-xingzhuang"></i></div> </div>
<div class="re-delte" @click.stop="ExchangeImg(index,0)" v-if="index!=0&&item.ShowPath"> <div class="re-delte" @click="delImg(index)"><i class="iconfont icon-xingzhuang"></i></div>
<i class="iconfont icon-zuoyi"></i> <div class="re-delte" @click.stop="ExchangeImg(index,0)" v-if="index!=0&&item.ShowPath">
</div> <i class="iconfont icon-zuoyi"></i>
<div class="re-delte" @click.stop="ExchangeImg(index,1)" </div>
v-if="index!=HotelImageArray.length-1&&item.ShowPath"> <div class="re-delte" @click.stop="ExchangeImg(index,1)"
<i class="iconfont icon-youyi"></i> v-if="index!=HotelImageArray.length-1&&item.ShowPath">
<i class="iconfont icon-youyi"></i>
</div>
</div>
</div> </div>
</div> </div>
</div> <div class="add-img">
</div> <div class="reimg-add">
<div class="add-img"> <i class="iconfont icon-img_haha"></i>
<div class="reimg-add"> <div class="ad-one">
<i class="iconfont icon-img_haha"></i> <div class="re-upload">
<div class="ad-one"> <el-upload class="upload-demo" :http-request="UploadImage" :multiple="true"
<div class="re-upload"> accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
<el-upload class="upload-demo" :http-request="UploadImage" :multiple="true" <i class="iconfont icon-img_bdsc"></i>
accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action=""> </el-upload>
<i class="iconfont icon-img_bdsc"></i> </div>
</el-upload> <div class="re-find" @click="addImgOpen"><i class="iconfont icon-img_cz"></i></div>
</div>
</div> </div>
<div class="re-find" @click="addImgOpen"><i class="iconfont icon-img_cz"></i></div>
</div> </div>
</div> </div>
</div> </div>
</div> </template>
<template v-if="activeName==2">
<div class="jz_HotelName">九寨沟星宇国际大酒店</div>
<el-row style="display:flex;justify-content:space-between;">
<el-col :span="12">
<el-input placeholder="开业时间"></el-input>
</el-col>
<el-col :span="11">
<el-input placeholder="装修时间"></el-input>
</el-col>
</el-row>
<el-row style="display:flex;justify-content:space-between;">
<el-col :span="12">
<el-input placeholder="房间数量"></el-input>
</el-col>
<el-col :span="11">
<el-input placeholder="联系方式"></el-input>
</el-col>
</el-row>
<el-input type="textarea" :rows="9"></el-input>
</template>
<template v-if="activeName==3">
</template>
<template v-if="activeName==4">
</template>
</div> </div>
</el-form> </el-form>
</div> </div>
...@@ -271,8 +156,8 @@ ...@@ -271,8 +156,8 @@
<DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg" v-bind:imgType="1"> <DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg" v-bind:imgType="1">
</DMCchooseImg> </DMCchooseImg>
</el-dialog> </el-dialog>
<el-dialog custom-class="mapList" :title="$t('hotel.hotel_mapLocation')" center :visible.sync="selectAddress"> <el-dialog :title="$t('hotel.hotel_mapLocation')" center :visible.sync="isShowMap">
<googleMap @refList="googleMap" v-bind:address="addMsg.Address" @headCallBack="headCall"></googleMap> <tencentMap @map-submit="mapEvent" :address="addMsg.Address"></tencentMap>
</el-dialog> </el-dialog>
<div class="btn-list"> <div class="btn-list">
<span class="common-lefttit"></span> <span class="common-lefttit"></span>
...@@ -286,7 +171,7 @@ ...@@ -286,7 +171,7 @@
</template> </template>
<script> <script>
import DMCchooseImg from "../commonPage/DMCchooseImg.vue"; import DMCchooseImg from "../commonPage/DMCchooseImg.vue";
import googleMap from "../commonPage/googleMap.vue"; import tencentMap from "../commonPage/tencentMap.vue";
export default { export default {
data() { data() {
return { return {
...@@ -377,7 +262,7 @@ ...@@ -377,7 +262,7 @@
IsSelfBook: "", IsSelfBook: "",
IsUseDinner: "0", IsUseDinner: "0",
UseDinnerType: "", UseDinnerType: "",
Country: 0, Country: 2,
Province: 0, Province: 0,
City: 0, City: 0,
//是否预约 //是否预约
...@@ -396,7 +281,10 @@ ...@@ -396,7 +281,10 @@
RebateType: 0, RebateType: 0,
//司导房是否返佣：0-不返佣，1-返佣 //司导房是否返佣：0-不返佣，1-返佣
DriverGuideIsRebate: 0, DriverGuideIsRebate: 0,
ProductType: 1, //国内酒店
Tags: '', //标签
}, },
TagsList: [],
DiscountList: { DiscountList: {
ID: 0, ID: 0,
StartNum: '', StartNum: '',
...@@ -425,14 +313,47 @@ ...@@ -425,14 +313,47 @@
pattern: this.$commonUtils.Regex.el_isInteger, pattern: this.$commonUtils.Regex.el_isInteger,
message: this.$t('ground.qingshuruzqdsz') message: this.$t('ground.qingshuruzqdsz')
}] }]
} },
activeName: '1', //默认选中基础资料
isShowMap: false,
inputVisible: false,
inputValue: ''
}; };
}, },
components: { components: {
googleMap: googleMap, tencentMap: tencentMap,
DMCchooseImg: DMCchooseImg DMCchooseImg: DMCchooseImg
}, },
methods: { methods: {
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.TagsList.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
},
handleClose(index) {
this.TagsList.splice(index, 1);
},
//得到地图信息
mapEvent(e) {
this.addMsg.Lat = e.lat;
this.addMsg.Lng = e.long;
this.addMsg.addAddress = e.address;
this.isShowMap = false;
},
getMapShow() {
this.isShowMap = true;
},
deleteAir(i) { deleteAir(i) {
this.addMsg.DiscountList.splice(i, 1); this.addMsg.DiscountList.splice(i, 1);
}, },
...@@ -520,6 +441,7 @@ ...@@ -520,6 +441,7 @@
if (this.hoteID != "undefined") { if (this.hoteID != "undefined") {
this.addMsg.ID = this.hotelID; this.addMsg.ID = this.hotelID;
} }
this.addMsg.Tags = this.TagsList.toString();
this.addMsg.HotelImageList = this.HotelImageArray; this.addMsg.HotelImageList = this.HotelImageArray;
this.addMsg.DeleteImageList = this.DeleteImageArray; this.addMsg.DeleteImageList = this.DeleteImageArray;
...@@ -813,6 +735,7 @@ ...@@ -813,6 +735,7 @@
"dict_post_Destination_GetChildList", "dict_post_Destination_GetChildList",
msg, msg,
res => { res => {
console.log(res, '数据');
if (type == 1) { if (type == 1) {
this.ProvinceList = res.data.data; this.ProvinceList = res.data.data;
} else if (type == 2) { } else if (type == 2) {
......
src/components/commonPage/tencentMap.vue 0 → 100644
View file @ 091bb195
<template id="app-map">
<div class="app-map">
<el-form label-width="80px" size="small">
<el-row>
<el-col :span="12">
<el-form-item label="地址搜索">
<el-input placeholder="请输入具体地址" @keyup.enter.native="mapSearch" v-model="mapKeyword">
<el-button @click="mapSearch" slot="append" icon="el-icon-search">
</el-button>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="地址">
<el-input disabled v-model="newAddress"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="纬度|经度">
<el-input disabled v-model="lat_long"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="app-map" id="container" :style="style"></div>
<span style="height:30px;display:none" id="city"></span>
<div slot="footer" class="dialog-footer" style="text-align:right;margin-top:30px;">
<el-button type="primary" size="small" @click="confirm">确 定</el-button>
</div>
</div>
</template>
<script>
export default {
props: {
width: String,
height: String,
lat: String,
long: String,
address: {
type: String,
default: '',
},
title: String,
},
data() {
return {
longitude: '', // 经度(大)
latitude: '', // 纬度(小)
lat_long: '',
markers: [],
map: [],
searchService: {},
mapKeyword: '',
dialogVisible: false,
newAddress: '',
city: '',
};
},
created() {
},
methods: {
// 初始化地图
initMap() {
let self = this;
let center = new qq.maps.LatLng(self.latitude, self.longitude); // 默认坐标
self.map = new qq.maps.Map(
document.getElementById("container"), {
center: center,
zoom: 13, // 缩放级别
}
);
let citylocation = new qq.maps.CityService({
map: self.map,
complete: function (results) {
self.city = results.detail.name;
self.map.setCenter(results.detail.latLng);
let marker = self.setMarker(results.detail.latLng);
self.markers.push(marker);
}
});
// 搜索服务 默认获取当前地址
if (!self.lat && !self.long) {
citylocation.searchLocalCity()
} else {
self.latitude = self.lat;
self.longitude = self.long;
self.lat_long = self.lat + ',' + self.long;
citylocation.searchCityByLatLng(new qq.maps.LatLng(self.latitude, self.longitude));
}
this.clickEvent(center);
this.initSearch();
},
// 地图点击事件
clickEvent(center) {
let self = this;
let listener = qq.maps.event.addListener(this.map, 'click', function (event) {
self.longitude = event.latLng.getLng().toFixed(6);
self.latitude = event.latLng.getLat().toFixed(6);
self.lat_long = self.latitude + ',' + self.longitude;
self.getAddressBylatLong();
let coord = new qq.maps.LatLng(self.latitude, self.longitude);
let marker = self.setMarker(coord);
self.markers.push(marker);
});
},
// 根据经纬度获取地址信息
getAddressBylatLong() {
let self = this;
// 根据经纬度查询城市信息
let geocoder = new qq.maps.Geocoder({
complete: function (result) {
self.newAddress = result.detail.address;
}
});
let coord = new qq.maps.LatLng(self.latitude, self.longitude);
geocoder.getAddress(coord);
},
// 添加标注
setMarker(coord) {
let self = this;
// 添加标注
let marker = new qq.maps.Marker({
map: self.map,
position: coord
});
//获取标记的点击事件
qq.maps.event.addListener(marker, 'click', function (event) {
self.longitude = event.latLng.getLng().toFixed(6);
self.latitude = event.latLng.getLat().toFixed(6);
self.lat_long = self.latitude + ',' + self.longitude;
self.getAddressBylatLong();
});
return marker;
},
// 清除地址坐标
clearOverLays() {
//清除地图上的marker
let overlay;
while (overlay = this.markers.pop()) {
overlay.setMap(null);
}
},
initSearch() {
let self = this;
let latlngBounds = new qq.maps.LatLngBounds();
//设置Poi检索服务，用于本地检索、周边检索
self.searchService = new qq.maps.SearchService({
//设置搜索范围为
location: self.city,
//设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
autoExtend: true,
//检索成功的回调函数
complete: function (results) {
//设置回调函数参数
let pois = results.detail.pois;
if (!pois) {
alert("输入详细地址搜索更准确");
return false;
}
for (let i = 0, l = pois.length; i < l; i++) {
let poi = pois[i];
//扩展边界范围，用来包含搜索到的Poi点
latlngBounds.extend(poi.latLng);
let marker = self.setMarker(poi.latLng)
marker.setTitle(i + 1);
self.markers.push(marker);
}
//调整地图视野
self.map.fitBounds(latlngBounds);
},
//若服务请求失败，则运行以下函数
error: function () {
alert("出错了。");
}
});
},
// 地址搜索
mapSearch() {
this.clearOverLays();
this.searchService.search(this.mapKeyword);
},
confirm() {
this.$emit('map-submit', {
lat: this.latitude,
long: this.longitude,
address: this.newAddress
});
},
},
computed: {
style() {
let width = '100%';
let height = '400px';
if (this.width) {
width = this.width + (isNaN(this.width) ? '' : 'px');
}
if (this.height) {
height = this.height + (isNaN(this.height) ? '' : 'px');
}
return `width:${width};height:${height};`;
},
},
mounted() {
this.newAddress = this.address ? this.address : '';
this.mapKeyword = this.newAddress;
this.initMap();
if(this.mapKeyword!=''){
this.mapSearch();
}
}
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment