Merge branch 'feature-task'

wlzboy

2025-10-26 2c86a8bd60deed0dd0e044bad6fb83f75d19a332

 app/pages/task/detail.vue

New file
@@ -0,0 +1,749 @@
<template>
  <view class="task-detail-container">
    <view class="detail-header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="arrowleft" size="20"></uni-icons>
      </view>
      <view class="title">任务详情</view>
    </view>
    
    <scroll-view class="detail-content" scroll-y="true" v-if="taskDetail">
      <view class="detail-section">
        <view class="section-title">基本信息</view>
        <view class="info-item">
          <view class="label">任务编号</view>
          <view class="value">{{ taskDetail.taskCode }}</view>
        </view>
        <view class="info-item">
          <view class="label">任务类型</view>
          <view class="value">{{ displayTaskType }}</view>
        </view>
        <view class="info-item">
          <view class="label">任务状态</view>
          <view class="value status" :class="statusClass">
            {{ displayTaskStatus }}
          </view>
        </view>
        <view class="info-item">
          <view class="label">执行车辆</view>
          <view class="value">{{ getVehicleInfo(taskDetail) }}</view>
        </view>
        <view class="info-item">
          <view class="label">执行人员</view>
          <view class="value">{{ taskDetail.assigneeName || '未分配' }}</view>
        </view>
      </view>
      
      <view class="detail-section">
        <view class="section-title">时间信息</view>
        <view class="info-item">
          <view class="label">计划开始时间</view>
          <view class="value">{{ displayPlannedStartTime }}</view>
        </view>
        <view class="info-item">
          <view class="label">计划结束时间</view>
          <view class="value">{{ displayPlannedEndTime }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.actualStartTime">
          <view class="label">实际开始时间</view>
          <view class="value">{{ displayActualStartTime }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.actualEndTime">
          <view class="label">实际结束时间</view>
          <view class="value">{{ displayActualEndTime }}</view>
        </view>
      </view>
      
      <view class="detail-section">
        <view class="section-title">位置信息</view>
        <!-- 转运任务：显示转出/转入医院地址 -->
        <template v-if="taskDetail.taskType === 'EMERGENCY_TRANSFER' && taskDetail.emergencyInfo">
          <view class="info-item" v-if="taskDetail.emergencyInfo.hospitalOutAddress">
            <view class="label">转出医院</view>
            <view class="value">{{ taskDetail.emergencyInfo.hospitalOutAddress }}</view>
          </view>
          <view class="info-item" v-if="taskDetail.emergencyInfo.hospitalInAddress">
            <view class="label">转入医院</view>
            <view class="value">{{ taskDetail.emergencyInfo.hospitalInAddress }}</view>
          </view>
        </template>
        <!-- 福祉车任务：显示接送/目的地址 -->
        <template v-else-if="taskDetail.taskType === 'WELFARE' && taskDetail.welfareInfo">
          <view class="info-item" v-if="taskDetail.welfareInfo.pickupAddress">
            <view class="label">接送地址</view>
            <view class="value">{{ taskDetail.welfareInfo.pickupAddress }}</view>
          </view>
          <view class="info-item" v-if="taskDetail.welfareInfo.destinationAddress">
            <view class="label">目的地址</view>
            <view class="value">{{ taskDetail.welfareInfo.destinationAddress }}</view>
          </view>
        </template>
        <!-- 其他任务类型：显示通用地址 -->
        <template v-else>
          <view class="info-item">
            <view class="label">出发地</view>
            <view class="value">{{ getDepartureAddress(taskDetail) }}</view>
          </view>
          <view class="info-item">
            <view class="label">目的地</view>
            <view class="value">{{ getDestinationAddress(taskDetail) }}</view>
          </view>
        </template>
        <!-- 距离信息：根据任务类型显示不同字段 -->
        <view class="info-item" v-if="getDistanceInfo(taskDetail)">
          <view class="label">距离</view>
          <view class="value">{{ getDistanceInfo(taskDetail) }}公里</view>
        </view>
      </view>
      
      <view class="detail-section" v-if="taskDetail.taskDescription">
        <view class="section-title">任务描述</view>
        <view class="description">{{ taskDetail.taskDescription }}</view>
      </view>
      
      <view class="detail-section" v-if="taskDetail.remark">
        <view class="section-title">备注信息</view>
        <view class="description">{{ taskDetail.remark }}</view>
      </view>
      
      <!-- 转运任务特有信息 -->
      <view class="detail-section" v-if="taskDetail.taskType === 'EMERGENCY_TRANSFER' && taskDetail.emergencyInfo">
        <view class="section-title">患者信息</view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.patientName">
          <view class="label">患者姓名</view>
          <view class="value">{{ taskDetail.emergencyInfo.patientName }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.patientPhone">
          <view class="label">联系电话</view>
          <view class="value">{{ taskDetail.emergencyInfo.patientPhone }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.patientGender">
          <view class="label">性别</view>
          <view class="value">{{ taskDetail.emergencyInfo.patientGender === 'male' ? '男' : '女' }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.patientAge">
          <view class="label">年龄</view>
          <view class="value">{{ taskDetail.emergencyInfo.patientAge }}岁</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.patientIdCard">
          <view class="label">身份证号</view>
          <view class="value">{{ taskDetail.emergencyInfo.patientIdCard }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.patientCondition">
          <view class="label">病情描述</view>
          <view class="value">{{ taskDetail.emergencyInfo.patientCondition }}</view>
        </view>
      </view>
      
      <!-- 转运 - 转出医院信息 -->
      <view class="detail-section" v-if="taskDetail.taskType === 'EMERGENCY_TRANSFER' && taskDetail.emergencyInfo">
        <view class="section-title">转出医院信息</view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.hospitalOutName">
          <view class="label">医院名称</view>
          <view class="value">{{ taskDetail.emergencyInfo.hospitalOutName }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.hospitalOutDepartment">
          <view class="label">科室</view>
          <view class="value">{{ taskDetail.emergencyInfo.hospitalOutDepartment }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.hospitalOutBedNumber">
          <view class="label">床号</view>
          <view class="value">{{ taskDetail.emergencyInfo.hospitalOutBedNumber }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.hospitalOutAddress">
          <view class="label">医院地址</view>
          <view class="value">{{ taskDetail.emergencyInfo.hospitalOutAddress }}</view>
        </view>
      </view>
      
      <!-- 转运 - 转入医院信息 -->
      <view class="detail-section" v-if="taskDetail.taskType === 'EMERGENCY_TRANSFER' && taskDetail.emergencyInfo">
        <view class="section-title">转入医院信息</view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.hospitalInName">
          <view class="label">医院名称</view>
          <view class="value">{{ taskDetail.emergencyInfo.hospitalInName }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.hospitalInDepartment">
          <view class="label">科室</view>
          <view class="value">{{ taskDetail.emergencyInfo.hospitalInDepartment }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.hospitalInBedNumber">
          <view class="label">床号</view>
          <view class="value">{{ taskDetail.emergencyInfo.hospitalInBedNumber }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.hospitalInAddress">
          <view class="label">医院地址</view>
          <view class="value">{{ taskDetail.emergencyInfo.hospitalInAddress }}</view>
        </view>
      </view>
      
      <!-- 转运 - 费用信息 -->
      <view class="detail-section" v-if="taskDetail.taskType === 'EMERGENCY_TRANSFER' && taskDetail.emergencyInfo">
        <view class="section-title">费用信息</view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.transferDistance">
          <view class="label">转运公里数</view>
          <view class="value">{{ taskDetail.emergencyInfo.transferDistance }}公里</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.transferPrice">
          <view class="label">转运费用</view>
          <view class="value">￥{{ taskDetail.emergencyInfo.transferPrice }}</view>
        </view>
      </view>
      
      <!-- 福祉车任务特有信息 -->
      <view class="detail-section" v-if="taskDetail.taskType === 'WELFARE' && taskDetail.welfareInfo">
        <view class="section-title">乘客信息</view>
        <view class="info-item" v-if="taskDetail.welfareInfo.passengerContact">
          <view class="label">联系人</view>
          <view class="value">{{ taskDetail.welfareInfo.passengerContact }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.welfareInfo.passengerPhone">
          <view class="label">联系电话</view>
          <view class="value">{{ taskDetail.welfareInfo.passengerPhone }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.welfareInfo.passengerName">
          <view class="label">乘客姓名</view>
          <view class="value">{{ taskDetail.welfareInfo.passengerName }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.welfareInfo.passengerAge">
          <view class="label">年龄</view>
          <view class="value">{{ taskDetail.welfareInfo.passengerAge }}岁</view>
        </view>
        <view class="info-item" v-if="taskDetail.welfareInfo.passengerGender">
          <view class="label">性别</view>
          <view class="value">{{ taskDetail.welfareInfo.passengerGender === 'male' ? '男' : '女' }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.welfareInfo.passengerIdCard">
          <view class="label">身份证号</view>
          <view class="value">{{ taskDetail.welfareInfo.passengerIdCard }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.welfareInfo.specialNeeds">
          <view class="label">特殊需求</view>
          <view class="value">{{ taskDetail.welfareInfo.specialNeeds }}</view>
        </view>
      </view>
      
      <!-- 福祉车 - 服务信息 -->
      <view class="detail-section" v-if="taskDetail.taskType === 'WELFARE' && taskDetail.welfareInfo">
        <view class="section-title">服务信息</view>
        <view class="info-item" v-if="taskDetail.welfareInfo.serviceType">
          <view class="label">服务类型</view>
          <view class="value">{{ taskDetail.welfareInfo.serviceType }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.welfareInfo.pickupAddress">
          <view class="label">接送地址</view>
          <view class="value">{{ taskDetail.welfareInfo.pickupAddress }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.welfareInfo.destinationAddress">
          <view class="label">目的地址</view>
          <view class="value">{{ taskDetail.welfareInfo.destinationAddress }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.welfareInfo.serviceDistance">
          <view class="label">服务公里数</view>
          <view class="value">{{ taskDetail.welfareInfo.serviceDistance }}公里</view>
        </view>
        <view class="info-item" v-if="taskDetail.welfareInfo.servicePrice">
          <view class="label">服务费用</view>
          <view class="value">￥{{ taskDetail.welfareInfo.servicePrice }}</view>
        </view>
      </view>
    </scroll-view>
    
    <view class="loading" v-else>
      <uni-icons type="spinner-cycle" size="40" color="#007AFF"></uni-icons>
      <text>加载中...</text>
    </view>
    
    <!-- 操作按钮区域 -->
    <view class="action-buttons" v-if="taskDetail">
      <!-- 待处理状态: 显示出发、取消 -->
      <template v-if="taskDetail.taskStatus === 'PENDING'">
        <button 
          class="action-btn primary" 
          @click="handleTaskAction('depart')"
        >
          出发
        </button>
        <button 
          class="action-btn cancel" 
          @click="handleTaskAction('cancel')"
        >
          取消
        </button>
      </template>
      
      <!-- 出发中状态: 显示已到达、强制结束 -->
      <template v-else-if="taskDetail.taskStatus === 'DEPARTING'">
        <button 
          class="action-btn primary" 
          @click="handleTaskAction('arrive')"
        >
          已到达
        </button>
        <button 
          class="action-btn cancel" 
          @click="handleTaskAction('forceCancel')"
        >
          强制结束
        </button>
      </template>
      
      <!-- 已到达状态: 显示已返程 -->
      <template v-else-if="taskDetail.taskStatus === 'ARRIVED'">
        <button 
          class="action-btn primary" 
          @click="handleTaskAction('return')"
        >
          已返程
        </button>
      </template>
      
      <!-- 返程中状态: 显示已完成 -->
      <template v-else-if="taskDetail.taskStatus === 'RETURNING'">
        <button 
          class="action-btn primary" 
          @click="handleTaskAction('complete')"
        >
          已完成
        </button>
      </template>
      
      <!-- 已完成/已取消: 不显示按钮 -->
    </view>
  </view>
</template>

<script>
  import { getTask, changeTaskStatus } from '@/api/task'
  import { formatDateTime } from '@/utils/common'
  
  export default {
    data() {
      return {
        taskDetail: null,
        taskId: null
      }
    },
    computed: {
      // 显示任务类型
      displayTaskType() {
        if (!this.taskDetail || !this.taskDetail.taskType) {
          return '未设置'
        }
        return this.getTaskTypeText(this.taskDetail.taskType)
      },
      // 显示任务状态
      displayTaskStatus() {
        if (!this.taskDetail || !this.taskDetail.taskStatus) {
          return '未设置'
        }
        return this.getStatusText(this.taskDetail.taskStatus)
      },
      // 状态样式类
      statusClass() {
        if (!this.taskDetail || !this.taskDetail.taskStatus) {
          return ''
        }
        const status = this.taskDetail.taskStatus
        if (status === 'PENDING') return 'pending'
        if (['DEPARTING', 'ARRIVED', 'RETURNING', 'IN_PROGRESS'].includes(status)) return 'in_progress'
        if (status === 'COMPLETED') return 'completed'
        if (status === 'CANCELLED') return 'cancelled'
        return ''
      },
      // 显示计划开始时间
      displayPlannedStartTime() {
        if (!this.taskDetail || !this.taskDetail.plannedStartTime) {
          return '未设置'
        }
        return formatDateTime(this.taskDetail.plannedStartTime, 'YYYY-MM-DD HH:mm')
      },
      // 显示计划结束时间
      displayPlannedEndTime() {
        if (!this.taskDetail || !this.taskDetail.plannedEndTime) {
          return '未设置'
        }
        return formatDateTime(this.taskDetail.plannedEndTime, 'YYYY-MM-DD HH:mm')
      },
      // 显示实际开始时间
      displayActualStartTime() {
        if (!this.taskDetail || !this.taskDetail.actualStartTime) {
          return '未设置'
        }
        return formatDateTime(this.taskDetail.actualStartTime, 'YYYY-MM-DD HH:mm')
      },
      // 显示实际结束时间
      displayActualEndTime() {
        if (!this.taskDetail || !this.taskDetail.actualEndTime) {
          return '未设置'
        }
        return formatDateTime(this.taskDetail.actualEndTime, 'YYYY-MM-DD HH:mm')
      }
    },
    onLoad(options) {
      this.taskId = options.id
      this.loadTaskDetail()
    },
    methods: {
      // 加载任务详情
      loadTaskDetail() {
        if (!this.taskId) {
          this.$modal.showToast('任务ID不能为空')
          return
        }
        
        getTask(this.taskId).then(response => {
          this.taskDetail = response.data || response
          // 调试：打印返回的数据
          console.log('任务详情完整数据:', JSON.stringify(this.taskDetail, null, 2))
          console.log('任务类型字段值:', this.taskDetail.taskType)
          console.log('任务状态字段值:', this.taskDetail.taskStatus)
          console.log('出发地址:', this.taskDetail.departureAddress)
          console.log('目的地址:', this.taskDetail.destinationAddress)
        }).catch(error => {
          console.error('加载任务详情失败:', error)
          this.$modal.showToast('加载任务详情失败')
        })
      },
      
      // 获取车辆信息
      getVehicleInfo(task) {
        if (task.assignedVehicles && task.assignedVehicles.length > 0) {
          const firstVehicle = task.assignedVehicles[0]
          let vehicleInfo = firstVehicle.vehicleNo || '未知车牌'
          if (task.assignedVehicles.length > 1) {
            vehicleInfo += ` 等${task.assignedVehicles.length}辆`
          }
          return vehicleInfo
        }
        return '未分配车辆'
      },
      
      // 获取出发地址
      getDepartureAddress(task) {
        // 优先使用departureAddress，如果为空则尝试其他可能的字段
        return task.departureAddress || task.startAddress || task.startLocation || '未设置'
      },
      
      // 获取目的地址
      getDestinationAddress(task) {
        // 优先使用destinationAddress，如果为空则尝试其他可能的字段
        return task.destinationAddress || task.endAddress || task.endLocation || '未设置'
      },
      
      // 获取距离信息：根据任务类型返回不同字段
      getDistanceInfo(task) {
        // 转运：优先使用transferDistance
        if (task.taskType === 'EMERGENCY_TRANSFER' && task.emergencyInfo && task.emergencyInfo.transferDistance) {
          return task.emergencyInfo.transferDistance
        }
        // 福祉车：优先使用serviceDistance
        if (task.taskType === 'WELFARE' && task.welfareInfo && task.welfareInfo.serviceDistance) {
          return task.welfareInfo.serviceDistance
        }
        // 其他任务类型：使用estimatedDistance
        return task.estimatedDistance || null
      },
      
      // 返回上一页
      goBack() {
        uni.navigateBack()
      },
      
      // 获取状态文本
      getStatusText(status) {
        const statusMap = {
          'PENDING': '待处理',
          'DEPARTING': '出发中',
          'ARRIVED': '已到达',
          'RETURNING': '返程中',
          'COMPLETED': '已完成',
          'CANCELLED': '已取消',
          'IN_PROGRESS': '处理中' // 兼容旧数据
        }
        return statusMap[status] || '未知'
      },
      
      // 获取任务类型文本
      getTaskTypeText(type) {
        const typeMap = {
          'MAINTENANCE': '维修保养',
          'FUEL': '加油',
          'OTHER': '其他',
          'EMERGENCY_TRANSFER': '转运任务',
          'WELFARE': '福祉车'
        }
        return typeMap[type] || '未知类型'
      },
      
      // 处理任务操作
      handleTaskAction(action) {
        switch (action) {
          case 'depart':
            // 出发 -> 状态变为出发中
            this.$modal.confirm('确定要出发吗？').then(() => {
              this.updateTaskStatus('DEPARTING', '任务已出发')
            }).catch(() => {});
            break;
            
          case 'cancel':
            // 取消 -> 二次确认后状态变为已取消
            this.$modal.confirm('确定要取消此任务吗？').then(() => {
              this.updateTaskStatus('CANCELLED', '任务已取消')
            }).catch(() => {});
            break;
            
          case 'arrive':
            // 已到达 -> 状态变为已到达
            this.$modal.confirm('确认已到达目的地？').then(() => {
              this.updateTaskStatus('ARRIVED', '已到达目的地')
            }).catch(() => {});
            break;
            
          case 'forceCancel':
            // 强制结束 -> 状态变为已取消
            this.$modal.confirm('确定要强制结束此任务吗？').then(() => {
              this.updateTaskStatus('CANCELLED', '任务已强制结束')
            }).catch(() => {});
            break;
            
          case 'return':
            // 已返程 -> 状态变为返程中
            this.$modal.confirm('确认开始返程？').then(() => {
              this.updateTaskStatus('RETURNING', '已开始返程')
            }).catch(() => {});
            break;
            
          case 'complete':
            // 已完成 -> 状态变为已完成
            this.$modal.confirm('确认任务已完成？').then(() => {
              this.updateTaskStatus('COMPLETED', '任务已完成')
            }).catch(() => {});
            break;
        }
      },
      
      // 更新任务状态
      updateTaskStatus(status, remark) {
        // 获取GPS位置信息
        this.getLocationAndUpdateStatus(status, remark)
      },
      
      // 获取位置信息并更新状态
      getLocationAndUpdateStatus(status, remark) {
        const that = this
        
        // 使用uni.getLocation获取GPS位置
        uni.getLocation({
          type: 'gcj02', // 返回可以用于uni.openLocation的坐标
          geocode: true, // 解析地址信息
          altitude: true, // 高精度定位，包含高度信息
          success: function(res) {
            console.log('GPS定位成功:', res)
            
            const statusData = {
              taskStatus: status,
              remark: remark,
              // GPS位置信息
              latitude: res.latitude,
              longitude: res.longitude,
              locationAddress: res.address ? res.address.street || res.address.poiName || '' : '',
              locationProvince: res.address ? res.address.province || '' : '',
              locationCity: res.address ? res.address.city || '' : '',
              locationDistrict: res.address ? res.address.district || '' : '',
              gpsAccuracy: res.accuracy,
              altitude: res.altitude,
              speed: res.speed,
              heading: res.direction || res.heading
            }
            
            changeTaskStatus(that.taskId, statusData).then(response => {
              that.$modal.showToast('状态更新成功')
              // 重新加载任务详情
              that.loadTaskDetail()
            }).catch(error => {
              console.error('更新任务状态失败:', error)
              that.$modal.showToast('状态更新失败，请重试')
            })
          },
          fail: function(err) {
            console.error('GPS定位失败:', err)
            
            // 定位失败时提示用户，但仍然允许更新状态（不带GPS信息）
            that.$modal.confirm('GPS定位失败，是否继续更新状态？').then(() => {
              const statusData = {
                taskStatus: status,
                remark: remark
              }
              
              changeTaskStatus(that.taskId, statusData).then(response => {
                that.$modal.showToast('状态更新成功')
                that.loadTaskDetail()
              }).catch(error => {
                console.error('更新任务状态失败:', error)
                that.$modal.showToast('状态更新失败，请重试')
              })
            }).catch(() => {
              // 用户取消操作
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .task-detail-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    
    .detail-header {
      display: flex;
      align-items: center;
      padding: 20rpx;
      background-color: white;
      border-bottom: 1rpx solid #f0f0f0;
      
      .back-btn {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background-color: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
      }
      
      .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
    }
    
    .detail-content {
      padding: 20rpx;
      height: calc(100vh - 220rpx); // 减去header(100rpx)和按钮区域(120rpx)的高度
      padding-bottom: 20rpx; // 底部留出空间
    }
    
    .detail-section {
      background-color: white;
      border-radius: 15rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      
      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        color: #333;
        border-bottom: 1rpx solid #f0f0f0;
        padding-bottom: 10rpx;
      }
      
      .info-item {
        display: flex;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          width: 200rpx;
          font-size: 28rpx;
          color: #666;
          flex-shrink: 0;
        }
        
        .value {
          flex: 1;
          font-size: 28rpx;
          color: #333;
          word-break: break-all;
          
          &.status {
            &.pending {
              color: #ff9500;
            }
            &.in_progress {
              color: #007AFF;
            }
            &.completed {
              color: #34C759;
            }
            &.cancelled {
              color: #ff3b30;
            }
          }
        }
      }
      
      .description {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
        background-color: #f9f9f9;
        padding: 20rpx;
        border-radius: 10rpx;
      }
    }
    
    .loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 400rpx;
      color: #999;
      
      text {
        margin-top: 20rpx;
        font-size: 28rpx;
      }
    }
    
    .action-buttons {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      padding: 20rpx;
      background-color: white;
      box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
      
      .action-btn {
        flex: 1;
        height: 80rpx;
        border-radius: 10rpx;
        font-size: 30rpx;
        margin: 0 10rpx;
        background-color: #f0f0f0;
        color: #333;
        
        &.primary {
          background-color: #007AFF;
          color: white;
        }
        
        &.cancel {
          background-color: #ff3b30;
          color: white;
        }
        
        &:first-child {
          margin-left: 0;
        }
        
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
</style>