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>
					<text class="tag-text1">›</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() {
			// 1. 保留 emit，方便外层如果有特殊需求可以监听到
			this.$emit('click', this.item);

			// 2. 检查登录状态
			if (!uni.getStorageSync("accessToken")) {
				uni.navigateTo({
					url: '/pages/blogPopup/blogPopup'
				});
				return;
			}

			// 3. 直接在此处处理跳转逻辑
			if (this.item && this.item.id) {
				uni.navigateTo({
					url: `/pages/jingxuan/brand-detail?id=${this.item.id}`
				});
			}
		},
		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: '142rpx',
					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: 28rpx;
	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: 26rpx;
	height: 24rpx;
	margin-right: 6rpx;
	flex-shrink: 0;
}

.tag-text {
	font-size: 24rpx;
	line-height: 28rpx;
	white-space: nowrap;
	margin-top: 4rpx;
	padding-right: 2rpx;
}

.tag-text1 {
	font-size: 40rpx;
	line-height: 28rpx;
	white-space: nowrap;
	margin-top: 4rpx;
	padding-right: 2rpx;
	margin-bottom: 6rpx;
	font-weight: 200;
}
</style>