当前位置：首页 > news >正文

小程序前端功能更新说明

news 2025/10/2 6:56:30

🎯 更新概述

本次更新为小程序违规管理页面新增了预约详细信息显示功能，现在可以查看预约类型、审核人、审核状态等完整的预约信息。

✨ 新增功能

1. 预约详细信息显示

*� 高风险车辆统计区域

在违规详情展开面板中新增了预约信息行：

预约类型：显示访客预约、业主预约、送货预约等类型

审核人：显示审核该预约的管理员姓名

审核状态：显示已审核通过、已拒绝、待审核等状态

预约日期：显示预约的计划访问日期

*� 实时违规记录区域

在违规记录详情页面新增了完整的预约信息区域：

预约原因：详细的访问目的说明

预约类型：中文显示的预约类型

审核人：负责审核的管理员姓名

审核状态：带颜色标识的审核状态

预约日期：计划访问日期

审核时间：实际审核处理时间

2. 交互式预约详情查看

点击查看详情功能

预约信息区域支持点击操作

点击后弹出完整的预约详情对话框

右上角显示"点击查看详情"提示

支持鼠标悬停效果（Web端）

新增API接口调用

getAppointmentDetail(appointmentId) - 获取预约详细信息

showAppointmentDetailModal(record) - 显示预约详情弹窗

3. 美观的UI设计

视觉优化

预约信息区域采用渐变蓝色背景

不同类型的信息标签使用不同的颜色主题

审核状态采用语义化颜色：

- 🟢 已审核通过：绿色渐变

- 🔴 已拒绝：红色渐变

- 🟡 待审核：黄色渐变

响应式设计

支持移动端和Web端适配

点击效果和悬停效果

流畅的过渡动画

📊 数据字段映射

后端返回的新字段

字段名	类型	说明	前端显示
`appointmentReason`	String	预约原因	📝 预约原因
`appointmentType`	String	预约类型代码	🔄 后端代码
`appointmentTypeText`	String	预约类型中文	🏠 预约类型
`auditorName`	String	审核人姓名	👤 审核人
`appointmentStatus`	String	审核状态代码	🔄 后端代码
`appointmentStatusText`	String	审核状态中文	✅ 审核状态
`appointmentDate`	String	预约日期	📅 预约日期
`auditDate`	DateTime	审核时间	⏰ 审核时间

前端处理逻辑

// 优先显示中文字段，回退到原始字段
appointmentTypeText: record.appointmentTypeText || record.appointmentType
appointmentStatusText: record.appointmentStatusText || record.appointmentStatus// CSS类名动态绑定
:class="{'status-approved': record.appointmentStatus === 'approved','status-rejected': record.appointmentStatus === 'rejected','status-pending': record.appointmentStatus === 'pending'
}"

🎨 界面展示示例

违规记录详情页面

🚗 违规记录详情
─────────────────────
📋 基础信息
车牌：川A12345
时间：01-15 14:30
位置：A区域
状态：⚪ 在场👤 业主信息  
姓名：张三
电话：138****8000 📞
地址：阳光小区1栋2单元301室📅 预约详细信息 [点击查看详情 👆]
────────────────────────────────
📝 预约原因：探望老人
🏠 预约类型：访客预约
👤 审核人：王管理员
✅ 审核状态：已审核通过
📅 预约日期：2025-01-15
⏰ 审核时间：2025-01-14 10:30:00

预约详情弹窗

┌─────────────────────┐
│ 📋 预约详情         │
├─────────────────────┤
│ 预约类型：访客预约   │
│ 预约原因：探望老人   │
│ 审核人：王管理员     │
│ 审核状态：已审核通过 │
├─────────────────────┤
│        [知道了]      │
└─────────────────────┘

🔧 技术实现细节

1. Vue组件更新

模板部分新增

<!-- 预约详细信息行 -->
<view class="info-row appointment-details" v-if="violation.appointmentType || violation.auditorName"><view class="info-tag appointment-type-tag" v-if="violation.appointmentType"><u-icon name="home" size="16" color="#52c41a"></u-icon><text class="tag-label">预约类型</text><text class="tag-value">{{ violation.appointmentTypeText || violation.appointmentType }}</text></view><!-- 更多信息... -->
</view>

交互式预约信息区域

<view class="appointment-info-section" v-if="record.appointmentReason || record.appointmentType || record.auditorName"@click="showAppointmentDetailModal(record)"><!-- 预约详细信息 -->
</view>

2. 样式设计

预约信息区域样式

.appointment-info-section {background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);border-radius: 16rpx;padding: 20rpx;margin-top: 16rpx;border: 1rpx solid #bae6fd;cursor: pointer;transition: all 0.3s ease;position: relative;
}.appointment-info-section::after {content: '👆 点击查看详情';position: absolute;top: 8rpx;right: 16rpx;font-size: 20rpx;color: #0284c7;opacity: 0.7;
}

状态颜色样式

.status-text.status-approved {background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);color: #15803d;
}.status-text.status-rejected {background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);color: #dc2626;
}.status-text.status-pending {background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);color: #d97706;
}

3. API接口调用

获取预约详情方法

async getAppointmentDetail(appointmentId) {try {const response = await uni.request({url: `${apiConfig.baseURL}/api/violations/appointment-detail/${appointmentId}`,method: 'GET',header: {'Content-Type': 'application/json'}});if (response.statusCode === 200 && response.data && response.data.code === 200) {return response.data.data;}return null;} catch (error) {console.error('获取预约详情失败:', error);return null;}
}

查看全文

http://www.dtcms.com/a/431002.html