mrr.sj.front/pages/home/components/project-tabs.vue

<template>
	<view class="project">
		<view class="project-tabs">
			<scroll-view scroll-x class="tab-scroll" :show-scrollbar="false" @touchmove.prevent.stop>
				<view class="tab-container">
					<!-- 价格 -->
					<view class="tab-card" :class="{ active: activeId == item.id }" v-for="(item,index) in tabs"
						:key="index" @click="clickTap(item.id )">
						<text class="tab-text" >{{ item.name }}</text>
						<image :src="activeId == item.id?sortList[sortIndex].src:sortList[0].src" mode="aspectFill" class="tab-card-price-img" v-if="item.id"></image>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeId: 0, // 当前激活的排序项 0-综合 1-价格 2-销量 3-佣金比例
				tabs: [
					{
						id: 0,
						name: "综合",
						sort: null,
					},
					{
						id: 1,
						name: "销量",
						sort: null,
					},
					{
						id: 2,
						name: "价格",
						sort: null,
					},
					{
						id: 3,
						name: "比例",
						sort: null,
					},
				],
				sortIndex: 0, //0为没选择，1升序 2降序
				sortList: [{
						id: null,
						src: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d4d29a11-dc37-4852-907a-7ed3f31f01dd"
					},
					{
						id: 1,
						src: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/58518a61-ab6b-4580-90fd-3336b6512ece"
					},
					{
						id: 2,
						src: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d79cd7c2-f9e2-4acc-a33b-c72e26c9a0b6"

					},
				],
			};
		},
		methods: {
			clickTap(id) {
				let obj = {
					sort_type: null,
					sort_by: null
				};
				//重置索引
				if (this.activeId != id) {
					this.sortIndex = 0
				}
				if (id === 0) {
					// 热销（无排序图标）
					this.activeId = id;
				} else {
					// 价格排序
					this.activeId = id;
					obj.sort_type = id;
					this.sortIndex = this.sortIndex === 1 ? 2 : 1;
					obj.sort_by = this.sortList[this.sortIndex].id;
				}
				this.$emit("clickTap", obj);
			},

		},
	};
</script>

<style lang="less">
	.project {
		.project-tabs {
			position: relative;
			z-index: 500;
			padding: 30rpx 40rpx 24rpx 40rpx;
			background-color: #fafafa;
			.tab-scroll {
				.tab-container {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: nowrap;
					padding-bottom: 12rpx;
					/* 调整间距，避免四个项溢出 */

					.tab-card {
						box-sizing: border-box;
						padding: 0 10rpx;
						display: flex;
						align-items: center;
						gap: 8rpx;
						/* 文本与图标间距 */
						border-radius: 6rpx;
						.tab-text {
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
							text-align: left;
							font-style: normal;
							position: relative;
						}

						.tab-card-price-img {
							width: 13rpx;
							height: 18rpx;
						}
						
						&.active {
							
							.tab-text {
								font-weight: 500;
								color: #FF4767;
								&::after{
									content: '';
									// 绝对定位在元素底部
									position: absolute;
									width: 34rpx;
									left: 50%;
									transform: translateX(-50%);
									bottom: -6rpx; // 距离文字底部的距离（可调整）
									height: 6rpx; // 横条高度
									background: linear-gradient( 306deg, #FF4767 0%, #F25988 100%); // 横条颜色（与文字颜色一致）
									border-radius: 3rpx; // 横条圆角（可选，更柔和）
								}
							}
						
						}

					}

					
				}
			}
		}
	}
</style>