107 lines
2.6 KiB
Vue
Raw Normal View History

2023-11-27 17:18:03 +08:00
<script setup>
2023-12-05 18:39:17 +08:00
import { onMounted, reactive, ref } from "vue"
2023-11-27 17:18:03 +08:00
import border from "@/components/border.vue";
import AMap from "./AMap.vue";
2023-12-09 18:40:15 +08:00
import mitt from "@/utils/mitt";
2023-12-05 18:39:17 +08:00
import { useAppStore } from "@/store/app.js"
import { logisticsMapCount } from "@/api/index.js";
2023-11-30 18:36:25 +08:00
2023-12-05 18:39:17 +08:00
const appStore = useAppStore();
2023-12-06 10:48:18 +08:00
const list = ref([]);
const open = ref({});
2023-12-05 18:39:17 +08:00
const initInfo = () => {
logisticsMapCount({
areaCode: appStore.delivery_address.areaCode,
streetCode: appStore.delivery_address.streetCode,
courier_id: appStore.delivery_address.courier_id
}).then(res => {
2023-12-06 10:48:18 +08:00
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;
2023-12-05 18:39:17 +08:00
})
}
2023-12-09 18:48:08 +08:00
const clickItem = (type, name) => {
mitt.emit('showBusinesses2', { type: type, name: name })
2023-11-30 18:36:25 +08:00
}
2023-12-05 18:39:17 +08:00
onMounted(() => {
initInfo()
})
2023-11-27 17:18:03 +08:00
</script>
<template>
<div class="box">
<div class="map">
2023-12-06 10:48:18 +08:00
<AMap :list="list" :open="open"></AMap>
2023-11-27 17:18:03 +08:00
</div>
<div class="border"></div>
2023-11-30 18:36:25 +08:00
<div class="btn">
2023-12-09 18:48:08 +08:00
<div class="c-b" @click.stop="clickItem(1, '待取货')">
2023-12-05 18:39:17 +08:00
<div class="text">
待取货({{ appStore.delivery.pending_order_count }})
</div>
2023-11-30 18:36:25 +08:00
</div>
2023-12-09 18:48:08 +08:00
<div class="c-b" @click.stop="clickItem(2, '配送中')">
2023-12-05 18:39:17 +08:00
<div class="text">
配送中({{ appStore.delivery.delivering_order_count }})
</div>
2023-11-30 18:36:25 +08:00
</div>
2023-12-09 18:48:08 +08:00
<div class="c-b" @click.stop="clickItem(3, '已完成')">
2023-12-05 18:39:17 +08:00
<div class="text">
已完成({{ appStore.delivery.finished_order_count }})
</div>
2023-11-30 18:36:25 +08:00
</div>
</div>
2023-11-27 17:18:03 +08:00
</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 {
2023-11-28 18:35:14 +08:00
height: 100%;
2023-11-27 17:18:03 +08:00
width: 100%;
}
2023-11-30 18:36:25 +08:00
.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;
}
}
}
2023-11-27 17:18:03 +08:00
}
</style>