更新

src/App.vue

@@ -1,5 +1,4 @@
 <script setup>
-
 </script>
 
 <template>

src/api/index.js

@@ -1,11 +1,16 @@
 import axios from "@/utils/axios.js";
 
-// 获取街道
+// 登录
 export const login = (data) => {
     return axios.post('dataview/login', data);
 }
 
-// 获取街道
+// 区县
+export const getArea = (data) => {
+    return axios.get('city/get_area', { params: data });
+}
+
+// 乡镇
 export const getStreet = (data) => {
     return axios.get('city/get_street', { params: data });
 }
@@ -15,6 +20,12 @@ export const orderList = (data) => {
     return axios.get('dataview/curr_order_info', { params: data });
 }
 
+// 订单列表
+export const logisticsList = (data) => {
+    return axios.get('dataview/logistics_list', { params: data });
+}
+
+
 // 订单排行
 export const orderRanking = (data) => {
     return axios.get('dataview/order_ranking', { params: data });

src/components/Businesses.vue

@@ -11,22 +11,16 @@ const appStore = useAppStore();
 
 const route = useRouter()
 
-const ShwostoreType = ref(false)
-const test = () => {
-  console.log(6)
-}
-
 const isShow = ref(false);
 
 const hdClick = (e) => {
   // console.log(e)
-  if (e.columnIndex == 10) {
+  // if (e.columnIndex == 10) {
-    // alert(45)
+  //   // alert(45)
-    route.replace('/storeLogin')
+  //   route.replace('/storeLogin')
+  // }
 }
 
-
-}
 const initData = (data) => {
   let arr = [];
   for (let i = 0; i < data.length; i++) {
@@ -78,7 +72,8 @@ const pages = ref({
   page: 1,
   limit: 30,
   total: 0,
-  pageAll: 0
+  pageAll: 0,
+  type: '', //类型 1-待取货, 2-配送中, 3-已完成
 })
 
 const loadOrderList = (pramas) => {

src/components/Businesses2.vue

@@ -0,0 +1,198 @@
+<script setup>
+// 102B3
+import { ref, reactive, onMounted } from "vue"
+import { useRouter } from 'vue-router'
+import paging from "./paging.vue"
+import mitt from "@/utils/mitt"
+import { logisticsList } from "@/api/index.js"
+import { useAppStore } from "@/store/app.js"
+
+const appStore = useAppStore();
+
+const route = useRouter()
+
+const isShow = ref(false);
+
+const hdClick = (e) => {
+  // console.log(e)
+  // if (e.columnIndex == 10) {
+  //   // alert(45)
+  //   route.replace('/storeLogin')
+  // }
+}
+
+const initData = (data) => {
+  let arr = [];
+  for (let i = 0; i < data.length; i++) {
+    let calss = 'div';
+    if (i % 2 != 0) {
+      calss = 'div div2'
+    }
+    arr.push(
+      [
+        `<div class="${calss}">${data[i].order_sn || '-'}</div>`,
+        `<div class="${calss}">${data[i].real_name || '-'}</div>`,
+        `<div class="${calss}">${data[i].user_phone || '-'}</div>`,
+        `<div class="${calss}">${data[i].user_address || '-'}</div>`,
+        `<div class="${calss}">${data[i].store_name || '-'}</div>`,
+        `<div class="${calss}">${data[i].mer_name || '-'}</div>`,
+        `<div class="${calss}">${data[i].create_time || '-'}</div>`,
+        `<div class="${calss}">${data[i].status || '-'}</div>`,
+        `<div class="${calss}">${data[i].courier || '-'}</div>`,
+      ]
+    )
+  }
+  configs.data = arr;
+  scrollBoardRef.value?.updateRows(configs.data);
+}
+const scrollBoardRef = ref(null);
+const configs = reactive({
+  headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
+  oddRowBGC: '',
+  evenRowBGC: "",
+  rowNum: 20,
+  header: [
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>订单编号</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>店铺名称</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>下单时间</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>订单状态</div>`,
+    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>配送人员</div>`,
+  ],
+  data: [
+  ]
+})
+
+const pages = ref({
+  areaCode: appStore.address.areaCode,
+  streetCode: appStore.address.streetCode,
+  page: 1,
+  limit: 30,
+  total: 0,
+  pageAll: 0,
+  type: 1, //类型 1-待取货, 2-配送中, 3-已完成
+})
+
+const loadOrderList = (pramas) => {
+  logisticsList(pramas).then((res) => {
+    initData(res.data.currOrderList);
+    pages.value.total = res.data.currOrderCount;
+    pages.value.pageAll = Math.ceil(res.data.currOrderCount / pages.value.limit);
+  }).catch(err => {
+    console.error(err);
+  })
+}
+
+onMounted(() => {
+  // loadOrderList();
+  mitt.on('showBusinesses2', (e) => {
+    pages.type = e.type;
+    isShow.value = !isShow.value;
+  })
+})
+</script>
+
+<template>
+  <transition name="fade">
+    <div class="bus" v-if="isShow">
+      <div class="c-list-box">
+        <div class="c-l-top">
+          <div class="title">订单列表</div>
+          <div class="close" @click="isShow = false">关闭</div>
+        </div>
+        <dv-scroll-board
+          ref="scrollBoardRef"
+          :config="configs"
+          @click="hdClick"
+          style="width: 100%; height: 92%"
+        />
+        <div class="c-l-bottom">
+          <paging :page="pages" @loadList="loadOrderList"></paging>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss" scoped>
+.bus {
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.c-list-box {
+  width: 94%;
+  height: 94%;
+  position: relative;
+  background-image: url(../assets/img/list-box.png);
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  box-sizing: border-box;
+  padding: 3rem;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+  .c-l-top {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title {
+      font-size: 1.2rem;
+      font-family: "ifonts";
+    }
+    .close {
+      font-size: 0.8rem;
+      padding: 0.1rem 1.5rem;
+      background-color: rgba(0, 156, 255, 0.3);
+      border: 0.07rem solid rgba(91, 219, 246, 1);
+      border-radius: 0.2rem;
+      cursor: pointer;
+    }
+  }
+  .c-l-bottom {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+:deep(.div) {
+  width: 100%;
+  text-align: center;
+  height: 100%;
+  color: aliceblue;
+  background: rgba(91, 219, 246, 0.2);
+  white-space: nowrap; /* 防止文本换行 */
+  overflow: hidden; /* 溢出部分隐藏 */
+  text-overflow: ellipsis; /* 显示省略号 */
+}
+
+:deep(.div2) {
+  background: rgba(0, 168, 255, 0.16);
+}
+
+:deep(.ceil) {
+  padding: 0 !important;
+  margin-bottom: 0.3rem;
+  margin-right: 0.1rem;
+}
+
+:deep(.header-item) {
+  padding: 0 !important;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/headView.vue

@@ -3,8 +3,9 @@ import { reactive, ref, provide, nextTick, onMounted, inject } from "vue";
 import areaList from "./areaList.vue";
 import { useRoute, useRouter } from "vue-router";
 import mitt from "@/utils/mitt";
-import { getStreet } from "@/api/index.js"
+import { getStreet } from "@/api/index.js";
 import { useAppStore } from "@/store/app.js";
+import { useUserStore } from "@/store/user.js";
 
 const reload = inject('reload');
 
@@ -14,13 +15,14 @@ const info = reactive({
 })
 
 const appStore = useAppStore();
+const userSotre = useUserStore();
 
 const areaListRef = ref(null);
 
 // 选择镇
 const choseArea = ref(null)
 const open = () => {
-  areaListRef.value.show();
+  if (list.value.length > 0) areaListRef.value.show();
 }
 // 关闭
 const offAreaList = (e) => {
@@ -35,19 +37,39 @@ const offAreaList = (e) => {
 }
 
 const list = ref([])
-const initList = () => {
+const initList = async () => {
-  getStreet({
+  let street = appStore.street;
+  if (street?.length == 0) {
+    let { data } = await getStreet({
       area_code: appStore.address.areaCode
-  }).then(res => {
-    list.value = res.data;
-    appStore.setAddress({
-      areaCode: appStore.address.appStore,
-      streetCode: res.data[0].code
     })
-    info.address = res.data[0].name
+    street = data;
+    appStore.setStreet(street);
+  }
+  let area = appStore.area;
+  if (userSotre.userInfo.street_code) {
+    let data = street.find(item => item.code == appStore.address.streetCode);
+    info.address = data?.name;
+    list.value = [];
+    appStore.setAddress({
+      areaCode: appStore.address.areaCode,
+      streetCode: appStore.address.streetCode
+    })
+  } else {
+    let data = area.find(item => item.code == appStore.address.areaCode);
+    info.address = data?.name;
+    list.value = [data, ...street];
+    if (appStore.address.streetCode) {
+      data = street.find(item => item.code == appStore.address.streetCode);
+      info.address = data?.name;
+    }
+    appStore.setAddress({
+      areaCode: appStore.address.areaCode,
+      streetCode: appStore.address.streetCode
     })
   }
-
+  mitt.emit('map_info', info);
+}
 
 const router = useRouter()
 const route = useRoute()
@@ -84,9 +106,6 @@ const logout = () => {
 }
 
 onMounted(() => {
-
-  mitt.emit('map_info', info);
-
   initList();
 
   // 每秒钟更新一次时间

src/layout/index.vue

@@ -1,9 +1,11 @@
 <script setup>
 import headView from "@/components/headView.vue";
 import Businesses from "@/components/Businesses.vue";
-import { ref, nextTick, provide, onMounted, onUnmounted } from "vue";
+import Businesses2 from "@/components/Businesses2.vue";
+import { ref, nextTick, provide, watch, onMounted, onUnmounted } from "vue";
+import mitt from "@/utils/mitt";
 
-const show = ref(true);
+const show = ref(false);
 const reload = () => {
   show.value = false;
   nextTick(() => {
@@ -23,11 +25,14 @@ const startReLoad = () => {
 }
 
 onMounted(() => {
+  mitt.on('map_info', e => {
+    reload();
     startReLoad();
     window.addEventListener('mousemove', startReLoad);
     window.addEventListener('keypress', startReLoad);
     window.addEventListener('click', startReLoad);
   })
+})
 
 onUnmounted(() => {
   window.removeEventListener('mousemove', startReLoad);
@@ -40,10 +45,15 @@ onUnmounted(() => {
 <template>
   <dv-full-screen-container class="body">
     <headView></headView>
-    <div style="height: calc(100% - 3.75rem)">
+    <div style="height: calc(100% - 3.75rem)" v-if="show">
-      <router-view v-if="show"></router-view>
+      <router-view v-slot="{ Component }">
+        <transition name="fade">
+          <component :is="Component"></component>
+        </transition>
+      </router-view>
     </div>
     <Businesses class="businesses"></Businesses>
+    <Businesses2 class="businesses"></Businesses2>
   </dv-full-screen-container>
 </template>
 
@@ -63,4 +73,14 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

src/store/app.js

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia"
 import { ref } from "vue"
+import areaList from "@/utils/areaList.js"
 
 export const useAppStore = defineStore('app', () => {
     const map_info = ref(localStorage.getItem('map_info') || 'luxian');
@@ -15,11 +16,12 @@ export const useAppStore = defineStore('app', () => {
     }
 
     // 测试使用的初始化配置
-    address.value = { areaCode: 510524, streetCode: 510524100 };
+    // address.value = { areaCode: 510524, streetCode: 510524100 };
 
     const setAddress = (e) => {
-        e.areaCode ? address.value.areaCode = e.areaCode : null;
+        console.log('更新', e);
-        e.streetCode ? address.value.streetCode = e.streetCode : null;
+        address.value.areaCode = e.areaCode;
+        address.value.streetCode = e.streetCode;
         localStorage.setItem('address', JSON.stringify(e));
     }
 
@@ -39,23 +41,37 @@ export const useAppStore = defineStore('app', () => {
 
     const delivery_address = ref(JSON.parse(localStorage.getItem('delivery_address') || '{}'));
 
-    if (!delivery_address.value.areaCode) {
+    // if (!delivery_address.value.areaCode) {
-        delivery_address.value = { areaCode: 510524, streetCode: 510524100 };
+    //     delivery_address.value = { areaCode: 510524, streetCode: 510524100 };
-    }
+    // }
 
     const setDeliveryAddress = (e) => {
         delivery_address.value = e;
         localStorage.setItem('delivery_address', JSON.stringify(e));
     }
 
+    const area = ref(areaList);
+    const setArea = (data) => {
+        area.value = data;
+    }
+
+    const street = ref([]);
+    const setStreet = (data) => {
+        street.value = data;
+    }
+
     return {
         map_info,
         address,
         delivery,
         delivery_address,
+        area,
+        street,
         setMapInfo,
         setAddress,
         setDelivery,
-        setDeliveryAddress
+        setDeliveryAddress,
+        setArea,
+        setStreet
     }
 })

src/utils/areaList.js

@@ -0,0 +1,39 @@
+const areaList = [
+    {
+        "id": 2043,
+        "code": "510502",
+        "name": "江阳区"
+    },
+    {
+        "id": 2044,
+        "code": "510503",
+        "name": "纳溪区"
+    },
+    {
+        "id": 2045,
+        "code": "510504",
+        "name": "龙马潭区"
+    },
+    {
+        "id": 2046,
+        "code": "510521",
+        "name": "泸县"
+    },
+    {
+        "id": 2047,
+        "code": "510522",
+        "name": "合江县"
+    },
+    {
+        "id": 2048,
+        "code": "510524",
+        "name": "叙永县"
+    },
+    {
+        "id": 2049,
+        "code": "510525",
+        "name": "古蔺县"
+    }
+]
+
+export default areaList;

src/view/delivery/components/center.vue

@@ -2,8 +2,10 @@
 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";
+import Businesses2 from "@/components/Businesses2.vue";
 
 const appStore = useAppStore();
 
@@ -28,6 +30,7 @@ const initInfo = () => {
 
 const clickItem = () => {
   console.log('点击按钮');
+  mitt.emit('showBusinesses2', { type: 1 })
 }
 
 onMounted(() => {
@@ -43,22 +46,23 @@ onMounted(() => {
     </div>
     <div class="border"></div>
     <div class="btn">
-      <div class="c-b" @click.stop="clickItem">
+      <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">
+      <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">
+      <div class="c-b" @click.stop="clickItem(3)">
         <div class="text">
           已完成({{ appStore.delivery.finished_order_count }})单
         </div>
       </div>
     </div>
+    <Businesses2 :isShow="isShow"></Businesses2>
   </div>
 </template>
 

src/view/index/components/centerMap.vue

@@ -9,9 +9,14 @@ import gulin from "@/assets/json/gulin.json";
 import jiangyang from "@/assets/json/jiangyang.json";
 import longma from "@/assets/json/longma.json";
 import naxi from "@/assets/json/naxi.json";
+import luxian_geo from "@/utils/luxian_geo.js";
+import xuyong_geo from "@/utils/xuyong_geo.js";
+import jiangyang_geo from "@/utils/jiangyang_geo.js";
 import { useAppStore } from "@/store/app.js";
+import { useUserStore } from "@/store/user.js";
 
 const appStore = useAppStore();
+const userStore = useUserStore();
 
 const props = defineProps({
   list: {
@@ -88,6 +93,15 @@ const initMap = () => {
 
   let option = {
     animation: false,
+    title: {
+      text: mapType.name,
+      textStyle: {
+        color: '#fff',
+        fontSize: 20
+      },
+      top: '10%',
+      left: '10%'
+    },
     //geo方式地理坐标系组件。
     geo: [
       {
@@ -201,7 +215,7 @@ const initMap = () => {
           disabled: false,
         },
         select: {
-          disabled: false
+          disabled: true
         },
         itemStyle: {
           normal: {
@@ -227,19 +241,6 @@ const initMap = () => {
           position: "center",
           show: false
         },
-        // tooltip: {
-        //   formatter (value) {
-        //     console.log(value);
-        //     return "";
-        //   },
-        //   show: true
-        // },
-        // encode: {
-        //   value: 2
-        // },
-        // itemStyle: {
-        //   color: "#0efacc"
-        // },
         emphasis: {
           label: {
             show: false
@@ -252,18 +253,35 @@ const initMap = () => {
   chart.setOption(option);
 }
 
+const mapInfo = () => {
+  let area = appStore.area.find(item => item.code == appStore.address.areaCode);
+  let map;
+  if (area.name == "泸县") map = luxian_geo;
+  if (area.name == "江阳区") map = jiangyang_geo;
+  if (area.name == "叙永县") map = xuyong_geo;
+  map = JSON.parse(JSON.stringify(map));
+
+  if (appStore.address.streetCode) {
+    let street = appStore.street.find(item => item.code == appStore.address.streetCode);
+    initStreetMap(street, map);
+  } else {
+    mapType.name = area.name;
+    mapType.json = map;
+  }
+}
+
+const initStreetMap = (street, map) => {
+  map.features = map.features.filter(item => item.properties.name == street.name);
+  mapType.name = street.name;
+  mapType.json = map;
+}
+
 onMounted(() => {
   dataValue = props.list;
   changeType('xuyong');
+  mapInfo();
   initDataValue();
   initMap();
-  nextTick(() => {
-    mitt.on('map_info', e => {
-      changeType(e.pinyin);
-      initDataValue();
-      initMap();
-    })
-  })
 })
 
 </script>

src/view/login/index.vue

@@ -2,7 +2,9 @@
 import { ref, reactive } from "vue"
 import { useRouter } from "vue-router";
 import { login } from "@/api/index.js";
+import { getArea, getStreet } from "@/api/index.js"
 import { useUserStore } from "@/store/user.js";
+import { useAppStore } from "@/store/app.js";
 const router = useRouter()
 const show = ref(false)
 const account = ref('叙永镇')
@@ -11,9 +13,9 @@ const isAccount = ref(false)
 const isPassword = ref(false)
 
 const userStore = useUserStore();
+const appStore = useAppStore();
 
 const submit = () => {
-
   if (!account.value) {
     isAccount.value = true;
     return
@@ -21,18 +23,24 @@ const submit = () => {
   else isAccount.value = false;
   if (!password.value) {
     isPassword.value = true;
-
     return
   }
   else isPassword.value = false;
 
-
   login({
     account: account.value,
     password: password.value
-  }).then((res) => {
+  }).then(async (res) => {
     userStore.setUserInfo(res.data.user);
     userStore.setToken(res.data.token);
+    appStore.setAddress({
+      areaCode: res.data.user.area_code,
+      streetCode: res.data.user.street_code
+    });
+    let street = await getStreet({
+      area_code: res.data.user.area_code
+    })
+    appStore.setStreet(street.data);
     router.push('/');
   }).catch(e => {
     console.log(e);