xg_total_process_master_cloud_h5/pages/psiManagement/dishManage/DishOrderDetail.vue

<template>
	<view class="dish-order-detail">
		<view class="order-header">
			<view class="header-row">
				<view class="room-info">
					<view class="room-name">{{ currentRoom.roomName || '-' }}</view>
					<view class="room-no-chip">包房号 {{ currentRoom.roomNo || '-' }}</view>
				</view>
				<view class="header-actions">
					<button v-if="hasCurrentOrder" class="mini-btn success" @click="goAddDish">加菜</button>
					<button v-if="hasCurrentOrder" class="mini-btn warning" @click="openReturnDishDialog">退菜</button>
					<button class="mini-btn ghost" @click="backRoomList">返回包房</button>
				</view>
			</view>
			<view v-if="!hasCurrentOrder" class="dish-search">
				<input class="search-input" v-model="dishSearchName" placeholder="搜索菜品名称" confirm-type="search"
					@confirm="searchDish" />
				<button class="search-btn" @click="searchDish">搜索</button>
			</view>
		</view>

		<view class="order-main">
			<view v-if="!hasCurrentOrder" class="dish-panel">
				<scroll-view scroll-x class="category-bar" :show-scrollbar="false">
					<view v-for="item in categoryList" :key="item.id" class="category-pill"
						:class="{ active: activeTypeId === item.id }" @click="changeType(item)">
						{{ item.name }}
					</view>
				</scroll-view>
				<scroll-view scroll-y class="dish-list">
					<view v-if="dishLoading" class="empty-box">加载中...</view>
					<view v-else-if="dishList.length === 0" class="empty-box">暂无菜品</view>
					<view v-else class="dish-grid">
						<view v-for="item in dishList" :key="item.id" class="dish-card">
							<image v-if="item.previewImageUrl" class="dish-image" :src="item.previewImageUrl"
								mode="aspectFill" @click="previewDishImage(item)"></image>
							<view v-else class="dish-image dish-image-empty">暂无图片</view>
							<view class="dish-info">
								<view class="dish-name" @click="openDishDetail(item)">{{ item.dishName }}</view>
								<view class="dish-desc">{{ item.spec || item.taste || item.remarks || '暂无说明' }}</view>
								<view class="dish-bottom">
									<text class="dish-price">￥{{ formatMoney(item.salePrice) }}</text>
									<view v-if="orderedRow(item)" class="card-stepper">
										<button class="step-btn" @click="reduceDish(orderedRow(item))">-</button>
										<text class="step-qty">{{ orderedRow(item).quantity }}</text>
										<button class="step-btn plus" @click="increaseOrderedDish(orderedRow(item))">+</button>
									</view>
									<button v-else class="plain-btn" @click="addDish(item)">点菜</button>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="ordered-panel" :class="{ full: hasCurrentOrder }">
				<view class="ordered-title">
					<text>已点菜</text>
					<view v-if="hasCurrentOrder" class="ordered-title-actions">
						<button class="text-btn" @click="openOrderInfoDialog">订单详情</button>
						<button class="text-btn danger" @click="confirmCancelOrder">取消订单</button>
					</view>
				</view>
				<scroll-view scroll-y class="ordered-list">
					<view v-if="orderLoading" class="ordered-empty">加载中...</view>
					<view v-else-if="orderedList.length === 0" class="ordered-empty">
						<view class="ordered-empty-title">暂未点菜</view>
						<view class="ordered-empty-sub">从左侧选择菜品后会显示在这里</view>
					</view>
					<view v-else>
						<view class="ordered-head">
							<text>菜品</text>
							<text>单价</text>
							<text>总价</text>
							<text>数量</text>
						</view>
						<view v-for="item in orderedList" :key="item.dishId" class="ordered-item"
							:class="{ pending: item.pendingQuantity !== 0 }">
							<view class="ordered-dish">
								<view class="ordered-dish-name">{{ item.dishName }}</view>
							</view>
							<view class="ordered-price">￥{{ formatMoney(item.salePrice) }}</view>
							<view class="ordered-total">￥{{ formatMoney(itemTotal(item)) }}</view>
							<view class="ordered-qty">
								<button v-if="!hasCurrentOrder" class="qty-btn" @click="reduceDish(item)">-</button>
								<text>{{ item.quantity }}</text>
								<button v-if="!hasCurrentOrder" class="qty-btn plus" @click="increaseOrderedDish(item)">+</button>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="ordered-footer">
					<view class="ordered-summary">
						<text>共 {{ orderedList.length }} 项，总价</text>
						<strong>￥{{ formatMoney(orderTotal) }}</strong>
					</view>
					<view class="ordered-actions" :class="{ one: hasCurrentOrder && !hasChangedDish }">
						<button v-if="hasCurrentOrder && !hasChangedDish" class="footer-btn success" :disabled="submitting"
							@click="openSettleDialog">结账</button>
						<button v-if="!hasCurrentOrder || hasChangedDish" class="footer-btn primary" :disabled="submitting"
							@click="confirmSubmitOrder">下单</button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="!hasCurrentOrder" class="cart-bar">
			<view class="cart-bar-left" @click="cartSheetVisible = true">
				<view class="cart-badge">{{ orderQuantity }}</view>
				<view class="cart-bar-text">
					<text class="cart-bar-count">共 {{ orderedList.length }} 项</text>
					<text class="cart-bar-total">￥{{ formatMoney(orderTotal) }}</text>
				</view>
			</view>
			<view class="cart-bar-actions">
				<button class="bar-btn ghost" @click="cartSheetVisible = true">查看购物车</button>
				<button class="bar-btn primary" :disabled="submitting" @click="confirmSubmitOrder">下单</button>
			</view>
		</view>

		<view v-if="cartSheetVisible" class="modal-mask sheet-mask" @click="cartSheetVisible = false">
			<view class="cart-sheet" @click.stop>
				<view class="sheet-head">
					<text>已点菜（{{ orderedList.length }} 项）</text>
					<text class="sheet-close" @click="cartSheetVisible = false">收起</text>
				</view>
				<scroll-view scroll-y class="sheet-list">
					<view v-if="orderedList.length === 0" class="ordered-empty">
						<view class="ordered-empty-title">暂未点菜</view>
						<view class="ordered-empty-sub">从上方选择菜品后会显示在这里</view>
					</view>
					<view v-for="item in orderedList" :key="item.dishId" class="sheet-item"
						:class="{ pending: item.pendingQuantity !== 0 }">
						<view class="sheet-item-main">
							<view class="ordered-dish-name">{{ item.dishName }}</view>
							<view class="sheet-item-price">￥{{ formatMoney(item.salePrice) }} / 份</view>
						</view>
						<view class="ordered-qty">
							<button class="qty-btn" @click="reduceDish(item)">-</button>
							<text>{{ item.quantity }}</text>
							<button class="qty-btn plus" @click="increaseOrderedDish(item)">+</button>
						</view>
					</view>
				</scroll-view>
				<view class="sheet-foot">
					<text>总价 <strong>￥{{ formatMoney(orderTotal) }}</strong></text>
					<button class="bar-btn primary" :disabled="submitting" @click="confirmSubmitOrder">下单</button>
				</view>
			</view>
		</view>

		<view v-if="dishDetailVisible" class="modal-mask" @click="dishDetailVisible = false">
			<view class="modal-card dish-detail-card" @click.stop>
				<view class="detail-head">
					<text class="detail-title">菜品详情</text>
					<text class="detail-close" @click="dishDetailVisible = false">✕</text>
				</view>
				<scroll-view scroll-y class="dish-detail-body">
					<view class="detail-name-row">
						<text class="detail-name">{{ currentDish.dishName || '-' }}</text>
						<view v-if="currentDish.typeName" class="detail-type-chip">{{ currentDish.typeName }}</view>
					</view>
					<view class="detail-grid">
						<view class="detail-cell">
							<text class="detail-label">单位</text>
							<text class="detail-value">{{ currentDish.unit || '-' }}</text>
						</view>
						<view class="detail-cell">
							<text class="detail-label">规格</text>
							<text class="detail-value">{{ currentDish.spec || '-' }}</text>
						</view>
						<view class="detail-cell wide">
							<text class="detail-label">口味</text>
							<text class="detail-value">{{ currentDish.taste || '-' }}</text>
						</view>
						<view class="detail-cell wide">
							<text class="detail-label">备注</text>
							<text class="detail-value">{{ currentDish.remarks || '-' }}</text>
						</view>
						<view class="detail-cell wide">
							<text class="detail-label">菜品图片</text>
							<view v-if="!currentDish.previewImageList || currentDish.previewImageList.length === 0"
								class="detail-value">暂无图片</view>
							<view v-else class="detail-image-list">
								<image v-for="(url, index) in currentDish.previewImageList" :key="index"
									class="detail-image" :src="url" mode="aspectFill"
									@click="previewDetailImage(url)"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view v-if="settleDialogVisible" class="modal-mask" @click="settleDialogVisible = false">
			<view class="modal-card settle-card" @click.stop>
				<view class="detail-head">
					<text class="detail-title">订单结账</text>
					<text class="detail-close" @click="settleDialogVisible = false">✕</text>
				</view>
				<view class="settle-body">
					<view class="settle-tabs">
						<view class="settle-tab" :class="{ active: settleForm.settleType === '0' }"
							@click="settleForm.settleType = '0'">结账</view>
						<view class="settle-tab" :class="{ active: settleForm.settleType === '1' }"
							@click="settleForm.settleType = '1'">折扣结账</view>
						<view class="settle-tab" :class="{ active: settleForm.settleType === '2' }"
							@click="settleForm.settleType = '2'">优惠结账</view>
					</view>
					<view v-if="settleForm.settleType === '0'" class="settle-normal">
						<text>订单金额</text>
						<strong>￥{{ formatMoney(orderTotal) }}</strong>
					</view>
					<view v-else class="settle-preview">
						<view>
							<text>账单原金额</text>
							<strong>￥{{ formatMoney(orderTotal) }}</strong>
						</view>
						<view v-if="settleForm.settleType === '1'">
							<text>折扣比例</text>
							<strong>{{ formatMoney(settleForm.discountRate) }}%</strong>
						</view>
						<view v-else>
							<text>优惠金额</text>
							<strong>￥{{ formatMoney(settleDiscountAmount) }}</strong>
						</view>
						<view>
							<text>应收金额</text>
							<strong class="danger-text">￥{{ formatMoney(settlePayableAmount) }}</strong>
						</view>
					</view>
					<view v-if="settleForm.settleType === '1'" class="form-row">
						<text>折扣比例</text>
						<input type="number" v-model="settleForm.discountRate" placeholder="请输入折扣比例" />
					</view>
					<view v-if="settleForm.settleType === '2'" class="form-row">
						<text>优惠金额</text>
						<input type="number" v-model="settleForm.discountAmount" placeholder="请输入优惠金额" />
					</view>
					<view class="confirm-actions">
						<button class="confirm-btn" @click="settleDialogVisible = false">取消</button>
						<button class="confirm-btn primary" :disabled="submitting" @click="handleSettleConfirm">确认结账</button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="confirmOrderDialogVisible" class="modal-mask" @click="continueOrderDish">
			<view class="modal-card confirm-card" @click.stop>
				<view class="detail-head">
					<text class="detail-title">确认订单</text>
					<text class="detail-close" @click="continueOrderDish">✕</text>
				</view>
				<view class="confirm-body">
					<view class="confirm-summary">
						<view><text>包间名</text><strong>{{ currentRoom.roomName || '-' }}</strong></view>
						<view><text>下单时间</text><strong>{{ confirmOrderTime || '-' }}</strong></view>
						<view class="wide"><text>菜品合计</text><strong>共 {{ orderedList.length }} 项 {{ orderQuantity }} 份 / ￥{{ formatMoney(orderTotal) }}</strong></view>
					</view>
					<view class="textarea-row">
						<text>备注</text>
						<textarea v-model="confirmOrderForm.tasteRemark" maxlength="500" placeholder="请输入备注"></textarea>
					</view>
					<view class="special-requirement-row">
						<text>特殊要求</text>
						<view class="req-chips">
							<view v-for="(item, index) in $dictUtils.getDictList('special_requirement')" :key="index"
								class="req-chip" :class="{ active: selectedSpecialRequirementValues.includes(String(item.value)) }"
								@click="toggleSpecialRequirement(String(item.value))">{{ item.label || item.value }}</view>
						</view>
					</view>
					<view class="confirm-actions">
						<button class="confirm-btn" @click="continueOrderDish">继续点菜</button>
						<button class="confirm-btn primary" :disabled="submitting" @click="handleConfirmOrderSubmit">确认下单</button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="returnDishDialogVisible" class="modal-mask" @click="returnDishDialogVisible = false">
			<view class="modal-card return-card" @click.stop>
				<view class="detail-head">
					<text class="detail-title">退菜</text>
					<text class="detail-close" @click="returnDishDialogVisible = false">✕</text>
				</view>
				<view class="return-body">
					<view class="confirm-summary">
						<view><text>包房名</text><strong>{{ currentRoom.roomName || '-' }}</strong></view>
						<view><text>下单时间</text><strong>{{ currentOrder && currentOrder.createTime ? currentOrder.createTime : '-' }}</strong></view>
					</view>
					<scroll-view scroll-y class="return-list">
						<view class="return-head">
							<text>序号</text><text>菜品名</text><text>剩余数量</text><text>退菜数</text>
						</view>
						<view v-for="(item, index) in returnDishList" :key="item.dishId" class="return-row"
							:class="{ active: item.returnQuantity > 0 }">
							<text>{{ index + 1 }}</text>
							<text class="return-name">{{ item.dishName }}</text>
							<view class="ordered-qty">
								<button class="qty-btn" :disabled="item.returnQuantity >= item.quantity"
									@click="reduceReturnDish(item)">-</button>
								<text>{{ item.quantity - item.returnQuantity }}</text>
								<button class="qty-btn plus" :disabled="item.returnQuantity <= 0"
									@click="increaseReturnDish(item)">+</button>
							</view>
							<text class="return-count" :class="{ on: item.returnQuantity > 0 }">{{ item.returnQuantity }}</text>
						</view>
					</scroll-view>
					<view class="textarea-row">
						<text>退菜原因</text>
						<textarea v-model="returnDishForm.reason" maxlength="500" placeholder="请输入退菜原因"></textarea>
					</view>
					<view class="confirm-actions">
						<button class="confirm-btn" @click="returnDishDialogVisible = false">取消</button>
						<button class="confirm-btn primary" :disabled="submitting" @click="handleReturnDishConfirm">确认退菜</button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="orderInfoDialogVisible" class="modal-mask">
			<view class="modal-card info-card">
				<view class="modal-title">订单详情</view>
				<view class="info-summary">
					<view><text>订单编号</text><strong>{{ currentOrder.orderNo || '-' }}</strong></view>
					<view><text>结账方式</text><strong>{{ settleTypeName(currentOrder.settleType) }}</strong></view>
					<view><text>账单原金额</text><strong>￥{{ formatMoney(currentOrder.totalAmount) }}</strong></view>
					<view><text>实收金额</text><strong>￥{{ formatMoney(currentOrder.payableAmount) }}</strong></view>
					<view class="wide"><text>备注</text><strong>{{ currentOrder.tasteRemark || '-' }}</strong></view>
				</view>
				<view class="settle-tabs">
					<view class="settle-tab" :class="{ active: infoTab === 'actual' }" @click="infoTab = 'actual'">实际菜单</view>
					<view class="settle-tab" :class="{ active: infoTab === 'add' }" @click="infoTab = 'add'">加菜</view>
					<view class="settle-tab" :class="{ active: infoTab === 'reduce' }" @click="infoTab = 'reduce'">退菜</view>
				</view>
				<scroll-view scroll-y class="info-list">
					<view v-if="infoDetailList.length === 0" class="empty-box">暂无菜品</view>
					<view v-for="(item, index) in infoDetailList" :key="item.id || index" class="info-row">
						<view>
							<view class="info-dish-name">{{ item.dishName || '-' }}</view>
							<view class="info-dish-sub">单价 ￥{{ formatMoney(item.salePrice) }} / 数量 {{ displayQuantity(item) }}</view>
							<view v-if="infoTab === 'reduce' && item.reason" class="info-dish-sub">退菜原因：{{ item.reason }}</view>
						</view>
						<strong>￥{{ formatMoney(displayAmount(item)) }}</strong>
					</view>
				</scroll-view>
				<view class="info-total">共 {{ infoDetailList.length }} 项 / {{ infoQuantity }} 份，总价 ￥{{ formatMoney(infoAmount) }}</view>
				<view class="modal-actions">
					<button class="modal-btn primary" @click="orderInfoDialogVisible = false">关闭</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import DishOrderService from '@/api/psi/DishOrderService'
