QSY-lvjuxcx/pkgExplore/store_detail/components/RoomList.vue

<template>
  <view class="section-panel room-section">
    <view class="section-header tn-flex tn-flex-row-between tn-flex-col-center">
      <text class="section-title">{{ t('roomSectionTitle', { count: roomTypes.length }) }}</text>
    </view>
    <view class="room-list-vertical">
      <view
        class="room-card-v"
        v-for="room in roomTypes"
        :key="room.code"
        @click="goToRoomDetail(room)"
      >
        <view class="room-img-v">
          <image class="img" :src="room.images && room.images[0] ? room.images[0] : ''" mode="aspectFill"></image>
          <view class="pay-method-tag" v-if="room.payMethod">{{ getPayMethodText(room.payMethod) }}</view>
        </view>
        <view class="room-info-v">
          <view class="room-header-v tn-flex tn-flex-row-between tn-flex-col-center">
            <view class="room-name-v tn-text-ellipsis">{{ getRoomName(room) }}</view>
          </view>
          
          <view v-if="room.tags && room.tags.length" class="room-tags-v tn-flex tn-flex-wrap">
            <view class="tag-v" v-for="(tag, index) in room.tags.slice(0, 3)" :key="index">{{ getDisplayTag(tag) }}</view>
          </view>
          
          <view v-if="getRoomDescription(room)" class="room-desc-v tn-text-ellipsis">{{ getRoomDescription(room) }}</view>
          
          <view class="room-bottom-v tn-flex tn-flex-row-between tn-flex-col-bottom">
            <view class="room-price-v">
              <text class="price-symbol">¥</text>
              <text class="price-val">{{ formatPriceValue(room.price) || t('pricePending') }}</text>
              <text class="price-unit">{{ t('priceUnit') }}</text>
            </view>
            <view class="go-btn-v tn-flex tn-flex-col-center tn-flex-row-center">
              <text>{{ t('viewDetails') }}</text>
              <text class="tn-icon-right"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { localizeHousingTag, localizePayMethodText } from '../../../utils/select-room-normalizers'

export default {
  props: {
    roomTypes: {
      type: Array,
      default: () => []
    },
    language: {
      type: String,
      default: 'zh'
    }
  },
  methods: {
    t(key, params = {}) {
      return this.$tm('pkgExplore.store_detail.store_detail', key, params)
    },
    formatPriceValue(priceText) {
      if (!priceText) {
        return ''
      }
      const matched = String(priceText).match(/(\d+(\.\d+)?)/)
      return matched ? matched[1] : ''
    },
    getPayMethodText(payMethod = '') {
      return localizePayMethodText(payMethod, this.language)
    },
    getDisplayTag(tag = '') {
      return localizeHousingTag(tag, this.language)
    },
    getRoomName(room = {}) {
      if (this.language === 'en') {
        return room.nameEnDisplay || room.nameEn || room.name || ''
      }
      return room.name || room.nameEn || ''
    },
    getRoomDescription(room = {}) {
      if (this.language === 'en') {
        return room.descriptionEnDisplay || room.descriptionEn || room.description || ''
      }
      return room.description || room.descriptionEn || ''
    },
    goToRoomDetail(room) {
      this.$emit('go-detail', room);
    }
  }
}
</script>

<style scoped lang="scss">
.section-panel {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1rpx solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
  margin: 24rpx 32rpx 0;
  padding: 32rpx;
  border-radius: 24rpx;
}

.section-header {
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

.room-list-vertical {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.room-card-v {
  width: 100%;
  display: flex;
  border-radius: 16rpx;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1rpx solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.room-img-v {
  width: 220rpx;
  height: 220rpx;
  flex-shrink: 0;
  position: relative;
}

.img {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
}

.pay-method-tag {
  position: absolute;
  top: 12rpx;
  left: 12rpx;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8rpx);
  color: #fff;
  font-size: 18rpx;
  padding: 4rpx 10rpx;
  border-radius: 6rpx;
  font-weight: 500;
}

.room-info-v {
  flex: 1;
  padding: 16rpx 20rpx;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.room-header-v {
  margin-bottom: 8rpx;
}

.room-name-v {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
  flex: 1;
}

.room-tags-v {
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.tag-v {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.15);
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
}

.room-desc-v {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: auto; /* 将底部价格推下去 */
}

.room-bottom-v {
  margin-top: 16rpx;
}

.room-price-v {
  color: #ffb8b8;
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 20rpx;
  font-weight: bold;
  margin-right: 2rpx;
}

.price-val {
  font-size: 36rpx;
  font-weight: 800;
  line-height: 1;
}

.price-unit {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 4rpx;
  font-weight: 500;
}

.go-btn-v {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 22rpx;
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.go-btn-v .tn-icon-right {
  font-size: 20rpx;
  margin-left: 4rpx;
}
</style>