haha/haha-mp/src/pages/products/products.vue

<template>
  <view class="products-page">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view v-else-if="errorMsg" class="error-container">
      <text class="error-icon">!</text>
      <text class="error-text">{{ errorMsg }}</text>
      <view class="error-btn" @click="goBack">返回</view>
    </view>

    <!-- 商品内容 -->
    <view v-else class="content">
      <!-- 双门柜Tab切换 -->
      <view v-if="hasRightDoor" class="door-tabs">
        <view
          class="door-tab"
          :class="{ active: activeDoor === 'left' }"
          @click="activeDoor = 'left'"
        >左门</view>
        <view
          class="door-tab"
          :class="{ active: activeDoor === 'right' }"
          @click="activeDoor = 'right'"
        >右门</view>
      </view>

      <!-- 商品列表 -->
      <view class="floors-list">
        <view
          v-for="floor in currentFloors"
          :key="floor.floor"
          class="floor-card"
        >
          <view class="floor-header">
            <view class="floor-badge">{{ floor.floor }}</view>
            <text class="floor-title">第{{ floor.floor }}层</text>
            <text class="floor-count">{{ floor.goods?.length || 0 }}件商品</text>
          </view>

          <!-- 该层无商品 -->
          <view v-if="!floor.goods || floor.goods.length === 0" class="empty-floor">
            <text class="empty-text">该层暂无商品</text>
          </view>

          <!-- 商品列表 -->
          <view v-else class="goods-list">
            <view
              v-for="(item, index) in floor.goods"
              :key="index"
              class="goods-item"
            >
              <!-- 商品图片 -->
              <view class="goods-image-wrap">
                <image
                  v-if="item.pic"
                  :src="item.pic"
                  class="goods-image"
                  mode="aspectFill"
                />
                <view v-else class="goods-image-placeholder">
                  <text class="placeholder-text">暂无图片</text>
                </view>
              </view>

              <!-- 商品信息 -->
              <view class="goods-info">
                <text class="goods-name">{{ item.label || '未知商品' }}</text>
                <text v-if="item.type" class="goods-type">{{ item.type }}</text>
                <view class="goods-price-row">
                  <text class="goods-price">¥{{ item.c_price || '0.00' }}</text>
                  <text
                    v-if="item.dis_price && item.dis_price !== item.c_price"
                    class="goods-discount-price"
                  >¥{{ item.dis_price }}</text>
                </view>
                <view v-if="item.stock !== undefined && item.stock !== null" class="goods-stock">
                  <text class="stock-label">库存: </text>
                  <text :class="item.stock > 0 ? 'stock-normal' : 'stock-empty'">{{ item.stock }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 无任何层数据 -->
        <view v-if="currentFloors.length === 0" class="empty-container">
          <text class="empty-icon">📦</text>
          <text class="empty-main-text">暂无商品信息</text>
          <text class="empty-sub-text">该设备尚未配置商品</text>
        </view>
      </view>

      <!-- 底部占位，避免被固定栏遮挡 -->
      <view class="bottom-placeholder"></view>
    </view>

    <!-- 底部操作栏 -->
    <view v-if="!loading && !errorMsg" class="bottom-bar">
      <view class="bottom-trust">
        <BrandSlogan type="standard" serviceType="先享后付" :compact="true" />
      </view>
      <view class="bottom-actions">
        <view class="btn-back" @click="goBack">返回</view>
        <view class="btn-open" @click="handleOpenDoor">开门购物</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getDeviceProducts, scanDoor } from '@/api/device';
import { checkPayscoreEnabled } from '@/api/payscore';
import { isLoggedIn } from '@/utils/auth';
import { logger } from '@/utils/logger';
import BrandSlogan from '@/components/BrandSlogan.vue';
import type { FloorConfig } from '@/api/device';

const deviceId = ref('');

const loading = ref(true);
const errorMsg = ref('');
const templateName = ref('');
const shelfNum = ref(0);
const deviceType = ref(0);
const leftFloors = ref<FloorConfig[]>([]);
const rightFloors = ref<FloorConfig[]>([]);
const opening = ref(false);

const activeDoor = ref<'left' | 'right'>('left');

const hasRightDoor = computed(() => rightFloors.value.length > 0);

