LocalLivingServicesUniapp/pages/merchantDish/orders/index.vue

<template>
	<view class="page">
		<u-navbar title="团餐订单" :autoBack="true" :placeholder="true" :border-bottom="false">
			<view slot="right" class="navbar-right" @click="goToDetail">订单明细</view>
		</u-navbar>

		<view class="search-bar">
			<u-search
				v-model="keyword"
				placeholder="请输入商品名称"
				bg-color="#f7f8fc"
				search-icon-color="#9aa1ab"
				:show-action="true"
				action-text="搜索"
				:action-style="actionStyle"
				@search="onSearch"
				@custom="onSearch"
			></u-search>
		</view>

		<view class="status-tabs">
			<view
				v-for="(tab, index) in orderTabs"
				:key="tab.name"
				:class="['status-tab', { active: currentTab === index }]"
				@click="onTabChange(index)"
			>
				<text>{{ tab.name }}</text>
				<image
					v-if="currentTab === index"
					class="arrow-down"
					src="/static/merchantDish/select-tab.png"
					mode="aspectFit"
				></image>
			</view>
		</view>

		<view class="filter-row" v-if="currentTab !== 2">
			<view class="filter-item" v-if="currentTab === 0" @click="openDatePicker">
				<text>{{ dateLabel }}</text>
				<u-icon name="arrow-down" size="22" color="#8b929c"></u-icon>
			</view>
			<view class="filter-item meal-filter" @click="openMealPicker">
				<text>{{ mealTypeLabel }}</text>
				<u-icon name="arrow-down" size="22" color="#8b929c"></u-icon>
			</view>
			<view class="total">合计：<text>{{ total }}</text>份</view>
		</view>

		<view class="list-wrap">
			<ListScrollView
				ref="listScroll"
				:api="api"
				:init="initParams"
				:page-size="20"
				:down-enabled="false"
				:up-text-visible="false"
				empty-text="暂无订单"
				@afterFetch="afterFetch"
			>
				<template v-slot:list="{ data }">
					<view class="order-list">
						<view
							class="order-item"
							:class="{ 'order-item-selectable': currentTab === 1 }"
							v-for="item in data"
							:key="item.hostOrderId || item.id"
							@click="openOrder(item)"
						>
							<view class="order-summary">
								<view v-if="currentTab === 0" class="summary-row date-row">
									<view class="summary-label">
										<u-icon name="clock" color="#8b929c" size="27"></u-icon>
										<text>预约日期：{{ getReserveDate(item) }}</text>
									</view>
									<text :class="['meal-tag', `meal-tag-${getMealCategory(item)}`]">{{ getMealLabel(item) }}</text>
								</view>
								<view class="summary-row leader-row">
									<view class="summary-label">
										<u-icon name="account" color="#8b929c" size="27"></u-icon>
										<text>{{ item.headName || item.leaderName || '团长姓名' }}</text>
									</view>
									<view class="order-count">合计：<text>{{ item.buyNumber || 0 }}</text>份</view>
								</view>
								<view class="summary-label address-line">
									<u-icon name="map" color="#8b929c" size="27"></u-icon>
									<text>{{ item.address || '暂无地址' }}</text>
								</view>
								<view class="region">{{ item.region || '' }}</view>
								<view
									v-if="currentTab === 1"
									class="order-select summary-select"
									:class="{ checked: isOrderSelected(item) }"
									@click.stop="toggleOrder(item)"
								>
									<u-icon v-if="isOrderSelected(item)" name="checkmark" color="#fff" size="22"></u-icon>
								</view>
							</view>
							<view class="product-list">
								<view
									class="product-item"
									v-for="(product, productIndex) in (item.merchantPackageOrderDTOS || [])"
									:key="product.merchantOrderIds || product.id || productIndex"
								>
									<u-image
										width="80rpx"
										height="80rpx"
										border-radius="8rpx"
										:src="getProductImage(product.productImage)"
										mode="aspectFill"
									></u-image>
									<view class="product-info">
										<text class="product-name">{{ product.packageName  || '' }}</text>
										<text class="product-desc">{{ product.boxName || '默认餐盒'}}</text>
									</view>
									<text class="product-quantity">{{ product.numberUserCount || product.packageNumber || 0 }}份</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</ListScrollView>
		</view>

		<view v-if="currentTab === 1" class="footer-bar">
			<view class="select-all" @click="toggleAllOrders">
				<view class="order-select footer-select" :class="{ checked: isAllSelected }">
					<u-icon v-if="isAllSelected" name="checkmark" color="#fff" size="22"></u-icon>
				</view>
				<text>全选</text>
			</view>
			<view class="ready-button" :class="{ disabled: readySubmitting }" @click="handleReady">出餐</view>
		</view>

		<u-action-sheet
			:list="mealTypeOptions"
			v-model="mealPickerVisible"
			@click="onMealPick"
		></u-action-sheet>
		<rangTime
			ref="rangeTime"
			:mode="1"
			title="选择日期"
			:default-start-date="startDate"
			:default-end-date="endDate"
			@onSubmit="onDateRangeConfirm"
		/>
	</view>
