mechanicStore-app/pages/index/order.uvue

<template>
  <view class="page-container">

    <!-- 1. 顶部标签栏 (Scroll View) -->
    <scroll-view scroll-x class="tab-scroll" show-scrollbar="false" :enable-flex="true">
      <view class="tab-wrapper">
        <view v-for="(tab, index) in tabs" :key="index"
        :class="['tab-item', currentTab === index ? 'active' : '']" @click="currentTab = index">
          <text>
            {{ tab }}
          </text>
          <!-- 激活下的黄色短线 -->
          <view v-if="currentTab === index" class="tab-indicator">
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 2. 订单列表 -->
    <view class="order-list">
      <view v-for="(order, idx) in orders" :key="order['id']" class="order-card">

        <!-- Card Header: 时间 & 状态 -->
        <view class="card-header">
          <text class="time-text">
            预约时间：{{ order['time'] }}
          </text>
          <text class="status-badge paid">
            已支付
          </text>
        </view>

        <!-- Card Body: 服务信息 (左图右文) -->
        <view class="service-section">
          <image :src="order['image']" class="service-image" mode="aspectFill" />
          <view class="service-details">
            <view class="service-title-row">
              <text class="service-name">
                {{ order['serviceName'] }}
              </text>
              <text v-for="(tag, tIdx) in tagList(order)" :key="tIdx" :class="['tag-pill', tag.type]">
                {{ tag.text }}
              </text>

            </view>
            <view class="contact-info-row">
              <text class="contact-info">
                联系人：{{ order['contact'] }}
              </text>

              <text class="tag-pill green ">
                新客
              </text>

            </view>
          </view>
          <text class="service-price">
            ¥{{ order.price }}
          </text>
        </view>
        <!-- Card Address: 地址 & 距离 -->
        <view class="address-section">
          <u-icon type="location" size="16" color="#999999">
          </u-icon>
          <text class="address-content">
            {{ order.address }}
          </text>
          <text class="distance-text">
            {{ order.distance }}km
          </text>
        </view>

        <!-- Card Income: 预估收入 -->
        <view class="income-section">
          <text class="income-label">
            预估收入
          </text>
          <view class="income-value-group">
            <text class="income-main">
              ¥{{ order.income }}
            </text>
            <text class="income-sub">
              (含路费)
            </text>
          </view>
        </view>

        <!-- Card Actions: 按钮组 -->
        <view class="action-section">
          <view class="btn btn-nav" @click="onNavigate(order.address)">
            <u-icon type="navigation" size="14" color="#333333">
            </u-icon>
            <text>
              地址导航
            </text>
          </view>
          <text class="btn btn-transfer" @click="onTransfer(order.id)">
            我要转单
          </text>
          <text class="btn btn-confirm" @click="onConfirm(order.id)">
            确认接单
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

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

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

	type OrderTag = {
		text : string;
		type : 'orange' | 'green' | 'red';
	}

	type OrderItem = {
		id : number;
		time : string;
		serviceName : string;
		tags : OrderTag[];
		contact : string;
		price : string;
		address : string;
		distance : string;
		income : string;
		image : string;
	};

  // orders data – no need for reactivity, use a plain typed array
  const orders : OrderItem[] = [
    {
      id: 1,
      time: '2025-06-18 4:00',
      serviceName: '润养SPA',
      tags: [
        { text: '上门', type: 'orange' } as OrderTag,
        { text: '首单', type: 'orange' } as OrderTag,
      ],
      contact: '刘',
      price: '286.6',
      address: '烟台 芝罘区楚风一街楚凤花园（烟台吾悦）广场附近',
      distance: '2.24',
      income: '186.6',
      image: '/static/testInfo/demo.png'
    },
    {
      id: 2,
      time: '2025-06-18 8:00',
      serviceName: '润养SPA',
      tags: [
        { text: '加钟', type: 'red' } as OrderTag
      ],
      contact: '刘',
      price: '286.6',
      address: '烟台 芝罘区楚风一街楚凤花园（烟台吾悦）广场附近',
      distance: '2.24',
      income: '186.6',
      image: '/static/testInfo/demo.png'
    }
  ] as OrderItem[];

  // --- 方法 ---
  const onNavigate = (addr : string) => {
    uni.showToast({ title: '启动导航', icon: 'none' });
  };

  // helper used in template to give v-for a typed array source
  function tagList(order: OrderItem): OrderTag[] {
    return order.tags;
  }

  const onTransfer = (id : number) => {
    uni.showModal({
        title: '转单确认',
        content: '确定将此订单转给其他技师吗？',
        success: (res) => {
          if (res.confirm) uni.showToast({ title: '转单成功', icon: 'success' });
        }
      });
  };

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

