QSY-lvjuxcx/pkgExplore/room_detail/components/RoomAssets.vue

<template>
  <view v-if="assetList.length" class="section-panel">
    <view class="section-header tn-flex tn-flex-row-between tn-flex-col-center">
      <view class="title-wrap tn-flex tn-flex-col-center">
        <view class="title-accent"></view>
        <text class="section-title">{{ $tr('房间配置') }}</text>
      </view>
      <text class="section-subtitle">{{ $tr('{count} 项配置', { count: assetList.length }) }}</text>
    </view>

    <view class="asset-grid">
      <view
        v-for="item in assetList"
        :key="item.key"
        class="asset-item tn-flex tn-flex-col-center"
      >
        <view class="asset-icon-box tn-flex tn-flex-row-center tn-flex-col-center">
          <text
            v-if="item.iconClass"
            :class="[item.iconClass, 'asset-remix-icon', 'asset-icon-font']"
          ></text>
          <image
            v-else-if="item.icon"
            :src="item.icon"
            mode="aspectFit"
            class="asset-icon-image"
          ></image>
          <text v-else class="tn-icon-shop asset-icon-font"></text>
          
          <!-- 数量角标：仅大于1时显示 -->
          <view v-if="item.defaultQuantity > 1" class="asset-qty-badge">
            x{{ item.defaultQuantity }}
          </view>
        </view>

        <text class="asset-name tn-text-ellipsis">{{ getAssetDisplayName(item) }}</text>
        <text v-if="item.brand" class="asset-brand tn-text-ellipsis">{{ item.brand }}</text>
        <text v-else class="asset-brand-placeholder"></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    assetList: {
      type: Array,
      default: () => []
    },
    language: {
      type: String,
      default: 'zh'
    }
  },
  methods: {
    getAssetDisplayName(item = {}) {
      if (this.language === 'en') {
        return item.assetNameEn || item.assetName || ''
      }
      return item.assetName || item.assetNameEn || ''
    }
  }
}
</script>

<style scoped lang="scss">
.section-panel {
  background: #ffffff;
  padding: 48rpx 32rpx;
  border-bottom: 1rpx solid #F2F3F5;
}

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

.title-wrap {
  position: relative;
}

.title-accent {
  width: 0rpx;
  height: 0rpx;
  display: none;
}

.section-title {
  position: relative;
  font-size: 36rpx;
  font-weight: 800;
  color: #1D2129;
  letter-spacing: 2rpx;
}

.section-subtitle {
  font-size: 26rpx;
  color: #86909C;
  background: #F2F3F5;
  padding: 4rpx 16rpx;
  border-radius: 999rpx;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40rpx 16rpx;
}

.asset-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.asset-icon-box {
  position: relative;
  width: 96rpx;
  height: 96rpx;
  border-radius: 28rpx;
  background: linear-gradient(135deg, rgba($brand-primary, 0.05) 0%, rgba($brand-primary, 0.12) 100%);
  margin-bottom: 16rpx;
  transition: all 0.2s ease;
}

.asset-icon-box:active {
  transform: scale(0.95);
  background: linear-gradient(135deg, rgba($brand-primary, 0.08) 0%, rgba($brand-primary, 0.16) 100%);
}

.asset-icon-image {
  width: 48rpx;
  height: 48rpx;
}

.asset-icon-font {
  font-size: 44rpx;
  color: $brand-primary;
}

.asset-remix-icon {
  font-family: 'remixicon' !important;
}

.asset-qty-badge {
  position: absolute;
  top: -10rpx;
  right: -14rpx;
  background: #FF5722;
  color: #FFFFFF;
  font-size: 20rpx;
  font-weight: bold;
  padding: 2rpx 10rpx;
  border-radius: 16rpx;
  border: 4rpx solid #FFFFFF;
  line-height: 1.2;
  font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  z-index: 2;
  box-shadow: 0 4rpx 8rpx rgba(255, 87, 34, 0.2);
}

.asset-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #1D2129;
  width: 100%;
  text-align: center;
  margin-bottom: 6rpx;
}

.asset-brand {
  font-size: 22rpx;
  color: #86909C;
  width: 100%;
  text-align: center;
}

.asset-brand-placeholder {
  height: 30rpx; /* Placeholder to keep grid aligned if some have brand and some don't */
}
</style>