import OSSSerivce from '@/api/sys/OSSService'

export default {
	data() {
		return {
			roomId: '',
			currentRoom: {},
			currentOrder: null,
			categoryList: [],
			activeTypeId: 'all',
			dishSearchName: '',
			dishList: [],
			orderedList: [],
			dishLoading: false,
			orderLoading: false,
			submitting: false,
			settleDialogVisible: false,
			confirmOrderDialogVisible: false,
			returnDishDialogVisible: false,
			orderInfoDialogVisible: false,
			cartSheetVisible: false,
			dishDetailVisible: false,
			currentDish: {},
			infoTab: 'actual',
			pendingOrderSubmit: null,
			confirmOrderTime: '',
			confirmOrderForm: {
				tasteRemark: ''
			},
			selectedSpecialRequirementValues: [],
			lastSpecialRequirementValues: [],
			settleForm: {
				settleType: '0',
				discountRate: 100,
				discountAmount: 0
			},
			returnDishForm: {
				reason: ''
			},
			returnDishList: [],
			dishOrderService: null,
			ossService: null
		}
	},
	computed: {
		orderTotal() {
			return this.orderedList.reduce((total, item) => total + this.itemTotal(item), 0)
		},
		orderQuantity() {
			return this.orderedList.reduce((total, item) => total + Number(item.quantity || 0), 0)
		},
		changedDetailList() {
			return this.orderedList.filter(item => item.pendingQuantity !== 0)
		},
		hasChangedDish() {
			return this.changedDetailList.length > 0
		},
		hasCurrentOrder() {
			return !!(this.currentOrder && this.currentOrder.id)
		},
		submitDetailList() {
			return this.orderedList.map((item, index) => ({
				dishId: item.dishId,
				dishName: item.dishName,
				quantity: item.pendingQuantity,
				dishSort: index + 1
			}))
		},
		settleDiscountAmount() {
			if (this.settleForm.settleType === '1') {
				return this.orderTotal - this.settlePayableAmount
			}
			if (this.settleForm.settleType === '2') {
				return Math.min(Number(this.settleForm.discountAmount || 0), this.orderTotal)
			}
			return 0
		},
		settlePayableAmount() {
			if (this.settleForm.settleType === '1') {
				const rate = Math.min(Math.max(Number(this.settleForm.discountRate || 0), 0), 100)
				return this.orderTotal * rate / 100
			}
			if (this.settleForm.settleType === '2') {
				return Math.max(this.orderTotal - Number(this.settleForm.discountAmount || 0), 0)
			}
			return this.orderTotal
		},
		infoDetailList() {
			const order = this.currentOrder || {}
			if (this.infoTab === 'add') {
				return Array.isArray(order.addDishList) ? order.addDishList : []
			}
			if (this.infoTab === 'reduce') {
				return Array.isArray(order.reduceDishList) ? order.reduceDishList : []
			}
			return Array.isArray(order.detailList) ? order.detailList : []
		},
		infoQuantity() {
			return this.infoDetailList.reduce((total, item) => total + this.displayQuantity(item), 0)
		},
		infoAmount() {
			return this.infoDetailList.reduce((total, item) => total + this.displayAmount(item), 0)
		}
	},
	onLoad(option) {
		this.roomId = option && option.roomId ? option.roomId : ''
		uni.setNavigationBarTitle({ title: '点菜' })
		this.dishOrderService = new DishOrderService()
		this.ossService = new OSSSerivce()
		this.initPage()
	},
	onShow() {
		if (this.roomId && this.dishOrderService) {
			this.loadRoom(this.roomId)
			this.loadCurrentOrder(this.roomId)
		}
	},
	methods: {
		initPage() {
			if (!this.roomId) {
				this.backRoomList()
				return
			}
			this.loadRoom(this.roomId)
			this.loadCurrentOrder(this.roomId)
			this.activeTypeId = 'all'
			this.dishSearchName = ''
			this.loadCategoryList()
			this.loadDishList()
		},
		loadRoom(roomId) {
			this.dishOrderService.findRoomById(roomId).then((data) => {
				this.currentRoom = data || {}
			})
		},
		loadCurrentOrder(roomId) {
			this.orderLoading = true
			this.dishOrderService.currentOrder(roomId).then((data) => {
				this.currentOrder = data || null
				const detailList = data && data.detailList ? data.detailList : []
				const orderedDetailList = [...detailList].sort((a, b) => Number(a.dishSort || 999999) - Number(b.dishSort || 999999))
				this.orderedList = orderedDetailList.map(item => this.toOrderedItem(item, item.quantity || 0, 0))
			}).finally(() => {
				this.orderLoading = false
			})
		},
		loadCategoryList() {
			this.dishOrderService.typeList().then((data) => {
				this.categoryList = [
					{ id: 'all', name: '所有菜品' },
					...(Array.isArray(data) ? data.map(item => ({ id: item.id, name: item.name })) : [])
				]
			})
		},
		changeType(item) {
			this.activeTypeId = item.id
			this.dishSearchName = ''
			this.loadDishList()
		},
		searchDish() {
			this.activeTypeId = 'all'
			this.loadDishList()
		},
		loadDishList() {
			this.dishLoading = true
			this.dishOrderService.dishList({
				typeId: this.activeTypeId === 'all' ? '' : this.activeTypeId,
				dishName: this.dishSearchName
			}).then((data) => {
				this.dishList = Array.isArray(data) ? data : []
				this.loadDishImagePreview()
			}).finally(() => {
				this.dishLoading = false
			})
		},
		addDish(dish) {
			const row = this.orderedList.find(item => item.dishId === dish.id)
			if (row) {
				row.quantity += 1
				row.pendingQuantity += 1
				return
			}
			this.orderedList.push(this.toOrderedItem(dish, 1, 1))
		},
		increaseOrderedDish(item) {
			item.quantity += 1
			item.pendingQuantity += 1
		},
		reduceDish(item) {
			if (item.quantity <= 0) {
				return
			}
			item.quantity -= 1
			item.pendingQuantity -= 1
			if (item.quantity === 0 && item.baseQuantity === 0) {
				this.orderedList = this.orderedList.filter(row => row.dishId !== item.dishId)
			}
		},
		orderedRow(dish) {
			return this.orderedList.find(item => item.dishId === dish.id) || null
		},
		openSettleDialog() {
			if (!this.hasCurrentOrder && this.changedDetailList.length === 0) {
				uni.showToast({ title: '请先选择菜品', icon: 'none' })
				return
			}
			this.settleForm = {
				settleType: '0',
				discountRate: 100,
				discountAmount: 0
			}
			this.settleDialogVisible = true
		},
		handleSettleConfirm() {
			const settleInfo = {
				settleType: this.settleForm.settleType,
				discountRate: this.settleForm.settleType === '1' ? this.settleForm.discountRate : 100,
				discountAmount: this.settleForm.settleType === '2' ? this.settleForm.discountAmount : this.settleDiscountAmount
			}
			if (!this.hasCurrentOrder) {
				this.settleDialogVisible = false
				this.openConfirmOrderDialog('1', settleInfo, false)
				return
			}
			this.submitOrder('1', settleInfo, false)
		},
		confirmSubmitOrder() {
			if (this.changedDetailList.length === 0) {
				uni.showToast({ title: '请先选择菜品', icon: 'none' })
				return
			}
			if (!this.hasCurrentOrder) {
				this.openConfirmOrderDialog('0', {}, true)
				return
			}
			uni.showModal({
				title: '提示',
				content: '是否确认下单？',
				success: (res) => {
					if (res.confirm) {
						this.submitOrder('0', {}, true)
					}
				}
			})
		},
		openConfirmOrderDialog(settleFlag, settleInfo = {}, requireChanged = false) {
			this.confirmOrderTime = this.formatDateTime(new Date())
			this.confirmOrderForm = {
				tasteRemark: ''
			}
			this.selectedSpecialRequirementValues = []
			this.lastSpecialRequirementValues = []
			this.pendingOrderSubmit = { settleFlag, settleInfo, requireChanged }
			this.confirmOrderDialogVisible = true
		},
		continueOrderDish() {
			this.confirmOrderDialogVisible = false
		},
		handleConfirmOrderSubmit() {
			const pending = this.pendingOrderSubmit || {}
			this.submitOrder(pending.settleFlag || '0', pending.settleInfo || {}, pending.requireChanged, {
				tasteRemark: this.confirmOrderForm.tasteRemark,
				specialRequirements: ''
			})
		},
		toggleSpecialRequirement(value) {
			const current = [...this.selectedSpecialRequirementValues]
			const index = current.indexOf(value)
			if (index > -1) {
				current.splice(index, 1)
			} else {
				current.push(value)
			}
			this.selectedSpecialRequirementValues = current
			this.handleSpecialRequirementChange(current)
		},
		handleSpecialRequirementChange(value) {
			const current = Array.isArray(value) ? value.map(item => String(item)) : []
			const previous = this.lastSpecialRequirementValues || []
			current.filter(item => !previous.includes(item)).forEach(item => this.appendRemarkText(this.getSpecialRequirementLabel(item)))
			previous.filter(item => !current.includes(item)).forEach(item => this.removeRemarkText(this.getSpecialRequirementLabel(item)))
			this.lastSpecialRequirementValues = [...current]
		},
		getSpecialRequirementLabel(value) {
			const list = this.$dictUtils.getDictList('special_requirement') || []
			const row = list.find(item => String(item.value) === String(value))
			return row ? (row.label || row.value) : value
		},
		appendRemarkText(text) {
			if (!text) {
				return
			}
			const items = this.getRemarkItems()
			if (!items.includes(text)) {
				items.push(text)
			}
			this.confirmOrderForm.tasteRemark = items.join(',')
		},
		removeRemarkText(text) {
			if (!text) {
				return
			}
			let value = this.confirmOrderForm.tasteRemark || ''
			if (value.indexOf(`,${text}`) > -1) {
				value = value.split(`,${text}`).join('')
			} else if (value.indexOf(`${text},`) > -1) {
				value = value.split(`${text},`).join('')
			} else {
				value = value.split(text).join('')
			}
			this.confirmOrderForm.tasteRemark = this.cleanupRemarkText(value)
		},
		cleanupRemarkText(value) {
			return (value || '').split(',').map(item => item.trim()).filter(item => item).join(',')
		},
		getRemarkItems() {
			return (this.confirmOrderForm.tasteRemark || '').split(',').map(item => item.trim()).filter(item => item)
		},
		openReturnDishDialog() {
			if (!this.hasCurrentOrder) {
				return
			}
			this.returnDishForm = { reason: '' }
			this.returnDishList = this.orderedList.map(item => ({
				dishId: item.dishId,
				dishName: item.dishName,
				quantity: item.quantity,
				dishSort: item.dishSort,
				returnQuantity: 0
			}))
			this.returnDishDialogVisible = true
		},
		reduceReturnDish(item) {
			if (item.returnQuantity >= item.quantity) {
				return
			}
			item.returnQuantity += 1
		},
		increaseReturnDish(item) {
			if (item.returnQuantity <= 0) {
				return
			}
			item.returnQuantity -= 1
		},
		handleReturnDishConfirm() {
			const detailList = this.returnDishList
				.filter(item => Number(item.returnQuantity || 0) > 0)
				.map(item => ({
					dishId: item.dishId,
					dishName: item.dishName,
					quantity: -Number(item.returnQuantity || 0),
					dishSort: item.dishSort,
					reason: this.returnDishForm.reason
				}))
			if (detailList.length === 0) {
				uni.showToast({ title: '请填写退菜数量', icon: 'none' })
				return
			}
			this.submitting = true
			this.dishOrderService.submit({
				id: this.currentOrder.id,
				roomId: this.roomId,
				settleFlag: '0',
				detailList
			}).then((data) => {
				uni.showToast({ title: data || '退菜成功', icon: 'none' })
				this.returnDishDialogVisible = false
				this.loadRoom(this.roomId)
				this.loadCurrentOrder(this.roomId)
			}).finally(() => {
				this.submitting = false
			})
		},
		confirmCancelOrder() {
			if (!this.hasCurrentOrder) {
				uni.showToast({ title: '暂无可取消的订单', icon: 'none' })
				return
			}
			uni.showModal({
				title: '提示',
				content: '确定取消当前订单吗？取消后包房将释放。',
				success: (res) => {
					if (!res.confirm) {
						return
					}
					this.submitting = true
					this.dishOrderService.cancelOrder(this.currentOrder.id).then((data) => {
						uni.showToast({ title: data || '取消成功', icon: 'none' })
						this.backRoomList()
					}).finally(() => {
						this.submitting = false
					})
				}
			})
		},
		submitOrder(settleFlag, settleInfo = {}, requireChanged = false, orderInfo = {}) {
			const changedList = this.changedDetailList
			const detailList = settleFlag === '1' && changedList.length === 0 ? [] : this.submitDetailList
			if (requireChanged && changedList.length === 0) {
				uni.showToast({ title: '请先选择菜品', icon: 'none' })
				return
			}
			if (settleFlag === '1' && !this.hasCurrentOrder && changedList.length === 0) {
				uni.showToast({ title: '请先选择菜品', icon: 'none' })
				return
			}
			if (settleFlag !== '1' && detailList.length === 0) {
				uni.showToast({ title: '请先选择菜品', icon: 'none' })
				return
			}
			this.submitting = true
			this.dishOrderService.submit({
				id: this.hasCurrentOrder ? this.currentOrder.id : '',
				roomId: this.roomId,
				settleFlag,
				...settleInfo,
				...orderInfo,
				detailList
			}).then((data) => {
				uni.showToast({ title: data || '操作成功', icon: 'none' })
				this.settleDialogVisible = false
				this.confirmOrderDialogVisible = false
				this.loadRoom(this.roomId)
				this.loadCurrentOrder(this.roomId)
			}).finally(() => {
				this.submitting = false
			})
		},
		goAddDish() {
			if (!this.hasCurrentOrder) {
				return
			}
			uni.navigateTo({
				url: `/pages/psiManagement/dishManage/DishOrderAdd?roomId=${this.roomId}&orderId=${this.currentOrder.id}`
			})
		},
		openOrderInfoDialog() {
			this.infoTab = 'actual'
			this.orderInfoDialogVisible = true
		},
		backRoomList() {
			uni.navigateBack({
				fail: () => {
					uni.redirectTo({ url: '/pages/psiManagement/dishManage/DishOrder' })
				}
			})
		},
		toOrderedItem(item, quantity, pendingQuantity) {
			const salePrice = Number(item.salePrice || 0)
			return {
				dishId: item.dishId || item.id,
				dishName: item.dishName,
				salePrice,
				quantity,
				baseQuantity: quantity - pendingQuantity,
				pendingQuantity,
				dishSort: item.dishSort || 0
			}
		},
		itemTotal(item) {
			return Number(item.salePrice || 0) * Number(item.quantity || 0)
		},
		loadDishImagePreview() {
			this.dishList.forEach((row) => {
				const urls = this.getImageUrls(row.imageUrl)
				if (urls.length === 0) {
					this.$set ? this.$set(row, 'previewImageUrl', '') : row.previewImageUrl = ''
					this.$set ? this.$set(row, 'previewImageList', []) : row.previewImageList = []
					return
				}
				this.$set ? this.$set(row, 'previewImageUrl', urls[0]) : row.previewImageUrl = urls[0]
				this.$set ? this.$set(row, 'previewImageList', urls) : row.previewImageList = urls
				Promise.all(urls.map(url => this.getPreviewUrl(url))).then((list) => {
					row.previewImageUrl = list[0]
					row.previewImageList = list
				})
			})
		},
		getImageUrls(value) {
			if (!value) {
				return []
			}
			return value.split(',').map(item => item.trim()).filter(item => item)
		},
		getPreviewUrl(url) {
			if (!url) {
				return Promise.resolve('')
			}
			if (url.indexOf('http') === 0) {
				return Promise.resolve(url)
			}
			return this.ossService.getTemporaryUrl(url).catch(() => url)
		},
		previewDishImage(item) {
			if (!item.previewImageList || item.previewImageList.length === 0) {
				return
			}
			uni.previewImage({
				urls: item.previewImageList,
				current: item.previewImageUrl
			})
		},
		openDishDetail(item) {
			this.currentDish = item || {}
			this.dishDetailVisible = true
		},
		previewDetailImage(url) {
			const urls = this.currentDish.previewImageList || []
			if (urls.length === 0) {
				return
			}
			uni.previewImage({
				urls,
				current: url
			})
		},
		formatMoney(value) {
			return Number(value || 0).toFixed(2)
		},
		formatDateTime(value) {
			const date = value ? new Date(value) : new Date()
			const pad = (num) => String(num).padStart(2, '0')
			return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
		},
		settleTypeName(value) {
			if (value === '1') return '折扣结账'
			if (value === '2') return '优惠结账'
			if (value === '0') return '结账'
			return '-'
		},
		displayQuantity(item) {
			return Math.abs(Number(item.quantity || 0))
		},
		displayAmount(item) {
			return Math.abs(Number(item.amount || 0))
		}
	}
}
</script>

