forge_admin/forge-h5-ui/src/pages/hotel/customer/cart.vue

<template>
  <view class="hotel-customer-theme cart-page">
    <!-- 暂停接单提示横幅 -->
    <view v-if="isPaused" class="c-pause-banner">
      <text class="c-pause-icon">⏸️</text>
      <text class="c-pause-text">餐厅已暂停接单，暂时无法结算</text>
    </view>

    <!-- 送至信息 -->
    <view class="c-delivery-info">
      <text>🏨 送至：{{ roomNo }} {{ roomTypeName }}</text>
    </view>

    <!-- 购物车列表 -->
    <view v-if="cartItems.length === 0" class="c-empty">
      <text class="c-empty-icon">🛒</text>
      <text class="c-empty-text">购物车是空的</text>
      <view class="c-empty-btn" @click="goToMenu">去点餐</view>
    </view>

    <view v-else class="c-list">
      <view v-for="(item, index) in cartItems" :key="index" class="c-item">
        <view class="c-item-img">
          <image
            v-if="showImage(item)"
            :src="getImageUrl(item)"
            mode="aspectFill"
            class="c-item-img-real"
            @error="onImageError(item)"
          />
          <text v-else class="c-item-img-placeholder">🍽️</text>
        </view>
        <view class="c-item-info">
          <view class="c-item-name">{{ item.dishName }}</view>
          <view class="c-item-spec" v-if="item.specs?.length || item.additions?.length">
            {{ formatSpecs(item) }}
          </view>
          <view class="c-item-row">
            <view class="c-qty-ctrl">
              <view class="c-qty-btn" @click="onMinus(index)">−</view>
              <text class="c-qty-num">{{ item.quantity }}</text>
              <view class="c-qty-btn c-qty-btn--add" @click="onPlus(index)">+</view>
            </view>
            <view class="c-item-price">¥{{ (item.unitPrice * item.quantity).toFixed(2) }}</view>
          </view>
        </view>
      </view>

      <!-- 备注 -->
      <view class="c-note-section">
        <text class="c-note-label">订单备注</text>
        <textarea
          class="c-note-input"
          v-model="orderNote"
          placeholder="特殊要求、忌口等..."
          :maxlength="200"
        />
      </view>

      <!-- 费用汇总 -->
      <view class="c-summary">
        <view class="c-summary-row">
          <text>菜品小计</text>
          <text>¥{{ cartTotal }}</text>
        </view>
        <view class="c-summary-row">
          <text>配送费</text>
          <text :style="{ color: deliveryFee > 0 ? 'var(--h-txt)' : 'var(--h-succ)' }">
            {{ deliveryFee > 0 ? '¥' + deliveryFee : '免配送费' }}
          </text>
        </view>
        <view class="c-summary-row c-summary-total">
          <text>合计</text>
          <text>¥{{ grandTotal }}</text>
        </view>
      </view>

      <!-- 结算按钮 -->
      <view class="c-checkout-btn" :class="{ 'c-checkout-btn--disabled': isPaused }" @click="goCheckout">{{ isPaused ? '餐厅已暂停接单' : '去结算 ¥' + grandTotal }}</view>
    </view>

    <!-- 底部 TabBar -->
    <HotelTabBar current="cart" />
  </view>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useHotelOrderStore } from '@/store'
import HotelTabBar from '@/components/hotel/HotelTabBar.vue'
import api from '@/api'
import { getFileDownloadUrl } from '@/utils/file'

const orderStore = useHotelOrderStore()

// 加载失败的菜品图片，回退到占位图标
const failedImages = ref(new Set())

// 暂停接单状态
const isPaused = ref(false)

