recycle-front/pages/subcomponent/detail.vue

<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar" >
      <view class="back" @tap="goBack">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <text class="title">{{ orderDetail && orderDetail.ordeNo ? orderDetail.ordeNo : orderId }}</text>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 回收流程卡片 -->
      <view class="card process-card">
        <view class="card-title">回收流程</view>
        <view class="process-steps">
          <view 
            v-for="(step, index) in processSteps" 
            :key="index"
            class="step-item"
            :class="{ cancel: state === 3 && index === status }"
          >
            <image :src="step.icon" mode="aspectFit" class="step-icon"></image>
            <view 
              class="step-label"
              :class="{
                active: status === index && state !== 3,
                cancel: state === 3 && index === status
              }"
            >
              <view class="step-label-inner">
                <!-- <text class="step-num">{{ ['①','②','③','④'][index] }}</text> -->
                <text class="step-text">{{ step.text }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="process-divider"></view>

        <!-- 状态信息 -->
        <view class="status-info" v-if="currentStatus">
          <image class="status-icon" :src="currentStatus.icon" mode="aspectFit"></image>
          <view class="status-detail">
            <text class="status-text" v-if="state === 3">已取消本次预约</text>
            <text class="status-text" v-else>{{ currentStatus.text }}</text>
            <text class="status-time">{{ currentStatus.time }}</text>
          </view>
        </view>

        <!-- 取消后提示语 -->
        <view v-if="state === 3" class="cancel-tip">期待您下次的支持，共同为地球减少碳排放出一份力！</view>
        <!-- 物流公司，仅status为0、1时显示 -->
        <view class="express-info" v-if="state !== 3 && status <= 1">
          <text class="express-label">物流公司</text>
          <view class="express-row">
            <text class="express-value">{{ expressCompany }}{{ expressNo }}</text>
            <text class="express-copy" @tap="copyExpressNo">复制</text>
          </view>
        </view>
        <view class="info-divider" v-if="state !== 3 && status < 3"></view>
        <!-- 地址信息，仅非取消和非结款时显示 -->
        <view class="pickup-info" v-if="state !== 3 && status < 3">
          <view class="info-item" @tap="viewAddress">
            <text class="label">取件地址</text>
            <view class="value">
              <text class="text">{{ address }}</text>
              <!-- <text class="arrow">></text> -->
            </view>
          </view>
          <view class="info-item">
            <text class="label">{{ timeLabel }}</text>
            <view class="value">
              <text class="text">{{ appointmentTime }}</text>
              <!-- <text class="arrow">></text> -->
            </view>
          </view>
        </view>

      </view>

      <!-- 订单详情卡片 -->
      <view class="order-detail-card">
        <text class="order-title">订单详情</text>
        <view class="order-row">
          <text class="order-label">订单编号</text>
          <text class="order-value">{{ orderDetail && orderDetail.ordeNo ? orderDetail.ordeNo : orderId }}</text>
        </view>
        <view class="order-divider"></view>
        <template v-if="status < 2">
          <view class="order-row">
            <text class="order-label">预估回收</text>
            <text class="order-value order-highlight">¥ {{ estimatePrice }}</text>
          </view>
        </template>
        <template v-else-if="status === 3">
          <view class="order-row">
            <text class="order-label">合格结算</text>
            <text class="order-value order-highlight">¥ {{ finalPrice }}</text>
          </view>
          <view class="order-row">
            <text class="order-label">运费扣除</text>
            <text class="order-value">¥ 0</text>
          </view>
          <view class="order-row">
            <text class="order-label">结算金额</text>
            <text class="order-value order-highlight">¥ {{ finalPrice }}</text>
          </view>
        </template>
        <view class="order-divider"></view>
        <view class="goods-list">
          <view class="goods-item" v-for="(item, index) in clothesList" :key="index">
            <image class="goods-img" :src="item.image" mode="aspectFit"></image>
            <view class="goods-info">
              <text class="goods-name">{{ item.title }}</text>
              <text class="desc">{{ item.pinName }}</text>
              <text class="goods-desc">{{ item.details }}</text>
              <view class="goods-meta">
                <text class="goods-price">¥ {{ item.onePrice }}<text class="goods-unit"> /件</text></text>
                <text class="goods-count">x{{ item.num }}</text>
              </view>
            </view>
            <text class="goods-total">¥{{ item.estimatedPrice }}</text>
          </view>
        </view>
      </view>

      <!-- 质检结果卡片，仅结款状态显示 -->
      <view class="order-detail-card" v-if="status === 3">
        <text class="order-title">质检结果</text>
        <view class="order-row"><text class="order-label">质检数量</text><text class="order-value">9 件</text></view>
        <view class="order-row"><text class="order-label">质检合格</text><text class="order-value">7 件</text></view>
        <view class="order-row"><text class="order-label">质量问题</text><text class="order-value">2 件</text></view>
        <view class="order-row"><text class="order-label">不可回收</text><text class="order-value">0 件</text></view>
        <view class="order-row"><text class="order-label">订单重量</text><text class="order-value">2.85 kg</text></view>
        <view class="order-divider"></view>
        <view class="report-btn" @tap="viewReport">点此查看质检报告详情</view>
      </view>

      <!-- 详细信息卡片，仅结款状态显示 -->
      <view class="order-detail-card detail-info-card" v-if="status === 3">
        <text class="order-title">详细信息</text>
        <view class="order-row">
          <text class="order-label">预约时间</text>
          <text class="order-value">2025-03-20 11:00~12:00</text>
        </view>
        <view class="order-row">
          <text class="order-label">取件地址</text>
          <text class="order-value">{{ address }}</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮，仅在线预约时显示 -->
    <view class="bottom-btns" v-if="status === 0 && state !== 3">
      <button class="btn cancel-btn" @tap="showCancelModal = true">取消订单</button>
      <button class="btn contact-btn" @tap="contactCourier">联系快递员</button>
    </view>

    <!-- 取消订单弹窗 -->
    <view v-if="showCancelModal" class="modal-mask">
      <view class="modal-box">
        <view class="modal-title">取消订单</view>
        <view class="modal-content">确认要取消订单吗</view>
        <view class="modal-actions">
          <button class="modal-btn modal-cancel" @tap="showCancelModal = false">取消</button>
          <button class="modal-btn modal-confirm" @tap="confirmCancelOrder">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'

export default {
  mixins: [pullRefreshMixin],
  data() {
    return {
      orderId: '',
      currentStep: 1, // 当前进行到第几步
      processSteps: [
      ],
      address: '',
      appointmentTime: '',
      estimatePrice: '',
      finalPrice: '',
      clothesList: [],
      currentStatus: {
        text: '',
        time: '',
        icon: ''
      },
      phone: '',
      hasReport: false,
      reportTime: '',
      showEditButton: true,
      expressCompany: '',
      expressNo: '',
      showCancelModal: false,
      statusBarHeight: 0,
      orderDetail: null,
      status: null, // 订单状态：0:在线预约 1:快递上门 2:透明质检 3:现金打款
      state: null   // 订单状态：0待取件 1已取件 2已完成 3已取消
    }
  },
  computed: {
    timeLabel() {
      // 根据状态返回不同的时间标签
      if (this.status === 3) {
        return '回收到账时间'
      } else if (this.status === 2) {
        return '质检完成时间'
      } else {
        return '上门时间'
      }
    },
    showEstimate() {
      return this.status < 2
    }
  },
  methods: {
    async onRefresh() {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      uni.stopPullRefresh()
    },
    goBack() {
      getApp().globalData.shouldClearRecycle = true
      uni.navigateBack()
    },
    showMore() {
      // 显示更多选项
    },
    onShare() {
      // 分享功能
    },
    viewAddress() {
      // 查看完整地址
    },
    viewReport() {
      // 查看质检报告，传入orderId
			uni.navigateTo({
        url: `/pages/subcomponent/inspection-report?orderId=${this.orderId}`
      })
    },
    editOrder() {
      // 修改订单
    },
    // 更新订单状态
    updateOrderStatus(status) {
      switch(status) {
        case 'cancelled':
          this.currentStep = 0
          this.currentStatus = {
            text: '已取消',
            time: '',
            icon: '/static/my/【待取件】快递员正在赶来.png'
          }
          this.showEditButton = false
          break
        case 'processing':
          this.currentStep = 2
          this.currentStatus = {
            text: '【待取件】快递员正在赶来',
            time: '2025-04-20 11:00~13:00',
            icon: '/static/my/【待取件】快递员正在赶来.png'
          }
          break
        case 'collected':
          this.currentStep = 2
          this.currentStatus = {
            text: '【已取件】快递员正在送至质检',
            time: '2025-04-30 11:42',
            icon: '/static/my/【上门中】快递员正在赶来.png'
          }
          this.showEditButton = false
          break
        case 'inspecting':
          this.currentStep = 3
          this.currentStatus = {
            text: '【质检中】质检员正在质检',
            time: '2025-04-20 11:00',
            icon: '/static/my/逐件验-配图.png'
          }
          this.showEditButton = false
          break
        case 'pending_payment':
          this.currentStep = 4
          this.currentStatus = {
            text: '【待结款】待平台确认结款项',
            time: '2025-04-20 12:00',
            icon: '/static/my/【已结款】平台已结款至账户.png'
          }
          this.hasReport = true
          this.reportTime = '2025-03-20 11:40'
          this.showEditButton = false
          break
        case 'completed':
          this.currentStep = 4
          this.currentStatus = {
            text: '【已结款】平台已结款至账户',
            time: '2025-04-20 12:01',
            icon: '/static/my/【已结款】平台已结款至账户.png'
          }
          this.hasReport = true
          this.reportTime = '2025-03-20 11:40'
          this.showEditButton = false
          break
      }
    },
    copyExpressNo() {
      uni.setClipboardData({
        data: this.expressCompany + this.expressNo,
        success: () => {
          uni.showToast({ title: '已复制', icon: 'none' });
        }
      });
    },
    confirmCancelOrder() {
      this.showCancelModal = false;
      // 模拟取消动作
      this.currentStep = 0;
      // this.currentStatus = {
      //   text: '已取消',
      //   time: this.getNowTime(),
      //   icon: '/static/【待取件】快递员正在赶来.png'
      // };
      this.$api('cancelOrder', { orderId: this.orderId }, res => {
        if (res && res.code === 200) {
          console.log('res', res)
          uni.showToast({ title: '订单已取消', icon: 'none' });
          // 刷新页面数据
          this.fetchOrderDetail(this.orderId);
          // 通知订单列表页面刷新数据
          uni.$emit('orderStatusChanged');
        }
      })
      // uni.showToast({ title: '订单已取消', icon: 'none' });
    },
    getNowTime() {
      const now = new Date();
      const y = now.getFullYear();
      const m = (now.getMonth() + 1).toString().padStart(2, '0');
      const d = now.getDate().toString().padStart(2, '0');
      const h = now.getHours().toString().padStart(2, '0');
      const min = now.getMinutes().toString().padStart(2, '0');
      return `${y}-${m}-${d} ${h}:${min}`;
    },
    contactCourier() {
      // 联系快递员逻辑
      if (this.phone) {
        uni.makePhoneCall({
          phoneNumber: this.phone //仅为示例
        });
      }else{
        uni.showToast({ title: '暂无快递员电话', icon: 'none' });
      }
    },
    fetchOrderDetail(orderId) {
      this.$api && this.$api('getOrderDetail', { orderId }, res => {
        if (res && res.code === 200 && res.result) {
          this.orderDetail = res.result
          // 保存状态值
          this.status = res.result.status
          this.state = res.result.state
          // 赋值页面字段
          this.address = res.result.address + (res.result.addressDetail || '')
          this.appointmentTime = res.result.goTime || ''
          this.estimatePrice = res.result.estimatedPrice || ''
          this.finalPrice = res.result.price || ''
          this.clothesList = res.result.commonOrderList || []
          this.expressCompany = res.result.wliu || ''
          this.expressNo = res.result.expressNo || ''
          this.phone = res.result.deliveryPhone || ''
          // 状态判断
          this.setOrderStatus(res.result.status, res.result.state, res.result)
        }
      })
    },
    setOrderStatus(status, state, data) {
      // 0:在线预约 1:快递上门 2:透明质检 3:现金打款
      // state:0待取件 1已取件 2已完成 3已取消
      if (state == 3) {
        this.currentStep = 0
        this.currentStatus = {
          text: '已取消',
          time: '',
          icon: '/static/【待取件】快递员正在赶来.png'
        }
        this.showEditButton = false
        return
      }
      if (status == 0) {
        this.currentStep = 1
        this.currentStatus = {
          text: '【在线预约】',
          time: data.goTime || '',
          icon: '/static/home/① 在线预约.png'
        }
      } else if (status == 1 && state == 0) {
        this.currentStep = 2
        this.currentStatus = {
          text: '【待取件】快递员正在赶来',
          time: data.goTime || '',
          icon: '/static/my/【待取件】快递员正在赶来.png'
        }
      } else if (status == 1 && state == 1) {
        this.currentStep = 2
        this.currentStatus = {
          text: '【已取件】快递员正在送至质检',
          time: data.goTime || '',
          icon: '/static/my/【上门中】快递员正在赶来.png'
        }
      } else if (status == 2 && state == 1) {
        this.currentStep = 3
        this.currentStatus = {
          text: '【质检中】质检员正在质检',
          time: data.goTime || '',
          icon: '/static/my/逐件验-配图.png'
        }
      } else if (status == 3 && state == 1) {
        this.currentStep = 4
        this.currentStatus = {
          text: '【待结款】待平台确认结款项',
          time: data.goTime || '',
          icon: '/static/my/【已结款】平台已结款至账户.png'
        }
        this.hasReport = true
        this.reportTime = data.updateTime || ''
      } else if (status == 3 && state == 2) {
        this.currentStep = 4
        this.currentStatus = {
          text: '【已结款】平台已结款至账户',
          time: data.goTime || '',
          icon: '/static/my/【已结款】平台已结款至账户.png'
        }
        this.hasReport = true
        this.reportTime = data.updateTime || ''
      }
    },getAreaList() {
      this.$api('getAreaList', {}, (res) => {
        console.log(res,'getAreaList');
        if (res.code == 200 && Array.isArray(res.result)) {
          // 按sort升序排序
          const sorted = res.result.slice().sort((a, b) => a.sort - b.sort)
          this.processSteps = sorted.map(item => ({
            // id: item.id,
            icon: item.image,
            text: item.title
          }))
        }
      })
    },
  },
  onLoad(options) {
    if (options.id) {
	this.orderId = options.id
      this.fetchOrderDetail(options.id)
    }
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	this.getAreaList()
  },
  onShow() {
    this.getAreaList()
  }
}
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background: #f4f4f4;
  padding-bottom: 120rpx;
}
.card {
  background: linear-gradient(180deg, #fffbe6 0%, #fff 90%);
  border-radius: 28rpx;
  margin: 24rpx 24rpx 0 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(255, 156, 0, 0.03);
  padding: 40rpx 32rpx;
}
.nav-bar {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: calc(150rpx + var(--status-bar-height));
  background: #fff;
  padding: 0 32rpx;
  padding-top: var(--status-bar-height);
  box-sizing: border-box;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);

  .back {
    padding: 20rpx;
    margin-left: -20rpx;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
  }

  .right-btns {
    display: flex;
    align-items: center;
    gap: 30rpx;

    .more, .target {
      font-size: 40rpx;
      color: #333;
    }
  }
}
.card-title, .card-header .title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 24rpx;
}
.process-card {
  background: linear-gradient(180deg, #fffbe6 0%, #fff 35%);
  border-radius: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 156, 0, 0.04);
  padding: 40rpx 32rpx 32rpx 32rpx;
  margin: 24rpx;
}
.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 24rpx;
  text-align: left;
}
.process-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12rpx;
  gap: 18rpx;
}
.step-item {
  width: 150%;
  height: 150rpx;
  background: #fff8ea;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(255, 156, 0, 0.04);
  overflow: hidden;
  position: relative;
}
.step-item.cancel {
  background: linear-gradient(180deg, #fff0f3 0%, #ffd6df 100%) !important;
}
.step-icon {
  width: 86rpx;
  height: 86rpx;
  margin: 16rpx 0 0 0;
  flex-shrink: 0;
}
.step-label {
  width: 100%;
  height: 44rpx;
  background: transparent;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 0 0 16rpx 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  overflow: hidden;
}
.step-label.active {
  background: linear-gradient(90deg, #ffd01e 0%, #ff8917 100%);
}
.step-label.cancel {
  background: linear-gradient(to right, #ff8e8e 0%, #ff5e5e 100%) !important;
}
.step-label.cancel .step-num,
.step-label.cancel .step-text {
  color: #fff !important;
}
.step-label-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  // align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.step-num,
.step-text {
  font-family: PingFang SC;
font-weight: 400;
font-size: 11px;
letter-spacing: 0%;
  line-height: 48rpx;
  margin: 0;
  padding: 0;
  color: #9b9b9b;
}
.step-num {
  margin-right: 6rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.step-label.active .step-num,
.step-label.active .step-text {
  font-family: PingFang SC;
font-weight: 500;
font-size: 11px;
letter-spacing: 0%;
  color: #fff;
}
.process-divider {
  width: 100%;
  height: 0;
  border-bottom: 1rpx dashed #e6e6e6;
  margin: 20rpx 0 0 0;
}
.status-info {
  display: flex;
  align-items: center;
  margin: 24rpx 0;
  background: #fafafa;
  border-radius: 16rpx;
  padding: 16rpx;
}
.status-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 16rpx;
}
.status-detail {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.status-text {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
  display: block;
}
.status-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
  display: block;
}
.pickup-info .info-item {
  display: flex;
  // justify-content: space-between;
  flex-direction: column;
  // align-items: center;
  padding: 18rpx 0;
  border-bottom: 1px solid #f0f0f0;
  margin: 20rpx 0 20rpx 0;
}
.pickup-info .info-item:last-child {
  border-bottom: none;
}
.label {
  color: #999;
  font-size: 26rpx;
}
.value {
  color: #222;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}
.value .arrow {
  color: #bbb;
  margin-left: 8rpx;
}
.order-detail-card {
  background: linear-gradient(to bottom, #fff6e3 0%, #fff 20%);
  border-radius: 36rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 156, 0, 0.08);
  padding: 40rpx 36rpx 32rpx 36rpx;
  margin: 24rpx;
  margin-bottom: 164rpx;
}
.order-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 32rpx;
  text-align: left;
  display: block;
}
.order-row {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  margin-bottom: 18rpx;
}
.order-label {
  color: #bcbcbc;
  font-size: 26rpx;
  margin: 20rpx 0 20rpx 0;
}
.order-value {
  color: #222;
  font-size: 28rpx;
  margin-left: 30rpx;
  font-weight: 500;
}
.order-highlight {
  color: #ff9c00;
  font-size: 30rpx;
  font-weight: bold;
}
.order-divider {
  width: 100%;
  height: 1rpx;
  background: #f0f0f0;
  margin: 18rpx 0;
}
.goods-list {
  margin-top: 10rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.goods-item {
  background: #fff;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(255, 156, 0, 0.04);
  position: relative;
}
.goods-img {
  width: 90rpx;
  height: 90rpx;
  border-radius: 18rpx;
  margin-right: 20rpx;
  // background: #fffbe6;
  flex-shrink: 0;
}
.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.goods-name {
  font-size: 30rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 6rpx;
}
.desc { font-size: 24rpx; color: #999; margin: 4rpx 0 8rpx 0; }
.goods-desc {
  font-size: 24rpx;
  color: #bcbcbc;
  margin-bottom: 10rpx;
}
.goods-meta {
  display: flex;
  align-items: center;
  gap: 10rpx;
}
.goods-price {
  color: #ff9c00;
  font-size: 26rpx;
  font-weight: bold;
}
.goods-unit {
  color: #bcbcbc;
  font-size: 22rpx;
  font-weight: normal;
}
.goods-count {
  color: #bcbcbc;
  font-size: 24rpx;
  margin-left: 8rpx;
}
.goods-total {
  color: #222;
  font-size: 30rpx;
  font-weight: bold;
  margin-left: 18rpx;
  flex-shrink: 0;
}
.bottom-btns {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 30rpx;
  z-index: 10;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 24rpx calc(env(safe-area-inset-bottom) + 12rpx) 24rpx;
  box-shadow: 0 -2rpx 8rpx rgba(255, 156, 0, 0.04);
  border-radius: 24rpx 24rpx 0 0;
  gap: 24rpx;
}
.btn {
  flex: 1;
  height: 78rpx;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 44rpx;
  margin: 0;
  padding: 0;
}
.cancel-btn {
  color: #ff9c00;
  background: #fff0d2;
  border: 2rpx solid #ffd01e;
}
.contact-btn {
  color: #fff;
  background: linear-gradient(90deg, #ffd01e 0%, #ff8917 100%);
  border: none;
}
.express-info {
  // border: 1rpx solid #ffdca8;
  border-radius: 12rpx;
  // padding: 18rpx 20rpx 10rpx 20rpx;
  margin-bottom: 12rpx;
  margin-top: 8rpx;
  background: #fff;
  position: relative;
}
.express-label {
  color: #bcbcbc;
  font-size: 24rpx;
  margin-bottom: 8rpx;
  display: block;
}
.express-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.express-value {
  color: #222;
  font-size: 28rpx;
  font-weight: 500;
  word-break: break-all;
}
.express-copy {
  color: #ff9c00;
  font-size: 26rpx;
  font-weight: 500;
  margin-left: 16rpx;
}
.modal-mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  width: 560rpx;
  background: #fff;
  border-radius: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
  padding: 56rpx 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  text-align: center;
  margin-bottom: 18rpx;
}
.modal-content {
  font-size: 28rpx;
  color: #222;
  text-align: center;
  margin-bottom: 48rpx;
}
.modal-actions {
  width: 100%;
  display: flex;
  border-top: 1rpx solid #f0f0f0;
  height: 100rpx;
}
.modal-btn {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 0 0 0 32rpx;
  height: 100rpx;
  line-height: 100rpx;
}
.modal-cancel {
  color: #999;
  background: #fff;
  border-bottom-left-radius: 32rpx;
}
.modal-confirm {
  color: #ff9c00;
  background: #fff;
  border-bottom-right-radius: 32rpx;
}
.cancel-tip {
  color: #bcbcbc;
  font-size: 26rpx;
  text-align: center;
  margin: 24rpx 0 0 0;
}
.info-divider {
  width: 100%;
  height: 1rpx;
  background: #f0f0f0;
  margin: 0;
}
.report-btn {
  width: 100%;
  margin: 24rpx 0 0 0;
  padding: 0;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #ff9c00;
  background: #fff;
  border: 2rpx solid #ffd01e;
  border-radius: 44rpx;
  font-size: 28rpx;
  font-weight: bold;
}
.detail-info-card {
  margin-bottom: 48rpx;
}
.content {
  margin-top: calc(150rpx + var(--status-bar-height));
}
</style>