LocalLivingServicesUniapp/pages/merchantDish/orders/order-blist.vue

<template>
	<view class="page">
		<u-navbar title="订单明细" :autoBack="true" :placeholder="true" :border-bottom="true"></u-navbar>

		<view class="search-bar">
			<u-search
				v-model="keyword"
				placeholder="请输入商品名称"
				bg-color="#f7f8fc"
				search-icon-color="#c9cdd4"
				placeholder-color="#c9cdd4"
				: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 statusTabs"
				:key="tab.value"
				: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="date-filter">
			<view class="date-trigger" @click="openDatePicker">
				<text>{{ dateLabel }}</text>
				<u-icon name="arrow-down" size="20" color="#86909c"></u-icon>
			</view>
			<view v-if="startDate && endDate" class="date-clear" @click.stop="clearDate">
				<u-icon name="close-circle" size="24" color="#86909c"></u-icon>
			</view>
		</view>

		<view class="list-wrap">
			<ListScrollView
				ref="listScroll"
				:api="api"
				:init="initParams"
				:page-size="10"
				:down-enabled="false"
				:up-text-visible="false"
				empty-text="暂无订单明细"
			>
				<template v-slot:list="{ data }">
					<view class="detail-list">
						<view v-if="currentTab === 2" class="after-sale-list">
							<view
								v-for="entry in getAfterSaleEntries(data)"
								:key="entry.key"
								class="detail-card after-sale-card"
								@click="openAfterSaleOrder(entry.group, entry.item)"
							>
								<view class="after-sale-header">
									<view class="address-title">
										<u-icon name="map" color="#86909c" size="30"></u-icon>
										<text>{{ entry.group.deliveryAddress || entry.group.address || entry.item.deliveryAddress || entry.item.address || '暂无地址' }}</text>
									</view>
									<text :class="['after-sale-status', getAfterSaleStatusClass(entry)]">
										{{ getAfterSaleStatusText(entry) }}
									</text>
								</view>
								<text class="region">{{ entry.group.region || entry.item.region || '' }}</text>
								<view class="order-separator"></view>

								<view class="pickup-row after-sale-pickup">
									<text class="pickup-number">取餐号：{{ getMealNumber(entry.item) }}</text>
									<view class="customer-info">
										<text>{{ getCustomerName(entry.item, entry.group) }}</text>
										<text>{{ getCustomerPhone(entry.item, entry.group) }}</text>
									</view>
								</view>

								<view class="product-row after-sale-product">
									<u-image
										width="120rpx"
										height="120rpx"
										border-radius="8rpx"
										:src="getProductImage(entry.item.productImage)"
										mode="aspectFill"
									></u-image>
									<view class="product-info">
										<text class="product-name">{{ entry.item.packageName || entry.item.dishName || '团餐套餐' }}</text>
										<text class="product-desc">{{ getDishDescription(entry.item) }}</text>
										<view class="product-bottom">
											<text class="quantity">{{ getItemCopies(entry.item) }}份</text>
											<view class="price-wrap after-sale-price">
												<text class="price-label">成团价:</text>
												<text class="price-unit">¥</text>
												<text class="price">{{ formatMoney(getItemPrice(entry.item)) }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<template v-else>
						<view
							v-for="(group, groupIndex) in data"
							:key="group.hostOrderId || group.id || groupIndex"
							class="detail-card"
						>
							<view :class="['group-header', { 'completed-group-header': currentTab === 1 }]">
								<view v-if="currentTab === 0" class="group-time">
									<u-icon name="clock" color="#4e5969" size="28"></u-icon>
									<text>成团时间：{{ getGroupTime(group) }}</text>
								</view>
								<text class="copies">合计：<text>{{ getGroupCopies(group) }}</text>份</text>
							</view>

							<view class="address-row">
								<view class="address-title">
									<u-icon name="map" color="#4e5969" size="30"></u-icon>
									<text>{{ group.deliveryAddress || group.address || '暂无地址' }}</text>
								</view>
							</view>
							<text class="region">{{ group.region || '' }}</text>

							<view class="order-separator"></view>

							<view
								v-for="(item, itemIndex) in getGroupItems(group)"
								:key="getItemKey(group, item, itemIndex, groupIndex)"
								class="detail-item"
								@click="openOrder(group, item)"
							>
								<view class="pickup-row">
									<text class="pickup-number">取餐号：{{ getMealNumber(item) }}</text>
									<text class="item-status">{{ getItemStatusText(item) }}</text>
								</view>

								<view class="product-row">
									<u-image
										width="120rpx"
										height="120rpx"
										border-radius="8rpx"
										:src="getProductImage(item.productImage)"
										mode="aspectFill"
									></u-image>
									<view class="product-info">
										<text class="product-name">{{ item.packageName || item.dishName || '团餐套餐' }}</text>
										<text class="box-fee">餐盒费:{{ formatMoney(getItemContainerFee(item)) }}元</text>
										<view class="product-bottom">
											<text class="quantity">{{ getItemCopies(item) }}份</text>
											<view class="price-wrap">
												<text class="price-label">成团价:</text>
												<text class="price-unit">¥</text>
												<text class="price">{{ formatMoney(getItemPrice(item)) }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>

							<view class="card-footer">
								<view class="footer-amount">
									<text>合计餐盒费:</text>
									<text class="amount-unit">¥</text>
									<text class="amount-value box-total">{{ formatMoney(getGroupContainerFee(group)) }}</text>
								</view>
								<view class="footer-amount">
									<text>合计金额:</text>
									<text class="amount-unit">¥</text>
									<text class="amount-value total-amount">{{ formatMoney(getGroupAmount(group)) }}</text>
								</view>
							</view>
						</view>
						</template>
					</view>
				</template>
			</ListScrollView>
		</view>

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

export default {
	components: {
		ListScrollView,
		rangTime
	},
	data() {
		return {
			api: {
				url: '/groupmeal/merchantPackageOrder/getOrderDteails',
				method: 'POST'
			},
			keyword: '',
			currentTab: 0,
			statusTabs: [
				{ name: '待出餐', value: 1 },
				{ name: '已出餐', value: 2 },
				{ name: '售后', value: 3 }
			],
			startDate: '',
			endDate: '',
			listReady: false,
			actionStyle: {
				width: 'auto',
				color: '#333',
				fontSize: '26rpx',
				padding: '0 20rpx',
				borderLeft: '1rpx solid #e5e7eb'
			}
		}
	},
	computed: {
		initParams() {
			const params = {
				orderStatus: this.statusTabs[this.currentTab].value
			}
			if (this.keyword) params.queryName = this.keyword
			if (this.startDate && this.endDate) {
				params.completeStartDate = this.startDate
				params.completeEndDate = this.endDate
			}
			return params
		},
		dateLabel() {
			if (!this.startDate || !this.endDate) return '选择日期'
			return `${this.formatDateLabel(this.startDate)}-${this.formatDateLabel(this.endDate)}`
		}
	},
	onShow() {
		if (this.listReady) {
			this.reloadList()
		} else {
			this.listReady = true
		}
	},
	methods: {
		onSearch(value) {
			this.keyword = typeof value === 'string' ? value.trim() : this.keyword.trim()
			this.reloadList()
		},
		onTabChange(index) {
			if (this.currentTab === index) return
			this.currentTab = index
			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()
		},
		clearDate() {
			this.startDate = ''
			this.endDate = ''
			this.reloadList()
		},
		reloadList() {
			this.$nextTick(() => {
				const list = this.$refs.listScroll
				if (list) list.reloadList(this.initParams)
			})
		},
		getGroupItems(group) {
			return group.orderChildren || group.merchantPackageOrderDTOS || group.items || []
		},
		getAfterSaleEntries(data) {
			return (data || []).reduce((entries, group, groupIndex) => {
				const items = this.getGroupItems(group)
				if (!items.length) {
					entries.push({
						group,
						item: group,
						key: this.getItemKey(group, group, 0, groupIndex)
					})
					return entries
				}
				items.forEach((item, itemIndex) => {
					entries.push({
						group,
						item,
						key: this.getItemKey(group, item, itemIndex, groupIndex)
					})
				})
				return entries
			}, [])
		},
		getGroupKey(group, groupIndex) {
			return group.hostOrderId || group.id || `group-${groupIndex}`
		},
		getItemKey(group, item, itemIndex, groupIndex) {
			return `${this.getGroupKey(group, groupIndex)}-${item.userOrderId || item.merchantOrderPackageId || item.id || itemIndex}`
		},
		getGroupTime(group) {
			const value = group.groupTime || group.groupMealTime || group.groupSuccessTime || group.groupingTime || group.clusterTime || group.createTime || group.orderTime || group.payTime || ''
			if (!value) return '--'
			const text = String(value).trim()
			const match = text.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})(?:[ T](\d{1,2}):(\d{2}))?/)
			if (!match) return text.length > 16 ? text.slice(0, 16) : text
			const date = `${match[1]}.${Number(match[2])}.${Number(match[3])}`
			return match[4] ? `${date} ${String(match[4]).padStart(2, '0')}:${match[5]}` : date
		},
		getMealNumber(item) {
			return item.mealNumber || item.pickupNumber || item.takeMealNumber || item.mealCode || '--'
		},
		getCustomerName(item, group = {}) {
			return item.linkName || item.userName || item.customerName || item.consignee || group.linkName || group.userName || '--'
		},
		getCustomerPhone(item, group = {}) {
			return item.userPhone || group.userPhone || '--'
		},
		getDishDescription(item) {
			return item.dishName || item.packageContent || item.dishNames || item.boxName || '暂无菜品信息'
		},
		getGroupCopies(group) {
			return group.totalCopies || group.copies || group.buyNumber || this.getGroupItems(group).reduce((sum, item) => sum + this.getItemCopies(item), 0)
		},
		getItemCopies(item) {
			return Number(item.packageNumber || item.numberUserCount || item.copies || 0)
		},
		getItemPrice(item) {
			if (item.groupPrice != null) return item.groupPrice
			if (item.price != null) return item.price
			return item.packagePrice || 0
		},
		getItemContainerFee(item) {
			if (item.containerFee != null) return item.containerFee
			if (item.boxFee != null) return item.boxFee
			return Number(item.boxPrice || 0) * this.getItemCopies(item)
		},
		getGroupContainerFee(group) {
			if (group.containerFeeTotal != null) return group.containerFeeTotal
			if (group.boxFeeTotal != null) return group.boxFeeTotal
			return this.getGroupItems(group).reduce((sum, item) => sum + Number(this.getItemContainerFee(item) || 0), 0)
		},
		getGroupAmount(group) {
			if (group.amountTotal != null) return group.amountTotal
			if (group.copiesAmount != null) return group.copiesAmount
			return group.totalAmount != null ? group.totalAmount : 0
		},
		getItemStatusText(item) {
			const text = item.orderStatusName || item.statusName || ''
			if (text.includes('已出餐')) return '已出餐'
			if (text.includes('未出餐') || text.includes('待出餐') || text.includes('成团')) return '未出餐'
			const status = Number(item.orderStatus)
			if (Number.isFinite(status)) return status >= 3 && status !== 6 ? '已出餐' : '未出餐'
			return this.currentTab === 1 ? '已出餐' : '未出餐'
		},
		getAfterSaleStatusText(entry) {
			const item = entry.item || {}
			const group = entry.group || {}
			const text = item.refundStatusName || item.refundTypeName || item.afterSaleStatusName || group.refundStatusName || group.refundTypeName || group.afterSaleStatusName
			if (text) {
				if (text.includes('成功')) return '退款成功'
				if (text.includes('拒绝')) return '拒绝退款'
				if (text.includes('失败')) return '退款失败'
				if (text.includes('申请') || text.includes('处理中') || text.includes('退款中')) return '售后申请中'
				return text
			}
			const type = item.refundType != null
				? item.refundType
				: (item.refundStatus != null ? item.refundStatus : (group.refundType != null ? group.refundType : group.refundStatus))
			return ({ 0: '售后申请中', 1: '退款成功', 2: '售后申请中', 3: '退款失败', 4: '拒绝退款' })[type] || '售后申请中'
		},
		getAfterSaleStatusClass(entry) {
			const text = this.getAfterSaleStatusText(entry)
			if (text.includes('成功')) return 'success'
			if (text.includes('拒绝') || text.includes('失败')) return 'danger'
			return 'pending'
		},
		formatDateLabel(value) {
			const parts = String(value || '').slice(0, 10).split('-')
			if (parts.length !== 3) return value
			return `${Number(parts[1])}.${Number(parts[2])}`
		},
		formatMoney(value) {
			const number = Number(value)
			if (!Number.isFinite(number)) return '0'
			return number.toFixed(2).replace(/\.00$/, '').replace(/(\.\d)0$/, '$1')
		},
		getProductImage(value) {
			const image = String(value || '').split(',').filter(Boolean)[0] || ''
			if (!image || /^https?:\/\//.test(image)) return image
			return this.$config && this.$config.apiUrl ? `${this.$config.apiUrl}/${image}` : image
		},
		openOrder(group, item) {
			const hostOrderId = group.hostOrderId || item.hostOrderId
			if (!hostOrderId) return
			uni.navigateTo({
				url: `/pages/merchantDish/orders/order-details?hostOrderId=${encodeURIComponent(hostOrderId)}`
			})
		},
		openAfterSaleOrder(group, item) {
			const params = {
				packageId: item.packageId || group.packageId,
				userOrderId: item.userOrderId || group.userOrderId,
				hostOrderId: item.hostOrderId || group.hostOrderId
			}
			if (!params.hostOrderId) {
				uni.showToast({ title: '缺少订单信息', icon: 'none' })
				return
			}
			const query = this.$u.queryParams(params)
			uni.navigateTo({
				url: `/pages/merchantDish/orders/refund-details${query}`
			})
		}
	}
}
</script>

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