const roomNo = computed(() => orderStore.roomInfo?.roomNo || '')
const roomTypeName = computed(() => orderStore.roomInfo?.roomTypeName || '')
const cartItems = computed(() => orderStore.cartItems)
const cartTotal = computed(() => orderStore.cartTotal.toFixed(2))
const deliveryFee = computed(() => orderStore.deliveryFee)
const grandTotal = computed(() => (orderStore.cartTotal + deliveryFee.value).toFixed(2))
const orderNote = computed({
  get: () => orderStore.orderNote,
  set: v => orderStore.setOrderNote(v),
})

/**
 * 购物车里存的 image 是 fileId，不是可直接访问的地址，
 * 必须经 getFileDownloadUrl 转成 /api/file/download/{fileId}，否则图片加载不出来。
 */
function getImageUrl(item) {
  if (!item.image) return ''
  return getFileDownloadUrl(item.image)
}

/** 图片是否可用（有值且未加载失败） */
function showImage(item) {
  return !!item.image && !failedImages.value.has(String(item.image))
}

/** 图片加载失败，标记后展示占位图标 */
function onImageError(item) {
  failedImages.value.add(String(item.image))
}

function formatSpecs(item) {
  const parts = []
  if (item.specs?.length) parts.push(item.specs.map(s => s.optionName).join('·'))
  if (item.additions?.length) parts.push(item.additions.map(a => '+' + a.name).join('·'))
  return parts.join(' / ')
}

function onMinus(index) {
  const item = cartItems.value[index]
  orderStore.updateItemQuantity(index, item.quantity - 1)
}

function onPlus(index) {
  const item = cartItems.value[index]
  orderStore.updateItemQuantity(index, item.quantity + 1)
}

function goToMenu() {
  uni.redirectTo({ url: '/pages/hotel/customer/menu' })
}

function goCheckout() {
  if (cartItems.value.length === 0) {
    uni.showToast({ title: '购物车是空的', icon: 'none' })
    return
  }
  if (isPaused.value) {
    uni.showToast({ title: '餐厅已暂停接单，无法结算', icon: 'none' })
    return
  }
  uni.navigateTo({ url: '/pages/hotel/customer/order-confirm' })
}

onMounted(() => {
  loadPauseStatus()
})

/** 加载暂停接单状态 */
async function loadPauseStatus() {
  if (!orderStore.tenantId) return
  try {
    var res = await api.hotelPauseStatus(orderStore.tenantId)
    isPaused.value = res?.data ?? res ?? false
  } catch (e) {
    console.log('暂停状态查询失败:', e?.message || e)
    isPaused.value = false
  }
}
</script>

<style lang="scss" scoped>
.cart-page {
  min-height: 100vh;
  background: var(--h-bg, #F7F7F7);
  padding: 24rpx 28rpx;
  padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
}

.c-delivery-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 24rpx;
  color: var(--h-txt-sub, #666);
  margin-bottom: 24rpx;
}

/* 空状态 */
.c-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 160rpx 0;
}

.c-empty-icon {
  font-size: 96rpx;
  margin-bottom: 24rpx;
}

