赵忠林
682e264a6f
- 移除经营范围按钮，精简导航栏 - 实现文章标题链接功能，提升用户体验 - 添加商品详情页面包屑导航，支持分类跳转 - 引入配送管理相关页面（区域、接单台、配送员、派单） - 替换控制台布局为站点头部和底部组件 - 重构商品分类页面，集成CMS导航功能 - 新增文章详情页面，支持多种访问方式 - 删除已迁移的创建应用和空应用页面 - 优化样式和组件导入，提升代码质量
205 lines
7.6 KiB
Vue
205 lines
7.6 KiB
Vue
<template>
|
||
<main class="delivery">
|
||
<section class="delivery-hero">
|
||
<div class="delivery-hero-mask">
|
||
<div class="mx-auto max-w-screen-xl px-4 py-10">
|
||
<a-breadcrumb class="delivery-breadcrumb">
|
||
<a-breadcrumb-item>
|
||
<NuxtLink to="/">首页</NuxtLink>
|
||
</a-breadcrumb-item>
|
||
<a-breadcrumb-item>配送</a-breadcrumb-item>
|
||
</a-breadcrumb>
|
||
|
||
<div class="delivery-hero-title">配送管理</div>
|
||
<div class="delivery-hero-sub">
|
||
配送区域划分、配送员自动派单/人工派单、工资统计与接单台（原型/规划页）
|
||
</div>
|
||
|
||
<div class="mt-4 flex flex-wrap items-center gap-2">
|
||
<a-button type="primary" @click="navigateTo('/delivery/areas')">配送范围（地图划区）</a-button>
|
||
<a-button @click="navigateTo('/delivery/couriers')">配送员</a-button>
|
||
<a-button @click="navigateTo('/delivery/board')">接单台</a-button>
|
||
<a-button @click="navigateTo('/delivery/settings')">设置</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mx-auto max-w-screen-xl px-4 py-10">
|
||
<a-row :gutter="[16, 16]">
|
||
<a-col :xs="24" :sm="12" :lg="6">
|
||
<a-card :bordered="false" class="kpi-card">
|
||
<a-statistic title="配送点" :value="kpi.points" />
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :xs="24" :sm="12" :lg="6">
|
||
<a-card :bordered="false" class="kpi-card">
|
||
<a-statistic title="配送员" :value="kpi.couriers" />
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :xs="24" :sm="12" :lg="6">
|
||
<a-card :bordered="false" class="kpi-card">
|
||
<a-statistic title="待派单" :value="kpi.pendingDispatch" />
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :xs="24" :sm="12" :lg="6">
|
||
<a-card :bordered="false" class="kpi-card">
|
||
<a-statistic title="今日配送单" :value="kpi.todayOrders" />
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-alert
|
||
class="mt-4"
|
||
show-icon
|
||
type="info"
|
||
message="说明"
|
||
description="当前页面用于梳理配送相关需求与页面入口，后续再逐步落地：地图划区、自动派单、工资统计、确认收货与接单台。"
|
||
/>
|
||
|
||
<a-row class="mt-6" :gutter="[24, 24]">
|
||
<a-col :xs="24" :lg="12">
|
||
<a-card title="配送范围（配送点维度）" class="module-card" :bordered="false">
|
||
<a-list size="small" :data-source="deliveryAreaItems">
|
||
<template #renderItem="{ item }">
|
||
<a-list-item>{{ item }}</a-list-item>
|
||
</template>
|
||
</a-list>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<a-button type="primary" @click="navigateTo('/delivery/areas')">进入地图划区</a-button>
|
||
<a-button @click="navigateTo('/delivery/settings')">配置配送点</a-button>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
|
||
<a-col :xs="24" :lg="12">
|
||
<a-card title="配送员（站点维度）" class="module-card" :bordered="false">
|
||
<a-list size="small" :data-source="courierItems">
|
||
<template #renderItem="{ item }">
|
||
<a-list-item>{{ item }}</a-list-item>
|
||
</template>
|
||
</a-list>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<a-button type="primary" @click="navigateTo('/delivery/couriers')">配送员管理</a-button>
|
||
<a-button @click="navigateTo('/delivery/settings')">工资/自动确认设置</a-button>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
|
||
<a-col :xs="24">
|
||
<a-card title="接单台（配送员端）" class="module-card" :bordered="false">
|
||
<a-row :gutter="[24, 24]">
|
||
<a-col :xs="24" :lg="12">
|
||
<a-list size="small" :data-source="boardItems">
|
||
<template #renderItem="{ item }">
|
||
<a-list-item>{{ item }}</a-list-item>
|
||
</template>
|
||
</a-list>
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<a-button type="primary" @click="navigateTo('/delivery/board')">进入接单台</a-button>
|
||
<a-button @click="navigateTo('/delivery/dispatch')">人工派单</a-button>
|
||
</div>
|
||
</a-col>
|
||
|
||
<a-col :xs="24" :lg="12">
|
||
<a-typography-title :level="5" class="!mb-3">配送完成链路（建议流程）</a-typography-title>
|
||
<a-timeline>
|
||
<a-timeline-item>下单 → 生成配送订单</a-timeline-item>
|
||
<a-timeline-item>地址落点 → 判断配送点范围</a-timeline-item>
|
||
<a-timeline-item>若属于某配送员负责小区 → 自动派单</a-timeline-item>
|
||
<a-timeline-item>否则 → 配送点管理员人工派单（通知配送员端）</a-timeline-item>
|
||
<a-timeline-item>配送员接单 → 配送中</a-timeline-item>
|
||
<a-timeline-item>送达 → 可选拍照 → 配送员确认送达</a-timeline-item>
|
||
<a-timeline-item>客户确认收货；若未确认，按配置自动确认（默认 24h）</a-timeline-item>
|
||
</a-timeline>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</section>
|
||
</main>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { usePageSeo } from '@/composables/usePageSeo'
|
||
|
||
usePageSeo({
|
||
title: '配送管理',
|
||
description: '配送范围划区、配送员派单规则、工资统计与接单台需求梳理。',
|
||
path: '/delivery'
|
||
})
|
||
|
||
const kpi = reactive({
|
||
points: 0,
|
||
couriers: 0,
|
||
pendingDispatch: 0,
|
||
todayOrders: 0
|
||
})
|
||
|
||
const deliveryAreaItems = [
|
||
'每个配送点的配送范围可独立设置',
|
||
'在地图上划分区域（多边形/多个区域/禁配送区等）',
|
||
'订单地址落点后判断是否在范围内（点-in-多边形）'
|
||
]
|
||
|
||
const courierItems = [
|
||
'每个配送点可配置 N 个配送员',
|
||
'可设置配送员负责的小区；属于该小区的订单自动派给对应配送员',
|
||
'收货地址不属于任何小区：配送点管理员人工派单（需同步到配送员端）',
|
||
'工资统计：水按桶计提成；其它商品按金额/规则计提成；默认当月，可选时间段查询；线下结算',
|
||
'第三方配送点：不计算配送员工资',
|
||
'送达后：配送员可选拍照并确认送达；客户确认收货；未确认则按配置自动确认（默认 24h）'
|
||
]
|
||
|
||
const boardItems = [
|
||
'配送员可查看所属站点的配送订单列表',
|
||
'按配送时间降序排序',
|
||
'按配送日期筛选查询可接订单',
|
||
'超时订单也可接单，并显示“超时”标签提醒'
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.delivery {
|
||
background: #f4f6f8;
|
||
}
|
||
|
||
.delivery-hero {
|
||
background:
|
||
radial-gradient(circle at 15% 20%, rgba(22, 163, 74, 0.22), transparent 60%),
|
||
radial-gradient(circle at 85% 10%, rgba(59, 130, 246, 0.18), transparent 55%),
|
||
linear-gradient(180deg, #ffffff, #f8fafc);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.delivery-hero-mask {
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.92));
|
||
}
|
||
|
||
.delivery-breadcrumb {
|
||
color: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.delivery-hero-title {
|
||
margin-top: 10px;
|
||
font-size: 30px;
|
||
font-weight: 900;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.delivery-hero-sub {
|
||
margin-top: 10px;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.kpi-card,
|
||
.module-card {
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
|
||
}
|
||
</style>
|