|
|
|
|
@ -1,134 +1,101 @@
|
|
|
|
|
<template> |
|
|
|
|
<div class="bmap" id="container" style="float: left"></div> |
|
|
|
|
<div |
|
|
|
|
style=" |
|
|
|
|
border: 1px solid pink; |
|
|
|
|
margin-left: 5px; |
|
|
|
|
height: 600px; |
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|
|
|
|
" |
|
|
|
|
> |
|
|
|
|
<!-- @change="handleCheckedCitiesChange"--> |
|
|
|
|
<el-checkbox-group v-model="reservationIds"> |
|
|
|
|
<el-col v-for="(item, index) in reservationData"> |
|
|
|
|
<el-checkbox :label="item.id" :key="item.id" |
|
|
|
|
>{{ item.consignee }} {{ item.deliveryAddress }} {{ |
|
|
|
|
item.deliveryPhone |
|
|
|
|
}}</el-checkbox |
|
|
|
|
> |
|
|
|
|
</el-col> |
|
|
|
|
</el-checkbox-group> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="bmap" id="container" style="float: left"> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
<div style="border:1px solid pink ;margin-left: 5px;height: 600px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" > |
|
|
|
|
<!-- @change="handleCheckedCitiesChange"--> |
|
|
|
|
<el-checkbox-group v-model="reservationIds" > |
|
|
|
|
<el-col v-for="(item,index) in reservationData"> |
|
|
|
|
<el-checkbox :label="item.id" :key="item.id">{{item.consignee}} {{item.deliveryAddress}} {{item.deliveryPhone}}</el-checkbox> |
|
|
|
|
</el-col> |
|
|
|
|
</el-checkbox-group> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style="margin-left: 40%;margin-top: 5%;float: bottom"> |
|
|
|
|
<el-button type="primary" icon="el-icon-circle-close" @click="aaa">确认(转配送页面)</el-button> |
|
|
|
|
<el-button icon="el-icon-circle-close" @click="this.$router.go(-1)">返 回</el-button> |
|
|
|
|
</div> |
|
|
|
|
<div style="margin-left: 40%; margin-top: 5%; float: bottom"> |
|
|
|
|
<el-button type="primary" icon="el-icon-circle-close" @click="aaa">确认(转配送页面)</el-button> |
|
|
|
|
<el-button icon="el-icon-circle-close" @click="this.$router.go(-1)">返 回</el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { useStore } from 'vuex' |
|
|
|
|
import { getReservationAddr } from '@/api/distribution/distributionReservation'; |
|
|
|
|
import { getDictionaryBiz } from '@/api/system/dict'; |
|
|
|
|
// import { ref } from 'vue' |
|
|
|
|
export default { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
name: 'BmapDemo', |
|
|
|
|
loading: true, |
|
|
|
|
ids: null, |
|
|
|
|
error: null, |
|
|
|
|
addressList:[], |
|
|
|
|
reservationData:[], |
|
|
|
|
reservationIds:[], |
|
|
|
|
setup() { |
|
|
|
|
// const store = useStore() |
|
|
|
|
// let latitude = ref('') |
|
|
|
|
// let longitude = ref('') |
|
|
|
|
// console.log(store.state.record.latitude) |
|
|
|
|
// latitude.value = store.state.record.latitude |
|
|
|
|
// longitude.value = store.state.record.longitude |
|
|
|
|
// return { |
|
|
|
|
// latitude, |
|
|
|
|
// longitude |
|
|
|
|
// } |
|
|
|
|
<script setup> |
|
|
|
|
import { useStore } from 'vuex'; |
|
|
|
|
import { getReservationAddr } from '@/api/distribution/distributionReservation'; |
|
|
|
|
import { getDictionaryBiz } from '@/api/system/dict'; |
|
|
|
|
import { onMounted, reactive, toRefs } from 'vue'; |
|
|
|
|
import { useRouter } from 'vue-router'; |
|
|
|
|
let router = useRouter(); |
|
|
|
|
let details = reactive({ |
|
|
|
|
name: 'BmapDemo', |
|
|
|
|
loading: true, |
|
|
|
|
ids: null, |
|
|
|
|
error: null, |
|
|
|
|
addressList: [], |
|
|
|
|
reservationData: [], |
|
|
|
|
reservationIds: [], |
|
|
|
|
}); |
|
|
|
|
onMounted(() => {}); |
|
|
|
|
function init() { |
|
|
|
|
let map = new BMapGL.Map('container'); // 创建地图实例 |
|
|
|
|
let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 |
|
|
|
|
map.centerAndZoom(point, 15); |
|
|
|
|
map.enableScrollWheelZoom(true); |
|
|
|
|
let myGeo = new BMapGL.Geocoder(); |
|
|
|
|
myGeo.getPoint('四川成都', function (point) { |
|
|
|
|
if (point) { |
|
|
|
|
map.centerAndZoom(point, 16); |
|
|
|
|
console.log(point); |
|
|
|
|
} else { |
|
|
|
|
// alert('您选择的地址没有解析到结果！'); |
|
|
|
|
console.log(point); |
|
|
|
|
console.log('您选择的地址没有解析到结果！'); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
function initMap(ids) { |
|
|
|
|
if (ids.length > 1) { |
|
|
|
|
ids.split(','); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
this.$watch( |
|
|
|
|
() => this.$route.params, |
|
|
|
|
() => { |
|
|
|
|
this.fetchData(); |
|
|
|
|
}, |
|
|
|
|
// 组件创建完后获取数据， |
|
|
|
|
// 此时 data 已经被 observed 了 |
|
|
|
|
{ immediate: true } |
|
|
|
|
) |
|
|
|
|
//根据预约信息查询预约列表地址 |
|
|
|
|
this.initMap(this.ids); |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods:{ |
|
|
|
|
fetchData() { |
|
|
|
|
this.error = this.post = null |
|
|
|
|
this.loading = true |
|
|
|
|
if (this.$route.query.id){ |
|
|
|
|
this.ids= this.$route.query.id; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
initMap(ids){ |
|
|
|
|
if (ids.length>1){ |
|
|
|
|
ids.split(",") |
|
|
|
|
} |
|
|
|
|
this.loading = true; |
|
|
|
|
getReservationAddr(ids).then(res=>{ |
|
|
|
|
res.data.data.forEach(item=>{ |
|
|
|
|
this.ids.split(",").forEach(id=>{ |
|
|
|
|
if (item.id==id){ |
|
|
|
|
this.reservationIds.push(item.id) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
console.log(this.reservationIds); |
|
|
|
|
this.reservationData = res.data.data; |
|
|
|
|
|
|
|
|
|
this.addressList=res.data.data; |
|
|
|
|
}) |
|
|
|
|
this.loading = false; |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
aaa(){ |
|
|
|
|
console.log(">>>>>>>>>>>",this.reservationIds); |
|
|
|
|
let ids = this.reservationIds.join(",") |
|
|
|
|
this.$router.push({ |
|
|
|
|
path: '/distribution/deliveryInfo/deliveryInfo', |
|
|
|
|
query: { |
|
|
|
|
id: ids |
|
|
|
|
} |
|
|
|
|
this.loading = true; |
|
|
|
|
getReservationAddr(ids).then(res => { |
|
|
|
|
res.data.data.forEach(item => { |
|
|
|
|
this.ids.split(',').forEach(id => { |
|
|
|
|
if (item.id == id) { |
|
|
|
|
this.reservationIds.push(item.id); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
console.log(this.reservationIds); |
|
|
|
|
this.reservationData = res.data.data; |
|
|
|
|
|
|
|
|
|
let map = new BMapGL.Map("container"); // 创建地图实例 |
|
|
|
|
let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 |
|
|
|
|
map.centerAndZoom(point, 15); |
|
|
|
|
let content = "label"; |
|
|
|
|
let label = new BMapGL.Label(content, { // 创建文本标注 |
|
|
|
|
position: point, // 设置标注的地理位置 |
|
|
|
|
offset: new BMapGL.Size(10, 20) // 设置标注的偏移量 |
|
|
|
|
}) |
|
|
|
|
map.addOverlay(label); |
|
|
|
|
map.addOverlay(label); // 将标注添加到地图中 |
|
|
|
|
label.setStyle({ // 设置label的样式 |
|
|
|
|
color: '#000', |
|
|
|
|
fontSize: '30px', |
|
|
|
|
border: '2px solid #1E90FF' |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
this.addressList = res.data.data; |
|
|
|
|
}); |
|
|
|
|
this.loading = false; |
|
|
|
|
} |
|
|
|
|
function aaa() { |
|
|
|
|
console.log('>>>>>>>>>>>', this.reservationIds); |
|
|
|
|
let ids = this.reservationIds.join(','); |
|
|
|
|
this.$router.push({ |
|
|
|
|
path: '/distribution/deliveryInfo/deliveryInfo', |
|
|
|
|
query: { |
|
|
|
|
id: ids, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
.bmap { |
|
|
|
|
width: 800px; |
|
|
|
|
height: 600px; |
|
|
|
|
border: 1px solid pink; |
|
|
|
|
} |
|
|
|
|
.bmap { |
|
|
|
|
width: 800px; |
|
|
|
|
height: 600px; |
|
|
|
|
border: 1px solid pink; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
