xg_total_process_master_cloud_h5/pages/psiManagement/dishManage/DishOrderApproval.vue

<template>
	<view class="dish-order-approval">
		<view v-if="loading" class="loading-wrap">
			<u-loading-icon text="加载中" textSize="14"></u-loading-icon>
		</view>

		<view v-else-if="currentOrder" class="page-body">
			<view class="summary-card">
				<view class="summary-head">
					<view class="summary-title">订单信息</view>
					<view class="status-tag" :class="orderStatusClass(currentOrder.orderStatus)">{{ orderStatusName(currentOrder.orderStatus) }}</view>
				</view>
				<view class="summary-main">
					<view class="room-name">{{ currentOrder.roomName || '-' }}</view>
					<view class="order-no">{{ currentOrder.orderNo || '-' }}</view>
				</view>
				<view class="summary-grid">
					<view class="summary-item">
						<text>结账方式</text>
						<text>{{ settleTypeName(currentOrder.settleType) }}</text>
					</view>
					<view class="summary-item">
						<text>账单原金额</text>
						<text>￥{{ formatMoney(currentOrder.totalAmount) }}</text>
					</view>
					<view class="summary-item">
						<text>折扣比例</text>
						<text>{{ discountRateText(currentOrder) }}</text>
					</view>
					<view class="summary-item">
						<text>优惠金额</text>
						<text>￥{{ formatMoney(currentOrder.discountAmount) }}</text>
					</view>
					<view class="summary-item">
						<text>实收金额</text>
						<text>￥{{ formatMoney(currentOrder.payableAmount) }}</text>
					</view>
					<view class="summary-item summary-wide">
						<text>结账/取消时间</text>
						<text>{{ currentOrder.settleTime || '-' }}</text>
					</view>
				</view>
			</view>

			<view class="tab-bar">
				<view
					v-for="tab in tabs"
					:key="tab.name"
					class="tab-item"
					:class="{ active: activeTab === tab.name }"
					@click="activeTab = tab.name"
				>
					<text>{{ tab.label }}</text>
					<text class="tab-count">{{ tab.count }}</text>
				</view>
			</view>

			<view class="dish-list">
				<view v-if="currentDetailList.length === 0" class="empty-wrap">
					<u-empty mode="data" text="暂无菜品"></u-empty>
				</view>
				<view v-for="(item, index) in currentDetailList" :key="item.id || index" class="dish-card">
					<view class="dish-row dish-title-row">
						<view class="dish-name">{{ item.dishName || '-' }}</view>
						<view class="dish-amount">￥{{ formatMoney(getDisplayAmount(item)) }}</view>
					</view>
					<view class="dish-meta">
						<text>{{ item.typeName || '未分类' }}</text>
						<text v-if="item.spec">规格：{{ item.spec }}</text>
					</view>
					<view class="dish-row">
						<view class="dish-price">单价 ￥{{ formatMoney(item.salePrice) }}</view>
						<view class="dish-qty">x {{ getDisplayQuantity(item) }}</view>
					</view>
					<view v-if="item.createTime && activeTab !== 'actual'" class="dish-time">
						{{ activeTab === 'add' ? '加菜时间' : '退菜时间' }}：{{ item.createTime }}
					</view>
					<view v-if="activeTab === 'reduce' && item.reason" class="dish-reason">
						退菜原因：{{ item.reason }}
					</view>
				</view>
			</view>
		</view>

		<view v-else class="empty-page">
			<u-empty mode="data" text="暂无订单信息"></u-empty>
		</view>
	</view>
</template>

<script>
import DishOrderService from '@/api/psi/DishOrderService'

export default {
	name: 'DishOrderApproval',
	props: {
		businessId: {
			type: String,
			default: ''
		},
		formReadOnly: {
			type: Boolean,
			default: true
		},
		status: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			loading: false,
			activeTab: 'actual',
			currentOrder: null,
			routeBusinessId: '',
			dishOrderService: null
		}
	},
	computed: {
		tabs() {
			const order = this.currentOrder || {}
			return [
				{ name: 'actual', label: '实际菜单', count: this.getList(order.detailList).length },
				{ name: 'add', label: '加菜', count: this.getList(order.addDishList).length },
				{ name: 'reduce', label: '退菜', count: this.getList(order.reduceDishList).length }
			]
		},
		currentDetailList() {
			const order = this.currentOrder || {}
			if (this.activeTab === 'add') {
				return this.getList(order.addDishList)
			}
			if (this.activeTab === 'reduce') {
				return this.getList(order.reduceDishList)
			}
			return this.getList(order.detailList)
		}
	},
	watch: {
		businessId() {
			this.init()
		}
	},
	onLoad(option) {
		this.routeBusinessId = (option && (option.businessId || option.id)) || ''
		uni.setNavigationBarTitle({ title: '点菜订单审批' })
		this.init()
	},
	created() {
		this.dishOrderService = new DishOrderService()
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			const id = this.getBusinessId()
			this.activeTab = 'actual'
			if (!id || id === 'false') {
				this.currentOrder = null
				return
			}
			if (!this.dishOrderService) {
				this.dishOrderService = new DishOrderService()
			}
			this.loading = true
			this.$emit('changeLoading', true)
			this.dishOrderService.findOrderById(id).then((data) => {
				this.currentOrder = data || {}
			}).catch(() => {
				this.currentOrder = null
				uni.showToast({ title: '订单信息加载失败', icon: 'none' })
			}).finally(() => {
				this.loading = false
				this.$emit('changeLoading', false)
			})
		},
		getBusinessId() {
			return this.businessId || this.routeBusinessId || ''
		},
		getKeyWatch() {
			this.init()
		},
		close() {
			this.currentOrder = null
		},
		saveForm(callback) {
			this.callFlowCallback(callback)
		},
		agreeForm(callback) {
			this.callFlowCallback(callback)
		},
		startForm(callback) {
			this.callFlowCallback(callback)
		},
		reapplyForm(callback) {
			this.callFlowCallback(callback)
		},
		updateStatusById(type, callback) {
			this.callFlowCallback(callback)
		},
		callFlowCallback(callback) {
			const order = this.currentOrder || {}
			if (callback) {
				callback('psi_dish_order', order.id || this.getBusinessId(), order)
			}
		},
		getList(list) {
			return Array.isArray(list) ? list : []
		},
		getDisplayQuantity(item) {
			return Math.abs(Number(item.quantity || 0))
		},
		getDisplayAmount(item) {
			return Math.abs(Number(item.amount || 0))
		},
		orderStatusName(value) {
			if (value === '0') {
				return '用餐中'
			}
			if (value === '1') {
				return '已结账'
			}
			if (value === '2') {
				return '已取消'
			}
			return '-'
		},
		orderStatusClass(value) {
			if (value === '1') {
				return 'success'
			}
			if (value === '2') {
				return 'danger'
			}
			return 'primary'
		},
		settleTypeName(value) {
			if (value === '0') {
				return '结账'
			}
			if (value === '1') {
				return '折扣结账'
			}
			if (value === '2') {
				return '优惠结账'
			}
			return '-'
		},
		discountRateText(order) {
			if (!order || order.settleType !== '1') {
				return '-'
			}
			return this.formatMoney(order.discountRate) + '%'
		},
		formatMoney(value) {
			return Number(value || 0).toFixed(2)
		}
	}
}
</script>

