school_uni/package1/myCenter/shopOrderList.vue

<template>
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					商家订单
				</view>
			</view>
		</view>
		<view class="title-tab">
			<scroll-view class="status-scroll-view" scroll-x enable-flex :show-scrollbar="false"
				:scroll-with-animation="true">
				<view class="status-list">
					<view v-for="(item, index) in statusList" :key="index" class="status-item"
						:class="{ 'active': currentIndex === index }" @click="handleStatusClick(index)">
						<text class="status-text">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="box1" @tap="goDetail">
			<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;">
				<view>
					#0001
				</view>
				<view style="flex: 1;display: flex;padding-left: 20rpx;">
					2026-02-28 16:08 <text>已退款</text>
				</view>
				<view>
					已关闭
				</view>
			</view>
			<view style="height: 120rpx;padding-top: 20rpx;">
				<view style="height: 50rpx;line-height: 50rpx;font-size: 28rpx;font-weight: 700;">
					商品 <text>共<text>1</text>件</text> <text style="color: red;">已出餐</text>
				</view>
				<view style="display: flex;">
					<view style="flex: 1;">
						鱼香肉丝
					</view>
					<view style="width: 100rpx;">
						X1
					</view>
					<view>
						￥5.00
					</view>
				</view>
			</view>
		</view>
		<view class="box1" @tap="goDetail">
			<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;">
				<view>
					#0001
				</view>
				<view style="flex: 1;display: flex;padding-left: 20rpx;">
					2026-02-28 16:08 <text>已退款</text>
				</view>
				<view>
					已关闭
				</view>
			</view>
			<view style="height: 120rpx;padding-top: 20rpx;">
				<view style="height: 50rpx;line-height: 50rpx;font-size: 28rpx;font-weight: 700;">
					商品 <text>共<text>1</text>件</text>
				</view>
				<view style="display: flex;">
					<view style="flex: 1;">
						鱼香肉丝
					</view>
					<view style="width: 100rpx;">
						X1
					</view>
					<view>
						￥5.00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				menuButtonInfo: {},
				statusList: [{
						name: '待接单',
						value: 0,
						checked: true
					},
					{
						name: '待发货',
						value: 1,
						checked: false
					},
					{
						name: '待退款',
						value: 2,
						checked: false
					},
					{
						name: '待售后',
						value: 3,
						checked: false
					},
					{
						name: '已发货',
						value: 4,
						checked: false
					},
					{
						name: '已完成',
						value: 5,
						checked: false
					},
					{
						name: '已取消',
						value: 6,
						checked: false
					},
					{
						name: '已售后',
						value: 7,
						checked: false
					}
				]
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		onLoad(option) {

		},
		methods: {
			goDetail(){
				uni.navigateTo({
					url:'/package1/order/orderDetail'
				})
			},
			handleStatusClick(index) {
				if (this.currentIndex === index) return;
				this.currentIndex = index;
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 20%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}

	.title-tab {
		display: flex;
		margin: -120rpx auto 0;
	}

	.status-scroll-view {
		width: 100%;
		white-space: nowrap;
		/* 辅助滚动，与 flex 配合确保不换行 */
		height: auto;
	}

	.status-list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding: 0 0;
		/* 可根据设计添加左右留白，但会影响“一排5个”精准计算，故留白为0 */
		min-height: 88rpx;
		/* 保证内部项撑开高度 */
	}

	/* 每个状态项：宽度为屏幕宽度的1/5，保证一行正好显示5个，超出滚动 */
	.status-item {
		flex-shrink: 0;
		width: 20vw;
		/* 关键：屏幕宽度的1/5，正好一排5个 */
		text-align: center;
		padding: 20rpx 0;
		position: relative;
		box-sizing: border-box;
		transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		/* 点击反馈 */
		-webkit-tap-highlight-color: transparent;
	}

	.status-text {
		font-size: 28rpx;
		color: #666666;
		font-weight: normal;
		line-height: 1.4;
		transition: color 0.2s, font-weight 0.2s;
	}

	/* 激活状态样式 */
	.status-item.active .status-text {
		color: #ff6b35;
		font-weight: 500;
	}

	/* 激活指示条（下划线） */
	.status-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #ff6b35;
		border-radius: 2rpx;
		transition: width 0.2s ease;
	}

	.box1 {
		width: 95%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
</style>