mechanicStore-app/pages/index/order.uvue

<template>
  <view class="container">
    <!-- 状态标签页 (顶部) -->
    <scroll-view scroll-x class="tab-bar" show-scrollbar="false">
      <view
      v-for="(tab, index) in tabs"
      :key="index"
      :class="['tab-item', { active: currentTab === index }]"
      @click="currentTab = index"
      >
        {{ tab }}
        <!-- 仅在新订单下显示黄色下划线 -->
        <view v-if="index === 0" class="underline">
        </view>
      </view>
    </scroll-view>

    <!-- 订单列表区域 -->
    <view class="order-list">
      <view v-for="(order, idx) in orders" :key="idx" class="order-card">

        <!-- 1. 头部：时间与状态 -->
        <view class="card-header">
          <text class="time-text">
            预约时间：{{ order.time }}
          </text>
          <text class="status-tag paid">
            已支付
          </text>
        </view>

        <!-- 2. 服务信息行 -->
        <view class="service-row">
          <image :src="order.image" class="service-img" mode="aspectFill" />
          <view class="service-info">
            <view class="title-row">
              <text class="service-name">
                {{ order.serviceName }}
              </text>
              <text class="price">
                ¥{{ order.price }}
              </text>
            </view>

            <view class="tags-row">
              <text v-for="(tag, tIdx) in order.tags" :key="tIdx" :class="['tag', tag.type]">
                {{ tag.text }}
              </text>
            </view>

            <text class="contact-text">
              联系人：{{ order.contact }}
            </text>
          </view>
        </view>

        <!-- 3. 地址与距离 -->
        <view class="address-row">
          <uni-icons type="location" size="16" color="#999">
          </uni-icons>
          <text class="address-text">
            {{ order.address }}
          </text>
          <text class="distance-text">
            {{ order.distance }}km
          </text>
        </view>

        <!-- 4. 预估收入 -->
        <view class="income-section">
          <text class="income-label">
            预估收入
          </text>
          <view class="income-value-box">
            <text class="income-value">
              ¥{{ order.income }}
            </text>
            <text class="income-note">
              (含路费)
            </text>
          </view>
        </view>

        <!-- 5. 底部操作按钮 -->
        <view class="action-buttons">
          <view class="btn btn-nav" @click="handleNav(order.address)">
            <uni-icons type="navigation" size="14" color="#333">
            </uni-icons>
            <text>
              地址导航
            </text>
          </view>
          <view class="btn btn-transfer" @click="handleTransfer(order.id)">
            我要转单
          </view>
          <view class="btn btn-confirm" @click="handleConfirm(order.id)">
            确认接单
          </view>
        </view>

      </view>

      <!-- 空状态提示 (可选) -->
      <view v-if="orders.length === 0" class="empty-state">
        <text>
          暂无相关订单
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  // --- 数据定义 ---
  const tabs = ['新订单',
    '进行中',
    '取消/售后',
    '已完成',
  '全部'];
  const currentTab = ref(0);

  // 模拟订单数据
  const orders = ref([
      {
        id: 101,
        time: '2025-06-18 4:00',
        serviceName: '润养SPA',
        tags: [
          { text: '上门', type: 'orange-outline' },
          { text: '首单', type: 'orange-outline' },
          { text: '新客', type: 'green-outline' }
        ],
        contact: '刘',
        price: '286.6',
        address: '烟台 芝罘区楚风一街楚凤花园（烟台吾悦）广场附近',
        distance: '2.24',
        income: '186.6',
        // 请替换为实际图片路径，或使用占位图
        image: 'https://via.placeholder.com/100x100/ffccaa/ffffff?text=SPA'
      },
      {
        id: 102,
        time: '2025-06-18 8:00',
        serviceName: '润养SPA',
        tags: [
          { text: '加钟', type: 'green-outline' }
        ],
        contact: '刘',
        price: '286.6',
        address: '烟台 芝罘区楚风一街楚凤花园（烟台吾悦）广场附近',
        distance: '2.24',
        income: '186.6',
        image: 'https://via.placeholder.com/100x100/ffccaa/ffffff?text=SPA'
      }
    ]);

  // --- 事件处理 ---
  const handleNav = (address: string) => {
    uni.showToast({ title: '打开地图导航', icon: 'none' });
    // 实际逻辑: uni.openLocation(...)
  };

  const handleTransfer = (id: number) => {
    uni.showModal({
        title: '提示',
        content: '确定要转单吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({ title: '转单成功', icon: 'success' });
          }
        }
      });
  };

  const handleConfirm = (id: number) => {
    uni.showLoading({ title: '接单中...' });
    setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '接单成功', icon: 'success' });
      }, 800);
  };