<style scoped>
.dish-order-detail {
	height: calc(100vh - var(--window-top, 0px));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 20rpx;
	background: #f5f6fa;
}

.order-header {
	flex: none;
	box-sizing: border-box;
	margin-bottom: 18rpx;
	padding: 20rpx 24rpx;
	border-radius: 12rpx;
	background: #fff;
	box-shadow: 0 2rpx 10rpx rgba(31, 45, 61, 0.06);
}

.header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12rpx;
}

.room-info {
	display: flex;
	align-items: center;
	min-width: 0;
}

.room-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 34rpx;
	font-weight: 700;
	color: #303133;
	line-height: 44rpx;
}

.room-no-chip {
	flex: none;
	margin-left: 12rpx;
	padding: 2rpx 16rpx;
	border-radius: 999rpx;
	background: #ecf5ff;
	font-size: 24rpx;
	color: #2979ff;
}

.header-actions {
	flex: none;
	display: flex;
	gap: 12rpx;
}

.mini-btn,
.plain-btn,
.text-btn,
.footer-btn,
.modal-btn {
	margin: 0;
	padding: 0;
	border-radius: 8rpx;
	font-size: 26rpx;
	line-height: 64rpx;
}

.mini-btn {
	width: 150rpx;
	height: 64rpx;
	color: #fff;
}

