商品列表

hdApp/src/admin/goods/add.vue

@@ -52,10 +52,10 @@
         </tui-list-cell>
 
         <tui-list-cell class="line-cell" :hover="false">
-          <view class="tui-title">价格类型</view>
+          <view class="tui-title">存放位置</view>
           <view class="btn-group">
-            <button class="admin-button-com middle" :class="[form.priceType === '0' ? '' : 'default']" @click="setPriceType('0')">没价格</button>
-            <button class="admin-button-com middle" :class="[form.priceType === '1' ? '' : 'default']" @click="setPriceType('1')">有价格</button>
+            <button class="admin-button-com middle" :class="[form.priceType === '0' ? '' : 'default']" @click="setPriceType('0')">相册</button>
+            <button class="admin-button-com middle" :class="[form.priceType === '1' ? '' : 'default']" @click="setPriceType('1')">商城</button>
           </view>
         </tui-list-cell>
 

hdApp/src/admin/goods/detail.vue

@@ -56,10 +56,10 @@
         </tui-list-cell>
 
         <tui-list-cell class="line-cell" :hover="false">
-          <view class="tui-title">价格类型</view>
+          <view class="tui-title">存放位置</view>
           <view class="btn-group">
-            <button class="admin-button-com middle" :class="[form.priceType === '0' ? '' : 'default']" @click="setPriceType('0')">没价格</button>
-            <button class="admin-button-com middle" :class="[form.priceType === '1' ? '' : 'default']" @click="setPriceType('1')">有价格</button>
+            <button class="admin-button-com middle" :class="[form.priceType === '0' ? '' : 'default']" @click="setPriceType('0')">相册</button>
+            <button class="admin-button-com middle" :class="[form.priceType === '1' ? '' : 'default']" @click="setPriceType('1')">商城</button>
           </view>
         </tui-list-cell>
 

hdApp/src/admin/goods/list.vue

@@ -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;
 }