156 lines
3.5 KiB
Vue
156 lines
3.5 KiB
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> |