root/WXProgram
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改位置交互，修改代码逻辑

Browse Source
This commit is contained in:
Doubleyin
2025-10-18 22:21:04 +08:00
parent c446df73b5
commit 39fa0b2d04
36 changed files with 2743 additions and 1995 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
miniprogram/pages/employee/employee.json Normal file
View File

@@ -0,0 +1,7 @@
{
"usingComponents": {},
"navigationBarTitleText": "员工管理",
"navigationStyle": "custom",
"enablePullDownRefresh": true,
"backgroundColor": "#f5f5f5"
}

339
miniprogram/pages/employee/employee.ts Normal file
View File

@@ -0,0 +1,339 @@
// 员工管理页面逻辑
import { EmployeeInfo } from '../../types';
import employeeService from '../../services/employeeService';
import { Role, getRoleOptions } from '../../utils/roleUtils';
Page({
data: {
// 员工列表
employees: [] as EmployeeInfo[],
filteredEmployees: [] as EmployeeInfo[],
// 页面状态
currentTab: 'list', // list: 列表页, add: 添加页
loading: false,
// 添加员工表单数据
addForm: {
name: '',
phone: '',
role: Role.DELIVERY_PERSON
},
// 错误信息
errorMessage: '',
successMessage: '',
// 搜索关键词
searchKeyword: '',
// 角色选项
roleOptions: getRoleOptions()
},
onLoad() {
// 页面加载时获取员工列表
this.loadEmployees();
},
onShow() {
// 页面显示时刷新数据
this.loadEmployees();
},
/**
* 加载员工列表
*/
async loadEmployees() {
this.setData({
loading: true,
errorMessage: '',
successMessage: ''
});
try {
const employees = await employeeService.getEmployees();
// 获取过滤后的员工列表
const filteredEmployees = this.getFilteredEmployees(employees);
this.setData({
employees,
filteredEmployees,
loading: false
});
} catch (error) {
console.error('加载员工列表失败:', error);
this.setData({
loading: false,
errorMessage: '加载员工列表失败，请稍后重试'
});
}
},
/**
* 切换页面标签
*/
switchTab(e: any) {
const tab = e.currentTarget.dataset.tab;
this.setData({
currentTab: tab,
errorMessage: '',
successMessage: ''
});
if (tab === 'list') {
this.loadEmployees();
}
},
/**
* 处理添加员工表单输入
*/
onFormInput(e: any) {
const { field } = e.currentTarget.dataset;
const value = e.detail.value;
this.setData({
[`addForm.${field}`]: value,
errorMessage: '',
successMessage: ''
});
},
/**
* 处理角色选择
*/
onRoleChange(e: any) {
const index = e.detail.value;
const selectedRole = this.data.roleOptions[index].value;
this.setData({
'addForm.role': selectedRole
});
},
/**
* 验证表单数据
*/
validateForm(): boolean {
const { name, phone, role } = this.data.addForm;
if (!name.trim()) {
this.setData({
errorMessage: '请输入员工姓名'
});
return false;
}
if (!phone.trim()) {
this.setData({
errorMessage: '请输入手机号'
});
return false;
}
// 简单的手机号格式验证
const phoneRegex = /^1[3-9]\d{9}$/;
if (!phoneRegex.test(phone)) {
this.setData({
errorMessage: '请输入正确的手机号格式'
});
return false;
}
if (!role) {
this.setData({
errorMessage: '请选择员工角色'
});
return false;
}
return true;
},
/**
* 提交添加员工表单
*/
async submitAddForm() {
if (!this.validateForm()) {
return;
}
this.setData({
loading: true,
errorMessage: '',
successMessage: ''
});
try {
await employeeService.addEmployee(this.data.addForm);
this.setData({
loading: false,
successMessage: '员工添加成功',
addForm: {
name: '',
phone: '',
role: Role.DELIVERY_PERSON
}
});
// 添加成功后自动切换到列表页
setTimeout(() => {
this.setData({
currentTab: 'list'
});
this.loadEmployees();
}, 1500);
} catch (error) {
console.error('添加员工失败:', error);
this.setData({
loading: false,
errorMessage: (error as Error).message || '添加员工失败，请稍后重试'
});
}
},
/**
* 删除员工
*/
async deleteEmployee(e: any) {
const employeeId = e.currentTarget.dataset.id;
const employee = this.data.employees.find(emp => emp.id === employeeId);
if (!employee) {
return;
}
wx.showModal({
title: '确认删除',
content: `确定要删除员工 ${employee.name} (${employee.phone}) 吗？此操作不可恢复。`,
confirmText: '删除',
confirmColor: '#ff4d4f',
cancelText: '取消',
success: async (res) => {
if (res.confirm) {
this.setData({
loading: true,
errorMessage: '',
successMessage: ''
});
try {
const result = await employeeService.deleteEmployee(employeeId);
if (result.success) {
this.setData({
loading: false,
successMessage: result.message || '员工删除成功'
});
// 重新加载员工列表
this.loadEmployees();
} else {
this.setData({
loading: false,
errorMessage: result.message || '删除员工失败'
});
}
} catch (error) {
console.error('删除员工失败:', error);
this.setData({
loading: false,
errorMessage: '删除员工失败，请稍后重试'
});
}
}
}
});
},
/**
* 搜索员工
*/
onSearchInput(e: any) {
const keyword = e.detail.value;
this.setData({
searchKeyword: keyword
});
// 更新过滤后的员工列表
this.updateFilteredEmployees();
},
/**
* 更新过滤后的员工列表
*/
updateFilteredEmployees() {
const { employees } = this.data;
const filteredEmployees = this.getFilteredEmployees(employees);
this.setData({
filteredEmployees
});
},
/**
* 获取过滤后的员工列表
*/
getFilteredEmployees(employees?: EmployeeInfo[]): EmployeeInfo[] {
const { searchKeyword } = this.data;
// 如果employees为空，返回空数组
if (!employees || !Array.isArray(employees)) {
return [];
}
// 获取当前登录用户信息
const app = getApp();
const currentUser = app.globalData.userInfo;
// 过滤掉当前登录用户
let filteredEmployees = employees.filter(emp => {
// 如果没有当前用户信息，显示所有员工
if (!currentUser || !currentUser.id) {
return true;
}
// 过滤掉当前用户
return emp.id !== currentUser.id;
});
// 更严格的搜索关键词检查
if (!searchKeyword || typeof searchKeyword !== 'string' || !searchKeyword.trim()) {
return filteredEmployees;
}
const keyword = searchKeyword.toLowerCase();
return filteredEmployees.filter(emp =>
emp.name.toLowerCase().includes(keyword) ||
emp.phone.includes(keyword) ||
(emp.role || '').toLowerCase().includes(keyword)
);
},
/**
* 获取角色显示文本
*/
getRoleText(role: string): string {
const roleMap: Record<string, string> = {
'DELIVERY_PERSON': '配送员',
'ADMIN': '管理员'
};
return roleMap[role] || role;
},
/**
* 清空消息
*/
clearMessages() {
this.setData({
errorMessage: '',
successMessage: ''
});
},
/**
* 返回上一页
*/
goBack() {
wx.navigateBack();
}
});