</template>

<script>
import ListScrollView from '@/components/list-scroll-view/index.vue'
import rangTime from '@/components/dengrq-datetime-picker/dateSelector/index.vue'
import merchantDishApi from '@/api/merchantDish.js'

const MEAL_TYPE_OPTIONS = [
	{ text: '全部', value: '' },
	{ text: '早餐', value: 1 },
	{ text: '午餐', value: 2 },
	{ text: '晚餐', value: 3 }
]

export default {
	components: {
		ListScrollView,
		rangTime
	},
	data() {
		return {
			api: {
				url: '/groupmeal/merchantPackageOrder/pageList',
				method: 'POST'
			},
			keyword: '',
			currentTab: 1,
			orderTabs: [
				{ name: '预约单' },
				{ name: '待出餐' },
				{ name: '已出餐' }
			],
			mealType: '',
			startDate: '',
			endDate: '',
			total: 0,
			selectedOrderKeys: [],
			readySubmitting: false,
			mealPickerVisible: false,
			mealTypeOptions: MEAL_TYPE_OPTIONS,
			actionStyle: {
				width: 'auto',
				color: '#333',
				padding: '0 20rpx',
				borderLeft: '1rpx solid #e5e7eb'
			}
		}
	},
	computed: {
		initParams() {
			const params = {
				orderStatus: this.currentTab
			}
			if (this.currentTab === 0) params.isReservation = 1
			if (this.keyword) params.queryName = this.keyword
			if (this.mealType) params.category = this.mealType
			if (this.currentTab === 0 && this.startDate && this.endDate) {
				params.reservationDateStart = this.startDate
				params.reservationDateEnd = this.endDate
			}
			return params
		},
		mealTypeLabel() {
			return (MEAL_TYPE_OPTIONS.find((item) => item.value === this.mealType) || MEAL_TYPE_OPTIONS[0]).text
		},
		dateLabel() {
			if (!this.startDate || !this.endDate) return '选择日期'
			return `${this.formatDateLabel(this.startDate)}-${this.formatDateLabel(this.endDate)}`
		},
		isAllSelected() {
			const orders = this.getVisibleOrders()
			const selectedCount = this.selectedOrderKeys.length
			return orders.length > 0 && selectedCount === orders.length && orders.every((item) => this.isOrderSelected(item))
		}
	},
	methods: {
		goToDetail() {
			uni.navigateTo({ url: '/pages/merchantDish/orders/order-blist' })
		},
		onSearch(value) {
			this.keyword = typeof value === 'string' ? value : this.keyword
			this.reloadList()
		},
		onTabChange(index) {
			this.currentTab = index
			this.selectedOrderKeys = []
			this.reloadList()
		},
		openMealPicker() {
			this.mealPickerVisible = true
		},
		onMealPick(event) {
			const value = event && typeof event === 'object'
				? event.value
				: (MEAL_TYPE_OPTIONS[event] || {}).value
			if (value === undefined) return
			this.mealType = value
			this.reloadList()
		},
		openDatePicker() {
			const picker = this.$refs.rangeTime
			if (!picker) return
			picker.startDate = this.startDate
			picker.endDate = this.endDate
			picker.open()
		},
		onDateRangeConfirm(value) {
			this.startDate = value.startDate
			this.endDate = value.endDate
			this.reloadList()
		},
		formatDateLabel(value) {
			const parts = String(value || '').slice(0, 10).split('-')
			if (parts.length !== 3) return value
			return `${Number(parts[1])}.${Number(parts[2])}`
		},
		getOrderId(item) {
			return item && (item.hostOrderId || item.id || item.orderId)
		},
		openOrder(item) {
			const orderId = this.getOrderId(item)
			if (!orderId) return
			const reservationParam = this.currentTab === 0 ? '&isReservation=1' : ''
			uni.navigateTo({
				url: `/pages/merchantDish/orders/order-details?hostOrderId=${encodeURIComponent(orderId)}${reservationParam}`
			})
		},
		getOrderKey(item) {
			return String(this.getOrderId(item) || '')
		},
		isOrderSelected(item) {
			return this.selectedOrderKeys.includes(this.getOrderKey(item))
		},
		toggleOrder(item) {
			const key = this.getOrderKey(item)
			if (!key) return
			const index = this.selectedOrderKeys.indexOf(key)
			if (index >= 0) this.selectedOrderKeys.splice(index, 1)
			else this.selectedOrderKeys.push(key)
		},
		getVisibleOrders() {
			const list = this.$refs.listScroll
			return (list && Array.isArray(list.dataList)) ? list.dataList : []
		},
		toggleAllOrders() {
			if (this.isAllSelected) {
				this.selectedOrderKeys = []
				return
			}
			this.selectedOrderKeys = this.getVisibleOrders().map((item) => this.getOrderKey(item)).filter(Boolean)
		},
		getReadyOrderIds() {
			const selected = this.getVisibleOrders().filter((item) => this.isOrderSelected(item))
			return selected.reduce((ids, item) => {
				const products = Array.isArray(item.merchantPackageOrderDTOS) ? item.merchantPackageOrderDTOS : []
				products.forEach((product) => {
					String(product.merchantOrderIds || product.merchantOrderId || '')
						.split(',')
						.map((id) => id.trim())
						.filter(Boolean)
						.forEach((id) => ids.push(id))
				})
				return ids
			}, [])
		},
		handleReady() {
			if (this.readySubmitting) return
			const orderIds = [...new Set(this.getReadyOrderIds())]
			if (!orderIds.length) {
				uni.showToast({ title: '请先选择订单', icon: 'none' })
				return
			}
			uni.showModal({
				title: '提示',
				content: '是否确认已经出餐？',
				success: ({ confirm }) => {
					if (!confirm) return
					this.readySubmitting = true
					merchantDishApi.packageOrderReady(orderIds.join(',')).then((res) => {
						if (res.data.code !== 200) {
							uni.showToast({ title: res.data.message || '出餐失败', icon: 'none' })
							return
						}
						this.selectedOrderKeys = []
						uni.showToast({ title: res.data.message || '出餐成功', icon: 'success' })
						this.reloadList()
					}).catch(() => {
						uni.showToast({ title: '出餐失败', icon: 'none' })
					}).finally(() => {
						this.readySubmitting = false
					})
				}
			})
		},
		getReserveDate(item) {
			const value = item.reservationDate || ''
			return String(value).slice(0, 10).replace(/-/g, '.') || '--'
		},
		getMealLabel(item) {
			const products = item.merchantPackageOrderDTOS || []
			const firstProduct = products[0] || {}
			const text = item.mealTypeName || item.categoryName || item.mealName || firstProduct.mealTypeName || firstProduct.categoryName
			if (text) return text
			return ({ 1: '早餐', 2: '午餐', 3: '晚餐' })[this.getMealCategory(item)] || '团餐'
		},
		getMealCategory(item) {
			const products = item.merchantPackageOrderDTOS || []
			const firstProduct = products[0] || {}
			return Number(item.category || item.mealType || firstProduct.category || firstProduct.mealType) || 0
		},
		getProductImage(value) {
			return String(value || '').split(',').filter(Boolean)[0] || ''
		},
		reloadList() {
			this.selectedOrderKeys = []
			this.$nextTick(() => {
				const list = this.$refs.listScroll
				if (list && list.mescroll) list.reloadList(this.initParams)
			})
		},
		afterFetch(result) {
			if (result && result.totalBuyNumber != null) {
				this.total = Number(result.totalBuyNumber) || 0
				return
			}
			const summary = (result && result.summary) || {}
			const summaryTotal = summary.buyNumber || summary.copies || summary.totalCopies
			if (summaryTotal != null) {
				this.total = Number(summaryTotal) || 0
				return
			}
			this.$nextTick(() => {
				const list = this.$refs.listScroll
				const records = (list && list.dataList) || []
				this.total = records.reduce((sum, item) => sum + (Number(item.buyNumber) || 0), 0)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	box-sizing: border-box;
	background: #fff;
	padding: 0 32rpx;
	overflow: hidden;
}

.search-bar {
	width: 100%;
	height: 64rpx;
	box-sizing: border-box;
	padding: 12rpx 20rpx;
	background: #F7F8FC;
	margin-bottom: 12rpx;
}

.navbar-right {
	padding: 0 24rpx;
	color: #333;
	font-size: 28rpx;
}

.filter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 76rpx;
	background: #f7f8fc;
	color: #7d858f;
	font-size: 26rpx;
}

.filter-item {
	display: flex;
	align-items: center;
	gap: 6rpx;
}

.meal-filter {
	justify-content: center;
}

.total {
	white-space: nowrap;
}

.total text {
	color: #1677ff;
}

.list-wrap {
	flex: 1;
	height: 0;
	margin: 0 -32rpx;
	// padding: 20rpx 24rpx 0;
	background: #f7f8fc;
	overflow: hidden;
}

.order-item-selectable {
	position: relative;
}

.order-select {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34rpx;
	height: 34rpx;
	box-sizing: border-box;
	border: 1rpx solid #c9cdd4;
	border-radius: 50%;
	background: #fff;
}

.summary-select {
	position: absolute;
	right: 24rpx;
	top: 50%;
	transform: translateY(-50%);
}

.order-item-selectable .order-summary {
	padding-right: 80rpx;
}

.order-item-selectable .date-row {
	padding-right: 68rpx;
}

.order-select.checked {
	border-color: #1677ff;
	background: #1677ff;
}

.footer-bar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	min-height: 112rpx;
	box-sizing: border-box;
	margin: 0 -32rpx;
	padding: 16rpx 48rpx calc(16rpx + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.select-all {
	display: flex;
	align-items: center;
	gap: 16rpx;
	color: #1d2129;
	font-size: 28rpx;
}

.footer-select {
	position: static;
}

.ready-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 240rpx;
	height: 80rpx;
	border-radius: 80rpx;
	background: linear-gradient(93deg, #10abfe 0%, #2260f6 100%);
	color: #fff;
	font-size: 32rpx;
}

.ready-button.disabled {
	opacity: 0.6;
}

.order-list {
	padding-bottom: 24rpx;
}

.order-item {
	margin-bottom: 20rpx;
	background: #fff;
	border-radius: 8rpx;
	overflow: hidden;
	padding: 24rpx;
	padding-top: 0;
}

.order-summary {
	position: relative;
	padding: 20rpx 24rpx 16rpx;
	color: #7f8792;
	font-size: 26rpx;
	border-bottom: 1px solid #dddddd;
}

.summary-row {
	display: flex;
	align-items: center;
}

.date-row {
	padding-right: 92rpx;
}

.leader-row {
	gap: 50rpx;
	margin-top: 10rpx;
}

.summary-label {
	font-size: 28rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
	min-width: 0;
}

.summary-label text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.meal-tag {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88rpx;
	height: 36rpx;
	box-sizing: border-box;
	border-radius: 0 12rpx 0 12rpx;
	background: linear-gradient(89deg, #1aeeae 0%, #0bda84 100%);
	color: #fff;
	font-size: 22rpx;
	text-align: center;
}

.meal-tag-2 {
	background: linear-gradient(89deg, #ffbf1e 0%, #ff781f 100%);
}

.meal-tag-3 {
	background: linear-gradient(90deg, #10abfe 0%, #2260f6 100%);
}

.order-count {
	flex-shrink: 0;
	color: #7f8792;
	font-size: 24rpx;
}

.order-count text {
	color: #1677ff;
}

.address-line {
	margin-top: 10rpx;
}

.region {
	margin-top: 8rpx;
	color: #8a8f98;
	font-size: 24rpx;
}

.product-list {
	margin: 0 24rpx;
	border-top: 1rpx solid #e5e7eb;
}

.product-item {
	display: flex;
	align-items: end;
	gap: 18rpx;
	min-height: 80rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #f0f1f3;
	margin-top: 20rpx;
}

.product-item:last-child {
	border-bottom: 0;
}

.product-info {
	min-height: 80rpx;
	height: 100%;
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	justify-content: space-between;
	gap: 8rpx;
}

.product-name,
.product-desc {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-name {
	color: #303133;
	font-size: 26rpx;
	font-weight: 600;
}

.product-desc {
	color: #8a91a8;
	font-size: 22rpx;
}

.product-quantity {
	flex-shrink: 0;
	align-self: flex-end;
	margin-bottom: 4rpx;
	color: #333;
	font-size: 24rpx;
}

.status-tabs {
	display: flex;
	justify-content: space-between;
	height: 92rpx;
	border-bottom: 1rpx solid #f0f1f3;
}

.status-tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140rpx;
	color: #8a8f98;
	font-size: 28rpx;
}

.status-tab.active {
	color: #1677ff;
	font-weight: 600;
}

.arrow-down {
	position: absolute;
	bottom: 8rpx;
	left: 50%;
	width: 48rpx;
	height: 8rpx;
	transform: translateX(-50%);
}

::v-deep .u-search {
	border-radius: 4rpx;
}

</style>