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

<template>
  <view class="hotel-customer-theme rc-page">
    <!-- 加载中 -->
    <view v-if="loading" class="rc-loading">
      <view class="rc-spinner" />
      <text class="rc-loading-text">正在验证房间信息...</text>
    </view>

    <!-- 错误状态 -->
    <view v-else-if="errorMsg" class="rc-error">
      <view class="rc-error-icon">!</view>
      <text class="rc-error-title">验证失败</text>
      <text class="rc-error-msg">{{ errorMsg }}</text>
      <view class="rc-error-btn" @click="retry">重新加载</view>
    </view>

    <!-- 房间确认 -->
    <view v-else class="rc-content">
      <!-- 顶部品牌区 -->
      <view class="rc-brand">
        <view class="rc-brand-icon">
          <text class="rc-brand-icon-text">🏨</text>
        </view>
        <text class="rc-brand-name">亚朵酒店</text>
        <text class="rc-brand-slogan">ATOUR HOTEL · 客房送餐服务</text>
      </view>

      <!-- 房间卡片 -->
      <view class="rc-card">
        <view class="rc-room-no">{{ roomInfo.roomNo }}</view>
        <view class="rc-room-type" v-if="roomInfo.roomTypeName">{{ roomInfo.roomTypeName }}</view>
        <view class="rc-verify-ok">
          <text class="rc-verify-icon">✓</text>
          <text>扫码验证成功</text>
        </view>

        <view class="rc-info-row">
          <text class="rc-info-icon">🕐</text>
          <text>营业时间：{{ businessHoursText }}</text>
        </view>
        <view class="rc-info-row">
          <text class="rc-info-icon">🛎️</text>
          <text>预计送达：约 {{ deliveryTime }} 分钟</text>
        </view>
        <view class="rc-info-row">
          <text class="rc-info-icon">💰</text>
          <text>配送费：{{ deliveryFee > 0 ? '¥' + deliveryFee : '免配送费' }}</text>
        </view>

        <view class="rc-start-btn" @click="goToMenu">开始点餐</view>
      </view>

      <view class="rc-wrong-link" @click="handleWrongRoom">
        这不是我的房间？联系前台
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useHotelOrderStore } from '@/store'
import api from '@/api'

const orderStore = useHotelOrderStore()

const loading = ref(true)
const errorMsg = ref('')
const roomInfo = ref({})
const businessHoursText = ref('10:00 - 22:00')
const deliveryTime = ref('25-35')
const deliveryFee = ref(0)

let shortCode = ''
let sign = ''

onMounted(async () => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage?.$page?.options || currentPage?.options || {}

  shortCode = options.c || options.shortCode || ''
  sign = options.s || options.sign || ''

  if (!shortCode || !sign) {
    errorMsg.value = '二维码参数缺失，请重新扫描'
    loading.value = false
    return
  }

  await loadRoomInfo()
})

async function loadRoomInfo() {
  loading.value = true
  errorMsg.value = ''

  try {
    const res = await api.hotelCustomerScan({ shortCode, sign })
    const data = res?.data || res

    if (!data || !data.bound) {
      errorMsg.value = '该二维码尚未绑定房间，请联系前台处理'
      loading.value = false
      return
    }

    roomInfo.value = {
      roomId: data.room?.roomId,
      roomNo: data.room?.roomNo || '',
      roomTypeName: data.room?.roomTypeName || '',
    }

    // 存入 Store
    orderStore.setTenantId(data.tenantId)
    orderStore.setRoomInfo(roomInfo.value)

    // 加载酒店配置（暂时使用默认值，后续可扩展接口）
    orderStore.setHotelConfig({
      deliveryFee: 0,
      deliveryTime: '25-35',
    })
    deliveryFee.value = 0
    deliveryTime.value = '25-35'

    loading.value = false
  } catch (err) {
    loading.value = false
    errorMsg.value = err?.message || '无法识别该二维码，请检查是否有效'
  }
}