.search-bar {
	height: 88rpx;
	box-sizing: border-box;
	padding: 10rpx 32rpx;
	background: #fff;
}

.status-tabs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	box-sizing: border-box;
	padding: 0 40rpx;
	background: #fff;
}

.status-tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120rpx;
	height: 100%;
	color: #86909c;
	font-size: 30rpx;
}

.status-tab.active {
	color: #1c7cf9;
	font-weight: 500;
}

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

.date-filter {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	color: #86909c;
	font-size: 28rpx;
}

.date-trigger {
	display: flex;
	align-items: center;
	gap: 6rpx;
}

.date-clear {
	display: flex;
	align-items: center;
	padding: 12rpx 4rpx 12rpx 10rpx;
}

.list-wrap {
	flex: 1;
	height: 0;
	overflow: hidden;
}

.detail-list {
	box-sizing: border-box;
	padding: 0 32rpx 32rpx;
}

.detail-card {
	box-sizing: border-box;
	margin-bottom: 20rpx;
	padding: 24rpx;
	border-radius: 16rpx;
	background: #fff;
}

.group-header,
.after-sale-header,
.address-row,
.pickup-row,
.product-row,
.product-bottom,
.card-footer,
.footer-amount {
	display: flex;
	align-items: center;
}

.group-header {
	justify-content: space-between;
	min-width: 0;
}