</script>

<style scoped>
  /* 容器：去掉上下 padding，让内容贴边或根据父容器决定 */
  .container {
    background-color: #f5f6f8;
    /* 浅灰背景 */
    min-height: 100vh;
    width: 100%;
  }

  /* --- 标签栏样式 --- */
  .tab-bar {
    width: 100%;
    white-space: nowrap;
    background-color: #ffffff;
    padding: 0 20rpx;
    box-sizing: border-box;
    /* 去掉滚动条 */
    scrollbar-width: none;
  }
  /* 兼容 H5/APP 隐藏滚动条 */
  .tab-bar ::v-deep(.uni-scroll-view::-webkit-scrollbar) {
    display: none;
    width: 0;
    height: 0;
  }

  .tab-item {
    display: inline-block;
    padding: 24rpx 30rpx;
    font-size: 30rpx;
    color: #666666;
    position: relative;
    margin-right: 10rpx;
  }

  .tab-item.active {
    color: #333333;
    font-weight: bold;
  }

  .underline {
    position: absolute;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 6rpx;
    background-color: #ffc107;
    /* 黄色下划线 */
    border-radius: 3rpx;
  }

  /* --- 订单列表 --- */
  .order-list {
    padding: 20rpx;
    box-sizing: border-box;

  }

  .order-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    flex-direction: row;
  }

  /* 1. 头部 */
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
  }

  .time-text {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }

  .status-tag {
    font-size: 24rpx;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
  }
  .status-tag.paid {
    background-color: #fff7e6;
    color: #ff9900;
  }

  /* 2. 服务信息 */
  .service-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;
  }

  .service-img {
    width: 110rpx;
    height: 110rpx;
    border-radius: 12rpx;
    margin-right: 20rpx;
    background-color: #eee;
  }

  .service-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 110rpx;
  }

  .title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .service-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .price {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
  }

  .tags-row {
    display: flex;
    gap: 12rpx;
    flex-wrap: wrap;
  }

  .tag {
    font-size: 22rpx;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    border: 1rpx solid;
    line-height: 1.2;
  }

  /* 标签颜色变体 */
  .tag.orange-outline {
    color: #ff9900;
    border-color: #ff9900;
    background-color: #fffaf0;
  }
  .tag.green-outline {
    color: #52c41a;
    border-color: #52c41a;
    background-color: #f6ffed;
  }

  .contact-text {
    font-size: 26rpx;
    color: #999;
  }

  /* 3. 地址行 */
  .address-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .address-text {
    flex: 1;
    font-size: 26rpx;
    color: #666;
    margin-left: 10rpx;
    line-height: 1.4;
    /* 多行省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .distance-text {
    font-size: 24rpx;
    color: #999;
    margin-left: 10rpx;
    white-space: nowrap;
  }

  /* 4. 收入区域 */
  .income-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
  }

  .income-label {
    font-size: 28rpx;
    color: #666;
  }

  .income-value-box {
    display: flex;
    align-items: baseline;
  }

  .income-value {
    font-size: 36rpx;
    font-weight: bold;
    color: #ff4d4f;
    /* 红色金额 */
    margin-right: 8rpx;
  }

  .income-note {
    font-size: 24rpx;
    color: #999;
  }

  /* 5. 按钮组 */
  .action-buttons {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;
  }

  .btn {
    flex: 1;
    height: 72rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 36rpx;
    font-size: 28rpx;
    font-weight: 500;
  }

  .btn-nav {
    background-color: #f5f5f5;
    color: #333;
    gap: 8rpx;
  }

  .btn-transfer {
    background-color: #ffffff;
    color: #ff9900;
    border: 1rpx solid #ff9900;
  }

  .btn-confirm {
    background-color: #ffc107;
    /* 黄色实心 */
    color: #333;
    border: 1rpx solid #ffc107;
  }

  .empty-state {
    text-align: center;
    padding: 100rpx 0;
    color: #999;
    font-size: 28rpx;
  }
</style>