import Taro from "@tarojs/taro"; // 导入 Taro import { Component } from "react"; import { View, Image, Swiper, SwiperItem, Text, Button, } from "@tarojs/components"; import { AtTabs } from "taro-ui"; import { getHomeData, getProductList } from "../../service"; import { getShareContent } from "../../common/share"; import "./index.less"; import Skeleton from "../../components/skeleton"; //骨架屏 import SearchBar from "../../components/index/SearchBar"; //搜索框 import CategoryList from "../../components/index/CategoryList"; //分类列表 import OperationArea from "../../components/index/OperationArea"; //运营区域 import RecommendList from "../../components/index/RecommendList"; //邀请人推荐 import ProductList from "../../components/index/ProductList"; //商品列表 import myStoreIcon from "../../images/index/myStore.png"; import backTopIcon from "../../images/index/back-top.png"; export default class Index extends Component { state = { current: 0, // 添加当前选中的tab索引 homeData: {}, // 首页数据 bannerList: [], productList: [], // 添加商品列表 page: 1, // 添加页码 totalPages: 1, // 添加总页数 loading: false, // 添加加载状态 }; // 获取首页数据 getHomeData = async () => { const res = await getHomeData(); res.tags = res.tags.map((item, index) => ({ title: item.name, })); this.setState({ homeData: res }, () => { this.getProductList(true); }); }; // 修改 tab 切换处理函数 handleClick(value) { 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, }); this.getProductList(true); } else { console.warn("未找到 .product-list-wrap 元素"); } }); } ); } componentDidShow() { this.getHomeData(); //获取首页数据 } // 添加回到顶部方法 handleBackTop = () => { Taro.pageScrollTo({ scrollTop: 0, duration: 300, }); }; // 页面上拉触底 onReachBottom = () => { const { page, totalPages, loading } = this.state; if (page < totalPages && !loading) { this.setState( (prevState) => ({ page: prevState.page + 1 }), () => this.getProductList() ); } }; // 获取商品列表 getProductList = async (isRefresh) => { const { page } = this.state; this.setState({ loading: true }); const res = await getProductList({ tag_name: this.state.homeData.tags[this.state.current].title, page, page_size: 10, }); this.setState((prevState) => ({ productList: isRefresh ? res.goods_list : [...prevState.productList, ...res.goods_list], totalPages: res.total_pages, loading: false, })); }; // 配置分享内容 onShareAppMessage() { return getShareContent(); } render() { const { homeData, productList, loading } = this.state; return ( {/* 搜索框包裹盒子 */} Taro.navigateTo({ url: "/pages/search/index" })} > {/* tab分类 */} {homeData.tags && ( )} {/* 轮播图 */} {homeData.banner && homeData.banner.map((item) => ( ))} {/* 骨架屏 */} 0} /> {/* 分类列表组件 */} {homeData.icon && } {/* 运营区域 */} {homeData.recommend && } {/* 邀请人推荐 */} {/* */} {/* 商品列表 */} {/* 添加浮动按钮 */} Taro.navigateTo({ url: `/pages/memberSub/storeManagement/index?isManager=${true}`, }) } > 我的{"\n"}小店 {/* 分享弹窗 */} ); } }