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

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

		<view v-if="loading" class="loading">加载中...</view>
		<view v-else-if="!detail.hostOrderId" class="empty">暂无订单详情</view>
		<scroll-view v-else class="content" scroll-y>
			<view class="detail-card">
				<view class="location-info">
					<view class="location-top">
						<view class="location-title">
							<u-icon name="map" color="#1d2129" size="30"></u-icon>
							<text>{{ detail.deliveryAddress || '暂无地址' }}</text>
						</view>
						<text v-if="statusText" class="status-badge">{{ statusText }}</text>
						<text class="copies">合计：<text class="copies-number">{{ detail.totalCopies || 0 }}</text>份</text>
					</view>
					<text class="location-region">{{ detail.region || '' }}</text>
				</view>

				<view
					v-for="(item, index) in items"
					:key="item.merchantOrderPackageId || index"
					class="detail-item"
				>
					<view
						v-if="showRefundActions"
						class="select-circle"
						:class="{ checked: isSelected(item, index) }"
						@click.stop="toggleItem(item, index)"
					>
						<u-icon v-if="isSelected(item, index)" name="checkmark" color="#fff" size="22"></u-icon>
					</view>
					<view class="item-content">
						<view class="contact-row">
							<view class="contact-info">
								<text>{{ item.linkName || '--' }}</text>
								<text>{{ item.maskedPhone || '--' }}</text>
							</view>
							<image
								class="call-icon"
								src="/static/merchantDish/call.png"
								mode="aspectFit"
								@click.stop="makePhoneCall(item.maskedPhone)"
							></image>
						</view>
						<view class="product-row">
							<u-image
								width="120rpx"
								height="120rpx"
								border-radius="12rpx"
								:src="getProductImage(item.productImage)"
								mode="aspectFill"
							></u-image>
							<view class="product-info">
								<text class="product-name">{{ item.packageName || '团餐套餐' }}</text>
								<text class="product-desc">{{ item.dishName || '暂无菜品信息' }}</text>
								<view class="product-meta">
									<text>{{ getItemCopies(item) }}份</text>
									<text>餐盒费:{{ formatMoney(item.containerFee) }}元</text>
									<text>成团价:<text class="price">¥{{ formatMoney(item.groupPrice) }}</text></text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="!items.length" class="no-items">暂无套餐明细</view>
				<view class="card-footer">
					<text>合计餐盒费: <text class="amount">¥{{ formatMoney(detail.containerFeeTotal) }}</text></text>
					<text>合计金额: <text class="amount total-amount">¥{{ formatMoney(detail.amountTotal) }}</text></text>
				</view>
			</view>
		</scroll-view>

		<view v-if="showRefundActions && !loading && detail.hostOrderId" class="footer-bar">
			<view class="select-all" @click="toggleAll">
				<view class="select-circle" :class="{ checked: isAllSelected }">
					<u-icon v-if="isAllSelected" name="checkmark" color="#fff" size="22"></u-icon>
				</view>
				<text>全选</text>
			</view>
			<view class="refund-button" @click="handleRefund">退款</view>
		</view>

		<view v-if="refundVisible" class="refund-mask" @click.self="closeRefundModal">
			<view class="refund-dialog" @click.stop>
				<text class="refund-title">提示</text>
				<text class="refund-message">确认对{{ refundTargets.length }}个用户订单发起退款吗</text>
				<view class="refund-actions">
					<view class="refund-action cancel" @click="closeRefundModal">取消</view>
					<view class="refund-action confirm" @click="confirmRefund">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import merchantDishApi from '@/api/merchantDish.js'

