front-end/hdApp/src/admin/goods/list.vue

<template>
  <view class="app-content">
		<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">
          筛选
          <text v-if="hasActiveFilters" class="filter-dot"></text>
        </button>
        <button class="admin-button-com middle blue" @click="addGoods()">新增</button>
			</view>
		</view>
    <view class="app-middle">
      <scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
        <view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichTab($event ,item)" >
          <text>{{item.categoryName || ''}}</text>
        </view>
      </scroll-view>
      <block v-for="(item,index) in tabbar" :key="index">
        <scroll-view scroll-y class="right-box" v-if="currentTab==index" @scrolltolower="goBottom">
          <block v-if="!$util.isEmpty(list.data)">
            <view class="page-view">
              <view class="goods-list" v-for="(goodsItem, idx) in list.data" :key="idx">
                <view class="goods-list-top" @click="edit(goodsItem.id)">
                  <view class="img-blo">
                    <view v-if="goodsItem.stock <= 0 || goodsItem.status == 0" class="sold-out">
                      <view class="sold-out-xj">
                        已下架
                        <view v-if="goodsItem.stock != 0 && goodsItem.status == 0">(商城隐藏)</view>
                      </view>
                    </view>
                    <img :src="goodsItem.smallCover" mode="aspectFit" />
                  </view>
                  <view class="goods-det">
                    <view class="goods-det-top" style="margin-bottom:4upx;">
                      <view class="goods-name" style="font-size:29upx;font-weight:bold;	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:350upx;">{{ goodsItem.name||'' }}</view>
                    </view>
                    <view class="operate-wrap" style="margin-bottom:15upx;">
                      <view class="goods-price" style="font-size:26upx;" v-if="goodsItem.priceType == 1">￥{{ goodsItem.price?parseFloat(goodsItem.price):0 }}</view>
                      <view class="goods-price" style="font-size:26upx;" v-else>---</view>
                    </view>
                    <view class="operate-wrap">
                      <view style="font-size:23upx;">
                        <text>库存</text> <text style="font-weight:bold;margin-left:8upx;">{{goodsItem.stock}}</text>
                        <text style="margin-left:18upx;color:#CCCCCC;">已售 {{ goodsItem.actualSold }}</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="goods-list-bottom flex-center-between">
                  <text @click.stop="moreToDo(goodsItem)">更多</text>
                  <text @click.stop="getStockChange(goodsItem)">库存明细</text>
                  <text @click.stop="editDesc(goodsItem)">编辑简介</text>
                </view>
              </view>
            </view>
          </block>
          <block v-else>
            <app-wrapper-empty title="暂无商品" :is-empty="$util.isEmpty(list.data)" />
          </block>
        </scroll-view>
      </block>
    </view>

    <!-- 筛选下拉面板 -->
    <view v-if="showFilterPanel" class="filter-overlay" @click="closeFilterPanel">
      <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">
          <view class="filter-title">库存</view>
          <view class="filter-options">
            <view 
              v-for="(item, index) in stockOptions" 
              :key="index"
              class="filter-option"
              :class="{ 'active': selectedStock === item.value }"
              @click="selectStock(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>

        <!-- 支数筛选 -->
        <view class="filter-section">
          <view class="filter-title">支数</view>
          <view class="filter-options">
            <view 
              v-for="(item, index) in flowerNumOptions" 
              :key="index"
              class="filter-option"
              :class="{ 'active': selectedFlowerNum === item.value }"
              @click="selectFlowerNum(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="filter-actions">
          <button class="filter-action-btn clear-btn middle" @click="clearFilters">清空</button>
          <button class="filter-action-btn confirm-btn  middle blue" @click="confirmFilters">确定</button>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