<style scoped>
.dish-order-approval {
	min-height: 100vh;
	background: #f5f6fa;
	padding: 20rpx 20rpx 40rpx;
	box-sizing: border-box;
}

.loading-wrap,
.empty-page {
	min-height: 360rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 16rpx;
}

.summary-card,
.dish-card {
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
}

.summary-card {
	padding: 28rpx;
}

.summary-head,
.summary-main,
.dish-row,
.tab-bar {
	display: flex;
	align-items: center;
}

.summary-head,
.summary-main,
.dish-row {
	justify-content: space-between;
}

.summary-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #303133;
}

.status-tag {
	padding: 8rpx 18rpx;
	border-radius: 999rpx;
	font-size: 24rpx;
	line-height: 32rpx;
	color: #2979ff;
	background: #ecf5ff;
}

.status-tag.success {
	color: #19be6b;
	background: #e8f7ef;
}

.status-tag.danger {
	color: #fa3534;
	background: #fff1f0;
}

.summary-main {
	margin-top: 24rpx;
	gap: 24rpx;
}

.room-name {
	font-size: 40rpx;
	font-weight: 700;
	color: #1f2d3d;
	min-width: 0;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.order-no {
	font-size: 24rpx;
	color: #909399;
	max-width: 320rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.summary-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22rpx;
	margin-top: 28rpx;
}

.summary-item {
	min-width: 0;
	padding: 18rpx;
	border-radius: 12rpx;
	background: #f7f8fa;
}

.summary-wide {
	grid-column: span 2;
}

.summary-item text:first-child {
	display: block;
	font-size: 24rpx;
	color: #909399;
	line-height: 34rpx;
}

.summary-item text:last-child {
	display: block;
	margin-top: 8rpx;
	font-size: 28rpx;
	font-weight: 600;
	color: #303133;
	line-height: 38rpx;
	word-break: break-all;
}

.tab-bar {
	margin: 24rpx 0;
	padding: 8rpx;
	background: #fff;
	border-radius: 14rpx;
	gap: 8rpx;
}

.tab-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	height: 72rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: #606266;
}

.tab-item.active {
	background: #2979ff;
	color: #fff;
	font-weight: 600;
}

.tab-count {
	font-size: 22rpx;
	min-width: 32rpx;
	height: 32rpx;
	line-height: 32rpx;
	text-align: center;
	border-radius: 999rpx;
	background: rgba(144, 147, 153, 0.15);
}

.tab-item.active .tab-count {
	background: rgba(255, 255, 255, 0.24);
}

.dish-list {
	display: flex;
	flex-direction: column;
	gap: 18rpx;
}

.empty-wrap {
	padding: 60rpx 0;
	background: #fff;
	border-radius: 16rpx;
}

.dish-card {
	padding: 24rpx;
}

.dish-title-row {
	gap: 16rpx;
}

.dish-name {
	min-width: 0;
	flex: 1;
	font-size: 32rpx;
	font-weight: 600;
	color: #303133;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dish-amount {
	font-size: 30rpx;
	font-weight: 700;
	color: #fa3534;
}

.dish-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
	margin-top: 14rpx;
}

.dish-meta text {
	padding: 6rpx 12rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	line-height: 32rpx;
	color: #606266;
	background: #f4f4f5;
}

.dish-price,
.dish-qty,
.dish-time,
.dish-reason {
	font-size: 26rpx;
	color: #606266;
}

.dish-row:not(.dish-title-row) {
	margin-top: 18rpx;
}

.dish-qty {
	font-weight: 600;
	color: #303133;
}

.dish-time {
	margin-top: 14rpx;
	line-height: 36rpx;
	color: #909399;
}

.dish-reason {
	margin-top: 10rpx;
	line-height: 38rpx;
	word-break: break-all;
}
</style>