166
miniprogram/pages/employee/employee.wxml Normal file
View File

@@ -0,0 +1,166 @@
<!-- 员工管理页面 -->
<view class="employee-container">
<!-- 顶部导航栏 -->
<view class="top-nav">
<view class="nav-left">
<text class="back-btn" bindtap="goBack">←</text>
<text class="nav-title">员工管理</text>
</view>
<view class="nav-right">
<text class="nav-count">共{{filteredEmployees.length}}名员工</text>
</view>
</view>
<!-- 页面标签 -->
<view class="page-tabs">
<view
class="tab-item {{currentTab === 'list' ? 'active' : ''}}"
bindtap="switchTab"
data-tab="list"
>
<text class="tab-text">员工列表</text>
</view>
<view
class="tab-item {{currentTab === 'add' ? 'active' : ''}}"
bindtap="switchTab"
data-tab="add"
>
<text class="tab-text">添加员工</text>
</view>
</view>
<!-- 消息提示 -->
<view class="message-container">
<view wx:if="{{errorMessage}}" class="error-message">
<text class="message-text">{{errorMessage}}</text>
<text class="close-btn" bindtap="clearMessages">×</text>
</view>
<view wx:if="{{successMessage}}" class="success-message">
<text class="message-text">{{successMessage}}</text>
<text class="close-btn" bindtap="clearMessages">×</text>
</view>
</view>
<!-- 加载状态 -->
<view wx:if="{{loading}}" class="loading-container">
<view class="loading-spinner"></view>
<text class="loading-text">加载中...</text>
</view>
<!-- 员工列表页面 -->
<view wx:if="{{currentTab === 'list'}}" class="list-container">
<!-- 搜索框 -->
<view class="search-container">
<view class="search-input-wrapper">
<input
class="search-input"
placeholder="搜索员工姓名、手机号或角色"
bindinput="onSearchInput"
value="{{searchKeyword}}"
/>
<text class="search-icon">🔎</text>
</view>
</view>
<!-- 员工列表 -->
<scroll-view class="employee-list" scroll-y>
<view wx:for="{{filteredEmployees}}" wx:key="id" class="employee-item">
<view class="employee-info">
<view class="employee-avatar">
<text class="avatar-text">{{item.name.charAt(0)}}</text>
</view>
<view class="employee-details">
<view class="employee-name-row">
<text class="employee-name">{{item.name}}</text>
<text class="employee-role {{item.role === 'ADMIN' ? 'admin-role' : ''}}">
<text class="role-icon">{{item.role === 'ADMIN' ? '👑' : '🚚'}}</text>
{{getRoleText(item.role)}}
</text>
</view>
<text class="employee-phone">{{item.phone}}</text>
<text class="employee-id">ID: {{item.id}}</text>
</view>
</view>
<view class="employee-actions">
<button
class="delete-btn"
bindtap="deleteEmployee"
data-id="{{item.id}}"
size="mini"
>
删除
</button>
</view>
</view>
<!-- 空状态 -->
<view wx:if="{{filteredEmployees.length === 0}}" class="empty-state">
<text class="empty-icon">👥</text>
<text class="empty-text">
{{searchKeyword ? '没有找到匹配的员工' : '暂无员工数据'}}
</text>
<text wx:if="{{!searchKeyword}}" class="empty-hint">点击右上角"添加员工"开始管理</text>
</view>
</scroll-view>
</view>
<!-- 添加员工页面 -->
<view wx:if="{{currentTab === 'add'}}" class="add-container">
<view class="form-container">
<view class="form-item">
<text class="form-label">员工姓名</text>
<input
class="form-input"
placeholder="请输入员工姓名"
value="{{addForm.name}}"
bindinput="onFormInput"
data-field="name"
/>
</view>
<view class="form-item">
<text class="form-label">手机号码</text>
<input
class="form-input"
placeholder="请输入手机号码"
type="number"
value="{{addForm.phone}}"
bindinput="onFormInput"
data-field="phone"
/>
</view>
<view class="form-item">
<text class="form-label">员工角色</text>
<picker
class="form-picker"
bindchange="onRoleChange"
value="{{addForm.role}}"
range="{{roleOptions}}"
range-key="label"
>
<view class="picker-display">
<text class="picker-text">
{{addForm.role === 'ADMIN' ? '管理员' : addForm.role === 'DELIVERY_PERSON' ? '配送员' : '请选择角色'}}
</text>
<text class="picker-arrow">▼</text>
</view>
</picker>
</view>
<view class="form-hint">
<text class="hint-text">
提示：添加员工后，用户可以使用该员工的姓名和手机号进行注册
</text>
</view>
<button
class="submit-btn"
bindtap="submitAddForm"
disabled="{{loading}}"
>
{{loading ? '添加中...' : '添加员工'}}
</button>
</view>
</view>
</view>

