专题页分类&首页tab位置修改

project.private.config.json

@@ -10,6 +10,13 @@
     "miniprogram": {
       "list": [
         {
+          "name": "pages/indexSub/seckillIndex/index",
+          "pathName": "pages/indexSub/seckillIndex/index",
+          "query": "isDirect=true&title=%E5%90%83%E5%96%9D%E7%8E%A9%E4%B9%90&id=128",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "pages/memberSub/productClassify/index",
           "pathName": "pages/memberSub/productClassify/index",
           "query": "",

src/pages/index/index.jsx

@@ -1,14 +1,6 @@
 import Taro from "@tarojs/taro"; // 导入 Taro
 import { Component } from "react";
-import {
-  View,
-  Image,
-  Swiper,
-  SwiperItem,
-  Text,
-  Button,
-  ScrollView,
-} from "@tarojs/components";
+import { View, Image, Swiper, SwiperItem, Text } from "@tarojs/components";
 import { AtTabs } from "taro-ui";
 import { getHomeData, getProductList } from "../../service";
 import { getShareContent } from "../../common/share";
@@ -30,6 +22,7 @@ export default class Index extends Component {
     page: 1, // 添加页码
     totalPages: 1, // 添加总页数
     loading: false, // 添加加载状态
+    isTabFixed: false, // 添加新的状态控制吸顶
   };
   // 获取首页数据
   getHomeData = async () => {
@@ -52,30 +45,18 @@ export default class Index extends Component {
   };
   // 修改 tab 切换处理函数
   handleClick(value) {
+    // 添加回到顶部方法
+      Taro.pageScrollTo({
+        scrollTop: 500, // 滚动到顶部位置
+        duration: 200, // 滚动动画持续时间,单位 ms
+      });
     this.setState(
       {
         current: value,
         page: 1,
       },
       () => {
-        // 跳转到列表顶部
-        Taro.createSelectorQuery()
-          .select(".product-list-wrap")
-          .boundingClientRect()
-          .exec((res) => {
-            if (res[0]) {
-              const top = res[0].top;
-              Taro.pageScrollTo({
-                scrollTop: top - 40,
-                duration: 300,
-                complete: () => {
-                  this.getProductList(true);
-                },
-              });
-            } else {
-              console.warn("未找到 .product-list-wrap 元素");
-            }
-          });
+        this.getProductList(true);
       }
     );
   }
@@ -128,12 +109,30 @@ export default class Index extends Component {
       loading: false,
     }));
   };
+  // 添加页面滚动监听方法
+  onPageScroll = (e) => {
+    const { isTabFixed } = this.state;
+    // 获取 product-list-box 到顶部的距离
+    const query = Taro.createSelectorQuery();
+    query
+      .select(".product-list-box")
+      .boundingClientRect((rect) => {
+        if (rect) {
+          // 当元素顶部接触到屏幕顶部时切换状态
+          const shouldFix = rect.top <= 0;
+          if (shouldFix !== isTabFixed) {
+            this.setState({ isTabFixed: shouldFix });
+          }
+        }
+      })
+      .exec();
+  };
   // 配置分享内容
   onShareAppMessage() {
     return getShareContent();
   }
   render() {
-    const { homeData, productList, loading } = this.state;
+    const { homeData, productList, loading, isTabFixed } = this.state;
     return (
       <View className="index">
         <View
@@ -154,21 +153,6 @@ export default class Index extends Component {
           >
             <SearchBar value="" disabled={true} placeholder="点击搜索商品" />
           </View>
-          {/* tab分类 */}
-          <View className="tabs-list">
-            {homeData.tags && (
-              <AtTabs
-                current={this.state.current}
-                scroll
-                tabList={homeData.tags}
-                onClick={this.handleClick.bind(this)}
-              />
-            )}
-
-            <View className="tab-more">
-              <Image className="tab-more-img" />
-            </View>
-          </View>
           {/* 轮播图 */}
           <View className="banner-wrap">
             <Swiper
@@ -208,7 +192,29 @@ export default class Index extends Component {
         {/* 邀请人推荐 */}
         {/* <RecommendList /> */}
         {/* 商品列表 */}
-        <View className="product-list-wrap">
+        <View className="product-list-box">
+          {/* 修改 tab 分类样式 */}
+          <View
+            style={{
+              height: isTabFixed
+                ? Taro.navigationBarHeight + 80 + "px"
+                : "22px",
+            }}
+            className={`tabs-list ${isTabFixed ? "fixed" : ""}`}
+          >
+            {homeData.tags && (
+              <AtTabs
+                current={this.state.current}
+                scroll
+                tabList={homeData.tags}
+                onClick={this.handleClick.bind(this)}
+              />
+            )}
+
+            {/* <View className="tab-more">
+              <Image className="tab-more-img" />
+            </View> */}
+          </View>
           <ProductList
             productList={productList}
             loading={loading}

src/pages/index/index.less

@@ -24,6 +24,8 @@
       width: 100%;
       display: flex;
       justify-content: center;
+      position: relative;
+      z-index: 1;
 
       .header-img {
         width: 100px;
@@ -32,78 +34,9 @@
       }
     }
 
-
-    .tabs-list {
-      box-sizing: border-box;
-      padding-left: 34px;
-      margin-top: 24px;
-      display: flex;
-      height: 40px;
-      overflow: hidden;
-      .tab-more {
-        width: 90px;
-        display: flex;
-        align-items: center;
-        padding: 0 22px 0 26px;
-        box-sizing: border-box;
-
-        .tab-more-img {
-          width: 28px;
-          height: 28px;
-        }
-      }
-
-      .at-tabs__header {
-        background-color: transparent;
-        height: 100%;
-        text-align: left;
-      }
-      .at-tabs__header::-webkit-scrollbar {
-        display: none; /* 隐藏滚动条 */
-      }
-      scroll-view ::-webkit-scrollbar {
-        appearance: none;
-        color: transparent;
-        display: none;
-        width: 0;
-        height: 0;
-      }
-      .at-tabs__item {
-        color: #000;
-        font-size: 26px;
-        padding: 0;
-        min-width: auto;
-        width: auto;
-        margin-right: 34px;
-        padding-bottom: 2px;
-        height: 100%;
-
-        &--active {
-          color: #000;
-          font-size: 28px;
-          font-weight: bold;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
-      .at-tabs__item-underline {
-        background-color: #000;
-        height: 4px;
-        border-radius: 2px;
-        bottom: 0;
-      }
-
-      .at-tabs__underline {
-        width: auto;
-      }
-    }
-
     // 轮播图
     .banner-wrap {
-      margin-top: 18px;
+      margin-top: 24px;
 
       .banner-swiper {
         height: 350px;
@@ -138,9 +71,97 @@
       }
     }
   }
+  // tab分类
+  .tabs-list {
+    box-sizing: border-box;
+    padding-left: 34px;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    background-color: #fff;
+    height: 44px;
+    &.fixed {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 100;
+      height: 180px;
+      display: flex;
+      align-items: flex-end;
+      padding-bottom: 20px;
+      .at-tabs{
+        height: 40px;
+      }
+    }
+    .tab-more {
+      width: 90px;
+      display: flex;
+      align-items: center;
+      padding: 0 22px 0 26px;
+      box-sizing: border-box;
+
+      .tab-more-img {
+        width: 28px;
+        height: 28px;
+      }
+    }
+
+    .at-tabs__header {
+      background-color: transparent;
+      height: 100%;
+      text-align: left;
+    }
+    .at-tabs__header::-webkit-scrollbar {
+      display: none; /* 隐藏滚动条 */
+    }
+    scroll-view ::-webkit-scrollbar {
+      appearance: none;
+      color: transparent;
+      display: none;
+      width: 0;
+      height: 0;
+    }
+    .at-tabs__item {
+      color: #999999;
+      font-size: 26px;
+      padding: 0;
+      min-width: auto;
+      width: auto;
+      margin-right: 34px;
+      padding-bottom: 2px;
+      height: 100%;
+
+      &--active {
+        color: #FF8119;
+        font-size: 28px;
+        font-weight: bold;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .at-tabs__item-underline {
+      background-color: #FF8119;
+      height: 4px;
+      border-radius: 2px;
+      bottom: 0;
+    }
+
+    .at-tabs__underline {
+      width: auto;
+    }
+  }
   // 商品列表
-  .product-list-wrap {
-    margin-top: 0;
+  .product-list-box {
+    padding-top: 24px;
+    margin: 21px 16px 0;
+    background: #FFFFFF;
+    border-radius: 16px;
+    .product-list-wrap{
+      margin-top: 0;
+    }
   }
   // 添加浮动按钮样式
   .float-buttons {

src/pages/indexSub/seckillIndex/index.jsx

@@ -7,9 +7,11 @@ import {
   getRecommendProductList,
   getShareJump,
   bindShareJump,
+  getFishMarketTags,
 } from "../../../service";
 import { handleLog } from "../../../common/track";
 import { getShareContent } from "../../../common/share";
+import { AtTabs } from "taro-ui";
 export default class Index extends Component {
   state = {
     title: "", // 页面标题
@@ -25,10 +27,22 @@ export default class Index extends Component {
     shareUserId: "", // 分享用户id
     img: "", // 图片
     isShowBack: false, // 是否显示返回
+    current: 0, // 当前选中的tab索引
+    tabList: [], // 标签列表
+    isTabFixed: false, // 添加新的状态来控制tab是否固定
   };
   componentDidMount() {
-    const { isDirect, isBanner, isShare, shareUserId, title, id, shareJump,shareType,isShowBack } =
-      Taro.getCurrentInstance().router.params || "";
+    const {
+      isDirect,
+      isBanner,
+      isShare,
+      shareUserId,
+      title,
+      id,
+      shareJump,
+      shareType,
+      isShowBack,
+    } = Taro.getCurrentInstance().router.params || "";
     let session_key = Taro.getStorageSync("session_key");
     this.setState(
       {
@@ -46,7 +60,7 @@ export default class Index extends Component {
           title: this.state.title || "鱼市",
         });
         if (isShare) {
-          Taro.hideHomeButton();//隐藏返回首页
+          Taro.hideHomeButton(); //隐藏返回首页
         }
         handleLog({
           event_type: isDirect
@@ -66,7 +80,7 @@ export default class Index extends Component {
           goods_id: 0,
           shareUserId: this.state.shareUserId,
         });
-        this.getRecommendProductList();
+        this.getFishMarketTags(); //获取标签
         // 获取分享跳转标识
         shareJump &&
           Taro.setStorage({
@@ -84,8 +98,18 @@ export default class Index extends Component {
       }
     );
   }
+  // 获取标签
+  getFishMarketTags = async () => {
+    let res = await getFishMarketTags();
+    res = res.map((item, index) => ({
+      title: item.name,
+    }));
+    this.setState({ tabList: res }, () => {
+      this.getRecommendProductList(); //获取商品
+    });
+  };
   // 获取推荐商品列表
-  getRecommendProductList = async () => {
+  getRecommendProductList = async (isRefresh = false) => {
     const { page } = this.state;
     this.setState({ loading: true });
 
@@ -93,10 +117,13 @@ export default class Index extends Component {
       tag_id: this.state.id,
       page,
       page_size: 10,
+      tag_name: this.state.tabList[this.state.current].title,
     });
 
     this.setState((prevState) => ({
-      productList: [...prevState.productList, ...res.goods_list],
+      productList: isRefresh
+        ? res.goods_list
+        : [...prevState.productList, ...res.goods_list],
       totalPages: res.total_pages,
       loading: false,
       isNoMore: res.total_pages <= page,
@@ -113,6 +140,41 @@ export default class Index extends Component {
     Taro.removeStorageSync("shareJump");
     Taro.removeStorageSync("shareType");
   };
+  // 点击标签页
+  handleClick(value) {
+    // 跳转到顶部
+    Taro.pageScrollTo({
+      scrollTop: 0,
+      duration: 300,
+    });
+    this.setState(
+      {
+        current: value,
+        page: 1,
+      },
+      () => {
+        this.getRecommendProductList(true);
+      }
+    );
+  }
+  // 添加页面滚动监听方法
+  onPageScroll = (e) => {
+    const { isTabFixed } = this.state;
+    // 获取 product-list-box 到顶部的距离
+    const query = Taro.createSelectorQuery();
+    query
+      .select(".product-list")
+      .boundingClientRect((rect) => {
+        if (rect) {
+          // 当元素顶部接触到屏幕顶部时切换状态
+          const shouldFix = rect.top <= 0;
+          if (shouldFix !== isTabFixed) {
+            this.setState({ isTabFixed: shouldFix });
+          }
+        }
+      })
+      .exec();
+  };
   // 配置分享内容
   onShareAppMessage(res) {
     let shareUserId = "";
@@ -145,11 +207,21 @@ export default class Index extends Component {
     }
   };
   render() {
+    const { isTabFixed } = this.state;
     return (
       <View className="index">
         <Image className="seckill" src={this.state.img} mode="widthFix" />
         {/* 商品列表 */}
         <View className="product-list">
+          {/* tabs切换 */}
+          <View className={`tabs ${isTabFixed ? "fixed" : ""}`}>
+            <AtTabs
+              scroll
+              current={this.state.current}
+              tabList={this.state.tabList}
+              onClick={this.handleClick.bind(this)}
+            ></AtTabs>
+          </View>
           <ProductList
             isSeckill={true}
             productList={this.state.productList}

src/pages/indexSub/seckillIndex/index.less

@@ -1,13 +1,61 @@
-.index{
+.index {
     width: 100%;
     padding-bottom: 40px;
     box-sizing: border-box;
     background-color: #f9f9f9;
-    .seckill{
+
+    .seckill {
         width: 100%;
         height: 300px;
     }
-    .product-list{
+    // 顶部固定
+    .tabs {
+        width: 100%;
+        background: #fff;
+        z-index: 100;
+        
+        &.fixed {
+            position: fixed;
+            top: 0;
+            left: 0;
+        }
+
+        .at-tabs__item {
+            color: #787878;
+        }
+
+        .at-tabs__item--active {
+            color: #000000 !important;
+        }
+
+        .at-tabs__item-underline {
+            background-color: #f3e801;
+        }
+
+    }
+
+    scroll-view ::-webkit-scrollbar {
+        appearance: none;
+        color: transparent;
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+    .product-list {
+        background-color: #fff;
+        margin:0 16px;
         margin-top: -196px;
+        border-radius: 16px;
+        overflow: hidden;
+        z-index: 100;
+        position: relative;
+        .product-list-wrap{
+            margin: 0;
+        }
     }
+}
+
+.tabs-placeholder {
+    height: 80px; // 设置为tabs的实际高度
 }

src/pages/memberSub/productClassify/index.jsx

@@ -21,6 +21,7 @@ export default class Index extends Component {
     tabList: [], // 所有闲鱼tags
     value: "", // 搜索
   };
+  // 点击标签页
   handleClick(value) {
     this.setState(
       {
@@ -69,6 +70,7 @@ export default class Index extends Component {
     this.setState(
       {
         tabList: res,
+        productList: [],
       },
       () => {
         this.getBrowseShopProductList(true);
@@ -81,7 +83,11 @@ export default class Index extends Component {
   };
   // 搜索
   handleSearch = () => {
-    this.getBrowseShopProductList(true);
+    this.setState({
+      page: 1,
+    },()=>{
+      this.getBrowseShopProductList(true);
+    })
   };
   // 添加商品
   onAddProduct = (productId, index) => {

src/service/index.js

@@ -50,6 +50,13 @@ export const getAllTags = data =>
     method: 'POST',
     data,
   })
+  // 获取鱼市tags
+  export const getFishMarketTags = data =>
+  Request({
+    url: '/api/get_yushi_tags',
+    method: 'POST',
+    data,
+  })
 // 获取搜索商品列表
 export const getSearchProductList = data =>
   Request({