.completed-group-header {
	justify-content: flex-end;
}

.after-sale-header {
	justify-content: space-between;
	gap: 16rpx;
	min-width: 0;
}

.after-sale-header .address-title {
	flex: 1;
}

.after-sale-status {
	flex-shrink: 0;
	font-size: 28rpx;
	line-height: 28rpx;
	white-space: nowrap;
}

.after-sale-status.pending {
	color: #f8b328;
}

.after-sale-status.success {
	color: #39cf34;
}

.after-sale-status.danger {
	color: #f53f3f;
}

.group-time {
	display: flex;
	align-items: center;
	gap: 8rpx;
	min-width: 0;
	color: #4e5969;
	font-size: 28rpx;
}

.group-time text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.copies {
	flex-shrink: 0;
	margin-left: 12rpx;
	color: #999;
	font-size: 26rpx;
}

.copies text {
	color: #388bf9;
}

.address-row {
	justify-content: space-between;
	margin-top: 10rpx;
}

.address-title {
	display: flex;
	align-items: center;
	gap: 10rpx;
	min-width: 0;
	color: #1d2129;
	font-size: 30rpx;
	font-weight: 600;
}

.address-title text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.region {
	display: block;
	margin-top: 10rpx;
	color: #666;
	font-size: 26rpx;
}