.mini-btn.ghost {
	color: #2979ff;
	background: #ecf5ff;
}

.primary,
.footer-btn.primary,
.modal-btn.primary {
	color: #fff;
	background: #2979ff;
}

.success,
.footer-btn.success {
	color: #fff;
	background: #19be6b;
}

.warning {
	color: #fff;
	background: #f9ae3d;
}

.order-main {
	flex: 1;
	min-height: 0;
	display: flex;
	gap: 18rpx;
}

.dish-panel,
.ordered-panel {
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border: 1rpx solid #ebeef5;
	border-radius: 10rpx;
	background: #fff;
	overflow: hidden;
}

.dish-panel {
	flex: 1;
}

/* 窄屏不展示已点菜面板，改用底部购物车条 + 半屏弹窗 */
.ordered-panel:not(.full) {
	display: none;
}

.ordered-panel.full {
	flex: 1;
}

.dish-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 120rpx;
	gap: 12rpx;
	margin-top: 16rpx;
}

.search-input,
.form-row input,
.return-row input {
	height: 64rpx;
	box-sizing: border-box;
	padding: 0 18rpx;
	border: 1rpx solid #dcdfe6;
	border-radius: 8rpx;
	font-size: 26rpx;
	color: #303133;
}

.search-btn {
	height: 64rpx;
	margin: 0;
	padding: 0;
	border-radius: 8rpx;
	font-size: 26rpx;
	line-height: 64rpx;
	color: #fff;
	background: #2979ff;
}