import AppSearchModule from "@/components/module/app-search"
import AppWrapperEmpty from "@/components/app-wrapper-empty"
import {categoryListInfo,getCategoryToGoods,print} from "@/api/goods"
import { list } from "@/mixins"
export default {
  name: "list",
  components: {
    AppWrapperEmpty,
    AppSearchModule
  },
  mixins: [list],
  data() {
    return {
      tabbar: [],
      currentTab: 0,
      scrollTop: 0,
      catId: "",
      flowerNum:0,
      searchText:'',
      lookStock:0, // 1:有库存 2:无库存
      lookPrice:0, // 1:有价格 2:无价格
      // 新增筛选相关数据
      showFilterPanel: false,
      selectedPrice: null,  // 选中的价格筛选
      selectedStock: null,  // 选中的库存筛选
      selectedFlowerNum: null,  // 选中的支数筛选
      // 筛选选项配置
      priceOptions: [
        { label: '有价格', value: 1 },
        { label: '无价格', value: 2 }
      ],
      stockOptions: [
        { label: '有库存', value: 1 },
        { label: '无库存', value: 2 }
      ],
      flowerNumOptions: [
        { label: '6支', value: 6 },
        { label: '9支', value: 9 },
        { label: '11支', value: 11 },
        { label: '19支', value: 19 },
        { label: '33支', value: 33 },
        { label: '52支', value: 52 },
        { label: '66支', value: 66 },
        { label: '99支', value: 99 }
      ]
    };
  },

  computed: {
    // 检查是否有活跃的筛选条件
    hasActiveFilters() {
      return this.selectedPrice !== null || this.selectedStock !== null || this.selectedFlowerNum !== null;
    }
  },

  onShow() {
    // 检查是否需要刷新数据
    const shouldRefresh = uni.getStorageSync('goods_list_refresh');
    if (shouldRefresh) {
      uni.removeStorageSync('goods_list_refresh');
      this.resetList();
      this.getGoodsList();
    }
  },

  methods: {
    init(){
      this.getCategoryData()
    },
    
    // 新的筛选相关方法
    openFilterPanel() {
      this.showFilterPanel = true;
    },
    
    closeFilterPanel() {
      this.showFilterPanel = false;
    },
    
    selectPrice(value) {
      this.selectedPrice = this.selectedPrice === value ? null : value;
    },
    
    selectStock(value) {
      this.selectedStock = this.selectedStock === value ? null : value;
    },
    
    selectFlowerNum(value) {
      this.selectedFlowerNum = this.selectedFlowerNum === value ? null : value;
    },
    
    clearFilters() {
      this.selectedPrice = null;
      this.selectedStock = null;
      this.selectedFlowerNum = null;
      
      // 清空后立即更新筛选变量
      this.lookPrice = 0;
      this.lookStock = 0;
      this.flowerNum = 0;
      
      // 关闭筛选面板
      this.closeFilterPanel();
      
      // 触发搜索
      this.resetList();
      this.getGoodsList();
    },
    
    confirmFilters() {
      // 更新原有的筛选变量以保持兼容性
      this.lookPrice = this.selectedPrice || 0;
      this.lookStock = this.selectedStock || 0;
      this.flowerNum = this.selectedFlowerNum || 0;
      
      // 关闭筛选面板
      this.closeFilterPanel();
      
      // 重新加载数据
      this.resetList();
      this.getGoodsList();
    },

    // 保留原有方法以保持兼容性（暂时保留）
		// 兼容保留：旧筛选弹窗相关方法已不再使用
		moreToDo(item){
			let that=this;
			let doList = ['打1个标签', '打2个标签','打5个标签', '打10个标签', '销售记录', '设置为散花']
			let doNum = [1,2,5,10,20]
			uni.showActionSheet({
				itemList: doList,
				success: function (respond) {
					let index = respond.tapIndex
          if(index == 4){
            that.$msg('开发中')
            return
          }
          if(index == 5){
            that.$msg('开发中')
            return
          }
          let currentNum = Number(doNum[index])
          print({id:item.id,num:currentNum}).then(res=>{
            if(res.code == 1){
              that.$msg(res.msg)
            }
          })
				}
			})
		},
    getStockChange(item){
      this.$util.pageTo({url: "/admin/goods/stockChange?id="+item.id+'&name='+item.name})
    },
    editDesc(item){
      this.$util.pageTo({url: "/admin/goods/picTextAdd-Edit?gId="+item.id+'&name='+item.name})
    },
    goBottom(){
      if (!this.list.finished) {
        this.getGoodsList().then((res) => {
          uni.stopPullDownRefresh();
        });
      } else {
        uni.stopPullDownRefresh();
      }
    },
    addGoods(){
        this.$util.pageTo({url:"/admin/goods/add"})
    },
    edit(id){
        this.$util.pageTo({ url: "/admin/goods/detail", query: { id: id } })
    },
    getCategoryData() {
      categoryListInfo({flower:1}).then(res => {
        this.tabbar = res.data;
        if(this.tabbar && this.tabbar[0] && this.tabbar[0].id){
          this.catId = this.tabbar[0].id
          this.getGoodsList()
        }
      });
    },
    searchFn(){
      if (this.$util.isEmpty(this.searchText)){
        this.resetList()
        this.getGoodsList()
      }else{
        this.resetList()
        getCategoryToGoods({status:'',page:this.list.page,flower:1,searchText:this.searchText,flowerNum:this.flowerNum,lookPrice:this.lookPrice,lookStock:this.lookStock}).then(res => {
          this.completes(res)
        })
      }
    },
    getGoodsList() {
      return getCategoryToGoods({ status:'', page: this.list.page, catId:this.catId, flowerNum:this.flowerNum, lookPrice:this.lookPrice, lookStock:this.lookStock }).then(res => {
        this.completes(res)
      })
    },
    swichTab(e, item) {
      let cur = e.currentTarget.dataset.current;
      if (this.currentTab == cur) {
        return false;
      } else {
        this.currentTab = cur;
        this.catId = item.id;
        this.resetList();
        this.getGoodsList();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 80upx);
  background-color: #fff;
}
page {
  background: #fff;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.tab-view {
	height: 100vh;
  width: 200upx;
  position: fixed;
  left: 0;
  z-index: 10;
  background-color: #f0f2f6;
  padding-bottom:120upx;
  .tab-bar-item {
    width: 200upx;
    height: 100upx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26upx;
    color: #444;
    font-weight: 400;
  }
  .active {
    position: relative;
    color: $mainColor;
    font-size: 26upx;
    background: #fff;
  }
  .active::before {
    content: "";
    position: absolute;
    border-left: 8upx solid $mainColor;
    height: 100%;
    left: 0;
  }
}
.right-box {
  width: 100%;
  height:100vh;
  position: fixed;
  padding-left:220upx;
  padding-bottom:120upx;
  box-sizing: border-box;
  left: 0;
  .page-view {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    .goods-list {
      margin: 40upx 0;
      .goods-list-top {
        position: relative;
        @include disFlex(flex-start, flex-start);
      }
      .goods-list-bottom {
        width: 96%;
        margin-top: 16upx;
        color: #bebebe;
        text{
          border:1px solid rgb(218, 216, 216);
          border-radius: 20upx;
          font-size:22upx;
          padding:9upx 25upx 9upx 25upx;
        }
      }
      .img-blo {
        width: 130upx;
        height: 130upx;
        margin-right: 20upx;
        & > img {
          height: 100%;
          width: 100%;
        }

        .sold-out{
          z-index:10;
          width:130upx;
          height:130upx;
          background-color:black;
          position:absolute;
          top:0;
          left:0;
          opacity: 0.5;
          color:white;
          text-align:center;
          .sold-out-xj{
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 130upx;
            font-size:24upx;
          }
        }

      }
      .goods-det {
        width: calc(100% - 150upx);
        font-size: 28upx;
        .operate-wrap {
          @include disFlex(flex-end, space-between);
        }
        .operate-icon-wrap {
          left: -20upx;
        }
        .goods-name {
          margin-bottom: 10upx;
        }
        .goods-sales {
          color: $fontColor3;
          font-size: 24upx;
        }
        .goods-price {
          color: #ff2842;
          font-weight: bold;
        }
      }
    }
  }
}
.app-footer {
  justify-content: space-between;
  .btn-list {
    width: 100%;
    &:first-child {
      border-left: 0;
    }
    .admin-button-com {
      width: 160upx;
      padding-top: 16upx;
      padding-bottom: 16upx;
      float:right;
      margin-right:30upx;
    }
  }
  .other-btn {
    color: $fontColor2;
    .iconfont {
      font-size: 24upx;
      color: $fontColor3;
      transform: scale(0.4);
    }
  }
}
.input-wrap {
		display: flex;
		padding: 22upx 20upx 22upx 13upx;
		.search-bar {
			flex: 1;
		}
	}

/* 筛选按钮样式 */
.filter-btn {
  position: relative;
  .filter-dot {
    position: absolute;
    top: 5upx;
    right: 5upx;
    width: 12upx;
    height: 12upx;
    background-color: #ff4757;
    border-radius: 50%;
  }
}

/* 筛选面板样式 */
.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.filter-panel {
  background-color: #fff;
  border-radius: 0 0 20upx 20upx; /* 只保留下边圆角 */
  width: 100%; /* 铺满宽度 */
  max-height: 80vh;
  overflow-y: auto;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-50upx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.filter-header {
  text-align: center;
  padding: 30upx 0;
  font-size: 32upx;
  font-weight: bold;
  border-bottom: 1upx solid #f0f0f0;
  color: #333;
}

.filter-section {
  padding: 30upx 40upx;
  border-bottom: 1upx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.filter-title {
  font-size: 28upx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20upx;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20upx;
}

.filter-option {
  padding: 16upx 32upx;
  border: 2upx solid #e0e0e0;
  border-radius: 25upx;
  font-size: 26upx;
  color: #666;
  background-color: #fff;
  text-align: center;
  min-width: 120upx;
  transition: all 0.3s ease;
  
  &.active {
    border-color: #52c41a;
    background-color: #f6ffed;
    color: #52c41a;
    font-weight: 600;
  }
}

.filter-actions {
  display: flex;
  padding: 30upx 40upx;
  gap: 20upx;
}

.filter-action-btn {
  flex: 1;
  padding: 14upx 0;
  border-radius: 12upx;
  font-size: 28upx;
  border: none;
  font-weight: 600;
  
  &.clear-btn {
    background-color: #f5f5f5;
    color: #666;
  }
  
  &.confirm-btn {
    background-color: #09C567;
    color: #fff;
  }
}
</style>