wxapp_shuibei/pages/goods_cate/goods_cate.vue

<template>
  <view class='productSort'>
    <view class='header acea-row row-center-wrapper'>
      <view class='acea-row row-between-wrapper input'>
        <text class='iconfont icon-sousuo'></text>
        <input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search' name="search"
               placeholder-class='placeholder' @focus="searchSubmitValue"/>
      </view>
    </view>
    <view class='aside' :style="{bottom: tabbarH + 'px',height: height + 'rpx'}">
      <scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;">
        <view class='item acea-row row-center-wrapper'
              :class='index==navActive?"on":""'
              v-for="(item,index) in productList"
              :key="index"
              @click='tap(index,"b"+index)'>
          <text>{{item.name}}</text>
        </view>
      </scroll-view>
    </view>
    <view class='conter'>
      <scroll-view scroll-y="true"
                   :scroll-into-view="toView"
                   :style='"height:"+height+"rpx;margin-top: 96rpx;"'
                   @scroll="scroll"
                   scroll-with-animation='true'>
        <view v-for="(item,index) in productList" :key="index">
          <view class='listw' :id="'b'+index">
            <view class='title acea-row row-center-wrapper'>
              <view class='line'></view>
              <view class='name'>{{item.name}}</view>
              <view class='line'></view>
            </view>
            <view class='list acea-row'>
              <view v-for="(itemn,indexn) in item.child" :key="indexn">
                <navigator hover-class='none'
                           :url='"/pages/goods/goods_search/index?cid="+itemn.id+"&title="+itemn.name'
                           class='item acea-row row-column row-middle'>
                  <view class='name line1'>{{itemn.name}}</view>
                </navigator>
              </view>
            </view>
          </view>
        </view>
        <view :style='"height:"+(height-300)+"rpx;"' v-if="number<15"></view>
      </scroll-view>
    </view>
    
    <!-- 自定义 tabBar -->
    <customTabBar :current="1" :showBackTop="false" />
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { productCategory } from '@/api/merchant.js';
import customTabBar from "@/components/customTabBar/index.vue";

// 响应式数据
const productList = ref([]);
const navActive = ref(0);
const number = ref("");
const height = ref(0);
const hightArr = ref([]);
const toView = ref("");
const tabbarH = ref(0);
const query = ref({})

// 获取分类列表
const getAllCategory = async () => {
  try {
    let obj = {
      type: 1,
      status: 1
    }
    const { data }= await productCategory(obj);
    const newArr = []
    data.forEach((value, index) => {
      if(value.name === '折扣券') return
      newArr[index] = value
      if (value.child) newArr[index].child = value.child.filter(item => item.status === true)
    })
    let listArr = newArr.filter(item => item.code !== 'bb_mall')
    productList.value = listArr.sort((a, b) => a.sort - b.sort);
    if(query.value.id){
      const index = productList.value.findIndex(item => item.id === query.value.id);
      tap(index,query.value.id)
    }
    // 使用 nextTick 确保 DOM 已更新
    nextTick(() => {
      setTimeout(() => {
        infoScroll();
      }, 500);
    });
  } catch (error) {
    console.error('获取分类列表失败:', error);
    uni.showToast({ title: '加载分类失败' });
  }
};

// 计算滚动相关数据
const infoScroll = () => {
  let len = productList.value.length;
  let child = productList.value[len - 1] && productList.value[len - 1].child
      ? productList.value[len - 1].child
      : [];
  number.value = child ? child.length : 0;

  // 设置商品列表高度
  uni.getSystemInfo({
    success: (res) => {
      height.value = (res.windowHeight) * (750 / res.windowWidth) - 188;
    },
  });

  let heightTemp = 0;
  let hightArrTemp = [];

  for (let i = 0; i < len; i++) {
    // 获取元素所在位置
    let query = uni.createSelectorQuery();
    let idView = "#b" + i;
    query.select(idView).boundingClientRect();
    query.exec((res) => {
      if (res && res[0]) {
        let top = res[0].top;
        hightArrTemp.push(top);
        hightArr.value = hightArrTemp;
        console.log('hightArr.value')
        console.log(hightArr.value)
      }
    });
  }
};

// 点击左侧导航
const tap = (index, id) => {
  toView.value = id;
  navActive.value = index;
};

// 右侧滚动事件
const scroll = (e) => {
  let scrollTop = e.detail.scrollTop;
  let scrollArr = hightArr.value;

  if (!scrollArr || scrollArr.length === 0) return;

  for (let i = 0; i < scrollArr.length; i++) {
    if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
      navActive.value = 0;
    } else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[0]) {
      navActive.value = i;
    } else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
      navActive.value = scrollArr.length - 1;
    }
  }
};

// 搜索提交
const searchSubmitValue = (e) => {
  const searchValue = e.detail.value?.trim();

  // if (!searchValue) {
  //   return uni.showToast({ title: '请填写要搜索的产品信息' });
  // }

  // if (searchValue.length > 0) {
    uni.navigateTo({
      url: '/pages/goods/goods_search/index?keyword=' + searchValue
    });
  // }
};

// 页面加载
onShow(() => {
  const params = uni.getStorageSync('goods_cate');
  uni.removeStorageSync('goods_cate');
  query.value = params;
  getAllCategory();
});

// 页面显示
onShow(() => {
  // 隐藏原生 tabBar
  uni.hideTabBar();
});
</script>

<style scoped lang="scss">
.productSort .header {
  width: 100%;
  height: 96rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  border-bottom: 1rpx solid #f5f5f5;
}

.productSort .header .input {
  width: 700rpx;
  height: 88rpx;
  background-color: #f5f5f5;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 0 25rpx;
}

.productSort .header .input .iconfont {
  font-size: 26rpx;
  color: #555;
}

.productSort .header .input .placeholder {
  color: #999;
}

.productSort .header .input input {
  font-size: 26rpx;
  height: 100%;
  width: 597rpx;
}

.productSort .aside {
  position: absolute;
  width: 180rpx;
  left: 0;
  top:0;
  background-color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
  height: auto;
  margin-top: 116rpx;
  border-radius: 16rpx;
}

.productSort .aside .item {
  height: 100rpx;
  width: 100%;
  font-size: 26rpx;
  color: #424242;
}

.productSort .aside .item.on {
  background-color: #fff;
  border-left: 6rpx solid #F8C008;
  width: 100%;
  text-align: center;
  color: #F8C008;
  font-weight: bold;
}

.productSort .conter {
  margin: 116rpx 0 0 200rpx;
  padding: 0 14rpx;
  background-color: #fff;
  border-radius: 16rpx;
}

.productSort .conter .listw {
  padding-top: 20rpx;
}

.productSort .conter .listw .title {
  height: 90rpx;
}

.productSort .conter .listw .title .line {
  width: 100rpx;
  height: 2rpx;
  background-color: #f0f0f0;
}

.productSort .conter .listw .title .name {
  font-size: 28rpx;
  color: #333;
  margin: 0 30rpx;
  font-weight: bold;
}

.productSort .conter .list {
  flex-wrap: wrap;
}

.productSort .conter .list .item {
  width: 177rpx;
  margin-top: 26rpx;
}

.productSort .conter .list .item .picture {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.productSort .conter .list .item .picture image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  div{
    background-color: #f7f7f7;
  }
}

.productSort .conter .list .item .name {
  font-size: 24rpx;
  color: #333;
  height: 56rpx;
  line-height: 56rpx;
  width: 120rpx;
  text-align: center;
}
</style>