.category-bar {
	flex: none;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 14rpx 16rpx;
	border-bottom: 1rpx solid #ebeef5;
}

.category-pill {
	display: inline-block;
	margin-right: 12rpx;
	padding: 10rpx 28rpx;
	border-radius: 999rpx;
	background: #f2f4f7;
	font-size: 26rpx;
	color: #606266;
}

.category-pill.active {
	color: #fff;
	background: #2979ff;
	font-weight: 700;
}

.dish-list {
	flex: 1;
	min-height: 0;
	box-sizing: border-box;
	padding: 16rpx;
}

.dish-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240rpx, 1fr));
	gap: 16rpx;
}

.dish-card {
	min-width: 0;
	border: 1rpx solid #ebeef5;
	border-radius: 10rpx;
	overflow: hidden;
	background: #fff;
}

.dish-image {
	width: 100%;
	height: 200rpx;
	background: #f2f3f5;
}

.dish-image-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #909399;
}

.dish-info {
	padding: 12rpx;
}

.dish-name,
.ordered-dish-name,
.info-dish-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dish-name {
	font-size: 28rpx;
	font-weight: 700;
	color: #303133;
	line-height: 38rpx;
}

.dish-desc {
	height: 42rpx;
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #606266;
	line-height: 32rpx;
	overflow: hidden;
}

.dish-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10rpx;
	margin-top: 12rpx;
}

.dish-price,
.ordered-total,
.danger-text {
	color: #fa3534;
}

