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

import { Component } from "react";
import { View, Image, Text, ScrollView } from "@tarojs/components";
import { AtTabs, AtActivityIndicator } from "taro-ui";
import "./index.less";
import Taro from "@tarojs/taro";
import {
  getNewYearTab,
  getNewYearProductList,
} from "../../../service/activity";
import { handleLog } from "../../../common/track";
export default class Index extends Component {
  state = {
    current: 0,
    page: 1, //页数
    loading: false, //加载状态
    totalPages: 1, // 添加总页数
    tabList: [], //tab列表
    productList: [], //商品列表
    isShare: false, // 是否是分享跳转
    isShowBack: false, // 是否显示返回按钮
  };
  componentDidMount() {
    const { isShare, isShowBack, shareUserId } =
      Taro.getCurrentInstance().router.params || "";
    this.setState(
      {
        isShare: isShare || false,
        isShowBack: isShowBack || false,
        shareUserId: shareUserId || "",
      },
      () => {
        if (isShare) {
          Taro.hideHomeButton(); //隐藏返回首页
        }
        this.getTab(); //获取tab
        handleLog({
          event_type: this.state.isShare
            ? "share_to_activity"
            : "click_to_activity",
          event_type_title: this.state.isShare
            ? "从分享链接进入春节活动页"
            : "直接点击进入春节活动页",
          goods_id: 0,
        }); //埋点
      }
    );
  }
  // 获取tab
  getTab = async () => {
    const res = await getNewYearTab();
    const arr = [];
    res.forEach((item) => {
      arr.push({ title: item.title, id: item.id, name: item.name });
    });
    this.setState({ tabList: arr }, () => {
      this.getProductList(true);
    });
  };
  // 获取商品列表
  getProductList = async (isRefresh = false) => {
    const { page } = this.state;
    this.setState({ loading: true });

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

    this.setState((prevState) => ({
      productList: isRefresh
        ? res.goods_list
        : [...prevState.productList, ...res.goods_list],
      totalPages: res.total_pages,
      loading: false,
    }));
  };
  // 返回
  handleBack = () => {
    Taro.navigateBack();
  };
  // 专场点击
  siteClick = (title, index) => {
    const item = this.state.tabList.find((item) => item.name === title);
    const id = item ? item.id : "";
    Taro.navigateTo({
      url: `/pages/indexSub/seckillIndex/index?id=${id}&&title=${title}&&isShowBack=${this.state.isShowBack}&&isShare=${this.state.isShare}&&isDirect=true`,
    });
  };
  // 切换tab
  tabClick = (index) => {
    if (this.state.current == index) return;
    this.setState(
      {
        current: index,
        page: 1,
        productList: [],
        isLoading: false,
      },
      () => {
        this.getProductList(true);
      }
    );
  };
  // 商品详情
  handleProductDetail = (product) => {
    Taro.navigateTo({
      url: `/pages/indexSub/productDetail/index?id=${product.id}&&isShare=${this.state.isShare}&&isShowBack=${this.state.isShowBack}`,
    });
  };
  // 滚动到底部
  handleScrollToLower = () => {
    const { page, totalPages, loading } = this.state;
    if (page < totalPages && !loading) {
      this.setState(
        (prevState) => ({ page: prevState.page + 1 }),
        () => this.getProductList()
      );
    }
  };
  // 配置分享内容
  onShareAppMessage() {
    let shareUserId = "";
    if (Taro.getStorageSync("loginInfo")) {
      shareUserId = Taro.getStorageSync("loginInfo").id;
    }
    return {
      title: "新春活动",
      path: `/pages/indexSub/activity/index?isShare=true&&isShowBack=true&&shareUserId=${shareUserId}`,
      imageUrl: "",
    };
  }
  render() {
    return (
      <View className="index">
        {/* 返回按钮 */}
        {!this.state.isShare && (
          <Image
            onClick={this.handleBack}
            style={{ top: Taro.navigationBarHeight + "px" }}
            className="top-back"
            src="https://yushi.tos-cn-beijing.volces.com/activity/back.png"
            mode="widthFix"
          />
        )}
        {/* 顶部图片包裹盒子 */}
        <View className="top-img-wrap">
          <Image
            className="top-img"
            src="https://yushi.tos-cn-beijing.volces.com/activity/topImg.png"
            mode="widthFix"
          />
          <Image
            className="top-title-img"
            src="https://yushi.tos-cn-beijing.volces.com/activity/titleImgOne.png"
            mode="widthFix"
          />
        </View>
        {/* 专场 */}
        {this.state.tabList.length > 0 && (
          <View className="activity-wrap">
            <View className="topBox">
              <View
                className="item"
                onClick={() => {
                  this.siteClick("下午茶专场", "0");
                }}
              >
                <View className="item-title">下午茶专场</View>
                <Image
                  className="item-img"
                  src="https://yushi.tos-cn-beijing.volces.com/activity/topOne.png"
                  mode="widthFix"
                />
                <View className="item-text">点击进入</View>
              </View>
              <View
                className="item"
                onClick={() => {
                  this.siteClick("餐饮美食专场", "1");
                }}
              >
                <View className="item-title">餐饮美食专场</View>
                <Image
                  className="item-img"
                  src="https://yushi.tos-cn-beijing.volces.com/activity/topTwo.png"
                  mode="widthFix"
                />
                <View className="item-text">点击进入</View>
              </View>
            </View>
            <View className="centerBox">
              <View
                className="item"
                onClick={() => {
                  this.siteClick("酒店出行专场", "2");
                }}
              >
                <View className="item-title">酒店出行专场</View>
                <Image
                  className="item-img"
                  src="https://yushi.tos-cn-beijing.volces.com/activity/centerOne.png"
                  mode="widthFix"
                />
                <View className="item-text">点击进入</View>
              </View>
              <View
                className="item"
                onClick={() => {
                  this.siteClick("清洗服务专场", "3");
                }}
              >
                <View className="item-title">清洗服务专场</View>
                <Image
                  className="item-img"
                  src="https://yushi.tos-cn-beijing.volces.com/activity/centerTwo.png"
                  mode="widthFix"
                />
                <View className="item-text">点击进入</View>
              </View>
              <View
                className="item"
                onClick={() => {
                  this.siteClick("游玩娱乐专场", "4");
                }}
              >
                <View className="item-title">游玩娱乐专场</View>
                <Image
                  className="item-img"
                  src="https://yushi.tos-cn-beijing.volces.com/activity/centerThree.png"
                  mode="widthFix"
                />
                <View className="item-text">点击进入</View>
              </View>
            </View>
            <View className="bottomBox">
              <View
                className="item"
                onClick={() => {
                  this.siteClick("咖啡专场", "5");
                }}
              >
                <View className="item-title">咖啡专场</View>
                <Image
                  className="item-img"
                  src="https://yushi.tos-cn-beijing.volces.com/activity/bottom.png"
                  mode="widthFix"
                />
                <View className="item-text">点击进入</View>
              </View>
            </View>
          </View>
        )}
        <Image
          className="bottom-title-img"
          src="https://yushi.tos-cn-beijing.volces.com/activity/titleImgTwo.png"
          mode="widthFix"
        />
        {/* 商品列表盒子 */}
        <View className="product-list-wrap">
          {/* tab分类 */}
          <View className="tabs-list">
            <AtTabs
              current={this.state.current}
              scroll
              tabList={this.state.tabList}
              onClick={this.tabClick}
            />
          </View>
          <ScrollView
            onScrollToLower={this.handleScrollToLower}
            className="product-list"
            scrollY
          >
            <View className="product-list-container">
              {this.state.productList.map((product) => (
                <View
                  onClick={() => this.handleProductDetail(product)}
                  key={product.id}
                  className="product-list-item"
                >
                  <Image
                    className="product-img"
                    src={product.image_url}
                    mode="aspectFill"
                  />
                  <View className="product-content">
                    <Text className="product-title">{product.item_title}</Text>
                    <View className="product-price">
                      <View className="product-price-left">
                        <Text className="product-price-text">到手价</Text>
                        <Text className="product-price-text-price">
                          ¥{product.reserve_price}
                        </Text>
                      </View>
                      <View className="product-commission">
                        <Text className="product-commission-text">
                          赚¥{product.estimated_commission_promotion}
                        </Text>
                      </View>
                    </View>
                  </View>
                </View>
              ))}
              {this.state.loading && (
                <View className="loading">
                  <AtActivityIndicator
                    content="加载中..."
                    isOpened={this.state.loading}
                    mode="center"
                    color="#fff"
                  />
                </View>
              )}
            </View>
          </ScrollView>
        </View>
      </View>
    );
  }
}