fish_app/src/pages/indexSub/seckillIndex/index.jsx

import { Component } from "react";
import { View, Image } from "@tarojs/components";
import "./index.less";
import Taro from "@tarojs/taro";
import ProductList from "../../../components/index/ProductList";
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: "", // 页面标题
    id: "", // 页面类型id
    productList: [], //推荐商品列表
    page: 1, //页数
    loading: false, //加载状态
    totalPages: 1, // 添加总页数
    isNoMore: false, // 是否没有更多
    isDirect: false, // 是否直接跳转
    isBanner: false, // 是否是banner跳转
    isShare: false, // 是否是分享跳转
    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 || "";
    let session_key = Taro.getStorageSync("session_key");
    this.setState(
      {
        isDirect: isDirect || false,
        isBanner: isBanner || false,
        isShare: isShare === "true" || false,
        shareUserId: shareUserId || "",
        title: title || "",
        id: id || "",
        isShowBack: isShowBack === "true" || false,
      },
      () => {
        // 设置页面标题
        Taro.setNavigationBarTitle({
          title: this.state.title || "鱼市",
        });
        if (isShare) {
          Taro.hideHomeButton(); //隐藏返回首页
        }
        handleLog({
          event_type: isDirect
            ? `direct_to_${this.state.id}_${this.state.title}`
            : isBanner
            ? `banner_to_${this.state.id}_${this.state.title}`
            : isShare
            ? `share_to_${this.state.id}_${this.state.title}`
            : `direct_to_${this.state.id}_${this.state.title}`,
          event_type_title: isDirect
            ? `直接点击进入${this.state.title}`
            : isBanner
            ? `从banner 跳转到${this.state.title}`
            : isShare
            ? `从分享链接跳转到${this.state.title}`
            : `直接点击进入${this.state.title}`,
          goods_id: 0,
          shareUserId: this.state.shareUserId,
        });
        this.getFishMarketTags(); //获取标签
        // 获取分享跳转标识
        shareJump &&
          Taro.setStorage({
            key: "shareJump",
            data: shareJump,
          });
        shareType &&
          Taro.setStorage({
            key: "shareType",
            data: shareType,
          });
        if (session_key && shareJump) {
          this.bindShareJump(); //绑定分享跳转标识
        }
      }
    );
  }
  // 获取标签
  getFishMarketTags = async () => {
    let res = await getFishMarketTags({
      tag_id: this.state.id,
    });
    res = res.map((item, index) => ({
      title: item.tab_name
    }));
    this.setState({ tabList: res }, () => {
      this.getRecommendProductList(); //获取商品
    });
  };
  // 获取推荐商品列表
  getRecommendProductList = async (isRefresh = false) => {
    const { page } = this.state;
    this.setState({ loading: true });

    const res = await getRecommendProductList({
      tag_id: this.state.id,
      page,
      page_size: 10,
      tag_name: this.state.tabList[this.state.current].title,
    });

    this.setState((prevState) => ({
      productList: isRefresh
        ? res.goods_list
        : [...prevState.productList, ...res.goods_list],
      totalPages: res.total_pages,
      loading: false,
      isNoMore: res.total_pages <= page,
      img: res.img,
    }));
  };
  // 绑定分享跳转标识
  bindShareJump = async () => {
    let shareJump = Taro.getStorageSync("shareJump");
    await bindShareJump({
      share_type: 3,
      share_unique_value: shareJump,
    });
    Taro.removeStorageSync("shareJump");
    Taro.removeStorageSync("shareType");
  };
  // 点击标签页
  handleClick(value) {
    if (this.state.current == value) return;
    this.setState(
      {
        current: value,
        page: 1,
        productList: [],
      },
      () => {
        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 = "";
    if (Taro.getStorageSync("loginInfo")) {
      shareUserId = Taro.getStorageSync("loginInfo").id;
    }
    if (res.from == "menu") {
      return getShareJump({
        share_type: 3,
        share_id: this.state.id,
      }).then((res) => {
        return {
          title: `${this.state.title}`,
          path: `/pages/indexSub/seckillIndex/index?isShare=true&shareUserId=${shareUserId}&title=${this.state.title}&id=${this.state.id}&&shareJump=${res.share_unique_value}&&shareType=3&&isShowBack=true`,
          imageUrl: "",
        };
      });
    } else {
      return getShareContent();
    }
  }
  // 页面上拉触底
  onReachBottom = () => {
    const { page, totalPages, loading } = this.state;
    if (page < totalPages && !loading) {
      this.setState(
        (prevState) => ({ page: prevState.page + 1 }),
        () => this.getRecommendProductList()
      );
    }
  };
  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}
            loading={this.state.loading}
            isNoMore={this.state.isNoMore}
            shareUserId={this.state.shareUserId}
            tagTitle={this.state.title}
            isShare={this.state.isShare}
            isShowBack={this.state.isShowBack}
          />
        </View>
      </View>
    );
  }
}