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';
	import { transRecords } from '@/utils/api/order';

	// --- 数据 ---
	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 httpGetOrderList = async () => {
		const res = await transRecords({});
    console.log(res,'res');
    
	}
	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);
	};
	onLoad(() => {
		httpGetOrderList()
	})
</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>