miniapp/src/pages/index/index.jsx

import { useState, useEffect, useCallback } from "react";
import { useSelector } from "react-redux";
import Taro from "@tarojs/taro";
import { ScrollView } from "@tarojs/components";
import withLayout from "@/layout";
import ProjectListItem from "@/components/ProjectListItem/index";
// import ShareToCircle from '@/components/ShareToCircle/index'
import FirstScreen from "@/components/FirstScreen";
import { fetch } from "@/utils/request";
import { API_BANNER_LIST, API_INDEX_PROJECTS } from "@/constants/api";
import useParams from "@/utils/hooks/useParams";
import useShare from "@/utils/hooks/useShare";
import useScreen from "@/utils/hooks/useScreen";
import nav2Target from "@/utils/nav2Target";
import ChatIcon from "@/components/ChatIcon/index";
import { ROLE_CODE } from "@/constants/user";
import Location from "./components/Location/index";
import Banner from "./components/Banner/index";
import Menu from "./components/Menu/index";
import HotRecommend from "./components/HotRecommend/index";
import NewestNnews from "./components/NewestNnews/index";
import LiveSale from "./components/LiveSale/index";
import ColumnTitle from "./components/ColumnTitle/index";
import useIndexShareContent from "./useIndexShareContent";

import "./index.scss";

export default withLayout(props => {
  const { city, router, person, trackData, page, mode } = props;
  const isSinglePage = mode === "singlePage";

  // 本页面分享或者海报参数
  const paramsRef = useParams({ person, from: `${page.type}_share` });
  const { miniApp } = useSelector(s => s.user.userInfo);
  const [BannerList, setBannerList] = useState([]);
  const [ProjectList, setProjectList] = useState([]);
  const [ShowHotRecommend, setShowHotRecommend] = useState(false);
  const [ShowNewestNnews, setShowNewestNnews] = useState(false);
  const [ShowLive, setShowLive] = useState(false);
  const shareContent = useIndexShareContent(miniApp, paramsRef, router);

  // 开屏广告
  const [screenInfo, screenVisible, toggleShowScreen] = useScreen(
    city.id,
    person
  );

  // 分享
  useShare(shareContent, trackData);

  const GetBanner = () => {
    // 获取banner
    fetch({
      url: `${API_BANNER_LIST}/banner`,
      method: "get",
      payload: { cityId: city.id, showPosition: "index" }
    }).then(res => {
      setBannerList(res || []);
    });
  };

  const GetProjectList = () => {
    // 获取项目列表
    fetch({
      url: API_INDEX_PROJECTS,
      method: "get",
      payload: { cityId: city.id, pageNum: 1, pageSize: 20 }
    }).then(res => {
      setProjectList(res.records || []);
    });
  };

  const HotRecommendChange = e => {
    setShowHotRecommend(e);
  };

  const NewestNnewsChange = e => {
    setShowNewestNnews(e);
  };

  const LiveChange = e => {
    setShowLive(e);
  };

  const handleScreen = () => {
    toggleShowScreen();
    if (person.personType === ROLE_CODE.BROKER) {
      if (screenInfo.linkPage) {
        const queryStr = screenInfo.pageParam ? screenInfo.pageParam : "";
        Taro.navigateTo({ url: `${screenInfo.linkPage}?${queryStr}` });
      }
    } else {
      nav2Target(screenInfo);
    }
  };

  useEffect(() => {
    if (city?.id) {
      GetBanner();
      GetProjectList();
    }
  }, [city?.id]);

  const toBuilingList = useCallback(
    () => Taro.navigateTo({ url: `/pages/index/buildingList/index` }),
    []
  );

  return (
    <view className="Page Index">
      <ChatIcon />

      {/* 开屏广告 */}
      <FirstScreen
        info={screenInfo}
        visible={screenVisible && !isSinglePage}
        onClick={handleScreen}
        onClose={toggleShowScreen}
      />

      <ScrollView scroll-y>
        <view className="PageContent">
          {/* 定位 */}
          <view className="Location">
            <Location></Location>
          </view>

          {/* banner */}
          <view className="Banner">
            <view>
              <view>
                <Banner List={BannerList}></Banner>
              </view>
            </view>
          </view>

          {/* 菜单 */}
          <view className="Menu">
            <Menu></Menu>
          </view>

          {/* 成交喜报 */}
          {person?.personType === ROLE_CODE.BROKER && (
            <view
              className="NewestNnews"
              style={{ display: ShowNewestNnews ? "block" : "none" }}
            >
              {/* <ColumnTitle Name='热门推荐' Icon='icon-shoucang'></ColumnTitle> */}
              <NewestNnews change={NewestNnewsChange}></NewestNnews>
            </view>
          )}

          {/* 热门推荐 */}
          <view
            className="HotRecommend"
            style={{ display: ShowHotRecommend ? "block" : "none" }}
          >
            <ColumnTitle Name="热门推荐" Icon="icon-shoucang"></ColumnTitle>
            <HotRecommend change={HotRecommendChange}></HotRecommend>
          </view>

          {/* 直播购房 */}
          <view
            className="LiveSale"
            style={{ display: ShowLive ? "block" : "none" }}
          >
            <ColumnTitle
              Name="直播购房"
              Icon="icon-yinpin"
              ShowMore
              ToMore={() => {
                Taro.switchTab({ url: `/pages/video/index` });
              }}
            ></ColumnTitle>
            <LiveSale change={LiveChange}></LiveSale>
          </view>

          {/* 全部项目 */}
          <view className="AllProject">
            <ColumnTitle
              Name="推荐楼盘"
              Icon="icon-aixin"
              ShowMore
              ToMore={toBuilingList}
            ></ColumnTitle>
            <view className="ProjectList">
              {ProjectList.map((item, index) => (
                <ProjectListItem
                  Data={item}
                  key={`ProjectListItem-${index}`}
                ></ProjectListItem>
              ))}
            </view>
          </view>

          {/* bottom */}
          <view className="PageBottom" onClick={toBuilingList}>
            <text>点击查看更多</text>
          </view>
        </view>
      </ScrollView>
    </view>
  );
});