.dish-price {
	font-size: 30rpx;
	font-weight: 700;
}

.plain-btn {
	width: 96rpx;
	height: 54rpx;
	line-height: 54rpx;
	color: #2979ff;
	background: #ecf5ff;
}

.card-stepper {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.step-btn {
	width: 48rpx;
	height: 48rpx;
	margin: 0;
	padding: 0;
	border-radius: 10rpx;
	font-size: 30rpx;
	line-height: 48rpx;
	text-align: center;
	color: #2979ff;
	background: #ecf5ff;
}

.step-btn.plus {
	color: #fff;
	background: #2979ff;
}

.step-qty {
	min-width: 40rpx;
	text-align: center;
	font-size: 28rpx;
	font-weight: 700;
	color: #303133;
}

.ordered-title {
	height: 76rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 18rpx;
	border-bottom: 1rpx solid #ebeef5;
	font-size: 30rpx;
	font-weight: 700;
	color: #303133;
}

.ordered-title-actions {
	display: flex;
	gap: 10rpx;
}

.text-btn {
	width: 140rpx;
	height: 52rpx;
	line-height: 52rpx;
	color: #2979ff;
	background: #ecf5ff;
}

.text-btn.danger {
	color: #fa3534;
	background: #fff1f0;
}

.ordered-list {
	flex: 1;
	min-height: 0;
	box-sizing: border-box;
	padding: 14rpx;
}

.ordered-head,
.ordered-item {
	display: grid;
	grid-template-columns: minmax(180rpx, 1fr) 110rpx 120rpx 150rpx;
	gap: 10rpx;
	align-items: center;
	text-align: center;
}

.ordered-head {
	height: 50rpx;
	padding: 0 10rpx;
	border-radius: 8rpx;
	background: #f7f9fb;
	font-size: 24rpx;
	color: #909399;
}

.ordered-item {
	min-height: 86rpx;
	box-sizing: border-box;
	padding: 12rpx 10rpx;
	border-bottom: 1rpx solid #ebeef5;
	font-size: 24rpx;
	color: #606266;
}

.ordered-item.pending {
	background: rgba(45, 140, 240, 0.12);
}

.ordered-dish-name {
	font-size: 26rpx;
	font-weight: 700;
	color: #303133;
}

.ordered-total {
	font-weight: 700;
}

.ordered-qty {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
}

.ordered-qty text {
	min-width: 36rpx;
	text-align: center;
	font-size: 26rpx;
	font-weight: 700;
	color: #303133;
}

.qty-btn {
	width: 44rpx;
	height: 44rpx;
	margin: 0;
	padding: 0;
	border-radius: 10rpx;
	font-size: 28rpx;
	font-weight: 700;
	line-height: 44rpx;
	text-align: center;
	color: #2979ff;
	background: #ecf5ff;
}

.qty-btn.plus {
	color: #fff;
	background: #2979ff;
}

.ordered-footer {
	padding: 16rpx;
	border-top: 1rpx solid #ebeef5;
}

.ordered-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14rpx;
	font-size: 26rpx;
	color: #606266;
}

.ordered-summary strong {
	font-size: 36rpx;
	color: #fa3534;
}

.ordered-actions {
	display: flex;
	justify-content: flex-end;
}

.ordered-actions.one {
	justify-content: flex-end;
}

.footer-btn {
	width: 220rpx;
	height: 72rpx;
	line-height: 72rpx;
}

.ordered-empty,
.empty-box {
	min-height: 240rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #909399;
	font-size: 26rpx;
}

.ordered-empty-title {
	font-size: 30rpx;
	color: #606266;
}

.ordered-empty-sub {
	margin-top: 8rpx;
	font-size: 24rpx;
}

.modal-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 36rpx;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.45);
}

.modal-card {
	width: 680rpx;
	max-height: 90vh;
	box-sizing: border-box;
	padding: 26rpx;
	border-radius: 12rpx;
	background: #fff;
	overflow: auto;
}

.settle-card {
	width: 640rpx;
	padding: 0;
	overflow: hidden;
}

.settle-body {
	box-sizing: border-box;
	padding: 24rpx 26rpx;
}

.settle-normal text {
	font-size: 26rpx;
	color: #606266;
}

.info-card {
	width: 920rpx;
}

.modal-title {
	margin-bottom: 20rpx;
	font-size: 34rpx;
	font-weight: 700;
	color: #303133;
}

.settle-tabs {
	display: flex;
	gap: 10rpx;
	margin-bottom: 18rpx;
	padding: 8rpx;
	border-radius: 10rpx;
	background: #f7f8fa;
}

.settle-tab {
	flex: 1;
	height: 58rpx;
	border-radius: 8rpx;
	text-align: center;
	font-size: 26rpx;
	line-height: 58rpx;
	color: #606266;
}

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

.settle-normal,
.settle-preview,
.confirm-summary,
.info-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12rpx;
	margin-bottom: 18rpx;
	padding: 16rpx;
	border-radius: 8rpx;
	background: #f7f8fa;
}

.settle-normal {
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.settle-normal strong {
	text-align: right;
	font-size: 40rpx;
	color: #fa3534;
}

.settle-preview text,
.confirm-summary text,
.info-summary text {
	display: block;
	font-size: 24rpx;
	color: #909399;
	line-height: 32rpx;
}

.settle-preview strong,
.confirm-summary strong,
.info-summary strong {
	display: block;
	margin-top: 6rpx;
	font-size: 28rpx;
	color: #303133;
	line-height: 38rpx;
	word-break: break-all;
}

.info-summary {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-summary .wide {
	grid-column: span 4;
}

.form-row,
.textarea-row,
.special-requirement-row {
	margin-bottom: 16rpx;
}

.form-row text,
.textarea-row text,
.special-requirement-row text {
	display: block;
	margin-bottom: 8rpx;
	font-size: 26rpx;
	color: #606266;
}

.form-row input {
	width: 100%;
}

.textarea-row textarea {
	width: 100%;
	height: 130rpx;
	box-sizing: border-box;
	padding: 14rpx;
	border: 1rpx solid #dcdfe6;
	border-radius: 8rpx;
	font-size: 26rpx;
	color: #303133;
}

.confirm-card {
	width: 640rpx;
	padding: 0;
	overflow: hidden;
}

.confirm-body {
	box-sizing: border-box;
	padding: 24rpx 26rpx;
}

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

.req-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

.req-chip {
	padding: 10rpx 26rpx;
	border: 1rpx solid #dcdfe6;
	border-radius: 999rpx;
	font-size: 24rpx;
	color: #606266;
	background: #fff;
}

.req-chip.active {
	border-color: #2979ff;
	background: #ecf5ff;
	color: #2979ff;
	font-weight: 700;
}

.confirm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 14rpx;
	margin-top: 22rpx;
}

.confirm-btn {
	width: 190rpx;
	height: 64rpx;
	margin: 0;
	padding: 0;
	border-radius: 10rpx;
	font-size: 26rpx;
	line-height: 64rpx;
	color: #606266;
	background: #f7f8fa;
}

.confirm-btn.primary {
	color: #fff;
	background: #2979ff;
}

.modal-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14rpx;
	margin-top: 18rpx;
}

.modal-btn {
	height: 72rpx;
	line-height: 72rpx;
	color: #606266;
	background: #f7f8fa;
}

.return-list,
.info-list {
	max-height: 380rpx;
}

.return-card {
	width: 640rpx;
	padding: 0;
	overflow: hidden;
}

.return-body {
	box-sizing: border-box;
	padding: 24rpx 26rpx;
}

.return-head,
.return-row {
	display: grid;
	grid-template-columns: 60rpx minmax(0, 1fr) 200rpx 90rpx;
	gap: 10rpx;
	align-items: center;
	text-align: center;
}

