|
|
@@ -1,5 +1,41 @@
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
+
|
|
|
+ <view class="modern-tabs-container">
|
|
|
+ <view class="modern-tabs">
|
|
|
+ <view
|
|
|
+ class="modern-tab"
|
|
|
+ :class="{ 'active': priceType === 0 }"
|
|
|
+ @click="switchPriceTab(0)"
|
|
|
+ >
|
|
|
+ <view class="tab-content">
|
|
|
+ <text class="tab-icon">🏷️</text>
|
|
|
+ <text class="tab-text">相册</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="modern-tab"
|
|
|
+ :class="{ 'active': priceType === 1 }"
|
|
|
+ @click="switchPriceTab(1)"
|
|
|
+ >
|
|
|
+ <view class="tab-content">
|
|
|
+ <text class="tab-icon">💰</text>
|
|
|
+ <text class="tab-text">商城</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="modern-tab"
|
|
|
+ :class="{ 'active': priceType === -1 }"
|
|
|
+ @click="switchPriceTab(-1)"
|
|
|
+ >
|
|
|
+ <view class="tab-content">
|
|
|
+ <text class="tab-icon">📋</text>
|
|
|
+ <text class="tab-text">全部</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<view class="input-wrap" >
|
|
|
<view class="search-bar">
|
|
|
<app-search-module v-model="searchText" placeholder="输入名称" @input="searchFn" />
|
|
|
@@ -79,21 +115,7 @@
|
|
|
<view class="filter-panel" @click.stop>
|
|
|
<view class="filter-header">筛选商品</view>
|
|
|
|
|
|
- <!-- 价格筛选 -->
|
|
|
- <view class="filter-section">
|
|
|
- <view class="filter-title">价格</view>
|
|
|
- <view class="filter-options">
|
|
|
- <view
|
|
|
- v-for="(item, index) in priceOptions"
|
|
|
- :key="index"
|
|
|
- class="filter-option"
|
|
|
- :class="{ 'active': priceType == item.value }"
|
|
|
- @click="selectPrice(item.value)"
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <!-- 价格筛选已移至顶部标签页 -->
|
|
|
|
|
|
<!-- 库存筛选 -->
|
|
|
<view class="filter-section">
|
|
|
@@ -161,14 +183,10 @@ export default {
|
|
|
searchTimer: null, // 搜索防抖定时器
|
|
|
riseData: {}, // 价格上涨配置
|
|
|
hasStock:-1, // 0没库存 1有库存
|
|
|
- priceType:-1, // 0 没价格，1 有价格
|
|
|
+ priceType:0, // 0 没价格，1 有价格
|
|
|
// 新增筛选相关数据
|
|
|
showFilterPanel: false,
|
|
|
- // 筛选选项配置
|
|
|
- priceOptions: [
|
|
|
- { label: '有价格', value: 1 },
|
|
|
- { label: '没价格', value: 0 }
|
|
|
- ],
|
|
|
+ // 价格筛选已移至顶部标签页
|
|
|
stockOptions: [
|
|
|
{ label: '有库存', value: 1 },
|
|
|
{ label: '无库存', value: 0 }
|
|
|
@@ -189,7 +207,7 @@ export default {
|
|
|
computed: {
|
|
|
// 检查是否有活跃的筛选条件
|
|
|
hasActiveFilters() {
|
|
|
- return this.priceType != -1 || this.flowerNum != 0 || this.hasStock!=-1
|
|
|
+ return this.flowerNum != 0 || this.hasStock!=-1
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -227,6 +245,16 @@ export default {
|
|
|
selectPrice(value) {
|
|
|
this.priceType = value
|
|
|
},
|
|
|
+
|
|
|
+ // 切换价格筛选标签
|
|
|
+ switchPriceTab(value) {
|
|
|
+ if (this.priceType === value) return;
|
|
|
+
|
|
|
+ this.priceType = value;
|
|
|
+ this.resetList();
|
|
|
+ this.getGoodsList();
|
|
|
+ },
|
|
|
+
|
|
|
selectStock(value) {
|
|
|
this.hasStock = value
|
|
|
},
|
|
|
@@ -236,7 +264,6 @@ export default {
|
|
|
clearFilters() {
|
|
|
|
|
|
// 清空后立即更新筛选变量
|
|
|
- this.priceType = -1;
|
|
|
this.hasStock = -1;
|
|
|
this.flowerNum = 0;
|
|
|
|
|
|
@@ -362,6 +389,78 @@ export default {
|
|
|
min-height: calc(100vh - 80upx);
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
+
|
|
|
+/* 现代化标签样式 */
|
|
|
+.modern-tabs-container {
|
|
|
+ padding: 0upx 0 20upx;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.modern-tabs {
|
|
|
+ display: flex;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16upx;
|
|
|
+ padding: 8upx;
|
|
|
+ box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
|
|
|
+ position: relative;
|
|
|
+ z-index: 5;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.modern-tab {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20upx 0;
|
|
|
+ position: relative;
|
|
|
+ transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
|
|
|
+ border-radius: 12upx;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ .tab-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-icon {
|
|
|
+ font-size: 36upx;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-text {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background-color: #e6f7ef;
|
|
|
+ transform: translateY(-2upx);
|
|
|
+
|
|
|
+ .tab-text {
|
|
|
+ color: #09C567;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 4upx;
|
|
|
+ background: linear-gradient(to right, #09C567, #52c41a);
|
|
|
+ border-radius: 0 0 8upx 8upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.96);
|
|
|
+ }
|
|
|
+}
|
|
|
page {
|
|
|
background: #fff;
|
|
|
}
|
