mechanicStore-app/pages/order/order.uvue

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

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

		<!-- 2. 订单列表 -->
		<scroll-view style="flex:1" v-if="orderList.length > 0" direction="vertical" @scrolltolower="loadMore">
			<view class="order-list">
				<view v-for="(item, index) in orderList" :key="item.id" class="order-card">

					<!-- Card Header: 时间 & 状态 -->
					<view class="card-header">
						<text class="time-text">
							预约时间：{{ item.service_time }}
						</text>
						<text class="status-badge paid">
							{{ item.state_text  }}
						</text>
					</view>

					<!-- Card Body: 服务信息 (左图右文) -->
					<view class="service-section" @click="orderDetail(item.id as number)">
						<image
							:src="(((((item.project as UTSJSONObject).cover_urls ) as UTSArray<UTSJSONObject>)[0]) as UTSJSONObject).medium_url"
							class=" service-image" mode="aspectFill" />
						<view class="service-details">
							<view class="service-title-row">
								<text class="service-name">
									{{ (item.project as UTSJSONObject)?.title }}
								</text>
							</view>
							<view class="contact-info-row">
								<text class="contact-info">
									联系人：{{ item.user_nickname }}
								</text>
								<text class="tag-pill green" v-if="item.source === 1">
									新客
								</text>
							</view>
						</view>
						<text class="service-price">
							¥{{ item.project_amount }}
						</text>
					</view>
					<!-- Card Address: 地址 & 距离 -->
					<view class="address-section">
						<u-icon name="location" :size="18" />
						<text class="address-content">
							{{( item.address as UTSJSONObject)?.["address"]  }}
						</text>
						<text class="distance-text">
							{{ item.distance }}km
						</text>
					</view>

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

					<!-- Card Actions: 按钮组 -->
					<view class="action-section" v-if="currentTab==1">
						<view class="btn btn-nav"
							@click.stop="onNavigate((item.address as UTSJSONObject)?.address as String) ">
							<u-icon name="navigation" :size="18" />
							<text style="font-size:28rpx">
								地址导航
							</text>
						</view>
						<view style="flex-direction:row">
							<button class="btn btn-transfer" @click="onTransfer(item.id as number)">
								我要转单
							</button>
							<button class="btn btn-confirm" @click="onConfirm(item.id as number)">
								确认接单
							</button>
						</view>
					</view>
					<view class="action-section" v-else="currentTab==2">
						<view class="btn btn-nav"
							@click.stop="onNavigate((item.address as UTSJSONObject)?.address as String) ">
							<u-icon name="navigation" :size="18" />
							<text style="font-size:28rpx">
								地址导航
							</text>
						</view>
						<view style="flex-direction:row">
							<button class="btn btn-transfer" @click="onTransfer(item.id as number)">
								我要转单
							</button>
							<button class="btn btn-confirm" @click="onConfirm(item.id as number)">
								确认接单
							</button>
						</view>
					</view>
				</view>

			</view>

			<!-- 加载状态 -->
			<view v-if="loading" class="loading">
				<loading style="border-width: 6rpx; border-color:#FFDA59" />
			</view>
			<view v-if="!hasMore && orderList.length > 0" class="no-more">
				<text style="font-size: 28rpx;
				color: #999999;
				text-align: center;">
					没有更多数据了...
				</text>
			</view>


		</scroll-view>
		<!-- 空状态 -->
		<view v-else class="ss-flex-2" style="align-items: center;margin-top: 200rpx;">

			<image src="/static/other/order-k.png" class="wh">
			</image>
			<text style="font-size: 30rpx;color: #999999;letter-spacing: 2rpx;text-align: center;font-weight: 600;">
				暂无订单</text>

		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { getOrderList, transferOrder, acceptOrder } from '@/utils/api/order';

	// --- 数据 ---
	const tabs = ref([
		{
			label: '新订单',
			value: 1
		},
		{
			label: '进行中',
			value: 2
		},
		{
			label: '取消/售后',
			value: 5
		},
		{
			label: '已完成',
			value: 3
		},
		{
			label: '全部',
			value: 0
		},
	])
	const currentTab = ref(1);

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



	const orderList = ref<UTSJSONObject[]>([]);
	const pageNo = ref(1);
	const pageSize = ref(5);
	const hasMore = ref(true);
	const loading = ref(false);

	// --- 方法 ---

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

	//计算预估收入
	const estimateManey = (item) => {
		// 技师等级和星级
		const coach_level = Number(coachInfo.value?.coach_level) ?? 1; // 加钟等级
		const star_level = Number(coachInfo.value?.star_level) ?? 3;   // 星星等级
		let project_amount = (Number(item?.project_amount) ?? 0) * (item?.num - 0 ?? 1);      // 项目金额
		const traffic_amount = Number(item?.traffic_amount) ?? 0;      // 路费
		// 星级系数表（1-5星）
		const starArr = [0,
			0.45,
			0.48,
			0.5,
			0.55,
			0.58];

		let maneyInfo = 0;
		//是否是vip订单
		const isVip = item.user?.member_type && item.user?.member_type - 0 > 0 ? true : false;
		if (!isVip) {
			if (item.click_farming) {
				// 刷单
				maneyInfo = project_amount * 0.7;
			} else if (item?.type === 1) {
				// 首钟
				const starRate = starArr[star_level] ?? 0.5;
				maneyInfo = project_amount * starRate + traffic_amount;
			} else if (item?.type === 3) {
				// 加钟
				maneyInfo = project_amount * (0.5 + coach_level / 10);
			} else {
				maneyInfo = 0;
			}
		} else {
			if (item.click_farming) {
				// 刷单
				maneyInfo = project_amount * 0.5;
			} else if (item?.type === 1) {
				// 首钟
				maneyInfo = project_amount * 0.5 + traffic_amount;
			} else if (item?.type === 3) {
				// 加钟
				maneyInfo = project_amount * 0.7;
			} else {
				maneyInfo = 0;
			}
		}

		// 保留两位小数
		return maneyInfo.toFixed(2);
	};


	// 加载订单列表
	const httpGetOrderList = async (isLoadMore : boolean) => {
		if (!hasMore.value || loading.value) return;

		loading.value = true;
		try {
			const response = await getOrderList({
				type: currentTab.value,
				page: pageNo.value,
				per_page: pageSize.value
			}) as UTSJSONObject;
			const code = response["code"] as number;
			if (code !== 200) return;

			const items = (response.data as UTSJSONObject)["items"] as UTSArray<UTSJSONObject>;
			if (isLoadMore) {
				orderList.value.push(...items);
			} else {
				orderList.value = items;
			}

			// 判断是否还有更多数据
			if (items.length < pageSize.value) {
				hasMore.value = false;
			} else {
				pageNo.value++;
			}
		} catch (err : any) {
			console.error('获取订单列表接口异常', err);
		} finally {
			loading.value = false;
		}
	};
	// 处理tab点击事件
	const handleTabClick = (index : number) => {
		currentTab.value = index;
		// 切换标签时重置分页状态
		pageNo.value = 1;
		hasMore.value = true;
		orderList.value = [];
		httpGetOrderList(false);
	};
	// 滚动到底部加载更多
	const loadMore = () => {
		httpGetOrderList(true);
	};

	// 客户接单接口
	const onConfirmOrder = async (orderId : number) => {
		// uni.showLoading({ title: '处理中...' });
		try {

			const res = await acceptOrder({
				order_id: orderId
			}) as UTSJSONObject;
			// const code = response["code"] as number
			uni.hideLoading();
			if (res?.code === 200) {
				uni.showToast({ title: '接单成功', icon: 'success' });
				// 可选: 自动刷新订单列表或做其他操作
				await httpGetOrderList(false);
			} else {
				uni.showToast({
					title: (res?.msg) as String ?? '接单失败',
					icon: 'none'
				});
			}
		} catch (err) {
			uni.hideLoading();
			console.error('接单异常', err);
			uni.showToast({
				title: '接单失败，请重试',
				icon: 'none'
			});
		}
	};
	const onConfirm = (orderId : number) => {
		uni.showModal({
			title: '接单确认',
			content: '确定要接受该订单吗？',
			success: (res) => { onConfirmOrder(orderId) }
		});
	};
	// 商户转单
	const httptransferOrder = async (orderId : number,) => {
		try {
			const res = await transferOrder({
				order_id: orderId,
			}) as UTSJSONObject;
			if (res?.code === 200) {
				uni.showToast({ title: '转单成功', icon: 'success' });
				await httpGetOrderList(false);
			} else {
				uni.showToast({
					title: (res?.msg) as String ?? '转单失败',
					icon: 'none'
				});
			}
		} catch (err) {
			console.error('转单异常', err);
			uni.showToast({
				title: '转单失败，请重试',
				icon: 'none'
			});
		}
	};
	const onTransfer = (id : number) => {
		uni.showModal({
			title: '转单确认',
			content: '确定将此订单转给其他技师吗？',
			success: (res) => {
				httptransferOrder(id);
			}
		});

	};
	const orderDetail = (orderId : number) => {
		uni.navigateTo({
			url: `/pages/order/orderDetail?orderId=${orderId}`
		});
	};
	const onNavigate = (addr : string) => {
		uni.showToast({ title: '启动导航', icon: 'none' });
		uni.navigateTo({
			url: '/pages/map/map'
		});
	};

	onLoad(() => {
		// httpGetOrderList();
	})
	onReady(() => {
		httpGetOrderList(false);
	})