<style scoped>
  .page-container {
    background-color: #f5f6f8;
    /* min-height: 100vh; unsupported by uvue, replace with fixed value or remove */
    min-height: 1000rpx;
    /* width: 100%; */ /* 默认块级元素已撑满父容器 */
    /* 确保内部元素不溢出 */
    box-sizing: border-box;
  }

  /* --- Tab 区域 --- */
  .tab-scroll {
    /* width: 100%; */ /* 不使用百分比 */
    background-color: #ffffff;
    /* 固定高度或自适应 */
    height: 88rpx;
  }

  .tab-wrapper {
    display: flex;
    /* 内部横向排列 */
    flex-direction: row;
    align-items: center;
    /* 直接使用固定高度匹配 .tab-scroll */
    height: 88rpx;
    padding: 0 20rpx;
    white-space: nowrap;
  }

  .tab-item {
    position: relative;
    padding: 0 30rpx;
    /* 高度与容器一致，避免百分比 */
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: #666666;
  }

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

  .tab-indicator {
    position: absolute;
    bottom: 16rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40rpx;
    height: 6rpx;
    background-color: #ffc107;
    border-radius: 3rpx;
  }

  /* --- 列表区域 --- */
  .order-list {
    padding: 20rpx;
    /* 垂直排列卡片 */
    display: flex;
    flex-direction: column;
    /* gap: 20rpx; */
  }

  .order-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    /* 卡片内部也是垂直流 */
    display: flex;
    flex-direction: column;
    /* gap: 20rpx; */
  }

  /* 1. 头部 */
  .card-header {
    display: flex;
    flex-direction: row;
    /* 左右布局 */
    justify-content: space-between;
    align-items: center;
  }

  .time-text {
    font-size: 28rpx;
    color: #333333;
    font-weight: 400;
    /* use supported weight */
  }

  .status-badge {
    font-size: 24rpx;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
  }

  .status-badge.paid {
    background-color: #fff7e6;
    color: #ff9900;
  }

  /* 2. 服务信息 (左图右文) */
  .service-section {
    display: flex;
    flex-direction: row;
    /* 关键：横向排列图和文 */
    align-items: flex-start;
    /* gap: 20rpx; */
  }

  .service-image {
    width: 110rpx;
    height: 110rpx;
    border-radius: 12rpx;
    background-color: #f0f0f0;
    flex-shrink: 0;
    /* 防止图片被压缩 */
  }

  .service-details {
    flex: 1;
    display: flex;
    /* flex-direction: column; */
    /* 文字内部垂直排列 */
    justify-content: space-between;
    /* height: 110rpx; */

  }

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

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

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

  .tags-container {
    display: flex;
    flex-direction: row;
    /* gap: 12rpx; */
    flex-wrap: wrap;
  }

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

  .tag-pill.orange {
    color: #ff9900;
    border-color: #ff9900;
    background-color: #fffaf0;
  }

  .tag-pill.green {
    color: #52c41a;
    border-color: #52c41a;
    background-color: #f6ffed;
  }

  .tag-pill.red {
    color: #ff4d4f;
    border-color: #ff4d4f;
    background-color: #fff1f0;
  }

  .contact-info-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* gap: 20rpx; */
  }

  .contact-info {
    font-size: 26rpx;
    color: #999999;
  }

  /* 3. 地址栏 */
  .address-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: 20rpx;
    border-bottom-width: 1rpx;
    border-bottom-color: #f5f5f5;
    border-bottom-style: solid;
    /* gap: 10rpx; */
  }

  .address-content {
    flex: 1;
    font-size: 26rpx;
    color: #666666;
    line-height: 1.4;
    /* multi-line ellipsis removed; not supported by uvue */
    /* display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    */
  }

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

  /* 4. 收入栏 */
  .income-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

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

  .income-value-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* baseline not supported */
    /*  */
  }

  .income-main {
    font-size: 36rpx;
    font-weight: bold;
    color: #ff4d4f;
  }

  .income-sub {
    font-size: 24rpx;
    color: #999999;
  }

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

  .btn {
    flex: 1;
    height: 72rpx;
    border-radius: 36rpx;
    font-size: 28rpx;
    font-weight: 400;
    display: flex;
    flex-direction: row;
    /* 按钮内图标和文字横向 */
    justify-content: center;
    align-items: center;
    /*  */
  }

  .btn-nav {
    background-color: #f5f5f5;
    color: #333333;
  }

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

  .btn-confirm {
    background-color: #ffc107;
    color: #333333;
    border-width: 1rpx;
    border-color: #ffc107;
    border-style: solid;
  }
</style>