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" v-for="item in data" :key="item.hostOrderId || item.id" @click="openOrder(item)">
							<view class="order-summary">
								<view 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>
							<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>

		<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'

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,
			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)}`
		},
	},
	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.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
			uni.navigateTo({
				url: `/pages/merchantDish/orders/order-details?hostOrderId=${encodeURIComponent(orderId)}`
			})
		},
		getReserveDate(item) {
			const value = item.reserveDate || item.appointmentDate || item.mealDate || item.deliveryDate || item.createTime || ''
			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.$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-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>