const currentFloors = computed(() => {
  if (activeDoor.value === 'right' && hasRightDoor.value) {
    return rightFloors.value;
  }
  return leftFloors.value;
});

onLoad((options: any) => {
  let id = '';

  if (options?.deviceId) {
    id = options.deviceId;
  } else if (options?.q) {
    try {
      const url = decodeURIComponent(options.q);
      logger.log('扫码链接:', url);
      const match = url.match(/\/([A-Za-z0-9]+)(?:\?|$)/);
      if (match && match[1]) {
        id = match[1];
      }
    } catch (e) {
      logger.error('解析扫码链接失败:', e);
    }
  }

  if (id) {
    logger.log('设备ID:', id);
    deviceId.value = id;
    loadProducts();
  } else {
    errorMsg.value = '缺少设备ID参数';
    loading.value = false;
  }
});

const loadProducts = async () => {
  loading.value = true;
  errorMsg.value = '';

  try {
    const data = await getDeviceProducts(deviceId.value);
    templateName.value = data.templateName || '';
    shelfNum.value = data.shelfNum || 0;
    deviceType.value = data.deviceType || 0;
    leftFloors.value = data.leftFloors || [];
    rightFloors.value = data.rightFloors || [];
  } catch (error: any) {
    logger.error('加载商品数据失败:', error);
    errorMsg.value = error.message || '加载失败，请稍后重试';
  } finally {
    loading.value = false;
  }
};

const handleOpenDoor = async () => {
  if (opening.value) return;

  if (!isLoggedIn()) {
    uni.showModal({
      title: '提示',
      content: '请先登录后再开门购物',
      showCancel: false,
      success: () => {
        uni.reLaunch({
          url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/products/products?deviceId=' + deviceId.value)
        });
      }
    });
    return;
  }

  try {
    const payscoreResult = await checkPayscoreEnabled();
    if (!payscoreResult.enabled) {
      uni.navigateTo({
        url: '/pages/payscore/enable'
      });
      return;
    }
  } catch (error: any) {
    logger.error('检查支付分状态失败:', error);
    uni.navigateTo({
      url: '/pages/payscore/enable'
    });
    return;
  }

  opening.value = true;

  uni.showLoading({
    title: '正在开门...',
    mask: true
  });

  try {
    const response = await scanDoor(deviceId.value);

    uni.hideLoading();
    uni.showToast({
      title: '开门成功',
      icon: 'success'
    });

    uni.setStorageSync('currentDeviceId', response.deviceId);
    uni.setStorageSync('currentOutTradeNo', response.outTradeNo);
    uni.setStorageSync('currentOrderNo', response.orderNo);
    uni.removeStorageSync('shoppingPollingActive');

    setTimeout(() => {
      uni.redirectTo({
        url: '/pages/shopping/shopping'
      });
    }, 1000);
  } catch (error: any) {
    uni.hideLoading();
    opening.value = false;
    logger.error('开门失败:', error);
  }
};

const goBack = () => {
  if (!isLoggedIn()) {
    uni.reLaunch({ url: '/pages/login/login' });
    return;
  }
  uni.navigateBack({
    fail: () => {
      uni.reLaunch({ url: '/pages/index/index' });
    }
  });
};
</script>

<style lang="scss" scoped>
.products-page {
  min-height: 100vh;
  background: $color-bg-secondary;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid $color-border;
  border-top-color: $color-primary;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.loading-text {
  margin-top: $spacing-sm;
  font-size: 28rpx;
  color: $color-text-secondary;
}

/* 错误状态 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  padding: 0 60rpx;
}

.error-icon {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: $color-error;
  color: $color-bg-primary;
  border-radius: 50%;
  font-size: 40rpx;
  font-weight: 700;
}

.error-text {
  margin-top: $spacing-md;
  font-size: 28rpx;
  color: $color-text-secondary;
  text-align: center;
}

.error-btn {
  margin-top: $spacing-xl;
  padding: $spacing-sm 60rpx;
  background: $color-primary;
  color: $color-text-primary;
  border-radius: $radius-xl;
  font-size: 28rpx;
  font-weight: 600;
}

/* 门Tab切换 */
.door-tabs {
  display: flex;
  background: $color-bg-primary;
  border-bottom: 1rpx solid $color-border;
}

.door-tab {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: $color-text-secondary;
  position: relative;
}

.door-tab.active {
  color: $color-text-primary;
  font-weight: 600;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 4rpx;
    background: $color-primary;
    border-radius: 2rpx;
  }
}

