|
@@ -40,17 +40,27 @@
|
|
|
placeholder="请选择省"
|
|
|
@change="provinceChange"
|
|
|
>
|
|
|
- <el-option label="河南" value="河南"></el-option>
|
|
|
- <el-option label="北京" value="北京"></el-option>
|
|
|
+ <el-option value="" label="请选择省份"></el-option>
|
|
|
+ <el-option
|
|
|
+ :value="item"
|
|
|
+ :label="item.label"
|
|
|
+ v-for="(item, index) in city"
|
|
|
+ :key="index"
|
|
|
+ ></el-option>
|
|
|
</el-select>
|
|
|
<el-select
|
|
|
class="quyuSel"
|
|
|
v-model="form.shi"
|
|
|
- placeholder="请选择市"
|
|
|
+ placeholder="请选择城市"
|
|
|
@change="cityChange"
|
|
|
>
|
|
|
- <el-option label="洛阳" value="洛阳"></el-option>
|
|
|
- <el-option label="郑州" value="郑州"></el-option>
|
|
|
+ <el-option value="" label="请选择城市"></el-option>
|
|
|
+ <el-option
|
|
|
+ :value="item"
|
|
|
+ :label="item.label"
|
|
|
+ v-for="(item, index) in cityList"
|
|
|
+ :key="index"
|
|
|
+ ></el-option>
|
|
|
</el-select>
|
|
|
<el-select
|
|
|
class="quyuSel"
|
|
@@ -58,8 +68,13 @@
|
|
|
placeholder="请选择区县"
|
|
|
@change="countyChange"
|
|
|
>
|
|
|
- <el-option label="洛龙" value="洛龙"></el-option>
|
|
|
- <el-option label="老城" value="老城"></el-option>
|
|
|
+ <el-option value="" label="请选择区县"></el-option>
|
|
|
+ <el-option
|
|
|
+ :value="item"
|
|
|
+ :label="item.label"
|
|
|
+ v-for="(item, index) in areaList"
|
|
|
+ :key="index"
|
|
|
+ ></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item class="formItem" label="详细地址">
|
|
@@ -134,7 +149,6 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
|
-// import VDistpicker from "v-distpicker";
|
|
|
import areadata from "@/api/area";
|
|
|
import BMap from "BMap";
|
|
|
export default {
|
|
@@ -142,6 +156,9 @@ export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
+ city: areadata,
|
|
|
+ cityList: [],
|
|
|
+ areaList: [],
|
|
|
form: {
|
|
|
name: "",
|
|
|
password: "",
|
|
@@ -173,12 +190,6 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- areaData() {},
|
|
|
- citySelected(data) {
|
|
|
- this.form.sheng = data.province.value;
|
|
|
- this.form.shi = data.city.value;
|
|
|
- this.form.qu = data.area.value;
|
|
|
- },
|
|
|
onSubmit() {},
|
|
|
chooseMap() {
|
|
|
this.mapVisible = true;
|
|
@@ -203,23 +214,43 @@ export default {
|
|
|
});
|
|
|
return map;
|
|
|
},
|
|
|
- provinceChange(val) {
|
|
|
+ provinceChange(event) {
|
|
|
+ console.log(event);
|
|
|
+ console.log(this.form.sheng);
|
|
|
var that = this;
|
|
|
+ if (event) {
|
|
|
+ that.cityList = event.children;
|
|
|
+ } else {
|
|
|
+ that.cityList = [];
|
|
|
+ }
|
|
|
+ that.areaList = [];
|
|
|
+ that.$emit("getLawyerListInfo", [event.label, "province"]);
|
|
|
var map = that.createMap();
|
|
|
- map.centerAndZoom(val, 11);
|
|
|
+ map.centerAndZoom(that.form.sheng.label, 11);
|
|
|
},
|
|
|
- cityChange(val) {
|
|
|
+ cityChange(event) {
|
|
|
var that = this;
|
|
|
+ console.log(event);
|
|
|
+ console.log(this.form.shi);
|
|
|
+ if (event) {
|
|
|
+ that.areaList = event.children;
|
|
|
+ } else {
|
|
|
+ that.areaList = [];
|
|
|
+ }
|
|
|
+ this.$emit("getLawyerListInfo", [event.label, "city"]);
|
|
|
var map = that.createMap();
|
|
|
- map.centerAndZoom(val, 13);
|
|
|
+ map.centerAndZoom(that.form.shi.label, 13);
|
|
|
},
|
|
|
- countyChange(val) {
|
|
|
+ countyChange(event) {
|
|
|
var that = this;
|
|
|
+ console.log(event);
|
|
|
+ console.log(this.form.qu);
|
|
|
+ this.$emit("getLawyerListInfo", [event.label, "area"]);
|
|
|
var map = that.createMap();
|
|
|
var myGeo = new BMap.Geocoder();
|
|
|
- map.centerAndZoom(val, 15);
|
|
|
+ map.centerAndZoom(that.form.qu.label, 15);
|
|
|
myGeo.getPoint(
|
|
|
- that.form.shi + that.form.qu,
|
|
|
+ that.form.shi.label + that.form.qu.label,
|
|
|
function(point) {
|
|
|
if (point) {
|
|
|
map.clearOverlays();
|
|
@@ -233,7 +264,7 @@ export default {
|
|
|
);
|
|
|
}
|
|
|
},
|
|
|
- that.form.sheng
|
|
|
+ that.form.sheng.label
|
|
|
);
|
|
|
},
|
|
|
mapFun() {
|