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,
} from "../../../service";
import { handleLog } from "../../../common/track";
import { getShareContent } from "../../../common/share";
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, // 是否显示返回
  };
  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.getRecommendProductList();
        // 获取分享跳转标识
        shareJump &&
          Taro.setStorage({
            key: "shareJump",
            data: shareJump,
          });
        shareType &&
          Taro.setStorage({
            key: "shareType",
            data: shareType,
          });
        if (session_key && shareJump) {
          this.bindShareJump(); //绑定分享跳转标识
        }
      }
    );
  }
  // 获取推荐商品列表
  getRecommendProductList = async () => {
    const { page } = this.state;
    this.setState({ loading: true });

    const res = await getRecommendProductList({
      tag_id: this.state.id,
      page,
      page_size: 10,
    });

    this.setState((prevState) => ({
      productList: [...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");
  };
  // 配置分享内容
  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() {
    return (
      <View className="index">
        <Image className="seckill" src={this.state.img} mode="widthFix" />
        {/* 商品列表 */}
        <View className="product-list">
          <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>
    );
  }
}