</script>

<style scoped>
	.page-container {
		background-color: #f5f6f8;
		box-sizing: border-box;
		height: 100%;
	}

	.tab-scroll {
		background-color: #ffffff;
		height: 88rpx;
		width: 100%;
	}

	.tab-wrapper {
		flex-direction: row;
		align-items: center;
		height: 88rpx;
		padding: 0 20rpx;
	}

	.tab-item {
		position: relative;
		padding: 0 30rpx;
		height: 88rpx;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #666666;
		flex-shrink: 0
	}

	.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;
	}

	.order-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.card-header {
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
	}

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

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

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

	.service-section {
		flex-direction: row;
		align-items: center;
	}

	.service-image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 12rpx;
		background-color: #f0f0f0;
		flex-shrink: 0;
	}

	.service-details {
		flex: 1;
		justify-content: space-between;
	}

	.service-title-row {
		flex-direction: row;
		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 {
		flex-direction: row;
		flex-wrap: wrap;
	}

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

	.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 {
		flex-direction: row;
		align-items: center;
	}

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

	.address-section {
		flex-direction: row;
		align-items: flex-start;
		padding-bottom: 20rpx;
		border-bottom-width: 1rpx;
		border-bottom-color: #f5f5f5;
		border-bottom-style: solid;
	}

	.address-content {
		flex: 1;
		font-size: 26rpx;
		color: #666666;
		line-height: 1.4;
	}

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

	.income-section {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

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

	.income-value-group {
		flex-direction: row;
		align-items: center;
	}

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

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

	.action-section {
		flex-direction: row;
		justify-content: space-between;
	}

	.btn {
		height: 72rpx;
		border-radius: 36rpx;
		width: 170rpx;
		padding: 0 10rpx;
	}

	.btn-nav {
		background-color: #FFFBEF;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn-transfer {
		background-color: #ffffff;
		color: #ff9900;
		font-size: 28rpx;
	}

	.btn-confirm {
		background-color: #ffc107;
		color: #333333;
		font-size: 28rpx;
		margin-left: 20rpx
	}

	.loading {
		text-align: center;
		justify-content: center;
		align-items: center;
	}
</style>