485
miniprogram/pages/employee/employee.wxss Normal file
View File

@@ -0,0 +1,485 @@
/* 员工管理页面样式 */
.employee-container {
width: 100%;
height: 100vh;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
}
/* 顶部导航栏 */
.top-nav {
height: 90rpx;
background-color: #1aad19;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.nav-left {
display: flex;
align-items: center;
gap: 20rpx;
}
.back-btn {
font-size: 40rpx;
font-weight: bold;
cursor: pointer;
}
.nav-title {
font-size: 36rpx;
font-weight: bold;
}
.nav-right {
font-size: 28rpx;
opacity: 0.9;
}
/* 页面标签 */
.page-tabs {
height: 80rpx;
background-color: white;
display: flex;
border-bottom: 1rpx solid #e0e0e0;
}
.tab-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #666;
border-bottom: 4rpx solid transparent;
transition: all 0.3s;
}
.tab-item.active {
color: #1aad19;
border-bottom-color: #1aad19;
font-weight: bold;
}
.tab-text {
padding: 10rpx 0;
}
/* 消息提示 */
.message-container {
padding: 20rpx 30rpx;
}
.error-message, .success-message {
padding: 20rpx 30rpx;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
}
.error-message {
background-color: #fff2f0;
color: #ff4d4f;
border: 1rpx solid #ffccc7;
}
.success-message {
background-color: #f6ffed;
color: #52c41a;
border: 1rpx solid #b7eb8f;
}
.message-text {
flex: 1;
}
.close-btn {
font-size: 36rpx;
cursor: pointer;
padding-left: 20rpx;
}
/* 加载状态 */
.loading-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
}
.loading-spinner {
width: 60rpx;
height: 60rpx;
border: 4rpx solid #f3f3f3;
border-top: 4rpx solid #1aad19;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 20rpx;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
font-size: 28rpx;
color: #666;
}
/* 列表容器 */
.list-container {
flex: 1;
display: flex;
flex-direction: column;
padding-bottom: 60rpx; /* 添加底部边距，避免内容被底部遮挡 */
}
/* 搜索框 */
.search-container {
padding: 30rpx;
background: linear-gradient(135deg, #ffffff, #fafafa);
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, 0.03);
}
.search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.search-input {
flex: 1;
height: 80rpx;
background: linear-gradient(135deg, #f8f9fa, #f1f3f4);
border-radius: 40rpx;
padding: 0 80rpx 0 35rpx;
font-size: 30rpx;
border: 2rpx solid transparent;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.search-input:focus {
border-color: #1aad19;
background: linear-gradient(135deg, #ffffff, #f8f9fa);
box-shadow: 0 6rpx 25rpx rgba(26, 173, 25, 0.15);
}
.search-icon {
position: absolute;
right: 35rpx;
font-size: 36rpx;
color: #1aad19;
filter: drop-shadow(0 2rpx 4rpx rgba(26, 173, 25, 0.3));
}
/* 员工列表 */
.employee-list {
flex: 1;
padding: 30rpx;
box-sizing: border-box;
}
.employee-item {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20rpx;
padding: 35rpx;
margin: 25rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
}
.employee-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4rpx;
background: linear-gradient(90deg, #1aad19, #52c41a);
}
.employee-item:active {
transform: translateY(2rpx);
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
}
.employee-info {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
overflow: hidden;
}
.employee-avatar {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
background: linear-gradient(135deg, #1aad19, #52c41a);
display: flex;
align-items: center;
justify-content: center;
margin-right: 25rpx;
box-shadow: 0 4rpx 15rpx rgba(26, 173, 25, 0.3);
border: 3rpx solid rgba(255, 255, 255, 0.9);
}
.avatar-text {
color: white;
font-size: 36rpx;
font-weight: bold;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}
.employee-details {
flex: 1;
min-width: 0;
overflow: hidden;
}
.employee-name-row {
display: flex;
align-items: center;
margin-bottom: 12rpx;
gap: 15rpx;
}
.employee-name {
font-size: 34rpx;
font-weight: 700;
color: #1a1a1a;
letter-spacing: 0.5rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200rpx;
}
.employee-role {
font-size: 24rpx;
padding: 6rpx 16rpx;
border-radius: 20rpx;
background: linear-gradient(135deg, #f0f2f5, #e8ecef);
color: #595959;
display: flex;
align-items: center;
gap: 8rpx;
border: 1rpx solid rgba(0, 0, 0, 0.05);
}
.role-icon {
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
}
.employee-role.admin-role {
background: linear-gradient(135deg, #fff7e6, #ffe7ba);
color: #d46b08;
border: 1rpx solid rgba(250, 140, 22, 0.2);
}
.employee-phone {
font-size: 28rpx;
color: #666;
margin-bottom: 8rpx;
display: flex;
align-items: center;
gap: 8rpx;
}
.employee-phone::before {
content: '📱';
font-size: 24rpx;
}
.employee-id {
font-size: 24rpx;
color: #999;
display: flex;
align-items: center;
gap: 8rpx;
}
.employee-id::before {
content: '🆔';
font-size: 20rpx;
}
.employee-actions {
margin-left: 25rpx;
}
.delete-btn {
background: linear-gradient(135deg, #ff4d4f, #ff7875);
color: white;
border: none;
border-radius: 25rpx;
padding: 12rpx 24rpx;
font-size: 26rpx;
font-weight: 600;
box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
transition: all 0.3s ease;
border: 1rpx solid rgba(255, 255, 255, 0.2);
}
.delete-btn:active {
background: linear-gradient(135deg, #d9363e, #ff7875);
transform: translateY(1rpx);
box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.2);
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 120rpx 30rpx;
color: #999;
background: linear-gradient(135deg, #fafafa, #f5f5f5);
border-radius: 25rpx;
margin: 30rpx;
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
border: 1rpx solid rgba(255, 255, 255, 0.8);
}
.empty-icon {
font-size: 100rpx;
display: block;
margin-bottom: 25rpx;
filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
}
.empty-text {
font-size: 36rpx;
display: block;
margin-bottom: 15rpx;
font-weight: 600;
color: #666;
}
.empty-hint {
font-size: 30rpx;
opacity: 0.8;
line-height: 1.6;
}
/* 添加容器 */
.add-container {
flex: 1;
padding: 30rpx;
}
.form-container {
background-color: white;
border-radius: 15rpx;
padding: 40rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.form-item {
margin-bottom: 40rpx;
}
.form-label {
display: block;
font-size: 30rpx;
color: #333;
margin-bottom: 15rpx;
font-weight: bold;
}
.form-input {
width: 100%;
height: 80rpx;
border: 1rpx solid #e0e0e0;
border-radius: 10rpx;
padding: 0 20rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.form-input:focus {
border-color: #1aad19;
}
.form-picker {
width: 100%;
height: 80rpx;
border: 1rpx solid #e0e0e0;
border-radius: 10rpx;
padding: 0 20rpx;
font-size: 28rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.picker-display {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.picker-text {
color: #333;
}
.picker-arrow {
color: #999;
font-size: 24rpx;
}
.form-hint {
background-color: #f6ffed;
border: 1rpx solid #b7eb8f;
border-radius: 10rpx;
padding: 20rpx;
margin-bottom: 40rpx;
}
.hint-text {
font-size: 26rpx;
color: #52c41a;
line-height: 1.5;
}
.submit-btn {
width: 100%;
height: 90rpx;
background-color: #1aad19;
color: white;
border: none;
border-radius: 45rpx;
font-size: 32rpx;
font-weight: bold;
}
.submit-btn:active {
background-color: #179b16;
}
.submit-btn:disabled {
background-color: #ccc;
color: #999;
}