.order-separator {
	height: 1rpx;
	margin-top: 20rpx;
	background: #eee;
}

.detail-item {
	padding: 16rpx 0 24rpx;
	border-bottom: 1rpx solid #eee;
}

.pickup-row {
	justify-content: space-between;
	box-sizing: border-box;
	height: 64rpx;
	padding: 10rpx;
	border-radius: 8rpx;
	background: #eff6ff;
}

.after-sale-pickup {
	margin-top: 16rpx;
}

.pickup-number {
	color: #333;
	font-size: 30rpx;
}

.item-status {
	color: #86909c;
	font-size: 28rpx;
}

.customer-info {
	display: flex;
	align-items: center;
	gap: 16rpx;
	min-width: 0;
	color: #333;
	font-size: 30rpx;
}

.customer-info text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-row {
	align-items: stretch;
	gap: 12rpx;
	margin-top: 16rpx;
}

.product-info {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	overflow: hidden;
	color: #1d2129;
	font-size: 28rpx;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.box-fee,
.product-desc,
.quantity {
	color: #86909c;
	font-size: 24rpx;
}

.product-desc {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-bottom {
	justify-content: space-between;
}

.price-wrap {
	display: flex;
	align-items: baseline;
	color: #1d2129;
}

.price-label {
	margin-right: 4rpx;
	color: #4e5969;
	font-size: 24rpx;
}

.price-unit {
	font-size: 24rpx;
}

.price {
	font-size: 32rpx;
}

.after-sale-price .price-unit,
.after-sale-price .price {
	color: #ff004e;
}

.card-footer {
	justify-content: space-between;
	padding-top: 20rpx;
	color: #86909c;
	font-size: 26rpx;
}

.footer-amount {
	align-items: baseline;
	white-space: nowrap;
}

.amount-unit,
.amount-value {
	color: #ff004e;
}

.amount-unit {
	margin-left: 8rpx;
	font-size: 24rpx;
}

.amount-value {
	font-size: 32rpx;
}

.total-amount {
	font-size: 40rpx;
}

::v-deep .u-search {
	height: 64rpx;
	border-radius: 8rpx;
}
</style>