.return-row.active {
	background: rgba(45, 140, 240, 0.08);
}

.return-count {
	font-weight: 700;
	color: #909399;
}

.return-count.on {
	color: #fa3534;
}

.qty-btn[disabled] {
	opacity: 0.4;
}

.return-head {
	height: 52rpx;
	padding: 0 12rpx;
	border-radius: 8rpx;
	background: #f7f9fb;
	font-size: 24rpx;
	color: #909399;
}

.return-row {
	min-height: 70rpx;
	padding: 10rpx 12rpx;
	border-bottom: 1rpx solid #ebeef5;
	font-size: 26rpx;
	color: #606266;
}

.return-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 700;
	color: #303133;
}

.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18rpx;
	min-height: 88rpx;
	padding: 12rpx 0;
	border-bottom: 1rpx solid #ebeef5;
}

.info-row strong {
	font-size: 28rpx;
	color: #fa3534;
}

.info-dish-name {
	font-size: 28rpx;
	font-weight: 700;
	color: #303133;
}

.info-dish-sub {
	margin-top: 6rpx;
	font-size: 24rpx;
	color: #909399;
}

.info-total {
	margin-top: 14rpx;
	text-align: right;
	font-size: 26rpx;
	color: #606266;
}

.cart-bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16rpx;
	margin-top: 16rpx;
	padding: 14rpx 22rpx;
	border: 1rpx solid #ebeef5;
	border-radius: 12rpx;
	background: #fff;
	box-shadow: 0 4rpx 16rpx rgba(31, 45, 61, 0.08);
}

.cart-bar-left {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.cart-badge {
	min-width: 40rpx;
	height: 40rpx;
	padding: 0 10rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999rpx;
	background: #fa3534;
	font-size: 24rpx;
	color: #fff;
}

.cart-bar-text {
	display: flex;
	flex-direction: column;
}

.cart-bar-count {
	font-size: 22rpx;
	color: #909399;
}

.cart-bar-total {
	font-size: 34rpx;
	font-weight: 700;
	color: #fa3534;
}

.cart-bar-actions {
	display: flex;
	gap: 12rpx;
}

.bar-btn {
	height: 68rpx;
	margin: 0;
	padding: 0 30rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	line-height: 68rpx;
}

.bar-btn.ghost {
	color: #2979ff;
	background: #ecf5ff;
}

.bar-btn.primary {
	color: #fff;
	background: #2979ff;
}

.sheet-mask {
	align-items: flex-end;
	padding: 0;
}

.cart-sheet {
	width: 100%;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	border-radius: 20rpx 20rpx 0 0;
	background: #fff;
}

.sheet-head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 26rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #ebeef5;
	font-size: 30rpx;
	font-weight: 700;
	color: #303133;
}

.sheet-close {
	font-size: 28rpx;
	font-weight: 400;
	color: #2979ff;
}

.sheet-list {
	flex: 1;
	min-height: 0;
	box-sizing: border-box;
	padding: 10rpx 26rpx;
}

.sheet-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16rpx;
	min-height: 96rpx;
	padding: 12rpx 10rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #ebeef5;
}

.sheet-item.pending {
	background: rgba(45, 140, 240, 0.12);
}

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

.sheet-item-price {
	margin-top: 6rpx;
	font-size: 24rpx;
	color: #909399;
}

.sheet-foot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18rpx 26rpx;
	border-top: 1rpx solid #ebeef5;
	font-size: 28rpx;
	color: #606266;
}

.sheet-foot strong {
	font-size: 36rpx;
	color: #fa3534;
}

.dish-detail-card {
	width: 640rpx;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.detail-head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16rpx;
	padding: 24rpx 26rpx;
	border-bottom: 1rpx solid #ebeef5;
}

.detail-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #303133;
}

.detail-close {
	padding: 6rpx 10rpx;
	font-size: 30rpx;
	color: #909399;
}

.dish-detail-body {
	flex: 1;
	min-height: 0;
	box-sizing: border-box;
	padding: 24rpx 26rpx;
}

.detail-name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16rpx;
	margin-bottom: 20rpx;
}

.detail-name {
	flex: 1;
	min-width: 0;
	font-size: 36rpx;
	font-weight: 700;
	color: #303133;
}

.detail-type-chip {
	flex: none;
	padding: 4rpx 18rpx;
	border-radius: 999rpx;
	background: #ecf5ff;
	font-size: 24rpx;
	color: #2979ff;
}

.detail-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16rpx;
}

.detail-cell {
	min-width: 0;
	padding: 14rpx 18rpx;
	border-radius: 10rpx;
	background: #f7f8fa;
}

.detail-cell.wide {
	grid-column: span 2;
}

.detail-label {
	display: block;
	font-size: 22rpx;
	color: #909399;
	line-height: 30rpx;
}

.detail-value {
	display: block;
	margin-top: 6rpx;
	font-size: 26rpx;
	color: #303133;
	line-height: 36rpx;
	word-break: break-all;
}

.detail-image-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
	margin-top: 10rpx;
}

.detail-image {
	width: 180rpx;
	height: 180rpx;
	border-radius: 10rpx;
	background: #eceef1;
}

