|
|
@@ -1,15 +1,51 @@
|
|
|
<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" />
|
|
|
</view>
|
|
|
- <view style="padding-left:10upx;" class="button-group">
|
|
|
- <button class="admin-button-com middle blue filter-btn" style="margin-right:8upx;" @click.stop="openFilterPanel">
|
|
|
+ <view style="padding-left:10upx; display:flex; flex-wrap:nowrap;" class="button-group">
|
|
|
+ <button class="admin-button-com middle blue filter-btn" style="margin-right:10upx; width:150upx;" @click.stop="openFilterPanel">
|
|
|
筛选
|
|
|
<text v-if="hasActiveFilters" class="filter-dot"></text>
|
|
|
</button>
|
|
|
- <button class="admin-button-com middle blue" @click="addGoods()">新增</button>
|
|
|
+ <button class="admin-button-com middle blue" style="width:150upx;" @click="addGoods()">新增</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="app-middle">
|
|
|
@@ -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': selectedPrice === item.value }"
|
|
|
- @click="selectPrice(item.value)"
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <!-- 价格筛选已移至顶部标签页 -->
|
|
|
|
|
|
<!-- 库存筛选 -->
|
|
|
<view class="filter-section">
|
|
|
@@ -103,7 +125,7 @@
|
|
|
v-for="(item, index) in stockOptions"
|
|
|
:key="index"
|
|
|
class="filter-option"
|
|
|
- :class="{ 'active': selectedStock === item.value }"
|
|
|
+ :class="{ 'active': hasStock === item.value }"
|
|
|
@click="selectStock(item.value)"
|
|
|
>
|
|
|
{{ item.label }}
|
|
|
@@ -119,7 +141,7 @@
|
|
|
v-for="(item, index) in flowerNumOptions"
|
|
|
:key="index"
|
|
|
class="filter-option"
|
|
|
- :class="{ 'active': selectedFlowerNum === item.value }"
|
|
|
+ :class="{ 'active': flowerNum === item.value }"
|
|
|
@click="selectFlowerNum(item.value)"
|
|
|
>
|
|
|
{{ item.label }}
|
|
|
@@ -161,17 +183,10 @@ export default {
|
|
|
searchTimer: null, // 搜索防抖定时器
|
|
|
riseData: {}, // 价格上涨配置
|
|
|
hasStock:-1, // 0没库存 1有库存
|
|
|
- priceType:-1, // 0 没价格,1 有价格
|
|
|
+ priceType:0, // 0 没价格,1 有价格
|
|
|
// 新增筛选相关数据
|
|
|
showFilterPanel: false,
|
|
|
- selectedPrice: null, // 选中的价格筛选
|
|
|
- selectedStock: null, // 选中的库存筛选
|
|
|
- selectedFlowerNum: null, // 选中的支数筛选
|
|
|
- // 筛选选项配置
|
|
|
- priceOptions: [
|
|
|
- { label: '有价格', value: 1 },
|
|
|
- { label: '没价格', value: 0 }
|
|
|
- ],
|
|
|
+ // 价格筛选已移至顶部标签页
|
|
|
stockOptions: [
|
|
|
{ label: '有库存', value: 1 },
|
|
|
{ label: '无库存', value: 0 }
|
|
|
@@ -192,7 +207,7 @@ export default {
|
|
|
computed: {
|
|
|
// 检查是否有活跃的筛选条件
|
|
|
hasActiveFilters() {
|
|
|
- return this.selectedPrice !== null || this.selectedStock !== null || this.selectedFlowerNum !== null;
|
|
|
+ return this.flowerNum != 0 || this.hasStock!=-1
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -227,26 +242,28 @@ export default {
|
|
|
closeFilterPanel() {
|
|
|
this.showFilterPanel = false;
|
|
|
},
|
|
|
-
|
|
|
selectPrice(value) {
|
|
|
- this.selectedPrice = this.selectedPrice === value ? null : value;
|
|
|
+ this.priceType = value
|
|
|
},
|
|
|
|
|
|
- selectStock(value) {
|
|
|
- this.selectedStock = this.selectedStock === value ? null : value;
|
|
|
+ // 切换价格筛选标签
|
|
|
+ switchPriceTab(value) {
|
|
|
+ if (this.priceType === value) return;
|
|
|
+
|
|
|
+ this.priceType = value;
|
|
|
+ this.resetList();
|
|
|
+ this.getGoodsList();
|
|
|
},
|
|
|
|
|
|
+ selectStock(value) {
|
|
|
+ this.hasStock = value
|
|
|
+ },
|
|
|
selectFlowerNum(value) {
|
|
|
- this.selectedFlowerNum = this.selectedFlowerNum === value ? null : value;
|
|
|
+ this.flowerNum = value
|
|
|
},
|
|
|
-
|
|
|
clearFilters() {
|
|
|
- this.selectedPrice = null;
|
|
|
- this.selectedStock = null;
|
|
|
- this.selectedFlowerNum = null;
|
|
|
-
|
|
|
+
|
|
|
// 清空后立即更新筛选变量
|
|
|
- this.priceType = -1;
|
|
|
this.hasStock = -1;
|
|
|
this.flowerNum = 0;
|
|
|
|
|
|
@@ -257,16 +274,9 @@ export default {
|
|
|
this.resetList();
|
|
|
this.getGoodsList();
|
|
|
},
|
|
|
-
|
|
|
confirmFilters() {
|
|
|
- // 更新原有的筛选变量以保持兼容性
|
|
|
- this.priceType = this.selectedPrice || 0;
|
|
|
- this.hasStock = this.selectedStock || 0;
|
|
|
- this.flowerNum = this.selectedFlowerNum || 0;
|
|
|
-
|
|
|
// 关闭筛选面板
|
|
|
this.closeFilterPanel();
|
|
|
-
|
|
|
// 重新加载数据
|
|
|
this.resetList();
|
|
|
this.getGoodsList();
|
|
|
@@ -379,6 +389,74 @@ 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: 40upx;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active .tab-icon {
|
|
|
+ filter: brightness(1.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-text {
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #666;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background-color: #09C567;
|
|
|
+ transform: translateY(-2upx);
|
|
|
+
|
|
|
+ .tab-text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 32upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底边框已移除 */
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.96);
|
|
|
+ }
|
|
|
+}
|
|
|
page {
|
|
|
background: #fff;
|
|
|
}
|
|
|
@@ -558,7 +636,7 @@ page {
|
|
|
right: 5upx;
|
|
|
width: 12upx;
|
|
|
height: 12upx;
|
|
|
- background-color: #ff4757;
|
|
|
+ background-color: white;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
}
|