.c-empty-text {
  font-size: 28rpx;
  color: var(--h-txt-light, #999);
  margin-bottom: 32rpx;
}

.c-empty-btn {
  padding: 20rpx 64rpx;
  border-radius: 48rpx;
  background: var(--h-pri, #2D5016);
  color: #fff;
  font-size: 28rpx;
  font-weight: 600;
}

/* 购物车列表 */
.c-list {
  display: flex;
  flex-direction: column;
}

.c-item {
  display: flex;
  gap: 20rpx;
  background: #fff;
  border-radius: var(--h-rad, 20rpx);
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: var(--h-shd, 0 2rpx 8rpx rgba(0, 0, 0, 0.04));
}

.c-item-img {
  width: 140rpx;
  height: 140rpx;
  border-radius: var(--h-rad-sm, 12rpx);
  flex-shrink: 0;
  background: var(--h-bg, #F7F7F7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.c-item-img-real {
  width: 100%;
  height: 100%;
}

.c-item-img-placeholder {
  font-size: 48rpx;
  opacity: 0.3;
}

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

.c-item-name {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--h-txt, #1A1A1A);
}

.c-item-spec {
  font-size: 22rpx;
  color: var(--h-txt-light, #999);
  margin-top: 4rpx;
}

.c-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8rpx;
}

.c-qty-ctrl {
  display: flex;
  align-items: center;
  border-radius: 40rpx;
  border: 1rpx solid var(--h-bdr, #eee);
  overflow: hidden;
}

.c-qty-btn {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: var(--h-txt-sub, #666);
  background: var(--h-bg, #F7F7F7);
}

.c-qty-btn--add {
  color: var(--h-pri, #2D5016);
  font-weight: 700;
}

.c-qty-num {
  width: 64rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 600;
  color: var(--h-txt, #1A1A1A);
  border-left: 1rpx solid var(--h-bdr, #eee);
  border-right: 1rpx solid var(--h-bdr, #eee);
  line-height: 56rpx;
}

.c-item-price {
  font-size: 32rpx;
  font-weight: 700;
  color: var(--h-warn, #D97706);
}

/* 备注 */
.c-note-section {
  background: #fff;
  border-radius: var(--h-rad, 20rpx);
  padding: 24rpx;
  margin-top: 8rpx;
  margin-bottom: 16rpx;
  box-shadow: var(--h-shd, 0 2rpx 8rpx rgba(0, 0, 0, 0.04));
}

.c-note-label {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--h-txt-sub, #666);
  margin-bottom: 12rpx;
  display: block;
}

.c-note-input {
  display: block;
  width: 100%;
  height: 140rpx;
  /* H5 无全局 border-box 重置，width:100% + padding + border 会把备注框撑出卡片右侧 */
  box-sizing: border-box;
  padding: 16rpx 20rpx;
  border: 1rpx solid var(--h-bdr, #eee);
  border-radius: 12rpx;
  font-size: 26rpx;
  line-height: 40rpx;
  resize: none;
  overflow: hidden;
  background: var(--h-bg, #F7F7F7);
  color: var(--h-txt, #1A1A1A);

  /* uni-app H5 的 textarea 会渲染成 uni-textarea > wrapper > textarea，
     内层需要撑满外框，否则可输入区域和灰底高度不一致，文字看着被截断 */
  :deep(.uni-textarea-wrapper),
  :deep(.uni-textarea-textarea) {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 26rpx;
    line-height: 40rpx;
    border: none;
    background: transparent;
    resize: none;
  }

  :deep(.uni-textarea-placeholder) {
    font-size: 26rpx;
    line-height: 40rpx;
    color: var(--h-txt-light, #999);
  }
}

/* 费用汇总 */
.c-summary {
  background: #fff;
  border-radius: var(--h-rad, 20rpx);
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: var(--h-shd, 0 2rpx 8rpx rgba(0, 0, 0, 0.04));
}

.c-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  font-size: 26rpx;
  color: var(--h-txt-sub, #666);
}

.c-summary-total {
  border-top: 1rpx solid var(--h-bdr, #eee);
  margin-top: 12rpx;
  padding-top: 16rpx;
  font-size: 32rpx;
  font-weight: 700;
  color: var(--h-pri, #2D5016);
}

/* 结算按钮 */
.c-checkout-btn {
  width: 100%;
  box-sizing: border-box;
  padding: 28rpx;
  border-radius: 48rpx;
  background: var(--h-pri, #2D5016);
  color: #fff;
  font-size: 30rpx;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8rpx 24rpx rgba(45, 80, 22, 0.3);
}

.c-checkout-btn:active {
  opacity: 0.85;
}

.c-checkout-btn--disabled {
  opacity: 0.5;
  background: var(--h-txt-sub, #999);
}

/* 暂停接单横幅 */
.c-pause-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 20rpx 28rpx;
  background: #FEF3C7;
  color: #92400E;
  font-size: 26rpx;
  font-weight: 600;
}

.c-pause-icon {
  font-size: 28rpx;
}
</style>