function retry() {
  loadRoomInfo()
}

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

function handleWrongRoom() {
  uni.showModal({
    title: '提示',
    content: '如房间信息有误，请联系酒店前台确认',
    showCancel: false,
  })
}
</script>

<style lang="scss" scoped>
.rc-page {
  min-height: 100vh;
  background: var(--h-bg, #F7F7F7);
}

/* Loading */
.rc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 24rpx;
}

.rc-spinner {
  width: 64rpx;
  height: 64rpx;
  border: 6rpx solid #E8F0E3;
  border-top-color: var(--h-pri, #2D5016);
  border-radius: 50%;
  animation: rc-spin 0.8s linear infinite;
}

@keyframes rc-spin {
  to { transform: rotate(360deg); }
}

.rc-loading-text {
  color: var(--h-txt-sub, #666);
  font-size: 28rpx;
}

/* Error */
.rc-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 48rpx;
  gap: 16rpx;
}

.rc-error-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: var(--h-dang-lt, #FEE2E2);
  color: var(--h-dang, #DC2626);
  font-size: 56rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}

.rc-error-title {
  font-size: 36rpx;
  font-weight: 700;
  color: var(--h-txt, #1A1A1A);
}

.rc-error-msg {
  font-size: 26rpx;
  color: var(--h-txt-sub, #666);
  text-align: center;
  line-height: 1.6;
}

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

/* Content */
.rc-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Brand */
.rc-brand {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0 60rpx;
  background: linear-gradient(180deg, var(--h-pri, #2D5016) 0%, var(--h-pri-lt, #3A6B35) 60%, var(--h-bg, #F7F7F7) 100%);
}

.rc-brand-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 32rpx;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.rc-brand-icon-text {
  font-size: 56rpx;
}

.rc-brand-name {
  font-size: 40rpx;
  font-weight: 800;
  color: #fff;
  letter-spacing: 4rpx;
}

.rc-brand-slogan {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8rpx;
  letter-spacing: 2rpx;
}

/* Card */
.rc-card {
  width: calc(100% - 64rpx);
  margin: -40rpx 32rpx 0;
  background: #fff;
  border-radius: var(--h-rad-lg, 32rpx);
  padding: 56rpx 48rpx 48rpx;
  box-shadow: var(--h-shd-lg, 0 16rpx 48rpx rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rc-room-no {
  font-size: 96rpx;
  font-weight: 900;
  color: var(--h-pri, #2D5016);
  letter-spacing: 8rpx;
  line-height: 1.1;
}

.rc-room-type {
  font-size: 26rpx;
  color: var(--h-txt-sub, #666);
  margin-top: 4rpx;
  margin-bottom: 16rpx;
}

.rc-verify-ok {
  display: flex;
  align-items: center;
  gap: 8rpx;
  background: var(--h-succ-lt, #DCFCE7);
  color: var(--h-succ, #16A34A);
  padding: 12rpx 32rpx;
  border-radius: 40rpx;
  font-size: 26rpx;
  font-weight: 600;
  margin-bottom: 36rpx;
}

.rc-verify-icon {
  font-weight: 700;
}

.rc-info-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 24rpx;
  color: var(--h-txt-light, #999);
  margin-bottom: 16rpx;
  width: 100%;
}

.rc-info-icon {
  font-size: 28rpx;
}

.rc-start-btn {
  width: 100%;
  margin-top: 32rpx;
  padding: 28rpx;
  border-radius: 48rpx;
  background: var(--h-pri, #2D5016);
  color: #fff;
  font-size: 30rpx;
  font-weight: 700;
  text-align: center;
  letter-spacing: 4rpx;
  box-shadow: 0 8rpx 24rpx rgba(45, 80, 22, 0.3);
}

.rc-start-btn:active {
  opacity: 0.85;
  transform: scale(0.98);
}

.rc-wrong-link {
  margin-top: 32rpx;
  font-size: 24rpx;
  color: var(--h-txt-light, #999);
}
</style>