@media (min-width: 768px) {
	.room-name {
		font-size: 22px;
		line-height: 30px;
	}

	.order-header {
		margin-bottom: 12px;
		padding: 14px 18px;
		border-radius: 10px;
	}

	.room-no-chip {
		margin-left: 10px;
		padding: 2px 12px;
		font-size: 14px;
	}

	.mini-btn {
		width: 96px;
		height: 40px;
		font-size: 15px;
		line-height: 40px;
	}

	.dish-search {
		grid-template-columns: minmax(0, 1fr) 88px;
		margin-top: 12px;
	}

	.search-input,
	.form-row input,
	.return-row input {
		height: 40px;
		font-size: 15px;
	}

	.search-btn {
		height: 40px;
		font-size: 15px;
		line-height: 40px;
	}

	.category-bar {
		padding: 10px 12px;
	}

	.category-pill {
		margin-right: 8px;
		padding: 7px 18px;
		font-size: 15px;
	}

	.dish-list {
		padding: 12px;
	}

	.dish-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 12px;
	}

	.dish-image {
		height: 140px;
	}

	.dish-info {
		padding: 10px;
	}

	.dish-name {
		font-size: 16px;
		line-height: 22px;
	}

	.dish-desc {
		height: 20px;
		margin-top: 4px;
		font-size: 13px;
		line-height: 20px;
	}

	.dish-price {
		font-size: 18px;
	}

	.plain-btn {
		width: 60px;
		height: 32px;
		font-size: 14px;
		line-height: 32px;
	}

	.card-stepper {
		gap: 8px;
	}

	.step-btn {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		font-size: 18px;
		line-height: 32px;
	}

	.step-qty {
		min-width: 26px;
		font-size: 16px;
	}

	.ordered-title {
		height: 48px;
		padding: 0 12px;
		font-size: 17px;
	}

	.text-btn {
		width: 84px;
		height: 32px;
		font-size: 13px;
		line-height: 32px;
	}

	.ordered-head {
		height: 34px;
		font-size: 13px;
	}

	.ordered-item {
		min-height: 52px;
		font-size: 14px;
	}

	.ordered-dish-name {
		font-size: 15px;
	}

	.qty-btn {
		width: 30px;
		height: 30px;
		border-radius: 8px;
		font-size: 17px;
		font-weight: 700;
		line-height: 30px;
	}

	.ordered-qty text {
		min-width: 24px;
		font-size: 15px;
	}

	.ordered-summary {
		font-size: 14px;
	}

	.ordered-summary strong {
		font-size: 22px;
	}

	.footer-btn {
		width: 140px;
		height: 44px;
		font-size: 16px;
		line-height: 44px;
	}

	.cart-bar {
		margin-top: 12px;
		padding: 10px 16px;
		border-radius: 10px;
	}

	.cart-badge {
		min-width: 24px;
		height: 24px;
		font-size: 13px;
	}

	.cart-bar-count {
		font-size: 12px;
	}

	.cart-bar-total {
		font-size: 20px;
	}

	.bar-btn {
		height: 40px;
		padding: 0 20px;
		font-size: 15px;
		line-height: 40px;
		border-radius: 8px;
	}

	.sheet-head {
		height: 50px;
		font-size: 16px;
	}

	.sheet-close {
		font-size: 14px;
	}

	.sheet-item {
		min-height: 56px;
	}

	.sheet-item-price {
		font-size: 13px;
	}

	.sheet-foot {
		padding: 12px 16px;
		font-size: 14px;
	}

	.sheet-foot strong {
		font-size: 20px;
	}

	.dish-detail-card {
		width: 460px;
	}

	.detail-head {
		padding: 14px 18px;
	}

	.detail-title {
		font-size: 17px;
	}

	.detail-close {
		padding: 4px 6px;
		font-size: 18px;
	}

	.dish-detail-body {
		padding: 16px 18px;
	}

	.detail-name {
		font-size: 20px;
		line-height: 28px;
	}

	.detail-type-chip {
		padding: 3px 12px;
		font-size: 13px;
	}

	.detail-grid {
		gap: 10px;
	}

	.detail-cell {
		padding: 10px 12px;
		border-radius: 8px;
	}

	.detail-label {
		font-size: 12px;
		line-height: 18px;
	}

	.detail-value {
		margin-top: 4px;
		font-size: 15px;
		line-height: 22px;
	}

	.detail-image {
		width: 110px;
		height: 110px;
		border-radius: 8px;
	}

	.confirm-card {
		width: 460px;
	}

	.confirm-body {
		padding: 16px 18px;
	}

	.confirm-summary text {
		font-size: 12px;
		line-height: 18px;
	}

	.confirm-summary strong {
		margin-top: 4px;
		font-size: 15px;
		line-height: 22px;
	}

	.textarea-row text,
	.special-requirement-row text {
		margin-bottom: 6px;
		font-size: 14px;
	}

	.textarea-row textarea {
		height: 84px;
		padding: 10px;
		font-size: 14px;
	}

	.req-chips {
		gap: 8px;
	}

	.req-chip {
		padding: 6px 14px;
		font-size: 13px;
	}

	.confirm-actions {
		gap: 10px;
		margin-top: 16px;
	}

	.confirm-btn {
		width: 110px;
		height: 40px;
		font-size: 15px;
		line-height: 40px;
		border-radius: 8px;
	}

	.return-card {
		width: 460px;
	}

	.return-body {
		padding: 16px 18px;
	}

	.return-head {
		height: 34px;
		font-size: 13px;
	}

	.return-row {
		min-height: 48px;
		font-size: 14px;
	}

	.settle-card {
		width: 460px;
	}

	.settle-body {
		padding: 16px 18px;
	}

	.settle-tabs {
		gap: 6px;
		margin-bottom: 12px;
		padding: 4px;
		border-radius: 8px;
	}

	.settle-tab {
		height: 36px;
		font-size: 14px;
		line-height: 36px;
	}

	.settle-normal text {
		font-size: 14px;
	}

	.settle-normal strong {
		font-size: 22px;
	}

	.settle-preview text {
		font-size: 12px;
		line-height: 18px;
	}

	.settle-preview strong {
		margin-top: 4px;
		font-size: 15px;
		line-height: 22px;
	}

	.form-row {
		margin-bottom: 12px;
	}

	.form-row text {
		margin-bottom: 6px;
		font-size: 14px;
	}

	.form-row input {
		height: 40px;
		font-size: 14px;
	}
}

@media (min-width: 1024px) and (orientation: landscape) {
	.dish-grid {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	}

	.dish-image {
		height: 160px;
	}

	.dish-name {
		font-size: 17px;
	}

	.dish-price {
		font-size: 20px;
	}

	.plain-btn {
		width: 68px;
		height: 36px;
		font-size: 15px;
		line-height: 36px;
	}

	.ordered-head,
	.ordered-item {
		grid-template-columns: minmax(0, 1fr) 72px 84px 100px;
	}
}

/* 大屏竖屏（如 1032×1376）：放大卡片与字号，避免版面稀疏 */
@media (min-width: 1024px) and (orientation: portrait) {
	.dish-detail-card {
		width: 520px;
	}

	.detail-image {
		width: 130px;
		height: 130px;
	}

	.confirm-card {
		width: 520px;
	}

	.confirm-summary strong {
		font-size: 16px;
	}

	.req-chip {
		padding: 7px 16px;
		font-size: 14px;
	}

	.confirm-btn {
		width: 120px;
		height: 44px;
		font-size: 16px;
		line-height: 44px;
	}

	.return-card {
		width: 520px;
	}

	.return-row {
		min-height: 52px;
		font-size: 15px;
	}

	.settle-card {
		width: 520px;
	}

	.settle-tab {
		height: 40px;
		font-size: 15px;
		line-height: 40px;
	}

	.settle-normal strong {
		font-size: 24px;
	}

	.room-name {
		font-size: 26px;
		line-height: 34px;
	}

	.room-no-chip {
		font-size: 15px;
	}

	.mini-btn {
		width: 110px;
		height: 44px;
		font-size: 16px;
		line-height: 44px;
	}

	.search-input {
		height: 44px;
		font-size: 16px;
	}

	.search-btn {
		height: 44px;
		font-size: 16px;
		line-height: 44px;
	}

	.category-pill {
		padding: 8px 22px;
		font-size: 16px;
	}

	.dish-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 16px;
	}

	.dish-image {
		height: 220px;
	}

	.dish-info {
		padding: 14px;
	}

	.dish-name {
		font-size: 18px;
		line-height: 26px;
	}

	.dish-desc {
		height: 22px;
		font-size: 14px;
		line-height: 22px;
	}

	.dish-price {
		font-size: 22px;
	}

	.plain-btn {
		width: 76px;
		height: 38px;
		font-size: 16px;
		line-height: 38px;
	}

	.step-btn {
		width: 38px;
		height: 38px;
		font-size: 20px;
		line-height: 38px;
	}

	.step-qty {
		min-width: 30px;
		font-size: 17px;
	}

	.ordered-title {
		height: 52px;
		font-size: 18px;
	}

	.ordered-head,
	.ordered-item {
		grid-template-columns: minmax(0, 1fr) 80px 92px 110px;
	}

	.ordered-item {
		font-size: 15px;
	}

	.ordered-dish-name {
		font-size: 16px;
	}

	.qty-btn {
		width: 34px;
		height: 34px;
		font-size: 19px;
		line-height: 34px;
	}

	.ordered-qty text {
		min-width: 26px;
		font-size: 16px;
	}

	.footer-btn {
		width: 160px;
		height: 48px;
		font-size: 17px;
		line-height: 48px;
	}

	.cart-bar {
		padding: 12px 20px;
	}

	.cart-bar-count {
		font-size: 13px;
	}

	.cart-bar-total {
		font-size: 22px;
	}

	.bar-btn {
		height: 44px;
		padding: 0 24px;
		font-size: 16px;
		line-height: 44px;
	}

	.sheet-head {
		height: 54px;
		font-size: 17px;
	}

	.sheet-item {
		min-height: 64px;
	}

	.sheet-foot {
		font-size: 15px;
	}

	.sheet-foot strong {
		font-size: 22px;
	}
}
</style>