完成设置模块当中的配送员管理
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user