预约转配送提交页面

src/views/distribution/reservation/atlas.vue

@@ -0,0 +1,134 @@
+<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}}&emsp;{{item.deliveryAddress}}&emsp;{{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>
+</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
+          // }
+        }
+      }
+    },
+    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
+          }
+        });
+      },
+
+    },
+    mounted() {
+
+      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'
+      })
+    },
+
+  }
+</script>
+
+<style scoped>
+    .bmap {
+        width: 800px;
+        height: 600px;
+        border: 1px solid pink;
+    }
+</style>
+