/* 楼层列表 */
.floors-list {
  padding: $spacing-sm;
}

.floor-card {
  background: $color-bg-primary;
  border-radius: $radius-md;
  margin-bottom: $spacing-sm;
  overflow: hidden;
  box-shadow: $shadow-sm;
}

.floor-header {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid $color-border;
}

.floor-badge {
  width: 44rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
  background: $color-primary;
  color: $color-text-primary;
  border-radius: $radius-sm;
  font-size: 24rpx;
  font-weight: 600;
  margin-right: $spacing-sm;
}

.floor-title {
  font-size: 28rpx;
  font-weight: 600;
  color: $color-text-primary;
  flex: 1;
}

.floor-count {
  font-size: 24rpx;
  color: $color-text-secondary;
}

/* 空楼层 */
.empty-floor {
  padding: 40rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 26rpx;
  color: $color-text-tertiary;
}

/* 商品列表 */
.goods-list {
  padding: 0 24rpx;
}

.goods-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid $color-bg-secondary;

  &:last-child {
    border-bottom: none;
  }
}

/* 商品图片 */
.goods-image-wrap {
  width: 140rpx;
  height: 140rpx;
  border-radius: 12rpx;
  overflow: hidden;
  flex-shrink: 0;
  background: $color-bg-tertiary;
}

.goods-image {
  width: 100%;
  height: 100%;
}

.goods-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $color-bg-tertiary;
}

.placeholder-text {
  font-size: 20rpx;
  color: $color-text-tertiary;
}

/* 商品信息 */
.goods-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.goods-name {
  font-size: 28rpx;
  color: $color-text-primary;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.goods-type {
  font-size: 22rpx;
  color: $color-text-secondary;
  margin-top: 6rpx;
}

.goods-price-row {
  display: flex;
  align-items: baseline;
  gap: 12rpx;
  margin-top: 8rpx;
}

.goods-price {
  font-size: 32rpx;
  color: $color-error;
  font-weight: 600;
}

.goods-discount-price {
  font-size: 24rpx;
  color: $color-text-secondary;
  text-decoration: line-through;
}

.goods-stock {
  margin-top: 6rpx;
  font-size: 22rpx;
}

.stock-label {
  color: $color-text-secondary;
}

.stock-normal {
  color: $color-success;
}

.stock-empty {
  color: $color-error;
}

/* 无数据 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $spacing-xxl 0;
}

.empty-icon {
  font-size: 80rpx;
}

.empty-main-text {
  margin-top: $spacing-md;
  font-size: 28rpx;
  color: $color-text-primary;
  font-weight: 600;
}

.empty-sub-text {
  margin-top: $spacing-xs;
  font-size: 24rpx;
  color: $color-text-secondary;
}

/* 底部占位 */
.bottom-placeholder {
  height: 180rpx;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: $spacing-md 30rpx;
  padding-bottom: calc($spacing-md + env(safe-area-inset-bottom));
  background: $color-bg-primary;
  box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.04);
}

.bottom-trust {
  display: flex;
  justify-content: center;
  margin-bottom: $spacing-sm;
}

.bottom-actions {
  display: flex;
  gap: $spacing-sm;
}

.btn-back {
  flex: 2;
  text-align: center;
  padding: 22rpx 0;
  border-radius: $radius-xl;
  font-size: 28rpx;
  font-weight: 500;
  color: $color-text-secondary;
  background: $color-bg-tertiary;

  &:active {
    background: $color-border;
  }
}

.btn-open {
  flex: 3;
  text-align: center;
  padding: 22rpx 0;
  border-radius: $radius-xl;
  font-size: 30rpx;
  font-weight: 600;
  color: $color-text-primary;
  background: linear-gradient(135deg, $color-primary, $color-primary-dark);
  box-shadow: 0 6rpx 20rpx rgba(255, 160, 0, 0.3);
  animation: btn-breathe 2.4s $ease-in-out infinite;

  &:active {
    opacity: 0.9;
    transform: scale(0.98);
    animation: none;
  }
}

@keyframes btn-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}
</style>