export default {
	data() {
		return {
			hostOrderId: '',
			detail: {},
			loading: true,
			selectedKeys: [],
			showRefundActions: false,
			refundVisible: false,
			refundTargets: [],
			refundSubmitting: false
		}
	},
	computed: {
		items() {
			return Array.isArray(this.detail.items) ? this.detail.items : []
		},
		statusText() {
			const status = this.detail.orderStatusName || this.detail.statusName || this.detail.orderStatus
			if (typeof status === 'string' && status && Number.isNaN(Number(status))) return status
			return ({ 0: '待支付', 1: '待成团', 2: '已成团', 3: '已出餐', 4: '已送达', 5: '已取消', 6: '售后' })[status] || ''
		},
		isAllSelected() {
			return this.items.length > 0 && this.items.every((item, index) => this.isSelected(item, index))
		}
	},
	onLoad(query) {
		this.hostOrderId = (query && query.hostOrderId) || ''
		this.showRefundActions = String((query && query.isReservation) || '') === '1'
		this.loadDetail()
	},
	methods: {
		loadDetail() {
			if (!this.hostOrderId) {
				this.loading = false
				uni.showToast({ title: '缺少主订单号', icon: 'none' })
				return
			}

			merchantDishApi.packageOrderDetail(this.hostOrderId).then((res) => {
				if (res.data.code !== 200) {
					uni.showToast({ title: res.data.message || '详情加载失败', icon: 'none' })
					return
				}
				this.detail = res.data.result || {}
			}).catch(() => {
				uni.showToast({ title: '详情加载失败', icon: 'none' })
			}).finally(() => {
				this.loading = false
			})
		},
		getItemKey(item, index) {
			// 预约单退款的业务粒度是用户子订单；同一用户有多个套餐时必须一起选中。
			return item.userOrderId || item.merchantOrderPackageId || item.packageId || `item-${index}`
		},
		isSelected(item, index) {
			return this.selectedKeys.includes(this.getItemKey(item, index))
		},
		toggleItem(item, index) {
			const key = this.getItemKey(item, index)
			const selectedIndex = this.selectedKeys.indexOf(key)
			if (selectedIndex >= 0) this.selectedKeys.splice(selectedIndex, 1)
			else this.selectedKeys.push(key)
		},
		toggleAll() {
			if (this.isAllSelected) {
				this.selectedKeys = []
				return
			}
			this.selectedKeys = [...new Set(this.items.map((item, index) => this.getItemKey(item, index)))]
		},
		handleRefund() {
			const selected = this.items.filter((item, index) => this.isSelected(item, index))
			if (!selected.length) {
				uni.showToast({ title: '请选择要退款的用户订单', icon: 'none' })
				return
			}
			if (selected.some((item) => !item.userOrderId)) {
				uni.showToast({ title: '退款缺少用户子订单号', icon: 'none' })
				return
			}
			this.refundTargets = [...new Set(selected.map((item) => item.userOrderId))]
			this.refundVisible = true
		},
		closeRefundModal() {
			if (this.refundSubmitting) return
			this.refundVisible = false
			this.refundTargets = []
		},
		confirmRefund() {
			if (!this.refundTargets.length || this.refundSubmitting) return
			this.refundSubmitting = true
			merchantDishApi.packageOrderReservationDirectRefundBatch(
				this.hostOrderId,
				this.refundTargets
			).then((res) => {
				if (res.data.code !== 200) {
					uni.showToast({ title: res.data.message || '退款失败', icon: 'none' })
					return
				}
				const result = res.data.result || {}
				this.refundVisible = false
				this.refundTargets = []
				this.selectedKeys = []
				uni.showToast({
					title: res.data.message || '退款已受理',
					icon: Number(result.rejectedCount || 0) > 0 ? 'none' : 'success'
				})
				this.loadDetail()
			}).catch(() => {
				uni.showToast({ title: '退款失败', icon: 'none' })
			}).finally(() => {
				this.refundSubmitting = false
			})
		},
		getItemCopies(item) {
			return item.packageNumber || 0
		},
		makePhoneCall(phone) {
			const phoneNumber = String(phone || '')
			if (!phoneNumber || phoneNumber.includes('*')) {
				uni.showToast({ title: '手机号暂不可拨打', icon: 'none' })
				return
			}
			uni.makePhoneCall({
				phoneNumber
			})
		},
		formatMoney(value) {
			if (value == null || value === '') return '0.00'
			const number = Number(value)
			return Number.isFinite(number) ? number.toFixed(2) : '0.00'
		},
		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
		}
	}
}
</script>

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

.content {
	flex: 1;
	height: 0;
	box-sizing: border-box;
	padding: 20rpx 32rpx 140rpx;
}

.loading,
.empty {
	padding: 80rpx 24rpx;
	color: #999;
	text-align: center;
}

.detail-card {
	padding: 24rpx;
	border-radius: 16rpx;
	background: #fff;
}

.location-info {
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #eee;
}

.location-top {
	display: flex;
	align-items: center;
	min-height: 34rpx;
}

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

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

.status-badge {
	flex-shrink: 0;
	margin: 0 10rpx;
	padding: 4rpx 10rpx;
	border-radius: 4rpx;
	background: #43c28c;
	color: #fff;
	font-size: 24rpx;
}

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

.copies-number {
	color: #388bf9;
}

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

.detail-item {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
	padding-top: 24rpx;
}

.select-circle {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32rpx;
	height: 32rpx;
	margin-top: 8rpx;
	box-sizing: border-box;
	border: 1rpx solid #d9d9d9;
	border-radius: 50%;
	background: #fff;
}

.select-circle.checked {
	border-color: #388bf9;
	background: #388bf9;
}

.item-content {
	flex: 1;
	min-width: 0;
}

.contact-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 48rpx;
	padding: 10rpx;
	border-radius: 8rpx;
	background: #f8f8f8;
	image{
		width: 40rpx;
		height: 40rpx;
	}
}

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

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

.call-icon {
	flex-shrink: 0;
	width: 40rpx;
	height: 40rpx;
}

.product-row {
	display: flex;
	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,
.product-desc {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-name {
	color: #1d2129;
	font-size: 28rpx;
}

.product-desc {
	margin-top: 6rpx;
	color: #86909c;
	font-size: 24rpx;
	line-height: 32rpx;
}

.product-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8rpx;
	margin-top: 8rpx;
	color: #4e5969;
	font-size: 24rpx;
	white-space: nowrap;
}

.price,
.amount {
	color: #ff004e;
}

.price {
	font-size: 32rpx;
}

.card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 24rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #eee;
	color: #86909c;
	font-size: 26rpx;
}

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

.no-items {
	padding: 30rpx 0;
	color: #999;
	text-align: center;
}

.footer-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 88rpx;
	padding: 24rpx 48rpx calc(24rpx + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);
}

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

.select-all .select-circle {
	margin-top: 0;
}

.refund-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;
}

.refund-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
}

.refund-dialog {
	display: flex;
	width: 590rpx;
	flex-direction: column;
	align-items: center;
	border-radius: 16rpx;
	background: #fff;
	overflow: hidden;
}

.refund-title {
	padding-top: 32rpx;
	color: #1d2129;
	font-size: 32rpx;
	font-weight: 600;
	line-height: 44rpx;
	margin-bottom: 32rpx;
}

.refund-message {
	color: #4e5969;
	font-size: 30rpx;
	line-height: 42rpx;
	text-align: center;
	margin-bottom: 32rpx;
}

.refund-actions {
	display: flex;
	width: 100%;
	border-top: 1rpx solid #e7e7e7;
}

.refund-action {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 90rpx;
	box-sizing: border-box;
	font-size: 30rpx;
	line-height: 42rpx;
}

.refund-action.cancel {
	border-right: 1rpx solid #e7e7e7;
	color: #86909c;
}

.refund-action.confirm {
	color: #1d2129;
}
</style>