完成设置模块当中的配送员管理
This commit is contained in:
@@ -64,7 +64,7 @@ const onPageSizeChange = (e : any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onPageBtnClick = (p : number) => {
|
const onPageBtnClick = (p : number) => {
|
||||||
if (p !== -1) {
|
if (p !== -1 && p >= 1 && p <= props.totalPage) {
|
||||||
emit('page-change', p)
|
emit('page-change', p)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
🚧 注意：
|
<EFBFBD> 文档维护说明：
|
||||||
|
|
||||||
⚠ 注意：当前使用 mock 数据，后续真实接口完成后替换
|
此文档持续记录 uni-app-x / UTS / Supabase 项目开发中遇到的真实问题与解决方案，
|
||||||
真实接口地址和返回字段未确定，请后续接口联调完成后再替换。
|
供后续开发者复盘参考，避免重复踩坑。
|
||||||
|
|
||||||
文档标记维持在此文件中，以便后续开发和对接。
|
文档标记维持在此文件中，以便后续开发和对接。
|
||||||
---
|
---
|
||||||
@@ -265,6 +265,147 @@
|
|||||||
3. 容器必须设置正确的 `height` 和 `overflow` 属性。
|
3. 容器必须设置正确的 `height` 和 `overflow` 属性。
|
||||||
4. 成功的悬停菜单实现应该作为模板复用到其他组件。
|
4. 成功的悬停菜单实现应该作为模板复用到其他组件。
|
||||||
|
|
||||||
|
#### **原因二十六：假分页（全量加载 + 前端 slice）导致性能浪费与计数错误**
|
||||||
|
|
||||||
|
- **现象**: 页面翻页正常，但 Network 面板显示每次进入页面只发一次请求；`total` 显示的数量与数据库实际行数不符（偏少）；切换到第 2 页后数据消失或 `total` 突然跳变。
|
||||||
|
- **根本原因**:
|
||||||
|
1. `fetchUsers()` 没有传入 `limit/offset` 参数，一次性拉取所有记录到前端内存。
|
||||||
|
2. `pagedList` 通过 `computed(() => userList.value.slice(start, end))` 实现，是纯前端裁切。
|
||||||
|
3. `total` 为 `computed(() => userList.value.length)`，反映的是当次拉取的行数，而非数据库真实总行数。
|
||||||
|
4. 翻页 handler 仅更新 `currentPage.value`，没有重新 `fetchUsers()`，所以只有第一次加载时才有网络请求。
|
||||||
|
- **识别特征（自查清单）**:
|
||||||
|
```
|
||||||
|
❌ pagedList = computed(() => userList.value.slice((page-1)*ps, page*ps))
|
||||||
|
❌ total = computed(() => userList.value.length)
|
||||||
|
❌ 翻页 handler 只做 currentPage.value = p，没有 fetchUsers()
|
||||||
|
❌ select() 调用没有 limit/offset 参数
|
||||||
|
```
|
||||||
|
- **正确实现（服务端分页模板）**:
|
||||||
|
```typescript
|
||||||
|
// ✅ state
|
||||||
|
const total = ref(0) // 来自服务端，不是 .length
|
||||||
|
const pagedList = computed(() => userList.value) // 无前端 slice，服务端已分页
|
||||||
|
|
||||||
|
// ✅ fetch：每次翻页都重新请求
|
||||||
|
const fetchUsers = async (page: number, ps: number) => {
|
||||||
|
const offset = (page - 1) * ps
|
||||||
|
const offsetFilter = offset > 0 ? `offset=${offset}` : null
|
||||||
|
const res = await supabase.select('table', offsetFilter, {
|
||||||
|
limit: ps, order: 'created_at.desc', count: 'exact'
|
||||||
|
})
|
||||||
|
userList.value = (res.data as UTSJSONObject[]).map(mapDbRow)
|
||||||
|
// 从 Content-Range 头解析总数（见原因二十八）
|
||||||
|
total.value = parseTotalFromContentRange(res)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ 翻页 handler：每次翻页都调用 fetch
|
||||||
|
const handlePageChange = (p: number) => {
|
||||||
|
currentPage.value = p
|
||||||
|
fetchUsers(p, pageSize.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => fetchUsers(1, pageSize.value))
|
||||||
|
```
|
||||||
|
- **强制规则**: 任何使用 Supabase 的列表页面，`total` 必须来自后端 `Content-Range` 响应头或 `res.count`，严禁使用 `computed(() => localArray.value.length)` 作为总数。
|
||||||
|
|
||||||
|
#### **原因二十七（补充）：已在另一位置记录（响应式预览网格）**
|
||||||
|
|
||||||
|
> 此编号已被响应式预览网格布局条目占用，见本文件第 37 行附近。
|
||||||
|
|
||||||
|
#### **原因二十八：aksupa `.page().limit()` 触发 Range 头，导致 PostgREST 416 错误**
|
||||||
|
|
||||||
|
- **现象**: 首页（第 1 页）加载正常，翻到第 2 页后浏览器控制台立刻出现 `416 Range Not Satisfiable`，数据消失或显示错误状态；即使页面 UI 上的"下一页"按钮已禁用，错误仍然出现。
|
||||||
|
- **根本原因**:
|
||||||
|
1. aksupa（自定义 PostgREST 封装）的 `.page(n).limit(ps)` 链式调用内部会计算 `rangeFrom = (n-1)*ps`、`rangeTo = n*ps-1`，然后把这两个值注入到 HTTP 请求头 `Range: bytes=rangeFrom-rangeTo`（或 PostgREST 格式的 Content-Range 请求头）中。
|
||||||
|
2. PostgREST 遵循 HTTP Range 协议规范：只要 `rangeFrom >= total`（即请求的起始偏移 >= 数据库总行数），**必须返回 416**，这是协议强制行为，不是可配置的。
|
||||||
|
3. UI 层的"禁用"保护（`if (p > totalPage) return`）在 `total` 来自错误来源时本身就不可靠（见原因二十六），因此无法阻止越界请求。
|
||||||
|
4. 即使 UI 保护正确，在数据量恰好是页大小整数倍时（如共 15 条、每页 15 条），请求第 2 页仍会触发 416（`rangeFrom=15 >= total=15`）。
|
||||||
|
- **错误修复思路（踩坑路径）**:
|
||||||
|
```
|
||||||
|
❌ 第一轮尝试：在 handlePageChange / onPageBtnClick 中加 if (p > totalPage) return
|
||||||
|
结果：仍然 416。因为 UI 保护只能拦截按钮点击，无法修复协议层行为。
|
||||||
|
|
||||||
|
❌ 第二轮尝试：在 fetchUsers 中加 if (res.status === 416) { ... } 分支处理
|
||||||
|
结果：错误被吞但数据仍为空，用户体验差，根本原因未消除。
|
||||||
|
```
|
||||||
|
- **正确修复方案**:
|
||||||
|
```typescript
|
||||||
|
// ❌ 禁止使用 Range 头分页
|
||||||
|
const res = await supabase
|
||||||
|
.from('ak_users')
|
||||||
|
.select(columns)
|
||||||
|
.page(page) // ← 产生 Range 头
|
||||||
|
.limit(pageSize) // ← 产生 Range 头
|
||||||
|
.execute()
|
||||||
|
|
||||||
|
// ✅ 使用 URL 参数分页（永远不返回 416）
|
||||||
|
const offset = (page - 1) * ps
|
||||||
|
const offsetFilter = offset > 0 ? `offset=${offset}` : null
|
||||||
|
const res = await supabase.select('ak_users', offsetFilter, {
|
||||||
|
columns: 'id, username, ...',
|
||||||
|
limit: ps,
|
||||||
|
order: 'created_at.desc',
|
||||||
|
count: 'exact' // → Prefer: count=exact → 响应包含 Content-Range: 0-14/26
|
||||||
|
})
|
||||||
|
// PostgREST 对 ?offset=N&limit=N 参数：offset 超出 total 时返回 200 + 空数组，绝不 416
|
||||||
|
```
|
||||||
|
- **总数解析（Content-Range 手动解析）**:
|
||||||
|
```typescript
|
||||||
|
// 当 aksupa 使用 count: 'exact' 时，响应头会包含 Content-Range: 0-14/26
|
||||||
|
// 必须手动解析，因为绕过了 .page().limit() 的自动汇总逻辑
|
||||||
|
const parseTotal = (res: AkReqResponse): number => {
|
||||||
|
const cr = (res.headers?.['content-range'] ?? res.headers?.['Content-Range']) as string | null
|
||||||
|
if (cr) {
|
||||||
|
const slash = cr.lastIndexOf('/')
|
||||||
|
if (slash !== -1) {
|
||||||
|
const n = parseInt(cr.substring(slash + 1), 10)
|
||||||
|
if (!isNaN(n)) return n
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 降级：至少知道 offset + 当前页行数
|
||||||
|
return offset + (res.data as UTSJSONObject[]).length
|
||||||
|
}
|
||||||
|
total.value = parseTotal(res)
|
||||||
|
```
|
||||||
|
- **强制规则**:
|
||||||
|
1. **项目内所有列表页禁止使用 `.page().limit()` 链式调用**（aksupa 或其他类似封装）。
|
||||||
|
2. 分页必须使用 `offset=N` URL 参数注入方式。
|
||||||
|
3. 总数必须从 `Content-Range` 响应头解析，不可用本地数组长度代替。
|
||||||
|
4. RLS 注意：`ak_users` 表默认只允许 `auth.uid() = id`（自读）。Admin 页面需要额外添加 `service_role` 或管理员角色的 RLS 策略，否则即使分页正确，数据也会为空。
|
||||||
|
|
||||||
|
#### **原因二十九：CommonPagination `disabled` 状态仅为 CSS 装饰，边界点击仍会触发**
|
||||||
|
|
||||||
|
- **现象**: 在第 1 页时点击"上一页"按钮，或在最后一页时点击"下一页"按钮，虽然按钮视觉上呈灰色/禁用态，但仍会向父组件 `emit('page-change', 0)` 或 `emit('page-change', totalPage+1)`，导致 `fetchUsers(0, ps)` 被调用、产生 `offset=-ps`（负数），请求异常。
|
||||||
|
- **根本原因**: `disabled` class 仅控制 CSS 样式（`opacity`、`cursor: not-allowed`），没有在事件处理函数中加入边界检查，点击事件照常触发和冒泡。
|
||||||
|
- **修复方案**:
|
||||||
|
```typescript
|
||||||
|
// CommonPagination.uvue — onPageBtnClick
|
||||||
|
// ❌ 修复前：直接 emit，无边界保护
|
||||||
|
const onPageBtnClick = (p: number) => {
|
||||||
|
if (p !== -1) emit('page-change', p)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ 修复后：加入 p >= 1 && p <= props.totalPage 双向边界检查
|
||||||
|
const onPageBtnClick = (p: number) => {
|
||||||
|
if (p !== -1 && p >= 1 && p <= props.totalPage) {
|
||||||
|
emit('page-change', p)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- **父页面的双重保护（纵深防御）**:
|
||||||
|
```typescript
|
||||||
|
// 在 handlePageChange 中同样加入边界检查，防止其他调用路径绕过组件保护
|
||||||
|
const handlePageChange = (p: number) => {
|
||||||
|
if (p < 1 || p > totalPage.value) return
|
||||||
|
currentPage.value = p
|
||||||
|
fetchUsers(p, pageSize.value)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- **推广规则**:
|
||||||
|
1. 任何分页组件，`disabled` 状态必须同时在 CSS **和**事件处理函数两层保护，视觉禁用 ≠ 逻辑禁用。
|
||||||
|
2. 父组件的翻页 handler 应做二次校验，实现纵深防御。
|
||||||
|
3. `fetchUsers` 的 `offset` 计算前应确保 `page >= 1`，避免负数 offset 进入请求。
|
||||||
|
|
||||||
## 🛠️ 完整修复流程
|
## 🛠️ 完整修复流程
|
||||||
|
|
||||||
```
|
```
|
||||||
@@ -2264,4 +2405,4 @@ curl -i -X OPTIONS "http://192.168.1.61:9122/rest/v1/ml_coupon_templates?select=
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
这个指南现在涵盖了 uni-app-x 项目开发中最常见的 33 类问题（包含全局组件化最佳实践），为后续开发提供了完整的故障排除和标准化指导。 🚀
|
这个指南现在涵盖了 uni-app-x 项目开发中最常见的 36 类问题（含分页数据集成、PostgREST 协议层行为、全局组件化最佳实践），为后续开发提供了完整的故障排除和标准化指导。 🚀
|
||||||
|
|||||||
@@ -0,0 +1,761 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="visible" class="drawer-mask" :class="{ closing: isClosing }" @click="close">
|
||||||
|
<view class="drawer-container" :class="{ closing: isClosing }" @click.stop>
|
||||||
|
|
||||||
|
<!-- 头部 -->
|
||||||
|
<view class="drawer-header">
|
||||||
|
<text class="drawer-title">添加配送员</text>
|
||||||
|
<view class="close-btn" @click="close">
|
||||||
|
<text class="close-icon">×</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 滚动内容区 -->
|
||||||
|
<scroll-view class="drawer-body" scroll-y>
|
||||||
|
<view class="form-content">
|
||||||
|
|
||||||
|
<!-- 关联账号 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">关联用户账号</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label"><text class="required-star">*</text> 手机号码</text>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
:value="searchPhone"
|
||||||
|
@input="onSearchPhoneInput"
|
||||||
|
placeholder="输入已注册用户手机号"
|
||||||
|
maxlength="20"
|
||||||
|
/>
|
||||||
|
<button class="search-btn" :disabled="searchLoading" @click="onSearchUser">
|
||||||
|
{{ searchLoading ? '查询中' : '查找' }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 搜索错误 -->
|
||||||
|
<view v-if="searchError !== ''" class="hint-box hint-box-err">
|
||||||
|
<text class="hint-text-err">{{ searchError }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 找到的用户卡片 -->
|
||||||
|
<view v-if="foundUser != null" class="user-card">
|
||||||
|
<image class="user-avatar" :src="foundUser.avatarUrl" mode="aspectFill" />
|
||||||
|
<view class="user-info">
|
||||||
|
<text class="user-name">{{ foundUser.username }}</text>
|
||||||
|
<text class="user-phone">{{ foundUser.phone }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="user-ok">✓ 已选择</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="hint-box">
|
||||||
|
<text class="hint-text">※ 配送员须通过已存在的用户账号关联，如账号不存在请先在"用户管理"中创建</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">基本信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-grid">
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label"><text class="required-star">*</text> 真实姓名</text>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
:value="formRealName"
|
||||||
|
@input="onRealNameInput"
|
||||||
|
placeholder="请输入真实姓名"
|
||||||
|
maxlength="100"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 证件信息 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">证件信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-grid">
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label"><text class="required-star">*</text> 身份证号</text>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
:value="formIdCard"
|
||||||
|
@input="onIdCardInput"
|
||||||
|
placeholder="请输入身份证号"
|
||||||
|
maxlength="32"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label">驾驶证号</text>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
:value="formDriverLicense"
|
||||||
|
@input="onDriverLicenseInput"
|
||||||
|
placeholder="请输入驾驶证号（选填）"
|
||||||
|
maxlength="50"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 车辆信息 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">车辆信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-grid">
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label">车辆类型</text>
|
||||||
|
<picker
|
||||||
|
class="form-picker"
|
||||||
|
:value="formVehicleType - 1"
|
||||||
|
:range="vehicleTypeLabels"
|
||||||
|
@change="onVehicleTypeChange"
|
||||||
|
>
|
||||||
|
<view class="picker-display">
|
||||||
|
<text class="picker-text">{{ vehicleTypeLabels[formVehicleType - 1] ?? '选择类型' }}</text>
|
||||||
|
<text class="picker-arrow">▾</text>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label">车牌号码</text>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
:value="formVehicleNumber"
|
||||||
|
@input="onVehicleNumberInput"
|
||||||
|
placeholder="请输入车牌号（选填）"
|
||||||
|
maxlength="20"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="form-row form-row-full">
|
||||||
|
<text class="form-label">服务区域</text>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
:value="formServiceAreas"
|
||||||
|
@input="onServiceAreasInput"
|
||||||
|
placeholder="多个区域用逗号分隔，如：朝阳区,海淀区"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 状态设置 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">状态设置</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-grid">
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label">账号状态</text>
|
||||||
|
<picker
|
||||||
|
class="form-picker"
|
||||||
|
:value="formStatus - 1"
|
||||||
|
:range="statusLabels"
|
||||||
|
@change="onStatusChange"
|
||||||
|
>
|
||||||
|
<view class="picker-display">
|
||||||
|
<text class="picker-text">{{ statusLabels[formStatus - 1] ?? '选择状态' }}</text>
|
||||||
|
<text class="picker-arrow">▾</text>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label">接单状态</text>
|
||||||
|
<picker
|
||||||
|
class="form-picker"
|
||||||
|
:value="formWorkStatus - 1"
|
||||||
|
:range="workStatusLabels"
|
||||||
|
@change="onWorkStatusChange"
|
||||||
|
>
|
||||||
|
<view class="picker-display">
|
||||||
|
<text class="picker-text">{{ workStatusLabels[formWorkStatus - 1] ?? '选择状态' }}</text>
|
||||||
|
<text class="picker-arrow">▾</text>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 保存错误提示 -->
|
||||||
|
<view v-if="saveError !== ''" class="save-error-box">
|
||||||
|
<text class="save-error-text">{{ saveError }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="drawer-footer">
|
||||||
|
<button class="btn btn-cancel" :disabled="saving" @click="close">取消</button>
|
||||||
|
<button class="btn btn-save" :disabled="saving" @click="onSave">
|
||||||
|
{{ saving ? '提交中...' : '确定' }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="uts">
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
import supa from '@/components/supadb/aksupainstance.uts'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: { type: Boolean, default: false }
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:visible', 'saved'])
|
||||||
|
|
||||||
|
// ========== 抽屉动画 ==========
|
||||||
|
const isClosing = ref(false)
|
||||||
|
|
||||||
|
// ========== 搜索用户状态 ==========
|
||||||
|
const searchPhone = ref('')
|
||||||
|
const searchLoading = ref(false)
|
||||||
|
const searchError = ref('')
|
||||||
|
|
||||||
|
type FoundUser = {
|
||||||
|
id: string
|
||||||
|
username: string
|
||||||
|
phone: string
|
||||||
|
avatarUrl: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const foundUser = ref<FoundUser | null>(null)
|
||||||
|
|
||||||
|
// ========== 表单状态 ==========
|
||||||
|
const saving = ref(false)
|
||||||
|
const saveError = ref('')
|
||||||
|
|
||||||
|
// ========== Picker 选项 ==========
|
||||||
|
const vehicleTypeLabels = ['电动车', '摩托车', '汽车']
|
||||||
|
const statusLabels = ['正常', '暂停', '离职']
|
||||||
|
const workStatusLabels = ['在线', '忙碌', '离线']
|
||||||
|
|
||||||
|
// ========== 表单字段 ==========
|
||||||
|
const formRealName = ref('')
|
||||||
|
const formIdCard = ref('')
|
||||||
|
const formDriverLicense = ref('')
|
||||||
|
const formVehicleType = ref(1)
|
||||||
|
const formVehicleNumber = ref('')
|
||||||
|
const formServiceAreas = ref('')
|
||||||
|
const formWorkStatus = ref(1)
|
||||||
|
const formStatus = ref(1)
|
||||||
|
|
||||||
|
// ========== input/change 事件处理方法 ==========
|
||||||
|
// 注意：在 uni-app-x 模板内，ref 会被自动解包为原始值，
|
||||||
|
// 必须在 script 方法中修改 .value，不能在模板内联函数里操作
|
||||||
|
function onSearchPhoneInput(e: any) {
|
||||||
|
searchPhone.value = e.detail.value as string
|
||||||
|
foundUser.value = null
|
||||||
|
searchError.value = ''
|
||||||
|
}
|
||||||
|
function onRealNameInput(e: any) { formRealName.value = e.detail.value as string }
|
||||||
|
function onIdCardInput(e: any) { formIdCard.value = e.detail.value as string }
|
||||||
|
function onDriverLicenseInput(e: any) { formDriverLicense.value = e.detail.value as string }
|
||||||
|
function onVehicleTypeChange(e: any) { formVehicleType.value = Number(e.detail.value) + 1 }
|
||||||
|
function onVehicleNumberInput(e: any) { formVehicleNumber.value = e.detail.value as string }
|
||||||
|
function onServiceAreasInput(e: any) { formServiceAreas.value = e.detail.value as string }
|
||||||
|
function onStatusChange(e: any) { formStatus.value = Number(e.detail.value) + 1 }
|
||||||
|
function onWorkStatusChange(e: any) { formWorkStatus.value = Number(e.detail.value) + 1 }
|
||||||
|
|
||||||
|
// ========== 服务区域文本转数组 ==========
|
||||||
|
function textToAreas(text: string): string[] {
|
||||||
|
if (text.trim() === '') return []
|
||||||
|
return text.split(',').map((s: string) => s.trim()).filter((s: string) => s !== '')
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 重置表单 ==========
|
||||||
|
function resetForm() {
|
||||||
|
searchPhone.value = ''
|
||||||
|
searchError.value = ''
|
||||||
|
foundUser.value = null
|
||||||
|
formRealName.value = ''
|
||||||
|
formIdCard.value = ''
|
||||||
|
formDriverLicense.value = ''
|
||||||
|
formVehicleType.value = 1
|
||||||
|
formVehicleNumber.value = ''
|
||||||
|
formServiceAreas.value = ''
|
||||||
|
formWorkStatus.value = 1
|
||||||
|
formStatus.value = 1
|
||||||
|
saveError.value = ''
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 搜索用户 ==========
|
||||||
|
const onSearchUser = async () => {
|
||||||
|
const ph = searchPhone.value.trim()
|
||||||
|
if (ph === '') {
|
||||||
|
searchError.value = '请输入手机号'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
searchLoading.value = true
|
||||||
|
searchError.value = ''
|
||||||
|
foundUser.value = null
|
||||||
|
try {
|
||||||
|
const res = await supa.select(
|
||||||
|
'ak_users',
|
||||||
|
`phone=eq.${ph}`,
|
||||||
|
{
|
||||||
|
columns: 'id,username,phone,avatar_url',
|
||||||
|
limit: 1
|
||||||
|
}
|
||||||
|
)
|
||||||
|
if (res.status >= 200 && res.status < 300 && res.data != null) {
|
||||||
|
const rows = res.data as UTSJSONObject[]
|
||||||
|
if (rows.length > 0) {
|
||||||
|
const u = rows[0]
|
||||||
|
const avatarUrl = u.getString('avatar_url') ?? ''
|
||||||
|
foundUser.value = {
|
||||||
|
id: u.getString('id') ?? '',
|
||||||
|
username: u.getString('username') ?? '—',
|
||||||
|
phone: u.getString('phone') ?? ph,
|
||||||
|
avatarUrl: avatarUrl !== '' ? avatarUrl : '/static/logo.png'
|
||||||
|
} as FoundUser
|
||||||
|
} else {
|
||||||
|
searchError.value = '未找到该手机号对应的用户，请先前往"用户管理"创建账号'
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
searchError.value = '查询失败，请重试'
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
searchError.value = '请求异常，请稍后重试'
|
||||||
|
} finally {
|
||||||
|
searchLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 保存 ==========
|
||||||
|
const onSave = async () => {
|
||||||
|
if (saving.value) return
|
||||||
|
saveError.value = ''
|
||||||
|
|
||||||
|
if (foundUser.value == null) {
|
||||||
|
saveError.value = '请先通过手机号查找并选择关联的用户账号'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const name = formRealName.value.trim()
|
||||||
|
if (name === '') {
|
||||||
|
saveError.value = '真实姓名不能为空'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const idCard = formIdCard.value.trim()
|
||||||
|
if (idCard === '') {
|
||||||
|
saveError.value = '身份证号不能为空'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
saving.value = true
|
||||||
|
try {
|
||||||
|
const areas = textToAreas(formServiceAreas.value)
|
||||||
|
const drvLic = formDriverLicense.value.trim()
|
||||||
|
const vehNum = formVehicleNumber.value.trim()
|
||||||
|
|
||||||
|
// created_at / updated_at 由数据库 DEFAULT NOW() 自动填充，无需手动传入
|
||||||
|
const payload = {
|
||||||
|
user_id: foundUser.value!!.id,
|
||||||
|
real_name: name,
|
||||||
|
id_card: idCard,
|
||||||
|
driver_license: drvLic !== '' ? drvLic : null,
|
||||||
|
vehicle_type: formVehicleType.value,
|
||||||
|
vehicle_number: vehNum !== '' ? vehNum : null,
|
||||||
|
service_areas: areas as any,
|
||||||
|
work_status: formWorkStatus.value,
|
||||||
|
status: formStatus.value
|
||||||
|
} as UTSJSONObject
|
||||||
|
|
||||||
|
const res = await supa.from('ml_delivery_drivers').insert(payload).execute()
|
||||||
|
|
||||||
|
if (res.status >= 200 && res.status < 300) {
|
||||||
|
uni.showToast({ title: '添加成功', icon: 'success' })
|
||||||
|
emit('saved')
|
||||||
|
close()
|
||||||
|
} else {
|
||||||
|
// 常见失败原因：该用户已注册为配送员（user_id UNIQUE 约束）
|
||||||
|
if (res.status === 409) {
|
||||||
|
saveError.value = '添加失败：该用户已注册为配送员，不能重复添加'
|
||||||
|
} else {
|
||||||
|
saveError.value = '添加失败（' + String(res.status) + '），请检查输入或权限配置'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
saveError.value = '请求异常，请稍后重试'
|
||||||
|
} finally {
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 关闭 ==========
|
||||||
|
const close = () => {
|
||||||
|
if (isClosing.value) return
|
||||||
|
isClosing.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
isClosing.value = false
|
||||||
|
emit('update:visible', false)
|
||||||
|
}, 280)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 监听打开，重置表单 ==========
|
||||||
|
watch(() => props.visible, (newVal: boolean) => {
|
||||||
|
if (newVal) {
|
||||||
|
isClosing.value = false
|
||||||
|
resetForm()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.drawer-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.45);
|
||||||
|
z-index: 2000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
animation: maskFadeIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-mask.closing {
|
||||||
|
animation: maskFadeOut 0.28s ease-in forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-container {
|
||||||
|
width: 50%;
|
||||||
|
min-width: 360px;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
animation: slideIn 0.32s cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-container.closing {
|
||||||
|
animation: slideOut 0.28s cubic-bezier(0.755, 0.05, 0.855, 0.06) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { transform: translateX(100%); }
|
||||||
|
to { transform: translateX(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideOut {
|
||||||
|
from { transform: translateX(0); }
|
||||||
|
to { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes maskFadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes maskFadeOut {
|
||||||
|
from { opacity: 1; }
|
||||||
|
to { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 头部 ---- */
|
||||||
|
.drawer-header {
|
||||||
|
height: 56px;
|
||||||
|
padding: 0 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 内容区 ---- */
|
||||||
|
.drawer-body {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #f5f7f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-content {
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 信息卡片 ---- */
|
||||||
|
.section-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 16px 24px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-bar {
|
||||||
|
width: 3px;
|
||||||
|
height: 14px;
|
||||||
|
background-color: #1890ff;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 表单行 ---- */
|
||||||
|
.form-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row-full {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #595959;
|
||||||
|
width: 72px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
line-height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required-star {
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 输入框 ---- */
|
||||||
|
.form-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
padding: 0 10px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #262626;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 搜索按钮 ---- */
|
||||||
|
.search-btn {
|
||||||
|
height: 34px;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 0 14px;
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
color: #1890ff;
|
||||||
|
background-color: #fff;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-btn[disabled] {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 找到的用户卡片 ---- */
|
||||||
|
.user-card {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
background-color: #f6ffed;
|
||||||
|
border: 1px solid #b7eb8f;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-phone {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-ok {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #52c41a;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Picker ---- */
|
||||||
|
.form-picker {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-display {
|
||||||
|
height: 34px;
|
||||||
|
padding: 0 10px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-arrow {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #bfbfbf;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 提示框 ---- */
|
||||||
|
.hint-box {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-left: 3px solid #91caff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint-box-err {
|
||||||
|
background-color: #fff2f0;
|
||||||
|
border-left-color: #ff4d4f;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1677ff;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint-text-err {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 保存错误 ---- */
|
||||||
|
.save-error-box {
|
||||||
|
padding: 10px 14px;
|
||||||
|
background-color: #fff2f0;
|
||||||
|
border: 1px solid #ffccc7;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-error-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 底部按钮 ---- */
|
||||||
|
.drawer-footer {
|
||||||
|
height: 64px;
|
||||||
|
padding: 0 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
background-color: #fff;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 34px;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 0 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cancel {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #595959;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-save {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-save[disabled] {
|
||||||
|
background-color: #91caff;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cancel[disabled] {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,620 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="visible" class="drawer-mask" :class="{ closing: isClosing }" @click="close">
|
||||||
|
<view class="drawer-container" :class="{ closing: isClosing }" @click.stop>
|
||||||
|
|
||||||
|
<!-- 头部 -->
|
||||||
|
<view class="drawer-header">
|
||||||
|
<text class="drawer-title">配送员详情</text>
|
||||||
|
<view class="close-btn" @click="close">
|
||||||
|
<text class="close-icon">×</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 内容 -->
|
||||||
|
<scroll-view class="drawer-body" scroll-y>
|
||||||
|
|
||||||
|
<!-- 加载中 -->
|
||||||
|
<view v-if="detailLoading" class="drawer-center">
|
||||||
|
<text class="tip-text">加载中...</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载失败 -->
|
||||||
|
<view v-else-if="detailError !== ''" class="drawer-center">
|
||||||
|
<text class="tip-text-err">{{ detailError }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 内容区域 -->
|
||||||
|
<view v-else-if="detail != null" class="detail-content">
|
||||||
|
|
||||||
|
<!-- 顶部头像卡片 -->
|
||||||
|
<view class="avatar-card">
|
||||||
|
<image class="detail-avatar" :src="detail.avatarUrl" mode="aspectFill" />
|
||||||
|
<view class="avatar-info">
|
||||||
|
<text class="detail-name">{{ detail.realName }}</text>
|
||||||
|
<view class="badge-row">
|
||||||
|
<text class="badge" :class="detail.statusCls">{{ detail.statusLabel }}</text>
|
||||||
|
<text class="badge badge-work" :class="detail.workStatusCls">{{ detail.workStatusLabel }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">基本信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-grid">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">真实姓名：</text>
|
||||||
|
<text class="info-value">{{ detail.realName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">手机号码：</text>
|
||||||
|
<text class="info-value">{{ detail.phone }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">注册账号：</text>
|
||||||
|
<text class="info-value">{{ detail.username }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">ID：</text>
|
||||||
|
<text class="info-value info-id">{{ detail.id }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 证件信息 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">证件信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-grid">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">身份证号：</text>
|
||||||
|
<text class="info-value">{{ detail.idCardMasked }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">驾驶证号：</text>
|
||||||
|
<text class="info-value">{{ detail.driverLicense }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 车辆信息 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">车辆信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-grid">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">车辆类型：</text>
|
||||||
|
<text class="info-value">{{ detail.vehicleTypeLabel }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">车牌号码：</text>
|
||||||
|
<text class="info-value">{{ detail.vehicleNumber }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item full">
|
||||||
|
<text class="info-label">服务区域：</text>
|
||||||
|
<text class="info-value">{{ detail.serviceAreaStr }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 绩效数据 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">绩效数据</text>
|
||||||
|
</view>
|
||||||
|
<view class="kpi-row">
|
||||||
|
<view class="kpi-item">
|
||||||
|
<text class="kpi-value">{{ detail.orderCount }}</text>
|
||||||
|
<text class="kpi-label">接单总数</text>
|
||||||
|
</view>
|
||||||
|
<view class="kpi-item">
|
||||||
|
<text class="kpi-value">{{ detail.ratingAvg }}</text>
|
||||||
|
<text class="kpi-label">平均评分</text>
|
||||||
|
</view>
|
||||||
|
<view class="kpi-item">
|
||||||
|
<text class="kpi-value">{{ detail.ratingCount }}</text>
|
||||||
|
<text class="kpi-label">评价次数</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 时间信息 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">时间信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-grid">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">注册时间：</text>
|
||||||
|
<text class="info-value">{{ detail.createdAt }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">更新时间：</text>
|
||||||
|
<text class="info-value">{{ detail.updatedAt }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="uts">
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
import supa from '@/components/supadb/aksupainstance.uts'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: { type: Boolean, default: false },
|
||||||
|
driverId: { type: String, default: '' }
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:visible'])
|
||||||
|
|
||||||
|
const isClosing = ref(false)
|
||||||
|
const detailLoading = ref(false)
|
||||||
|
const detailError = ref('')
|
||||||
|
|
||||||
|
type DriverDetail = {
|
||||||
|
id: string
|
||||||
|
realName: string
|
||||||
|
phone: string
|
||||||
|
username: string
|
||||||
|
avatarUrl: string
|
||||||
|
idCardMasked: string
|
||||||
|
driverLicense: string
|
||||||
|
vehicleTypeLabel: string
|
||||||
|
vehicleNumber: string
|
||||||
|
serviceAreaStr: string
|
||||||
|
statusLabel: string
|
||||||
|
statusCls: string
|
||||||
|
workStatusLabel: string
|
||||||
|
workStatusCls: string
|
||||||
|
orderCount: string
|
||||||
|
ratingAvg: string
|
||||||
|
ratingCount: string
|
||||||
|
createdAt: string
|
||||||
|
updatedAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const detail = ref<DriverDetail | null>(null)
|
||||||
|
|
||||||
|
// ========== 字段格式化 ==========
|
||||||
|
function maskIdCard(v: string): string {
|
||||||
|
if (v === '' || v == null) return '—'
|
||||||
|
if (v.length <= 8) return v
|
||||||
|
const head = v.substring(0, 4)
|
||||||
|
const tail = v.substring(v.length - 4)
|
||||||
|
return head + '******' + tail
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(ts: string): string {
|
||||||
|
if (ts === '' || ts == null) return '—'
|
||||||
|
const tIdx = ts.indexOf('T')
|
||||||
|
if (tIdx > -1) {
|
||||||
|
const date = ts.substring(0, tIdx)
|
||||||
|
const timeFull = ts.substring(tIdx + 1)
|
||||||
|
const dotIdx = timeFull.indexOf('.')
|
||||||
|
const time = dotIdx > -1 ? timeFull.substring(0, dotIdx) : timeFull.substring(0, 8)
|
||||||
|
return date + ' ' + time
|
||||||
|
}
|
||||||
|
return ts
|
||||||
|
}
|
||||||
|
|
||||||
|
function vehicleTypeLabel(vt: number | null): string {
|
||||||
|
if (vt === 1) return '电动车'
|
||||||
|
if (vt === 2) return '摩托车'
|
||||||
|
if (vt === 3) return '汽车'
|
||||||
|
return '—'
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusLabel(s: number | null): string {
|
||||||
|
if (s === 1) return '正常'
|
||||||
|
if (s === 2) return '暂停'
|
||||||
|
if (s === 3) return '离职'
|
||||||
|
return '—'
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusCls(s: number | null): string {
|
||||||
|
if (s === 1) return 'badge-status-ok'
|
||||||
|
if (s === 2) return 'badge-status-warn'
|
||||||
|
if (s === 3) return 'badge-status-off'
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function workStatusLabel(ws: number | null): string {
|
||||||
|
if (ws === 1) return '在线'
|
||||||
|
if (ws === 2) return '忙碌'
|
||||||
|
if (ws === 3) return '离线'
|
||||||
|
return '—'
|
||||||
|
}
|
||||||
|
|
||||||
|
function workStatusCls(ws: number | null): string {
|
||||||
|
if (ws === 1) return 'badge-work-online'
|
||||||
|
if (ws === 2) return 'badge-work-busy'
|
||||||
|
if (ws === 3) return 'badge-work-offline'
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseServiceAreas(raw: any): string {
|
||||||
|
if (raw == null) return '—'
|
||||||
|
if (typeof raw === 'string') {
|
||||||
|
if (raw === '' || raw === '[]') return '—'
|
||||||
|
// 尝试解析 JSON 字符串
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(raw) as any
|
||||||
|
if (Array.isArray(parsed) && parsed.length > 0) {
|
||||||
|
return (parsed as string[]).join('、')
|
||||||
|
}
|
||||||
|
} catch (_) {
|
||||||
|
return raw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (Array.isArray(raw)) {
|
||||||
|
const arr = raw as string[]
|
||||||
|
return arr.length > 0 ? arr.join('、') : '—'
|
||||||
|
}
|
||||||
|
return '—'
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 数据拉取 ==========
|
||||||
|
const fetchDetail = async (id: string) => {
|
||||||
|
if (id === '' || id == null) return
|
||||||
|
detailLoading.value = true
|
||||||
|
detailError.value = ''
|
||||||
|
detail.value = null
|
||||||
|
try {
|
||||||
|
const res = await supa.select(
|
||||||
|
'ml_delivery_drivers',
|
||||||
|
`id=eq.${id}`,
|
||||||
|
{
|
||||||
|
columns: 'id,real_name,id_card,driver_license,vehicle_type,vehicle_number,service_areas,work_status,rating_avg,rating_count,order_count,status,created_at,updated_at,user_info:ak_users!user_id(username,phone,avatar_url)',
|
||||||
|
limit: 1
|
||||||
|
}
|
||||||
|
)
|
||||||
|
if (res.status >= 200 && res.status < 300 && res.data != null) {
|
||||||
|
const rows = res.data as UTSJSONObject[]
|
||||||
|
if (rows.length === 0) {
|
||||||
|
detailError.value = '未找到配送员数据'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const row = rows[0]
|
||||||
|
const userInfo = row.getJSON('user_info')
|
||||||
|
const s = row.getNumber('status')
|
||||||
|
const ws = row.getNumber('work_status')
|
||||||
|
const vt = row.getNumber('vehicle_type')
|
||||||
|
detail.value = {
|
||||||
|
id: row.getString('id') ?? '—',
|
||||||
|
realName: row.getString('real_name') ?? '—',
|
||||||
|
phone: userInfo?.getString('phone') ?? '—',
|
||||||
|
username: userInfo?.getString('username') ?? '—',
|
||||||
|
avatarUrl: (() => {
|
||||||
|
const url = userInfo?.getString('avatar_url') ?? ''
|
||||||
|
return url !== '' ? url : '/static/logo.png'
|
||||||
|
})(),
|
||||||
|
idCardMasked: maskIdCard(row.getString('id_card') ?? ''),
|
||||||
|
driverLicense: row.getString('driver_license') ?? '—',
|
||||||
|
vehicleTypeLabel: vehicleTypeLabel(vt),
|
||||||
|
vehicleNumber: row.getString('vehicle_number') ?? '—',
|
||||||
|
serviceAreaStr: parseServiceAreas(row['service_areas']),
|
||||||
|
statusLabel: statusLabel(s),
|
||||||
|
statusCls: statusCls(s),
|
||||||
|
workStatusLabel: workStatusLabel(ws),
|
||||||
|
workStatusCls: workStatusCls(ws),
|
||||||
|
orderCount: String(row.getNumber('order_count') ?? 0),
|
||||||
|
ratingAvg: (() => {
|
||||||
|
const v = row.getNumber('rating_avg') ?? 0
|
||||||
|
return v.toFixed(2)
|
||||||
|
})(),
|
||||||
|
ratingCount: String(row.getNumber('rating_count') ?? 0),
|
||||||
|
createdAt: formatTime(row.getString('created_at') ?? ''),
|
||||||
|
updatedAt: formatTime(row.getString('updated_at') ?? '')
|
||||||
|
} as DriverDetail
|
||||||
|
} else {
|
||||||
|
detailError.value = '加载详情失败，请重试'
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
detailError.value = '请求异常，请稍后重试'
|
||||||
|
} finally {
|
||||||
|
detailLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
isClosing.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
isClosing.value = false
|
||||||
|
emit('update:visible', false)
|
||||||
|
}, 280)
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(() => props.visible, (newVal: boolean) => {
|
||||||
|
if (newVal) {
|
||||||
|
isClosing.value = false
|
||||||
|
detail.value = null
|
||||||
|
detailError.value = ''
|
||||||
|
fetchDetail(props.driverId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.drawer-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.45);
|
||||||
|
z-index: 2000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
animation: maskFadeIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-mask.closing {
|
||||||
|
animation: maskFadeOut 0.28s ease-in forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-container {
|
||||||
|
width: 50%;
|
||||||
|
min-width: 360px;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
animation: slideIn 0.32s cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-container.closing {
|
||||||
|
animation: slideOut 0.28s cubic-bezier(0.755, 0.05, 0.855, 0.06) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { transform: translateX(100%); }
|
||||||
|
to { transform: translateX(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideOut {
|
||||||
|
from { transform: translateX(0); }
|
||||||
|
to { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes maskFadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes maskFadeOut {
|
||||||
|
from { opacity: 1; }
|
||||||
|
to { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 头部 ---- */
|
||||||
|
.drawer-header {
|
||||||
|
height: 56px;
|
||||||
|
padding: 0 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Body ---- */
|
||||||
|
.drawer-body {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #f5f7f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-center {
|
||||||
|
padding: 60px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-text-err {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 内容区域 ---- */
|
||||||
|
.detail-content {
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 头像卡片 ---- */
|
||||||
|
.avatar-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 20px 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-avatar {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-status-ok { background-color: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||||
|
.badge-status-warn { background-color: #fffbe6; color: #faad14; border: 1px solid #ffe58f; }
|
||||||
|
.badge-status-off { background-color: #fff2f0; color: #ff4d4f; border: 1px solid #ffccc7; }
|
||||||
|
.badge-work-online { background-color: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; }
|
||||||
|
.badge-work-busy { background-color: #fffbe6; color: #fa8c16; border: 1px solid #ffd591; }
|
||||||
|
.badge-work-offline { background-color: #fafafa; color: #8c8c8c; border: 1px solid #d9d9d9; }
|
||||||
|
|
||||||
|
/* ---- 信息卡片 ---- */
|
||||||
|
.section-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 16px 24px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-bar {
|
||||||
|
width: 3px;
|
||||||
|
height: 14px;
|
||||||
|
background-color: #1890ff;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item.full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 76px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #262626;
|
||||||
|
flex: 1;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-id {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- KPI 行 ---- */
|
||||||
|
.kpi-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-item {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 16px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-value {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,633 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="visible" class="drawer-mask" :class="{ closing: isClosing }" @click="close">
|
||||||
|
<view class="drawer-container" :class="{ closing: isClosing }" @click.stop>
|
||||||
|
|
||||||
|
<!-- 头部 -->
|
||||||
|
<view class="drawer-header">
|
||||||
|
<text class="drawer-title">编辑配送员</text>
|
||||||
|
<view class="close-btn" @click="close">
|
||||||
|
<text class="close-icon">×</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 滚动内容区 -->
|
||||||
|
<scroll-view class="drawer-body" scroll-y>
|
||||||
|
|
||||||
|
<!-- 加载中 -->
|
||||||
|
<view v-if="formLoading" class="drawer-center">
|
||||||
|
<text class="tip-text">加载中...</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载失败 -->
|
||||||
|
<view v-else-if="loadError !== ''" class="drawer-center">
|
||||||
|
<text class="tip-text-err">{{ loadError }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 表单 -->
|
||||||
|
<view v-else class="form-content">
|
||||||
|
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">基本信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-grid">
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label"><text class="required-star">*</text> 真实姓名</text>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
:value="formRealName"
|
||||||
|
@input="onRealNameInput"
|
||||||
|
placeholder="请输入真实姓名"
|
||||||
|
maxlength="100"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label">驾驶证号</text>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
:value="formDriverLicense"
|
||||||
|
@input="onDriverLicenseInput"
|
||||||
|
placeholder="请输入驾驶证号（选填）"
|
||||||
|
maxlength="50"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hint-box">
|
||||||
|
<text class="hint-text">※ 手机号 / 注册账号属于用户账号信息，如需修改请前往"用户管理"</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 车辆信息 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">车辆信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-grid">
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label">车辆类型</text>
|
||||||
|
<picker
|
||||||
|
class="form-picker"
|
||||||
|
:value="formVehicleType - 1"
|
||||||
|
:range="vehicleTypeLabels"
|
||||||
|
@change="onVehicleTypeChange"
|
||||||
|
>
|
||||||
|
<view class="picker-display">
|
||||||
|
<text class="picker-text">{{ vehicleTypeLabels[formVehicleType - 1] ?? '选择类型' }}</text>
|
||||||
|
<text class="picker-arrow">▾</text>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label">车牌号码</text>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
:value="formVehicleNumber"
|
||||||
|
@input="onVehicleNumberInput"
|
||||||
|
placeholder="请输入车牌号（选填）"
|
||||||
|
maxlength="20"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="form-row form-row-full">
|
||||||
|
<text class="form-label">服务区域</text>
|
||||||
|
<input
|
||||||
|
class="form-input"
|
||||||
|
:value="formServiceAreas"
|
||||||
|
@input="onServiceAreasInput"
|
||||||
|
placeholder="多个区域用逗号分隔，如：朝阳区,海淀区"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 状态设置 -->
|
||||||
|
<view class="section-card">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="blue-bar"></view>
|
||||||
|
<text class="section-name">状态设置</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-grid">
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label">账号状态</text>
|
||||||
|
<picker
|
||||||
|
class="form-picker"
|
||||||
|
:value="formStatus - 1"
|
||||||
|
:range="statusLabels"
|
||||||
|
@change="onStatusChange"
|
||||||
|
>
|
||||||
|
<view class="picker-display">
|
||||||
|
<text class="picker-text">{{ statusLabels[formStatus - 1] ?? '选择状态' }}</text>
|
||||||
|
<text class="picker-arrow">▾</text>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
<view class="form-row">
|
||||||
|
<text class="form-label">接单状态</text>
|
||||||
|
<picker
|
||||||
|
class="form-picker"
|
||||||
|
:value="formWorkStatus - 1"
|
||||||
|
:range="workStatusLabels"
|
||||||
|
@change="onWorkStatusChange"
|
||||||
|
>
|
||||||
|
<view class="picker-display">
|
||||||
|
<text class="picker-text">{{ workStatusLabels[formWorkStatus - 1] ?? '选择状态' }}</text>
|
||||||
|
<text class="picker-arrow">▾</text>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 保存错误提示 -->
|
||||||
|
<view v-if="saveError !== ''" class="save-error-box">
|
||||||
|
<text class="save-error-text">{{ saveError }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 底部固定按钮栏 -->
|
||||||
|
<view v-if="!formLoading && loadError === ''" class="drawer-footer">
|
||||||
|
<button class="btn btn-cancel" :disabled="saving" @click="close">取消</button>
|
||||||
|
<button class="btn btn-save" :disabled="saving" @click="onSave">
|
||||||
|
{{ saving ? '保存中...' : '保存' }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="uts">
|
||||||
|
import { ref, watch } from 'vue'
|
||||||
|
import supa from '@/components/supadb/aksupainstance.uts'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: { type: Boolean, default: false },
|
||||||
|
driverId: { type: String, default: '' }
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:visible', 'saved'])
|
||||||
|
|
||||||
|
// ========== 抽屉动画状态 ==========
|
||||||
|
const isClosing = ref(false)
|
||||||
|
|
||||||
|
// ========== 表单加载状态 ==========
|
||||||
|
const formLoading = ref(false)
|
||||||
|
const loadError = ref('')
|
||||||
|
const saving = ref(false)
|
||||||
|
const saveError = ref('')
|
||||||
|
|
||||||
|
// ========== Picker 选项 ==========
|
||||||
|
const vehicleTypeLabels = ['电动车', '摩托车', '汽车']
|
||||||
|
const statusLabels = ['正常', '暂停', '离职']
|
||||||
|
const workStatusLabels = ['在线', '忙碌', '离线']
|
||||||
|
|
||||||
|
// ========== 表单字段（独立 ref，UTS 类型安全） ==========
|
||||||
|
const formRealName = ref('')
|
||||||
|
const formDriverLicense = ref('')
|
||||||
|
const formVehicleType = ref(1) // 1:电动车 2:摩托车 3:汽车
|
||||||
|
const formVehicleNumber = ref('')
|
||||||
|
const formServiceAreas = ref('') // 逗号分隔的服务区域文本
|
||||||
|
const formWorkStatus = ref(1) // 1:在线 2:忙碌 3:离线
|
||||||
|
const formStatus = ref(1) // 1:正常 2:暂停 3:离职
|
||||||
|
|
||||||
|
// ========== 服务区域 raw <-> 文本 转换 ==========
|
||||||
|
function areasToText(raw: any): string {
|
||||||
|
if (raw == null) return ''
|
||||||
|
if (typeof raw === 'string') {
|
||||||
|
if (raw === '' || raw === '[]') return ''
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(raw) as any
|
||||||
|
if (Array.isArray(parsed)) return (parsed as string[]).filter((s: string) => s !== '').join(',')
|
||||||
|
} catch (_) {
|
||||||
|
return raw
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (Array.isArray(raw)) {
|
||||||
|
return (raw as string[]).filter((s: string) => s !== '').join(',')
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function textToAreas(text: string): string[] {
|
||||||
|
if (text.trim() === '') return []
|
||||||
|
return text.split(',').map((s: string) => s.trim()).filter((s: string) => s !== '')
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 加载当前配送员数据到表单 ==========
|
||||||
|
const loadForm = async (id: string) => {
|
||||||
|
if (id === '' || id == null) return
|
||||||
|
formLoading.value = true
|
||||||
|
loadError.value = ''
|
||||||
|
saveError.value = ''
|
||||||
|
try {
|
||||||
|
const res = await supa.select(
|
||||||
|
'ml_delivery_drivers',
|
||||||
|
`id=eq.${id}`,
|
||||||
|
{
|
||||||
|
// 只查询可编辑字段，不取敏感经纬度、评分等只读统计字段
|
||||||
|
columns: 'id,real_name,driver_license,vehicle_type,vehicle_number,service_areas,work_status,status',
|
||||||
|
limit: 1
|
||||||
|
}
|
||||||
|
)
|
||||||
|
if (res.status >= 200 && res.status < 300 && res.data != null) {
|
||||||
|
const rows = res.data as UTSJSONObject[]
|
||||||
|
if (rows.length === 0) {
|
||||||
|
loadError.value = '未找到配送员数据'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const row = rows[0]
|
||||||
|
formRealName.value = row.getString('real_name') ?? ''
|
||||||
|
formDriverLicense.value = row.getString('driver_license') ?? ''
|
||||||
|
formVehicleType.value = row.getNumber('vehicle_type') ?? 1
|
||||||
|
formVehicleNumber.value = row.getString('vehicle_number') ?? ''
|
||||||
|
formServiceAreas.value = areasToText(row['service_areas'])
|
||||||
|
formWorkStatus.value = row.getNumber('work_status') ?? 1
|
||||||
|
formStatus.value = row.getNumber('status') ?? 1
|
||||||
|
} else {
|
||||||
|
loadError.value = '加载数据失败，请重试'
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
loadError.value = '请求异常，请稍后重试'
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 保存 ==========
|
||||||
|
const onSave = async () => {
|
||||||
|
if (saving.value) return
|
||||||
|
saveError.value = ''
|
||||||
|
|
||||||
|
// 校验必填
|
||||||
|
const name = formRealName.value.trim()
|
||||||
|
if (name === '') {
|
||||||
|
saveError.value = '真实姓名不能为空'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
saving.value = true
|
||||||
|
try {
|
||||||
|
const areas = textToAreas(formServiceAreas.value)
|
||||||
|
const drvLic = formDriverLicense.value.trim()
|
||||||
|
const vehNum = formVehicleNumber.value.trim()
|
||||||
|
|
||||||
|
// 构建更新 payload（service_areas 以 as any 绕过 UTSJSONObject 类型，确保传入 JSON array）
|
||||||
|
const payload = {
|
||||||
|
real_name: name,
|
||||||
|
driver_license: drvLic !== '' ? drvLic : null,
|
||||||
|
vehicle_type: formVehicleType.value,
|
||||||
|
vehicle_number: vehNum !== '' ? vehNum : null,
|
||||||
|
service_areas: areas as any,
|
||||||
|
work_status: formWorkStatus.value,
|
||||||
|
status: formStatus.value
|
||||||
|
} as UTSJSONObject
|
||||||
|
|
||||||
|
const res = await supa.from('ml_delivery_drivers')
|
||||||
|
.update(payload)
|
||||||
|
.eq('id', props.driverId)
|
||||||
|
.execute()
|
||||||
|
|
||||||
|
if (res.status >= 200 && res.status < 300) {
|
||||||
|
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||||
|
emit('saved') // 通知父组件刷新列表
|
||||||
|
close()
|
||||||
|
} else {
|
||||||
|
saveError.value = '保存失败（' + String(res.status) + '），请检查权限配置'
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
saveError.value = '请求异常，请稍后重试'
|
||||||
|
} finally {
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 关闭 ==========
|
||||||
|
const close = () => {
|
||||||
|
if (isClosing.value) return
|
||||||
|
isClosing.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
isClosing.value = false
|
||||||
|
emit('update:visible', false)
|
||||||
|
}, 280)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 监听打开 ==========
|
||||||
|
watch(() => props.visible, (newVal: boolean) => {
|
||||||
|
if (newVal) {
|
||||||
|
isClosing.value = false
|
||||||
|
saveError.value = ''
|
||||||
|
saving.value = false
|
||||||
|
loadForm(props.driverId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// ========== input/change 事件处理方法 ==========
|
||||||
|
// 注意：在 uni-app-x 模板内，ref 会被自动解包为原始值，
|
||||||
|
// 必须在 script 方法中修改 .value，不能在模板内联函数里操作
|
||||||
|
function onRealNameInput(e: any) { formRealName.value = e.detail.value as string }
|
||||||
|
function onDriverLicenseInput(e: any) { formDriverLicense.value = e.detail.value as string }
|
||||||
|
function onVehicleTypeChange(e: any) { formVehicleType.value = Number(e.detail.value) + 1 }
|
||||||
|
function onVehicleNumberInput(e: any) { formVehicleNumber.value = e.detail.value as string }
|
||||||
|
function onServiceAreasInput(e: any) { formServiceAreas.value = e.detail.value as string }
|
||||||
|
function onStatusChange(e: any) { formStatus.value = Number(e.detail.value) + 1 }
|
||||||
|
function onWorkStatusChange(e: any) { formWorkStatus.value = Number(e.detail.value) + 1 }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* ---- 遮罩 ---- */
|
||||||
|
.drawer-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.45);
|
||||||
|
z-index: 2000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
animation: maskFadeIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-mask.closing {
|
||||||
|
animation: maskFadeOut 0.28s ease-in forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 容器 ---- */
|
||||||
|
.drawer-container {
|
||||||
|
width: 50%;
|
||||||
|
min-width: 360px;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
animation: slideIn 0.32s cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-container.closing {
|
||||||
|
animation: slideOut 0.28s cubic-bezier(0.755, 0.05, 0.855, 0.06) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { transform: translateX(100%); }
|
||||||
|
to { transform: translateX(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideOut {
|
||||||
|
from { transform: translateX(0); }
|
||||||
|
to { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes maskFadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes maskFadeOut {
|
||||||
|
from { opacity: 1; }
|
||||||
|
to { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 头部 ---- */
|
||||||
|
.drawer-header {
|
||||||
|
height: 56px;
|
||||||
|
padding: 0 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 内容区 ---- */
|
||||||
|
.drawer-body {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #f5f7f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-center {
|
||||||
|
padding: 60px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-text-err {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 表单内容 ---- */
|
||||||
|
.form-content {
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 信息卡片 ---- */
|
||||||
|
.section-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 16px 24px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-bar {
|
||||||
|
width: 3px;
|
||||||
|
height: 14px;
|
||||||
|
background-color: #1890ff;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 表单行 ---- */
|
||||||
|
.form-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row-full {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #595959;
|
||||||
|
width: 72px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
line-height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required-star {
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 输入框 ---- */
|
||||||
|
.form-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
padding: 0 10px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #262626;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Picker ---- */
|
||||||
|
.form-picker {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-display {
|
||||||
|
height: 34px;
|
||||||
|
padding: 0 10px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-arrow {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #bfbfbf;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 提示框 ---- */
|
||||||
|
.hint-box {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-left: 3px solid #91caff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1677ff;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 保存错误 ---- */
|
||||||
|
.save-error-box {
|
||||||
|
padding: 10px 14px;
|
||||||
|
background-color: #fff2f0;
|
||||||
|
border: 1px solid #ffccc7;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-error-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- 底部按钮 ---- */
|
||||||
|
.drawer-footer {
|
||||||
|
height: 64px;
|
||||||
|
padding: 0 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
background-color: #fff;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 34px;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 0 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cancel {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #595959;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-save {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-save[disabled] {
|
||||||
|
background-color: #91caff;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cancel[disabled] {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -16,9 +16,21 @@
|
|||||||
<view class="th" style="flex: 3;">添加时间</view>
|
<view class="th" style="flex: 3;">添加时间</view>
|
||||||
<view class="th" style="flex: 2;">操作</view>
|
<view class="th" style="flex: 2;">操作</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 加载中 -->
|
||||||
|
<view v-if="loading" class="table-loading">
|
||||||
|
<text class="table-tip">加载中...</text>
|
||||||
|
</view>
|
||||||
|
<!-- 错误提示 -->
|
||||||
|
<view v-else-if="fetchError !== ''" class="table-error">
|
||||||
|
<text class="table-tip-err">{{ fetchError }}</text>
|
||||||
|
</view>
|
||||||
|
<!-- 空数据 -->
|
||||||
|
<view v-else-if="pagedList.length === 0" class="table-empty">
|
||||||
|
<text class="table-tip">暂无配送员数据</text>
|
||||||
|
</view>
|
||||||
<view class="table-body">
|
<view class="table-body">
|
||||||
<view v-for="item in pagedList" :key="item.id" class="tr">
|
<view v-for="item in pagedList" :key="item.id" class="tr">
|
||||||
<view class="td" style="flex: 1;">{{ item.id }}</view>
|
<view class="td" style="flex: 1;">{{ item.id.length > 8 ? item.id.substring(0, 8) : item.id }}</view>
|
||||||
<view class="td" style="flex: 1.5;">
|
<view class="td" style="flex: 1.5;">
|
||||||
<image class="avatar" :src="item.avatar" mode="aspectFill" />
|
<image class="avatar" :src="item.avatar" mode="aspectFill" />
|
||||||
</view>
|
</view>
|
||||||
@@ -29,6 +41,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="td" style="flex: 3;">{{ item.addTime }}</view>
|
<view class="td" style="flex: 3;">{{ item.addTime }}</view>
|
||||||
<view class="td" style="flex: 2;">
|
<view class="td" style="flex: 2;">
|
||||||
|
<text class="action-btn" @click="onDetail(item)">详情</text>
|
||||||
<text class="action-btn" @click="onEdit(item)">编辑</text>
|
<text class="action-btn" @click="onEdit(item)">编辑</text>
|
||||||
<text class="action-btn-del" @click="onDel(item)">删除</text>
|
<text class="action-btn-del" @click="onDel(item)">删除</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -53,14 +66,40 @@
|
|||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 配送员详情抽屉 -->
|
||||||
|
<DriverDetailDrawer
|
||||||
|
:visible="drawerVisible"
|
||||||
|
:driverId="selectedDriverId"
|
||||||
|
@update:visible="(v: boolean) => { drawerVisible = v }"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 配送员编辑抽屉 -->
|
||||||
|
<DriverEditDrawer
|
||||||
|
:visible="editDrawerVisible"
|
||||||
|
:driverId="selectedEditId"
|
||||||
|
@update:visible="(v: boolean) => { editDrawerVisible = v }"
|
||||||
|
@saved="fetchDrivers(currentPage, pageSize)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 添加配送员抽屉 -->
|
||||||
|
<DriverAddDrawer
|
||||||
|
:visible="addDrawerVisible"
|
||||||
|
@update:visible="(v: boolean) => { addDrawerVisible = v }"
|
||||||
|
@saved="onAddSaved"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="uts">
|
<script setup lang="uts">
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed, onMounted } from 'vue'
|
||||||
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
||||||
|
import supa from '@/components/supadb/aksupainstance.uts'
|
||||||
|
import DriverDetailDrawer from './components/DriverDetailDrawer.uvue'
|
||||||
|
import DriverEditDrawer from './components/DriverEditDrawer.uvue'
|
||||||
|
import DriverAddDrawer from './components/DriverAddDrawer.uvue'
|
||||||
|
|
||||||
type CourierItem = {
|
type DriverRow = {
|
||||||
id: number
|
id: string
|
||||||
avatar: string
|
avatar: string
|
||||||
name: string
|
name: string
|
||||||
phone: string
|
phone: string
|
||||||
@@ -68,31 +107,121 @@ type CourierItem = {
|
|||||||
addTime: string
|
addTime: string
|
||||||
}
|
}
|
||||||
|
|
||||||
// ========== MOCK DATA START ==========
|
// ========== 数据状态 ==========
|
||||||
// TODO: 接真实接口时替换此处 courierList 为 fetchCourierList() 调用
|
const driverList = ref<DriverRow[]>([])
|
||||||
const courierList = ref<CourierItem[]>([
|
const loading = ref(false)
|
||||||
{ id: 120, avatar: '/static/logo.png', name: '王明', phone: '13812345678', isshow: true, addTime: '2025-06-29 21:45:19' },
|
const fetchError = ref('')
|
||||||
{ id: 119, avatar: '/static/logo.png', name: '李红', phone: '13987654321', isshow: true, addTime: '2025-06-28 18:40:26' },
|
|
||||||
{ id: 118, avatar: '/static/logo.png', name: '张伟', phone: '15800001111', isshow: true, addTime: '2025-06-27 09:00:00' },
|
// ========== 详情抽屉 ==========
|
||||||
{ id: 117, avatar: '/static/logo.png', name: '刘洋', phone: '15900002222', isshow: false, addTime: '2025-06-26 15:14:40' },
|
const drawerVisible = ref(false)
|
||||||
{ id: 116, avatar: '/static/logo.png', name: '陈娟', phone: '13600003333', isshow: true, addTime: '2025-06-25 10:00:00' },
|
const selectedDriverId = ref('')
|
||||||
{ id: 115, avatar: '/static/logo.png', name: '杨帆', phone: '13700004444', isshow: true, addTime: '2025-06-24 08:30:00' },
|
|
||||||
{ id: 114, avatar: '/static/logo.png', name: '赵雷', phone: '18900005555', isshow: false, addTime: '2025-06-23 11:20:00' },
|
// ========== 编辑抽屉 ==========
|
||||||
{ id: 113, avatar: '/static/logo.png', name: '周芳', phone: '13500006666', isshow: true, addTime: '2025-06-22 14:50:00' },
|
const editDrawerVisible = ref(false)
|
||||||
{ id: 112, avatar: '/static/logo.png', name: '吴勇', phone: '15600007777', isshow: true, addTime: '2025-06-21 16:10:00' },
|
const selectedEditId = ref('')
|
||||||
{ id: 111, avatar: '/static/logo.png', name: '郑山', phone: '18700008888', isshow: true, addTime: '2025-06-20 09:40:00' },
|
|
||||||
{ id: 110, avatar: '/static/logo.png', name: '孙海', phone: '13900009999', isshow: false, addTime: '2025-06-19 13:00:00' },
|
// ========== 添加抽屉 ==========
|
||||||
{ id: 109, avatar: '/static/logo.png', name: '马琳', phone: '15300010101', isshow: true, addTime: '2025-06-18 07:50:00' },
|
const addDrawerVisible = ref(false)
|
||||||
{ id: 108, avatar: '/static/logo.png', name: '胡兴', phone: '18600011111', isshow: true, addTime: '2025-06-17 12:00:00' },
|
|
||||||
{ id: 107, avatar: '/static/logo.png', name: '高雪', phone: '13200012222', isshow: true, addTime: '2025-06-16 15:30:00' },
|
// ========== 字段映射 ==========
|
||||||
{ id: 106, avatar: '/static/logo.png', name: 'cheshi', phone: '18943652356', isshow: true, addTime: '2025-06-15 21:45:19' },
|
function formatTime(ts: string): string {
|
||||||
{ id: 105, avatar: '/static/logo.png', name: 'dl', phone: '15648569914', isshow: true, addTime: '2025-06-14 18:40:26' },
|
if (ts === '' || ts == null) return '—'
|
||||||
{ id: 104, avatar: '/static/logo.png', name: '小牛马', phone: '13548652258', isshow: true, addTime: '2025-06-13 15:14:40' },
|
const tIdx = ts.indexOf('T')
|
||||||
{ id: 103, avatar: '/static/logo.png', name: '小李', phone: '13200013333', isshow: false, addTime: '2025-06-12 10:00:00' },
|
if (tIdx > -1) {
|
||||||
{ id: 102, avatar: '/static/logo.png', name: '小刘', phone: '15000014444', isshow: true, addTime: '2025-06-11 09:00:00' },
|
const date = ts.substring(0, tIdx)
|
||||||
{ id: 101, avatar: '/static/logo.png', name: '小王', phone: '13300015555', isshow: true, addTime: '2025-06-10 08:00:00' }
|
const timeFull = ts.substring(tIdx + 1)
|
||||||
])
|
const dotIdx = timeFull.indexOf('.')
|
||||||
// ========== MOCK DATA END ==========
|
const time = dotIdx > -1 ? timeFull.substring(0, dotIdx) : timeFull.substring(0, 8)
|
||||||
|
return date + ' ' + time
|
||||||
|
}
|
||||||
|
return ts
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDbRow(row: UTSJSONObject): DriverRow {
|
||||||
|
const id = row.getString('id') ?? ''
|
||||||
|
const realName = row.getString('real_name') ?? '—'
|
||||||
|
const status = row.getNumber('status') ?? 1
|
||||||
|
const createdAt = row.getString('created_at') ?? ''
|
||||||
|
// JOIN 字段来自 ak_users（别名 user_info）
|
||||||
|
let avatar = '/static/logo.png'
|
||||||
|
let phone = '—'
|
||||||
|
const userInfo = row.getJSON('user_info')
|
||||||
|
if (userInfo != null) {
|
||||||
|
const avatarUrl = userInfo.getString('avatar_url') ?? ''
|
||||||
|
if (avatarUrl !== '') avatar = avatarUrl
|
||||||
|
const phoneVal = userInfo.getString('phone') ?? ''
|
||||||
|
if (phoneVal !== '') phone = phoneVal
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
id: id,
|
||||||
|
avatar: avatar,
|
||||||
|
name: realName !== '' ? realName : '—',
|
||||||
|
phone: phone,
|
||||||
|
isshow: status === 1,
|
||||||
|
addTime: formatTime(createdAt)
|
||||||
|
} as DriverRow
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 服务端按页查询 ==========
|
||||||
|
// 查询字段说明：
|
||||||
|
// ml_delivery_drivers 本表字段：id, real_name, status, created_at
|
||||||
|
// JOIN ak_users（通过 user_id FK）取：avatar_url, phone
|
||||||
|
// 敏感字段（id_card, driver_license, current_lat, current_lng）不纳入查询
|
||||||
|
const fetchDrivers = async (page: number, ps: number) => {
|
||||||
|
if (loading.value) return // 防止并发重复请求
|
||||||
|
loading.value = true
|
||||||
|
fetchError.value = ''
|
||||||
|
try {
|
||||||
|
const offset = (page - 1) * ps
|
||||||
|
// offset 注入 filter，使用 limit+offset URL 参数方案，避免 Range 头 416 问题
|
||||||
|
const offsetFilter = offset > 0 ? `offset=${offset}` : null
|
||||||
|
const res = await supa.select(
|
||||||
|
'ml_delivery_drivers',
|
||||||
|
offsetFilter,
|
||||||
|
{
|
||||||
|
// 只取列表页所需字段，JOIN ak_users 别名为 user_info
|
||||||
|
columns: 'id,real_name,status,created_at,user_info:ak_users!user_id(avatar_url,phone)',
|
||||||
|
limit: ps,
|
||||||
|
order: 'created_at.desc', // 稳定排序：按创建时间降序
|
||||||
|
count: 'exact' // 触发 Prefer: count=exact → Content-Range 总行数
|
||||||
|
}
|
||||||
|
)
|
||||||
|
if (res.status >= 200 && res.status < 300 && res.data != null) {
|
||||||
|
driverList.value = (res.data as UTSJSONObject[]).map((row: UTSJSONObject): DriverRow => mapDbRow(row))
|
||||||
|
// 从 Content-Range 响应头解析真实总行数（格式：0-14/total）
|
||||||
|
let totalCount = 0
|
||||||
|
const hdrs = res.headers
|
||||||
|
if (hdrs != null) {
|
||||||
|
let cr: string | null = null
|
||||||
|
if (typeof (hdrs as any).get === 'function') {
|
||||||
|
cr = (hdrs as any).get('content-range') as string | null
|
||||||
|
}
|
||||||
|
if (cr == null) {
|
||||||
|
cr = (hdrs as UTSJSONObject)['content-range'] as string | null
|
||||||
|
}
|
||||||
|
if (cr != null) {
|
||||||
|
const m = /\/(\d+)$/.exec(cr)
|
||||||
|
if (m != null) totalCount = parseInt(m[1] ?? '0')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Content-Range 解析失败时：以 offset + 当前页条数 作保守兜底
|
||||||
|
if (totalCount === 0) {
|
||||||
|
totalCount = offset + (Array.isArray(res.data) ? (res.data as UTSJSONObject[]).length : 0)
|
||||||
|
}
|
||||||
|
total.value = totalCount
|
||||||
|
} else {
|
||||||
|
fetchError.value = '加载配送员列表失败，请检查网络或权限配置'
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
fetchError.value = '请求异常，请稍后重试'
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchDrivers(1, pageSize.value)
|
||||||
|
})
|
||||||
|
|
||||||
// ========== PAGINATION STATE ==========
|
// ========== PAGINATION STATE ==========
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
@@ -101,12 +230,9 @@ const jumpPageInput = ref('')
|
|||||||
const pageSizeOptions = [10, 15, 20, 30, 50]
|
const pageSizeOptions = [10, 15, 20, 30, 50]
|
||||||
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
|
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
|
||||||
const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
|
const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
|
||||||
const total = computed(() => courierList.value.length)
|
const total = ref(0) // 来自服务端 Content-Range 真实总行数
|
||||||
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
||||||
const pagedList = computed(() => {
|
const pagedList = computed(() => driverList.value) // 服务端已按页返回，直接展示当前页数据
|
||||||
const start = (currentPage.value - 1) * pageSize.value
|
|
||||||
return courierList.value.slice(start, start + pageSize.value)
|
|
||||||
})
|
|
||||||
const visiblePages = computed((): number[] => {
|
const visiblePages = computed((): number[] => {
|
||||||
const t = totalPage.value; const cur = currentPage.value
|
const t = totalPage.value; const cur = currentPage.value
|
||||||
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
|
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
|
||||||
@@ -114,32 +240,93 @@ const visiblePages = computed((): number[] => {
|
|||||||
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
|
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
|
||||||
return [1, -1, cur - 1, cur, cur + 1, -1, t]
|
return [1, -1, cur - 1, cur, cur + 1, -1, t]
|
||||||
})
|
})
|
||||||
const handlePageChange = (p: number) => { currentPage.value = p }
|
const handlePageChange = (p: number) => {
|
||||||
|
if (p < 1 || p > totalPage.value || p === currentPage.value) return
|
||||||
|
currentPage.value = p
|
||||||
|
fetchDrivers(p, pageSize.value)
|
||||||
|
}
|
||||||
const handlePageSizeChange = (e: any) => {
|
const handlePageSizeChange = (e: any) => {
|
||||||
const idx = Number(e.detail.value)
|
const idx = Number(e.detail.value)
|
||||||
pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
|
pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
|
||||||
currentPage.value = 1
|
currentPage.value = 1
|
||||||
|
fetchDrivers(1, pageSize.value)
|
||||||
}
|
}
|
||||||
const handleJumpPage = () => {
|
const handleJumpPage = () => {
|
||||||
const p = parseInt(jumpPageInput.value)
|
const p = parseInt(jumpPageInput.value)
|
||||||
if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
|
if (!isNaN(p) && p >= 1 && p <= totalPage.value) {
|
||||||
|
currentPage.value = p
|
||||||
|
fetchDrivers(p, pageSize.value)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// ========== END PAGINATION STATE ==========
|
// ========== END PAGINATION STATE ==========
|
||||||
|
|
||||||
function onAdd() {
|
function onAdd() {
|
||||||
console.log('Add courier')
|
addDrawerVisible.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
function onToggleShow(item: CourierItem) {
|
function onAddSaved() {
|
||||||
item.isshow = !item.isshow
|
currentPage.value = 1
|
||||||
|
fetchDrivers(1, pageSize.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
function onEdit(item: CourierItem) {
|
async function onToggleShow(item: DriverRow) {
|
||||||
console.log('Edit:', item.name)
|
const newIsShow = !item.isshow
|
||||||
|
const newStatus = newIsShow ? 1 : 2 // 1:正常(显示) 2:暂停(不显示)
|
||||||
|
item.isshow = newIsShow // 乐观更新本地状态
|
||||||
|
try {
|
||||||
|
const res = await supa.from('ml_delivery_drivers')
|
||||||
|
.update({ status: newStatus } as UTSJSONObject)
|
||||||
|
.eq('id', item.id)
|
||||||
|
.execute()
|
||||||
|
if (res.status < 200 || res.status >= 300) {
|
||||||
|
item.isshow = !newIsShow // 请求失败，回滚本地状态
|
||||||
|
uni.showToast({ title: '状态更新失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
item.isshow = !newIsShow // 异常，回滚本地状态
|
||||||
|
uni.showToast({ title: '操作异常，请重试', icon: 'none' })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDel(item: CourierItem) {
|
function onDetail(item: DriverRow) {
|
||||||
console.log('Delete:', item.id)
|
selectedDriverId.value = item.id
|
||||||
|
drawerVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function onEdit(item: DriverRow) {
|
||||||
|
selectedEditId.value = item.id
|
||||||
|
editDrawerVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function doDelete(item: DriverRow) {
|
||||||
|
try {
|
||||||
|
const result = await supa.from('ml_delivery_drivers')
|
||||||
|
.eq('id', item.id)
|
||||||
|
.delete()
|
||||||
|
.execute()
|
||||||
|
if (result.status >= 200 && result.status < 300) {
|
||||||
|
uni.showToast({ title: '删除成功', icon: 'success' })
|
||||||
|
fetchDrivers(currentPage.value, pageSize.value)
|
||||||
|
} else {
|
||||||
|
uni.showToast({ title: '删除失败，请重试', icon: 'none' })
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: '操作异常，请重试', icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDel(item: DriverRow) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认删除',
|
||||||
|
content: '确认删除配送员「' + item.name + '」？该操作不可恢复。',
|
||||||
|
confirmText: '确认删除',
|
||||||
|
confirmColor: '#ff4d4f',
|
||||||
|
success: (res: any) => {
|
||||||
|
if (res.confirm === true) {
|
||||||
|
doDelete(item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -230,4 +417,24 @@ function onDel(item: CourierItem) {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table-loading,
|
||||||
|
.table-error,
|
||||||
|
.table-empty {
|
||||||
|
padding: 40px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-tip {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-tip-err {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ed4014;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -88,6 +88,19 @@
|
|||||||
|
|
||||||
<!-- 表格内容 -->
|
<!-- 表格内容 -->
|
||||||
<view class="table-body">
|
<view class="table-body">
|
||||||
|
<!-- 加载中 -->
|
||||||
|
<view v-if="loading" class="empty-state-row">
|
||||||
|
<text class="empty-text">加载中...</text>
|
||||||
|
</view>
|
||||||
|
<!-- 错误状态 -->
|
||||||
|
<view v-else-if="fetchError !== ''" class="empty-state-row">
|
||||||
|
<text class="empty-text">{{ fetchError }}</text>
|
||||||
|
<button class="btn small" @click="fetchUsers">重试</button>
|
||||||
|
</view>
|
||||||
|
<!-- 无数据 -->
|
||||||
|
<view v-else-if="pagedList.length === 0" class="empty-state-row">
|
||||||
|
<text class="empty-text">暂无用户数据</text>
|
||||||
|
</view>
|
||||||
<view v-for="user in pagedList" :key="user.id" class="table-row"
|
<view v-for="user in pagedList" :key="user.id" class="table-row"
|
||||||
:style="{ zIndex: activeDropdownId === user.id ? 1000 : 1 }"
|
:style="{ zIndex: activeDropdownId === user.id ? 1000 : 1 }"
|
||||||
>
|
>
|
||||||
@@ -161,37 +174,145 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="uts">
|
<script setup lang="uts">
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed, onMounted } from 'vue'
|
||||||
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
||||||
|
import { supabase } from '@/components/supadb/aksupainstance.uts'
|
||||||
|
|
||||||
const activeTab = ref(0)
|
const activeTab = ref(0)
|
||||||
// ========== MOCK DATA START ==========
|
|
||||||
const tabs = ['全部', '微信公众号', '微信小程序', 'H5', 'PC', 'APP']
|
const tabs = ['全部', '微信公众号', '微信小程序', 'H5', 'PC', 'APP']
|
||||||
const isAllChecked = ref(false)
|
const isAllChecked = ref(false)
|
||||||
const activeDropdownId = ref<string | null>(null)
|
const activeDropdownId = ref<string | null>(null)
|
||||||
|
|
||||||
const userList = ref([
|
// ========== 用户展示行类型 ==========
|
||||||
{ id: '77414', avatar: '/static/logo.png', nickname: '199****0268', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '199****0268', userType: '公众号', balance: '88888.00', checked: false },
|
type UserRow = {
|
||||||
{ id: '75311', avatar: '/static/logo.png', nickname: 'wljbhg', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100002.00', checked: false },
|
id: string
|
||||||
{ id: '75305', avatar: '/static/logo.png', nickname: '相见欢', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
avatar: string
|
||||||
{ id: '75296', avatar: '/static/logo.png', nickname: '..', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
nickname: string
|
||||||
{ id: '75293', avatar: '/static/logo.png', nickname: '钟(钏)华', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
isMember: string
|
||||||
{ id: '75289', avatar: '/static/logo.png', nickname: '小二上酒', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
level: string
|
||||||
{ id: '75257', avatar: '/static/logo.png', nickname: '5+7', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
group: string
|
||||||
{ id: '75226', avatar: '/static/logo.png', nickname: '慢步前行', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
spreadLevel: string
|
||||||
{ id: '75211', avatar: '/static/logo.png', nickname: '难得糊涂', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
phone: string
|
||||||
{ id: '75100', avatar: '/static/logo.png', nickname: '山河远阔', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '138****5566', userType: '小程序', balance: '9800.00', checked: false },
|
userType: string
|
||||||
{ id: '74988', avatar: '/static/logo.png', nickname: '野草菓芙', isMember: '是', level: '金等', group: 'B类客户', spreadLevel: '一级', phone: '155****7788', userType: '公众号', balance: '25600.00', checked: false },
|
balance: string
|
||||||
{ id: '74833', avatar: '/static/logo.png', nickname: '星花雨月', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '', userType: 'H5', balance: '320.00', checked: false },
|
checked: boolean
|
||||||
{ id: '74701', avatar: '/static/logo.png', nickname: '天道酬勤', isMember: '是', level: '银等', group: 'A类客户', spreadLevel: '二级', phone: '186****3344', userType: '小程序', balance: '7700.00', checked: false },
|
}
|
||||||
{ id: '74590', avatar: '/static/logo.png', nickname: '南风知劲草', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '177****1122', userType: 'APP', balance: '150.00', checked: false },
|
|
||||||
{ id: '74422', avatar: '/static/logo.png', nickname: '大漠孤烟', isMember: '是', level: '金等', group: 'A类客户', spreadLevel: '一级', phone: '139****9900', userType: '公众号', balance: '88800.00', checked: false },
|
// ========== 数据状态 ==========
|
||||||
{ id: '74310', avatar: '/static/logo.png', nickname: '小桥流水', isMember: '否', level: '无', group: 'B类客户', spreadLevel: '', phone: '', userType: 'PC', balance: '600.00', checked: false },
|
const loading = ref(false)
|
||||||
{ id: '74198', avatar: '/static/logo.png', nickname: '日暗香残', isMember: '是', level: '银等', group: '无', spreadLevel: '一级', phone: '135****6677', userType: '小程序', balance: '4300.00', checked: false },
|
const fetchError = ref('')
|
||||||
{ id: '74056', avatar: '/static/logo.png', nickname: '梦里花开', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '', userType: '公众号', balance: '200.00', checked: false },
|
const userList = ref<UserRow[]>([])
|
||||||
{ id: '73900', avatar: '/static/logo.png', nickname: '春风十里', isMember: '是', level: '金等', group: 'A类客户', spreadLevel: '二级', phone: '151****4455', userType: 'APP', balance: '56000.00', checked: false }
|
|
||||||
])
|
// ========== 字段映射函数 ==========
|
||||||
// ========== MOCK DATA END ==========
|
function formatLevelDisplay(levelNum: number | null): string {
|
||||||
|
if (levelNum == null || levelNum <= 1) return '无'
|
||||||
|
return 'Lv.' + levelNum
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatUserType(regSource: string | null, role: string | null): string {
|
||||||
|
if (regSource === 'web') return 'PC/H5'
|
||||||
|
if (regSource === 'mobile') return 'APP'
|
||||||
|
if (regSource === 'wechat' || regSource === 'weixin') return '微信'
|
||||||
|
if (role === 'admin') return '管理员'
|
||||||
|
if (role === 'merchant') return '商家'
|
||||||
|
if (role === 'delivery') return '配送员'
|
||||||
|
return '用户'
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDbRow(row: UTSJSONObject): UserRow {
|
||||||
|
const id = row.getString('id') ?? ''
|
||||||
|
const avatarUrl = row.getString('avatar_url') ?? ''
|
||||||
|
const username = row.getString('username') ?? ''
|
||||||
|
const emailStr = row.getString('email') ?? ''
|
||||||
|
// 昵称：优先 username，兜底取邮箱前缀，再兜底 '—'
|
||||||
|
let nickname = '—'
|
||||||
|
if (username !== '') {
|
||||||
|
nickname = username
|
||||||
|
} else if (emailStr !== '') {
|
||||||
|
const atIdx = emailStr.indexOf('@')
|
||||||
|
nickname = atIdx > 0 ? emailStr.substring(0, atIdx) : emailStr
|
||||||
|
}
|
||||||
|
const phone = row.getString('phone') ?? ''
|
||||||
|
const regSource = row.getString('registration_source')
|
||||||
|
const role = row.getString('role')
|
||||||
|
const levelNum = row.getNumber('user_level')
|
||||||
|
const avatarFinal = avatarUrl !== '' ? avatarUrl : '/static/logo.png'
|
||||||
|
return {
|
||||||
|
id: id,
|
||||||
|
avatar: avatarFinal,
|
||||||
|
nickname: nickname,
|
||||||
|
isMember: '—', // ak_users 无付费会员字段
|
||||||
|
level: formatLevelDisplay(levelNum),
|
||||||
|
group: '—', // ak_users 无分组字段
|
||||||
|
spreadLevel: '—', // ak_users 无分销等级字段
|
||||||
|
phone: phone,
|
||||||
|
userType: formatUserType(regSource, role),
|
||||||
|
balance: '—', // ak_users 无余额字段（total_spent 为消费额，语义不同）
|
||||||
|
checked: false
|
||||||
|
} as UserRow
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 数据请求 ==========
|
||||||
|
// ⚠️ 前置条件：需在 Supabase 添加 admin 读取全部用户的 RLS 策略：
|
||||||
|
// CREATE POLICY "ak_users_admin_read_all" ON public.ak_users
|
||||||
|
// FOR SELECT TO authenticated
|
||||||
|
// USING ((auth.jwt() -> 'app_metadata' ->> 'role') = 'admin' OR auth.uid() = id);
|
||||||
|
//
|
||||||
|
// ✅ 使用 limit+offset URL 参数代替 Range 头，彻底避免 PostgREST 416 问题
|
||||||
|
const fetchUsers = async (page: number = 1, ps: number = pageSize.value) => {
|
||||||
|
if (loading.value) return // 防止并发重复请求
|
||||||
|
loading.value = true
|
||||||
|
fetchError.value = ''
|
||||||
|
try {
|
||||||
|
// offset 注入到 filter 字符串，PostgREST 将其识别为 SQL OFFSET，不发 Range 头
|
||||||
|
const offset = (page - 1) * ps
|
||||||
|
const offsetFilter = offset > 0 ? `offset=${offset}` : null
|
||||||
|
const res = await supabase.select(
|
||||||
|
'ak_users',
|
||||||
|
offsetFilter,
|
||||||
|
{
|
||||||
|
columns: 'id, username, email, phone, avatar_url, role, registration_source, user_level, created_at',
|
||||||
|
limit: ps,
|
||||||
|
order: 'created_at.desc',
|
||||||
|
count: 'exact' // 触发 Prefer: count=exact → 响应带 Content-Range 总行数
|
||||||
|
}
|
||||||
|
)
|
||||||
|
if (res.status >= 200 && res.status < 300 && res.data != null) {
|
||||||
|
userList.value = (res.data as UTSJSONObject[]).map((row: UTSJSONObject): UserRow => mapDbRow(row))
|
||||||
|
// 从 Content-Range 响应头解析真实总行数（格式：0-14/total）
|
||||||
|
let totalCount = 0
|
||||||
|
const hdrs = res.headers
|
||||||
|
if (hdrs != null) {
|
||||||
|
let cr: string | null = null
|
||||||
|
if (typeof (hdrs as any).get === 'function') {
|
||||||
|
cr = (hdrs as any).get('content-range') as string | null
|
||||||
|
}
|
||||||
|
if (cr == null) {
|
||||||
|
cr = (hdrs as UTSJSONObject)['content-range'] as string | null
|
||||||
|
}
|
||||||
|
if (cr != null) {
|
||||||
|
const m = /\/(\d+)$/.exec(cr)
|
||||||
|
if (m != null) totalCount = parseInt(m[1] ?? '0')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// content-range 解析失败时：以 offset + 当前页条数 作保守兜底
|
||||||
|
if (totalCount === 0) {
|
||||||
|
totalCount = offset + (Array.isArray(res.data) ? (res.data as UTSJSONObject[]).length : 0)
|
||||||
|
}
|
||||||
|
total.value = totalCount
|
||||||
|
} else {
|
||||||
|
fetchError.value = '加载用户列表失败，请检查网络或 RLS 权限配置'
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
fetchError.value = '请求异常，请稍后重试'
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchUsers(1, pageSize.value)
|
||||||
|
})
|
||||||
|
|
||||||
// ========== PAGINATION STATE ==========
|
// ========== PAGINATION STATE ==========
|
||||||
const currentPage = ref(1)
|
const currentPage = ref(1)
|
||||||
@@ -200,12 +321,9 @@ const jumpPageInput = ref('')
|
|||||||
const pageSizeOptions = [10, 15, 20, 30, 50]
|
const pageSizeOptions = [10, 15, 20, 30, 50]
|
||||||
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
|
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
|
||||||
const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
|
const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
|
||||||
const total = computed(() => userList.value.length)
|
const total = ref(0) // 来自服务端 content-range 真实总行数
|
||||||
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
||||||
const pagedList = computed(() => {
|
const pagedList = computed(() => userList.value) // 服务端已按页返回，直接展示当前页数据
|
||||||
const start = (currentPage.value - 1) * pageSize.value
|
|
||||||
return userList.value.slice(start, start + pageSize.value)
|
|
||||||
})
|
|
||||||
const visiblePages = computed((): number[] => {
|
const visiblePages = computed((): number[] => {
|
||||||
const t = totalPage.value; const cur = currentPage.value
|
const t = totalPage.value; const cur = currentPage.value
|
||||||
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
|
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
|
||||||
@@ -213,15 +331,23 @@ const visiblePages = computed((): number[] => {
|
|||||||
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
|
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
|
||||||
return [1, -1, cur - 1, cur, cur + 1, -1, t]
|
return [1, -1, cur - 1, cur, cur + 1, -1, t]
|
||||||
})
|
})
|
||||||
const handlePageChange = (p: number) => { currentPage.value = p }
|
const handlePageChange = (p: number) => {
|
||||||
|
if (p < 1 || p > totalPage.value) return
|
||||||
|
currentPage.value = p
|
||||||
|
fetchUsers(p, pageSize.value)
|
||||||
|
}
|
||||||
const handlePageSizeChange = (e: any) => {
|
const handlePageSizeChange = (e: any) => {
|
||||||
const idx = Number(e.detail.value)
|
const idx = Number(e.detail.value)
|
||||||
pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
|
pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
|
||||||
currentPage.value = 1
|
currentPage.value = 1
|
||||||
|
fetchUsers(1, pageSize.value)
|
||||||
}
|
}
|
||||||
const handleJumpPage = () => {
|
const handleJumpPage = () => {
|
||||||
const p = parseInt(jumpPageInput.value)
|
const p = parseInt(jumpPageInput.value)
|
||||||
if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
|
if (!isNaN(p) && p >= 1 && p <= totalPage.value) {
|
||||||
|
currentPage.value = p
|
||||||
|
fetchUsers(p, pageSize.value)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// ========== END PAGINATION STATE ==========
|
// ========== END PAGINATION STATE ==========
|
||||||
|
|
||||||
@@ -572,4 +698,20 @@ function onDetail(user: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 分页区域已迁至 CommonPagination 组件 */
|
/* 分页区域已迁至 CommonPagination 组件 */
|
||||||
|
|
||||||
|
.empty-state-row {
|
||||||
|
padding: 40px 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,21 @@
|
|||||||
GET http://localhost:5173/pages/mall/admin/decoration/theme-style/index.uvue?import&vue&type=script&setup=true&lang.uts net::ERR_ABORTED 500 (Internal Server Error)
|
[Vue warn]: Unhandled error during execution of component event handler
|
||||||
main.uts:16 [Vue warn]: Unhandled error during execution of async component loader
|
at <Input>
|
||||||
at <AsyncComponentWrapper>
|
at <View>
|
||||||
|
at <View>
|
||||||
|
at <View>
|
||||||
|
at <ScrollView>
|
||||||
|
at <View>
|
||||||
|
at <View>
|
||||||
|
at <DriverAddDrawer>
|
||||||
|
at <Index>
|
||||||
|
at <View>
|
||||||
|
at <View>
|
||||||
|
at <View>
|
||||||
|
at <View>
|
||||||
|
at <AdminLayout>
|
||||||
|
at <View>
|
||||||
|
at <Index>
|
||||||
|
at <AsyncComponentWrapper>
|
||||||
at <PageBody>
|
at <PageBody>
|
||||||
at <Page>
|
at <Page>
|
||||||
at <Anonymous>
|
at <Anonymous>
|
||||||
@@ -8,181 +23,5 @@ at <KeepAlive>
|
|||||||
at <RouterView>
|
at <RouterView>
|
||||||
at <Layout>
|
at <Layout>
|
||||||
at <App>
|
at <App>
|
||||||
warnHandler @ uni-h5.es.js:19975
|
vue.runtime.esm.js:1443 TypeError: Cannot create property 'value' on string ''
|
||||||
callWithErrorHandling @ vue.runtime.esm.js:1381
|
at _createVNode.onInput._cache.<computed>._cache.<computed> (DriverAddDrawer.uvue?import:96:56)
|
||||||
warn$1 @ vue.runtime.esm.js:1207
|
|
||||||
logError @ vue.runtime.esm.js:1438
|
|
||||||
errorHandler @ uni-h5.es.js:19600
|
|
||||||
callWithErrorHandling @ vue.runtime.esm.js:1381
|
|
||||||
handleError @ vue.runtime.esm.js:1421
|
|
||||||
onError @ vue.runtime.esm.js:3724
|
|
||||||
(anonymous) @ vue.runtime.esm.js:3767
|
|
||||||
Promise.catch
|
|
||||||
setup @ vue.runtime.esm.js:3766
|
|
||||||
callWithErrorHandling @ vue.runtime.esm.js:1381
|
|
||||||
setupStatefulComponent @ vue.runtime.esm.js:8985
|
|
||||||
setupComponent @ vue.runtime.esm.js:8946
|
|
||||||
mountComponent @ vue.runtime.esm.js:7262
|
|
||||||
processComponent @ vue.runtime.esm.js:7228
|
|
||||||
patch @ vue.runtime.esm.js:6694
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
processFragment @ vue.runtime.esm.js:7158
|
|
||||||
patch @ vue.runtime.esm.js:6668
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
processFragment @ vue.runtime.esm.js:7158
|
|
||||||
patch @ vue.runtime.esm.js:6668
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
mountElement @ vue.runtime.esm.js:6849
|
|
||||||
processElement @ vue.runtime.esm.js:6814
|
|
||||||
patch @ vue.runtime.esm.js:6682
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
mountElement @ vue.runtime.esm.js:6849
|
|
||||||
processElement @ vue.runtime.esm.js:6814
|
|
||||||
patch @ vue.runtime.esm.js:6682
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
processFragment @ vue.runtime.esm.js:7158
|
|
||||||
patch @ vue.runtime.esm.js:6668
|
|
||||||
componentUpdateFn @ vue.runtime.esm.js:7372
|
|
||||||
run @ vue.runtime.esm.js:153
|
|
||||||
instance.update @ vue.runtime.esm.js:7497
|
|
||||||
setupRenderEffect @ vue.runtime.esm.js:7507
|
|
||||||
mountComponent @ vue.runtime.esm.js:7274
|
|
||||||
processComponent @ vue.runtime.esm.js:7228
|
|
||||||
patch @ vue.runtime.esm.js:6694
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
mountElement @ vue.runtime.esm.js:6849
|
|
||||||
processElement @ vue.runtime.esm.js:6814
|
|
||||||
patch @ vue.runtime.esm.js:6682
|
|
||||||
componentUpdateFn @ vue.runtime.esm.js:7372
|
|
||||||
run @ vue.runtime.esm.js:153
|
|
||||||
instance.update @ vue.runtime.esm.js:7497
|
|
||||||
setupRenderEffect @ vue.runtime.esm.js:7507
|
|
||||||
mountComponent @ vue.runtime.esm.js:7274
|
|
||||||
processComponent @ vue.runtime.esm.js:7228
|
|
||||||
patch @ vue.runtime.esm.js:6694
|
|
||||||
componentUpdateFn @ vue.runtime.esm.js:7372
|
|
||||||
run @ vue.runtime.esm.js:153
|
|
||||||
instance.update @ vue.runtime.esm.js:7497
|
|
||||||
setupRenderEffect @ vue.runtime.esm.js:7507
|
|
||||||
mountComponent @ vue.runtime.esm.js:7274
|
|
||||||
processComponent @ vue.runtime.esm.js:7228
|
|
||||||
patch @ vue.runtime.esm.js:6694
|
|
||||||
componentUpdateFn @ vue.runtime.esm.js:7453
|
|
||||||
run @ vue.runtime.esm.js:153
|
|
||||||
instance.update @ vue.runtime.esm.js:7497
|
|
||||||
updateComponent @ vue.runtime.esm.js:7305
|
|
||||||
processComponent @ vue.runtime.esm.js:7239
|
|
||||||
patch @ vue.runtime.esm.js:6694
|
|
||||||
componentUpdateFn @ vue.runtime.esm.js:7453
|
|
||||||
run @ vue.runtime.esm.js:153
|
|
||||||
instance.update @ vue.runtime.esm.js:7497
|
|
||||||
callWithErrorHandling @ vue.runtime.esm.js:1381
|
|
||||||
flushJobs @ vue.runtime.esm.js:1585
|
|
||||||
Promise.then
|
|
||||||
queueFlush @ vue.runtime.esm.js:1494
|
|
||||||
queueJob @ vue.runtime.esm.js:1488
|
|
||||||
scheduler @ vue.runtime.esm.js:3179
|
|
||||||
resetScheduling @ vue.runtime.esm.js:236
|
|
||||||
triggerEffects @ vue.runtime.esm.js:280
|
|
||||||
triggerRefValue @ vue.runtime.esm.js:1033
|
|
||||||
set value @ vue.runtime.esm.js:1078
|
|
||||||
finalizeNavigation @ vue-router.mjs?v=ed041164:2474
|
|
||||||
(anonymous) @ vue-router.mjs?v=ed041164:2384
|
|
||||||
Promise.then
|
|
||||||
pushWithRedirect @ vue-router.mjs?v=ed041164:2352
|
|
||||||
push @ vue-router.mjs?v=ed041164:2278
|
|
||||||
install @ vue-router.mjs?v=ed041164:2631
|
|
||||||
use @ vue.runtime.esm.js:5190
|
|
||||||
initRouter @ uni-h5.es.js:19886
|
|
||||||
install @ uni-h5.es.js:19955
|
|
||||||
use @ vue.runtime.esm.js:5190
|
|
||||||
(anonymous) @ main.uts:16
|
|
||||||
main.uts:16 TypeError: Failed to fetch dynamically imported module: http://localhost:5173/pages/mall/admin/homePage/index.uvue?t=1773738574287&import
|
|
||||||
logError @ vue.runtime.esm.js:1443
|
|
||||||
errorHandler @ uni-h5.es.js:19600
|
|
||||||
callWithErrorHandling @ vue.runtime.esm.js:1381
|
|
||||||
handleError @ vue.runtime.esm.js:1421
|
|
||||||
onError @ vue.runtime.esm.js:3724
|
|
||||||
(anonymous) @ vue.runtime.esm.js:3767
|
|
||||||
Promise.catch
|
|
||||||
setup @ vue.runtime.esm.js:3766
|
|
||||||
callWithErrorHandling @ vue.runtime.esm.js:1381
|
|
||||||
setupStatefulComponent @ vue.runtime.esm.js:8985
|
|
||||||
setupComponent @ vue.runtime.esm.js:8946
|
|
||||||
mountComponent @ vue.runtime.esm.js:7262
|
|
||||||
processComponent @ vue.runtime.esm.js:7228
|
|
||||||
patch @ vue.runtime.esm.js:6694
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
processFragment @ vue.runtime.esm.js:7158
|
|
||||||
patch @ vue.runtime.esm.js:6668
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
processFragment @ vue.runtime.esm.js:7158
|
|
||||||
patch @ vue.runtime.esm.js:6668
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
mountElement @ vue.runtime.esm.js:6849
|
|
||||||
processElement @ vue.runtime.esm.js:6814
|
|
||||||
patch @ vue.runtime.esm.js:6682
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
mountElement @ vue.runtime.esm.js:6849
|
|
||||||
processElement @ vue.runtime.esm.js:6814
|
|
||||||
patch @ vue.runtime.esm.js:6682
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
processFragment @ vue.runtime.esm.js:7158
|
|
||||||
patch @ vue.runtime.esm.js:6668
|
|
||||||
componentUpdateFn @ vue.runtime.esm.js:7372
|
|
||||||
run @ vue.runtime.esm.js:153
|
|
||||||
instance.update @ vue.runtime.esm.js:7497
|
|
||||||
setupRenderEffect @ vue.runtime.esm.js:7507
|
|
||||||
mountComponent @ vue.runtime.esm.js:7274
|
|
||||||
processComponent @ vue.runtime.esm.js:7228
|
|
||||||
patch @ vue.runtime.esm.js:6694
|
|
||||||
mountChildren @ vue.runtime.esm.js:6942
|
|
||||||
mountElement @ vue.runtime.esm.js:6849
|
|
||||||
processElement @ vue.runtime.esm.js:6814
|
|
||||||
patch @ vue.runtime.esm.js:6682
|
|
||||||
componentUpdateFn @ vue.runtime.esm.js:7372
|
|
||||||
run @ vue.runtime.esm.js:153
|
|
||||||
instance.update @ vue.runtime.esm.js:7497
|
|
||||||
setupRenderEffect @ vue.runtime.esm.js:7507
|
|
||||||
mountComponent @ vue.runtime.esm.js:7274
|
|
||||||
processComponent @ vue.runtime.esm.js:7228
|
|
||||||
patch @ vue.runtime.esm.js:6694
|
|
||||||
componentUpdateFn @ vue.runtime.esm.js:7372
|
|
||||||
run @ vue.runtime.esm.js:153
|
|
||||||
instance.update @ vue.runtime.esm.js:7497
|
|
||||||
setupRenderEffect @ vue.runtime.esm.js:7507
|
|
||||||
mountComponent @ vue.runtime.esm.js:7274
|
|
||||||
processComponent @ vue.runtime.esm.js:7228
|
|
||||||
patch @ vue.runtime.esm.js:6694
|
|
||||||
componentUpdateFn @ vue.runtime.esm.js:7453
|
|
||||||
run @ vue.runtime.esm.js:153
|
|
||||||
instance.update @ vue.runtime.esm.js:7497
|
|
||||||
updateComponent @ vue.runtime.esm.js:7305
|
|
||||||
processComponent @ vue.runtime.esm.js:7239
|
|
||||||
patch @ vue.runtime.esm.js:6694
|
|
||||||
componentUpdateFn @ vue.runtime.esm.js:7453
|
|
||||||
run @ vue.runtime.esm.js:153
|
|
||||||
instance.update @ vue.runtime.esm.js:7497
|
|
||||||
callWithErrorHandling @ vue.runtime.esm.js:1381
|
|
||||||
flushJobs @ vue.runtime.esm.js:1585
|
|
||||||
Promise.then
|
|
||||||
queueFlush @ vue.runtime.esm.js:1494
|
|
||||||
queueJob @ vue.runtime.esm.js:1488
|
|
||||||
scheduler @ vue.runtime.esm.js:3179
|
|
||||||
resetScheduling @ vue.runtime.esm.js:236
|
|
||||||
triggerEffects @ vue.runtime.esm.js:280
|
|
||||||
triggerRefValue @ vue.runtime.esm.js:1033
|
|
||||||
set value @ vue.runtime.esm.js:1078
|
|
||||||
finalizeNavigation @ vue-router.mjs?v=ed041164:2474
|
|
||||||
(anonymous) @ vue-router.mjs?v=ed041164:2384
|
|
||||||
Promise.then
|
|
||||||
pushWithRedirect @ vue-router.mjs?v=ed041164:2352
|
|
||||||
push @ vue-router.mjs?v=ed041164:2278
|
|
||||||
install @ vue-router.mjs?v=ed041164:2631
|
|
||||||
use @ vue.runtime.esm.js:5190
|
|
||||||
initRouter @ uni-h5.es.js:19886
|
|
||||||
install @ uni-h5.es.js:19955
|
|
||||||
use @ vue.runtime.esm.js:5190
|
|
||||||
(anonymous) @ main.uts:16
|
|
||||||
index.uvue:1 GET http://localhost:5173/pages/mall/admin/decoration/material-management/index.uvue?import&vue&type=script&setup=true&lang.uts net::ERR_ABORTED 500 (Internal Server Error)
|
|
||||||
index.uvue:1 GET http://localhost:5173/pages/mall/admin/decoration/link-management/index.uvue?import&vue&type=script&setup=true&lang.uts net::ERR_ABORTED 500 (Internal Server Error)
|
|
||||||
|
|||||||
Reference in New Issue
Block a user