107 lines
2.6 KiB
Vue
107 lines
2.6 KiB
Vue
<script setup>
|
|
import { onMounted, reactive, ref } from "vue"
|
|
import border from "@/components/border.vue";
|
|
import AMap from "./AMap.vue";
|
|
import mitt from "@/utils/mitt";
|
|
import { useAppStore } from "@/store/app.js"
|
|
import { logisticsMapCount } from "@/api/index.js";
|
|
|
|
const appStore = useAppStore();
|
|
|
|
const list = ref([]);
|
|
const open = ref({});
|
|
const initInfo = () => {
|
|
logisticsMapCount({
|
|
areaCode: appStore.delivery_address.areaCode,
|
|
streetCode: appStore.delivery_address.streetCode,
|
|
courier_id: appStore.delivery_address.courier_id
|
|
}).then(res => {
|
|
res.data.latestTenOrder.forEach(item => {
|
|
list.value.push(item.receiver_address.replace(/\d+队/, ''))
|
|
})
|
|
// 测试数据使用, 可删除, 测试前需正则匹配\d+队5353
|
|
// list.value[0] += '和瑞世纪城';
|
|
// list.value[1] += '县政府';
|
|
// list.value[2] += '阳光国际城 ';
|
|
open.value = res.data.latestOrder.mer_address;
|
|
})
|
|
}
|
|
|
|
const clickItem = (type, name) => {
|
|
mitt.emit('showBusinesses2', { type: type, name: name })
|
|
}
|
|
|
|
onMounted(() => {
|
|
initInfo()
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="box">
|
|
<div class="map">
|
|
<AMap :list="list" :open="open"></AMap>
|
|
</div>
|
|
<div class="border"></div>
|
|
<div class="btn">
|
|
<div class="c-b" @click.stop="clickItem(1, '待取货')">
|
|
<div class="text">
|
|
待取货({{ appStore.delivery.pending_order_count }})单
|
|
</div>
|
|
</div>
|
|
<div class="c-b" @click.stop="clickItem(2, '配送中')">
|
|
<div class="text">
|
|
配送中({{ appStore.delivery.delivering_order_count }})单
|
|
</div>
|
|
</div>
|
|
<div class="c-b" @click.stop="clickItem(3, '已完成')">
|
|
<div class="text">
|
|
已完成({{ appStore.delivery.finished_order_count }})单
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.box {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
.border {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid rgba(91, 219, 246, 1);
|
|
box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
|
|
pointer-events: none;
|
|
}
|
|
.map {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.btn {
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 2rem;
|
|
.c-b {
|
|
cursor: pointer;
|
|
background-image: url(../../../assets/delivery_img/icon9.png);
|
|
background-size: 100% 100%;
|
|
height: 4rem;
|
|
width: 11.5rem;
|
|
margin-bottom: 1.4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
.text {
|
|
margin-left: 4.5rem;
|
|
font-size: 0.8rem;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|