mrr.sj.front/pages/home/components/brand-card.vue

<template>
  <view class="brand-card-comp" @click="onClick">
    <image class="brand-bg" :src="item.bgSrc" mode="aspectFill"></image>
    <image class="mask-bg" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/9bca353c-fa74-407e-a69e-6f5e9aa43955.png" mode="widthFix"></image>
    
    <view class="card-content">
      <view class="avatar-wrapper" style="border-color: #F7E5D7;">
        <image class="avatar-img" :src="item.avatar || 'https://dummyimage.com/100x100/ccc/fff.png&text=logo'"></image>
      </view>
      
      <text class="brand-name">{{ item.name }}</text>
      
      <view class="tags-container">
        <view 
          class="tag-item" 
          v-for="(tag, idx) in displayTags" 
          :key="idx" 
          :style="getTagStyle(tag)"
        >
          <image class="tag-icon" v-if="tag.icon" :src="tag.icon"></image>
          <text class="tag-text">{{ tag.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 预定义的标签库（固定内容）
const TAG_LIBRARY = {
  franchise: {   // 品牌加盟
    text: '品牌加盟',
    color: '#8D4C1B ',
    borderColor: '#D6CAC0 ',
    icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/60816ae2-92ee-4473-9eca-562e1200dbca.png'
  },
  recruit: {     // 学院招募
    text: '学院招募',
    color: '#E5505F',
    borderColor: '#EFCFD2 ',
    icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fd0699b9-9f3c-4b1e-8693-d0c9ec7eabc3.png'
  },
  more: {        // 更多详情
    text: '更多详情',
    color: '#333333',
    borderColor: '#ECECEC',
    icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cec453ce-f3fc-4881-8f2c-9ec5c61e759c.png'
  }
}

export default {
  name: 'brand-card',
  props: {
    // 基础信息
    item: {
      type: Object,
      default: () => ({})
    },
    // 新方式：传入标签 key 数组，例如 ['franchise', 'recruit']
    tagKeys: {
      type: Array,
      default: null
    }
  },
  computed: {
    // 最终要显示的标签列表（优先使用 tagKeys，否则兼容旧数据 item.tags）
    displayTags() {
      if (this.tagKeys && this.tagKeys.length) {
        return this.tagKeys.map(key => TAG_LIBRARY[key]).filter(v => v)
      }
      // 兼容旧数据：如果 item.tags 存在且为数组，则直接使用（但建议逐步迁移）
      if (this.item.tags && Array.isArray(this.item.tags)) {
        return this.item.tags
      }
      return []
    },
    tagsLength() {
      return this.displayTags.length
    }
  },
  methods: {
    onClick() {
      this.$emit('click', this.item)
    },
    getTagStyle(tag) {
      const len = this.tagsLength
      let sizeStyle = {}
      if (len === 1) {
        sizeStyle = {
          width: '288rpx',
          height: '42rpx',
          padding: '0 12rpx',
          boxSizing: 'border-box'
        }
      } else if (len === 2) {
        sizeStyle = {
          width: '134rpx',
          height: '42rpx',
          padding: '0 12rpx',
          boxSizing: 'border-box'
        }
      }
      return {
        ...sizeStyle,
        color: tag.color,
        borderColor: tag.borderColor
      }
    }
  }
}
</script>

<style lang="scss">
.brand-card-comp {
  width: 328rpx;
  height: 339rpx;
  position: relative;
  border-radius: 21rpx;
  overflow: hidden;
  background-color: #fff;
}
.brand-bg {
  width: 100%;
  height: 184rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.mask-bg {
  width: 100%;
  height: 251rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
}
.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 24rpx;
}
.avatar-wrapper {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 2rpx solid;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: -38rpx;
  margin-bottom: 12rpx;
}
.avatar-img {
  width: 100%;
  height: 100%;
}
.brand-name {
  font-size: 24rpx;
  font-weight: 500;
  color: #333333;
  line-height: 34rpx;
  margin-bottom: 12rpx;
}
.tags-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
  flex-wrap: wrap;
}
.tag-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 21rpx;
  border: 1rpx solid;
  background-color: transparent;
  padding: 7rpx 12rpx;
}
.tag-icon {
  width: 24rpx;
  height: 22rpx;
  margin-right: 6rpx;
  flex-shrink: 0;
}
.tag-text {
  font-size: 20rpx;
  line-height: 28rpx;
  white-space: nowrap;
  margin-top: 4rpx;
  padding-right: 2rpx;
}
</style>