LocalLivingServicesUniapp/pages/groupMeal/orders/order-alist.vue

<template>
	<view class="page-container">
		<!-- 导航栏 -->
		<u-navbar :autoBack="true" :placeholder="true" :border-bottom="false">
			<view class="navbar-title">团餐订单</view>
			<view slot="right" class="navbar-right">
				<text class="nav-btn" @click="goToDetail">订单明细</text>
				<text class="nav-btn manage-btn" @click="toggleManageMode">{{ isManaging ? '退出管理' : '批量管理' }}</text>
			</view>
		</u-navbar>

		<!-- 搜索框 -->
		<view class="search-bar">
			<u-search bg-color="#F7F8FC" placeholder="请输入套餐名称或团长名" search-icon-color="#999"
				:showAction="true" actionText="搜索"
				:actionStyle="{
					width: 'auto',
					color: '#333',
					padding: '0 20rpx',
					borderLeft: '1rpx solid #DDDDDD'
				}"
			></u-search>
		</view>

		<!-- 状态Tabs -->
		<u-tabs :list="statusTabs" 
			:current="currentStatusTab" 
			inactive-color="#666666"
			:bar-style="{
				bottom: '20rpx',
				background: 'linear-gradient(90deg, #82BCFF 0%, rgba(130,188,255,0) 100%)'
			}"
			:active-item-style="{
				fontWeight: '500',
				fontSize: '32rpx',
				color: '#000000',
			}"		
			@change="onTabChange"
		></u-tabs>

		<!-- 订单列表 -->
		<scroll-view scroll-y class="order-scroll-view" :style="{ paddingBottom: isManaging ? '120rpx' : '0' }">
			<u-checkbox-group v-model="selectedOrders" placement="column">
				<view class="order-card" v-for="item in filteredOrders" :key="item.id">
					<u-image width="100rpx" height="100rpx" border-radius="12rpx" :src="item.image" mode="aspectFill"></u-image>
					<view class="order-info">
						<view class="order-title">{{ item.title }}</view>
						<view class="order-line">
							<view class="leader-name">团长姓名{{ item.leaderName }}</view>
							<view class="quantity-tag">团购数量{{ item.quantity }}</view>
						</view>
					</view>
					<view class="order-actions" v-if="isManaging">
						<u-checkbox :name="item.id" shape="circle" v-model="item.checked"></u-checkbox>
					</view>
				</view>
			</u-checkbox-group>
		</scroll-view>

		<!-- 批量操作底部栏 -->
		<view class="footer-bar" v-if="isManaging">
			<u-checkbox-group v-model="isAllSelected" placement="row">
				<u-checkbox name="all" shape="circle" v-model="isAllSelected" @change="selectAll">全选</u-checkbox>
			</u-checkbox-group>
			<view class="action-buttons">
				<u-button type="primary" @click="handleBatchAction">出餐</u-button>
			</view>
		</view>

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

<script>
import Tabbar from '@/pages/groupMeal/tabbar/index.vue';
export default {
	components: {
		Tabbar
	},
	data() {
		return {
			isManaging: false,
			statusTabs: [{ name: '待出餐' }, { name: '已出餐' }],
			currentStatusTab: 0,
			allOrders: [
				// 模拟订单数据
				{ id: 1, status: 0, title: '套餐名称套餐名称套餐名称', leaderName: 'b', quantity: 20, image: '/static/demo/goods1.png' },
				{ id: 2, status: 0, title: '套餐名称套餐名称套餐名称', leaderName: 'a', quantity: 20, image: '/static/demo/goods2.png' },
				{ id: 3, status: 0, title: '套餐名称套餐名称套餐名称', leaderName: 'b', quantity: 20, image: '/static/demo/goods3.png' },
				{ id: 4, status: 1, title: '已出餐套餐', leaderName: 'c', quantity: 15, image: '/static/demo/goods1.png' },
			],
			selectedOrders: [],
			isAllSelected: false,
		};
	},
	computed: {
		filteredOrders() {
			return this.allOrders.filter(order => order.status === this.currentStatusTab);
		}
	},
	methods: {
		goToDetail() {
			uni.navigateTo({
				url: '/pages/groupMeal/orders/order-blist'
			});
		},
		toggleManageMode() {
			this.isManaging = !this.isManaging;
			this.selectedOrders = [];
			this.isAllSelected = false;
		},
		onTabChange(e) {
			this.currentStatusTab = e;
			this.selectedOrders = [];
			this.isAllSelected = false;
		},
		selectAll(e) {
			if (e.value) {
				this.selectedOrders = this.filteredOrders.map(order => order.id);
			} else {
				this.selectedOrders = [];
			}
			this.filteredOrders.forEach(item => {
				item.checked = e.value;
			});
		},
		handleBatchAction() {
			if (this.selectedOrders.length === 0) {
				this.$tip.toast("请先选择订单")
				return;
			}
			console.log('批量出餐的订单ID:', this.selectedOrders);
			this.$tip.success("操作成功")
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	.navbar-title {
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
	}
	.navbar-right {
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		.nav-btn {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
		.manage-btn {
			margin-left: 24rpx;
		}
	}

	.search-bar {
		padding: 12rpx 32rpx;
		background-color: #fff;
		.u-search {
			border-radius: 8rpx;
			background-color: #F7F8FC;
		}
	}

	.order-scroll-view {
		flex: 1;
		background-color: #fff;
		.u-checkbox-group {
			width: 100%;
		}
		.order-card {
			width: 100%;
			padding: 24rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f0f0f0;
			.order-info {
				flex: 1;
				margin: 0 20rpx;
				.order-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #303133;
					font-weight: bold;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
				.order-line {
					margin-top: 8rpx;
					display: flex;
					align-items: center;
				}
				.leader-name {
					width: 70%;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}
				.quantity-tag {
					font-size: 26rpx;
					color: #FD4912;
				}
			}
			.order-actions {
			}
		}
	}
}

.footer-bar {
	bottom: 50px;
	padding-bottom: 20px;
	.action-buttons {
		display: flex;
		gap: 20rpx;
		::v-deep .u-btn {
			height: 69rpx;
			border-radius: 49rpx;
		}
	}
}
</style>