264 lines
6.4 KiB
Vue
264 lines
6.4 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">
|
|
<text
|
|
class="tab-text"
|
|
:class="{ active: activeId == 1 }"
|
|
@click="clickTap(1)"
|
|
>热销</text
|
|
>
|
|
<view class="tab-active-indicator" v-if="activeId == 1"></view>
|
|
</view>
|
|
<view class="tab-card">
|
|
<text
|
|
class="tab-text"
|
|
:class="{ active: activeId == 2 }"
|
|
@click="clickTap(2)"
|
|
>价格</text
|
|
>
|
|
<image
|
|
:src="priceList[priceIndex].src"
|
|
mode="aspectFill"
|
|
class="tab-card-price-img"
|
|
></image>
|
|
<view class="tab-active-indicator" v-if="activeId == 2"></view>
|
|
</view>
|
|
<view class="tab-card">
|
|
<text
|
|
class="tab-text"
|
|
:class="{ active: showPopup || popId }"
|
|
@click="clickTap(3)"
|
|
>分类</text
|
|
>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 分类弹出层 -->
|
|
<view class="time-filter-popup" :class="{ show: showPopup }">
|
|
<!-- 分类选项部分 -->
|
|
<view class="time-filter-popup-tabs">
|
|
<view
|
|
@click="clickPopTap(item)"
|
|
class="time-filter-popup-tab"
|
|
:class="{ active: item.id == popId }"
|
|
v-for="(item, index) in tabsPopList"
|
|
:key="item.id"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
<!-- 分类弹窗-重置、完成按钮 -->
|
|
<!-- <view class="popup-big-btns">
|
|
<view class="btn-reset" @click.stop="resetPopup">重置</view>
|
|
<view class="btn-confirm" @click.stop="confirmPopup">完成</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 蒙层 -->
|
|
<view :class="{ popMsk: showPopup }" @click="showPopup=false"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeId: 1,
|
|
showPopup: false,
|
|
tabsList: [],
|
|
popId: null,
|
|
priceIndex: 0,
|
|
priceList: [
|
|
{ id: null, src: "/static/images/syr/price1.png" },
|
|
{ id: 2, src: "/static/images/syr/price2.png" },
|
|
{ id: 3, src: "/static/images/syr/price3.png" },
|
|
],
|
|
};
|
|
},
|
|
props: {
|
|
tabsPopList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
methods: {
|
|
clickPopTap(item) {
|
|
this.popId = this.popId === item.id ? null : item.id;
|
|
this.confirmPopup()
|
|
},
|
|
resetPopup() {
|
|
this.popId = null;
|
|
this.$emit("clickPopTap", null);
|
|
},
|
|
confirmPopup() {
|
|
this.showPopup = false;
|
|
this.$emit("clickPopTap", this.popId);
|
|
},
|
|
clickTap(id) {
|
|
let obj = { order_type: null, msk: false };
|
|
if (id == 3) {
|
|
this.showPopup = !this.showPopup;
|
|
obj.msk = this.showPopup;
|
|
this.$emit("clickTap", obj);
|
|
} else if (id == 2) {
|
|
this.activeId = id;
|
|
this.showPopup = false;
|
|
this.priceIndex = this.priceIndex === 1 ? 2 : 1;
|
|
obj.order_type = this.priceList[this.priceIndex].id;
|
|
this.$emit("clickTap", obj);
|
|
} else {
|
|
this.priceIndex = 0;
|
|
this.activeId = id;
|
|
this.showPopup = false;
|
|
obj.order_type = this.activeId;
|
|
this.$emit("clickTap", obj);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.project {
|
|
padding-left: 10rpx;
|
|
.project-tabs {
|
|
position: relative;
|
|
z-index: 500;
|
|
margin-bottom: 30rpx;
|
|
margin-top: 30rpx;
|
|
|
|
.tab-scroll {
|
|
.tab-container {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 130rpx;
|
|
|
|
.tab-card {
|
|
position: relative;
|
|
padding-bottom: 12rpx;
|
|
.tab-text {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
line-height: 40rpx;
|
|
}
|
|
.tab-card-price-img {
|
|
width: 13rpx;
|
|
height: 18rpx;
|
|
}
|
|
.active {
|
|
color: #FF4767;
|
|
}
|
|
.tab-active-indicator {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 32rpx;
|
|
height: 6rpx;
|
|
background: linear-gradient(107deg, #f84c63 0%, #FF4767 100%);
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 分类弹框 */
|
|
.time-filter-popup {
|
|
width: 710rpx;
|
|
background-color: #fff;
|
|
opacity: 0;
|
|
height: 0;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 77rpx;
|
|
left: -30rpx;
|
|
|
|
&.show {
|
|
height: auto;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.time-filter-popup-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 20rpx 15rpx; /* 调小左右边距 */
|
|
gap: 20rpx 20rpx; /* 改小间距 */
|
|
.time-filter-popup-tab {
|
|
width: 155rpx;
|
|
height: 60rpx;
|
|
background: #f6f4f5;
|
|
border-radius: 10rpx;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.25s ease;
|
|
}
|
|
.active {
|
|
background: #ffecf0;
|
|
color: #FF4767;
|
|
font-weight: 500;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.popup-big-btns {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 30rpx;
|
|
padding: 20rpx 30rpx 30rpx 30rpx;
|
|
background: #fff;
|
|
|
|
.btn-reset,
|
|
.btn-confirm {
|
|
flex: 1;
|
|
width: 350rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
border-radius: 10rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-reset {
|
|
color: #333;
|
|
background: #f6f4f5;
|
|
}
|
|
|
|
.btn-confirm {
|
|
color: #fff;
|
|
background: #ff3344;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popMsk {
|
|
position: fixed;
|
|
top: 0;
|
|
left: -20rpx;
|
|
right: -20rpx;
|
|
bottom: 0;
|
|
background: transparent;
|
|
z-index: 400;
|
|
}
|
|
</style>
|