小程序前端功能更新说明

🎯 更新概述

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

✨ 新增功能

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;
  }
}