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" v-if="currentStatusTab == 0" @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'
				}"
				@search="onSearch" @custom="onSearch"
			></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>

		<!-- 订单列表 -->
		<view class="order-scroll-view" :style="{ paddingBottom: isManaging ? '120rpx' : '0' }">
			<ListScrollView ref="listScroll" 
				:api="api"
				:init="{
					...initParams,
				}">
				<template v-slot:list="{ data }">
					<u-checkbox-group width="40rpx" inactiveColor="#fff" placement="column"
						v-model="selectedOrders"
						@change="onSelect"
					>
						<view class="order-item" v-for="item in data" :key="item.orderId">
							<view class="order-header">
								<view class="location-box">
									<view class="location-info">
										<view class="name">
											<!-- <u-image width="40rpx" height="40rpx" src="/static/groupMeal/icon_user.png"></u-image> -->
											<u-icon name="account" color="#000000" size="30"></u-icon>
											<text>{{ item.headName }}</text>
										</view>
										<view class="desc">
											<text>合计份数：</text>
											<text class="val">{{ item.buyNumber }}份</text>
										</view>
									</view>
									<view class="location-address">
										<view class="atext">{{ item.address }}</view>
										<view class="btext">{{ item.region }}</view>
									</view>
								</view>
								<view class="order-actions" v-if="isManaging">
									<u-checkbox :name="item.orderId" shape="circle" v-model="item.checked"></u-checkbox>
								</view>
							</view>
							
							<ListExpand :items="item.merchantPackageOrderDTOS">
								<template v-slot:="{ items }">
									<view class="order-card" v-for="(eItem, ei) in items" :key="ei">
										<!-- <u-image width="84rpx" height="84rpx" border-radius="12rpx" :src="eItem.productImage && `${$config.apiUrl}/${eItem.productImage.split(',')[0]}`" mode="aspectFill"></u-image> -->
										<u-image width="84rpx" height="84rpx" border-radius="12rpx" :src="eItem.productImage" mode="aspectFill"></u-image>
										<view class="order-info">
											<view class="order-title">{{ eItem.packageName }}</view>
											<view class="order-line">
												<view class="leader-name">{{ eItem.dishName }}</view>
												<view class="quantity-tag">{{ eItem.numberUserCount }}份</view>
											</view>
										</view>
									</view>
								</template>
							</ListExpand>
						</view>
					</u-checkbox-group>
				</template>
			</ListScrollView>
		</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="onSelectAll">全选</u-checkbox>
			</u-checkbox-group>
			<view class="action-buttons">
				<u-button type="primary" @click="handleBatchAction">出餐</u-button>
			</view>
		</view>

		<Tabbar />

		<!-- 弹窗 -->
		<Modal ref="myModal"
			:title="modalText.title" 
			:content="modalText.content" 
		/>
	</view>
</template>

<script>
import Modal from '@/components/modal/index.vue';
import Tabbar from '@/pages/groupMeal/tabbar/index.vue';
import ListExpand from '@/components/list-scroll-view/list-expand.vue';
import ListScrollView from '@/components/list-scroll-view/index.vue';
export default {
	components: {
		Modal,
		Tabbar,
		ListExpand,
		ListScrollView
	},
	data() {
		return {
			api: {
				url: '/groupmeal/merchantPackageOrder/pageList',
				method: 'POST',
			},
			isManaging: false,
			statusTabs: [{ name: '待出餐' }, { name: '已出餐' }],
			currentStatusTab: 0,
			selectedOrders: [],
			isAllSelected: false,
			// 弹窗
			modalText: {
				title: '提示',
				btntext: '好的',
				content: ''
			},
		};
	},
	computed: {
		// 数据参数
		initParams() {
			let params = {
				// 订单状态 0 未成团 1 已成团 2 已出餐 3 已送达
				orderStatus: 0,
			}
			// 待出餐
			if (this.currentStatusTab == 0) {
				params = {
					...params,
					orderStatus: 1,
				}
			}
			// 已出餐
			else if (this.currentStatusTab == 1) {
				params = {
					...params,
					orderStatus: 2,
				}
			}
			return params;
		}
	},
	onLoad() {
		
	},
	methods: {
		goToDetail() {
			uni.navigateTo({
				url: '/pages/groupMeal/orders/order-blist'
			});
		},
		toggleManageMode() {
			this.isManaging = !this.isManaging;
			this.onClearSel();
		},
		onTabChange(e) {
			this.currentStatusTab = e;
			// 清除已选数据
			this.onClearSel();
			// 关闭批量
			this.isManaging = false;
			// 触发更新
			this.$nextTick(() => {
				this.$refs.listScroll.downCallback();
			});
		},
		onSearch(value) {
			this.$refs[`listScroll`].reloadList({
				queryName: value,
			});
		},
		onSelect(e) {
			this.selectedOrders = e;
			// 控制全选
			this.isAllSelected = e.length === this.$refs.listScroll.dataList.length;
		},
		onSelectAll(e) {
			let allOrders = this.$refs.listScroll.dataList;
			if (e.value) {
				this.selectedOrders = allOrders.map(order => order.orderId);
			} else {
				this.selectedOrders = [];
			}
			allOrders.forEach(item => {
				item.checked = e.value;
			});
		},
		// 完成某种操作后，清空数据
		onClearSel() {
			this.selectedOrders = []; 
			this.isAllSelected = false;
		},
		handleBatchAction() {
			if (this.selectedOrders.length === 0) {
				this.$tip.toast("请先选择订单")
				return;
			}
			this.modalText.content = '是否确认已经出餐？';
			this.$refs.myModal.onOpen(false, () => {
				let params = {
					orderId: this.selectedOrders.join()
				};
				this.$http.get('/groupmeal/merchantPackageOrder/orderReady', {params}).then(res => {
					if (res.data.code === 200) {
						// this.$tip.success(res.data.message);
						uni.showToast({
							icon:'success',
							title:res.data.message
						})
						// 触发更新
						this.isManaging = false;
						this.currentStatusTab = 1;
						this.onClearSel();
						this.$nextTick(() => {
							this.$refs.listScroll.downCallback();
						});
					} else {
						// this.$tip.error(res.data.message);
						uni.showToast({
							icon:'none',
							title:res.data.message
						})
					}
				});
			});
		}
	}
};
</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;
		height: 0;
		padding: 20rpx 24rpx;
		background-color: #F7F8FC;
		.u-checkbox-group {
			width: 100%;
		}
		.order-item {
			width: 100%;
			margin-bottom: 24rpx;
			background: #fff;
			.order-actions {
				
			}
		}
		.order-header {
			gap: 24rpx;
			padding: 24rpx;
			display: flex;
			align-items: center;
			background: linear-gradient(90deg, #FDFDFF 0%, #E3F0FF 100%);
			.location-box {
				flex: 1;
			}
			.location-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: flex;
					align-items: center;
					text {
						padding-left: 10rpx;
					}
				}
				.desc {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					.val {
						color: #449AFF;
					}
				}
			}
			.location-address {
				margin-top: 10rpx;
				.atext {
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
				}
				.btext {
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}
			}
		}
		.order-card {
			width: 100%;
			padding: 24rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f0f0f0;
			.order-info {
				flex: 1;
				margin-left: 20rpx;
				.order-title {
					font-size: 26rpx;
					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 {
						flex: 1;
						font-weight: 400;
						font-size: 22rpx;
						color: #8A91A8;
					}
					.quantity-tag {
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}
	}
}

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