library-wechat/subpkg/pages/seat-booking/seat-booking.vue

<template>
  <view class="seat-booking">
    <!-- 顶部横幅 -->
    <view class="banner">
      <image class="banner-bg" src="@/static/images/mingqi-beij@2x.png" mode="aspectFill"></image>
      <view class="banner-overlay">
        <text class="banner-text">葛店经济开发区图书馆预约</text>
      </view>
    </view>

    <view class="content">
      <!-- 场馆选择下拉框 -->
      <!-- <view class="venue-select">
        <picker :value="venueIndex" :range="venues" @change="onVenueChange">
          <view class="picker-content">
            <text>{{ venues[venueIndex] }}</text>
            <uni-icons type="down" size="16" color="#666" />
          </view>
        </picker>
      </view> -->

      <!-- 楼层/区域卡片列表 -->
      <view class="floor-list">
        <view class="floor-item" v-for="floor in floorList" :key="floor.id">
          <text class="floor-name">{{ floor.floor }}</text>
          <div class="floor-info">
            <view class="floor-left">
                <text class="floor-title">{{ floor.title }}</text>
                <image class="banner-bg" src="@/static/images/lib.png" mode="aspectFill"></image>
            </view>
            <view class="floor-right">
              <text class="floor-desc">{{ floor.desc }}</text>
              <view style="display: flex; justify-content: flex-end; width: 100%; text-align: end;">
                <button class="booking-btn" @click="bookingFloor(floor)">预约</button>
              </view>
            </view>
          </div>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      venueIndex: 0,
      venues: ['所有场馆', '东馆', '西馆', '南馆'],
      floorList: [
        {
          id: 1,
          floor: '3楼',
          title: '综合阅览一',
          desc: '葛店图书馆三楼阅读广场共有464个座位，为读者提供备电源，读者可预约选择心仪的座位。区域采光良好，环境优美，读者可在休息时一览楼下的风景。',
          image: '@/static/images/lib.png'
        },
        {
          id: 2,
          floor: '3楼',
          title: '少儿阅览室',
          desc: '少儿阅览室共有464个座位，为读者提供备电源、读者可自助选择位置，各个区采光良好，环境优美，读者可在休息时一览楼下的风景。',
          image: '@/static/images/lib.png'
        },
        {
          id: 3,
          floor: '3楼',
          title: '专题阅览室',
          desc: '专题阅览室共有464个座位，为读者提供备电源、读者可自助选择位置，各个区采光良好，环境优美，读者可在休息时一览楼下的风景。',
          image: '@/static/images/lib.png'
        }
      ]
    };
  },
  onLoad() {
    this.loadSeatInfo();
  },
  methods: {
    loadSeatInfo() {
      console.log('加载座位信息');
    },
    onVenueChange(e) {
      this.venueIndex = e.detail.value;
      console.log('切换场馆:', this.venues[this.venueIndex]);
    },
    bookingFloor(floor) {
      uni.navigateTo({
        url: `/subpkg/pages/booking-detail/booking-detail?floor=${floor.floor}&title=${floor.title}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.seat-booking {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部横幅 */
.banner {
  position: relative;
  height: 140px;
}
.banner-bg {
  width: 100%;
  height: 100%;
}
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-text {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
}

.content {
  padding: 16px;
  // margin-top: -20px;
  position: relative;
  z-index: 10;
}

/* 场馆选择下拉框 */
.venue-select {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.picker-content {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

/* 楼层卡片 */
.floor-list {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.floor-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.floor-name {
  display: block;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 8px;
}
.floor-info{
  display: inline-flex;
  align-items: flex-start;
  justify-content: space-between;
}

.floor-left {
  position: relative;
  width: 90px;
  height: 100px;
  border-radius: 8px;
  margin-right: 12px;
}

.floor-image {
  width: 90px;
  height: 100px;
  
  object-fit: cover;
}
.floor-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 4px 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  // font-weight: bold;
  font-size: 12px;
  // font-weight: bold;
}

.floor-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.floor-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.booking-btn {
  background-color: #01a4fe;
  color: #fff;
  font-size: 14px;
  padding: 0 20px;
  border: none;
  margin: 6px 0 0 0;
  height: 30px;
  line-height: 30px;
}
.booking-btn::after {
  border: none;
}
</style>