|
@@ -1,7 +1,6 @@
|
|
|
-import { useMemo, useRef, useState } from "react";
|
|
|
-import { Image, View, Text } from "@tarojs/components";
|
|
|
+import { memo, useMemo, useRef, useState } from "react";
|
|
|
+import { Image, View, Text, Video } from "@tarojs/components";
|
|
|
import classNames from "classnames";
|
|
|
-import { AtIcon } from "taro-ui";
|
|
|
import Taro, {
|
|
|
FC,
|
|
|
nextTick,
|
|
@@ -11,7 +10,7 @@ import Taro, {
|
|
|
} from "@tarojs/taro";
|
|
|
import { Menu } from "./components/Menu";
|
|
|
import BtmBgImg from "../../images/img_map2@2x-min.png";
|
|
|
-import BgImg from "../../images/img_map@2x-min.png";
|
|
|
+import BgImg from "../../images/img_map@2x-min.jpg";
|
|
|
import LeftIcon from "../../images/icon_blue_left@2x-min.png";
|
|
|
import RightIcon from "../../images/icon_blue_right@2x-min.png";
|
|
|
import ButtonImg from "../../images/btn_start@2x-min.png";
|
|
@@ -19,8 +18,29 @@ import { Swiper, SwiperMethods } from "./components/Swiper";
|
|
|
import { SearchLayout } from "./components/SearchLayout";
|
|
|
import { SightDetailLayout } from "./components/SightDetailLayout";
|
|
|
import { SIGHT_LIST } from "./constants";
|
|
|
+import { getSignListApi } from "../../api";
|
|
|
+import { getSceneUrl } from "../../utils";
|
|
|
import "./index.scss";
|
|
|
|
|
|
+const PointIcon = memo(() => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {SIGHT_LIST.map((item) => (
|
|
|
+ <View
|
|
|
+ key={item.id}
|
|
|
+ className={classNames("home__point-icon", [
|
|
|
+ Math.round(Math.random()) ? "" : "red",
|
|
|
+ ])}
|
|
|
+ style={{
|
|
|
+ top: pxTransform(item.pos.y),
|
|
|
+ left: pxTransform(item.pos.x),
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </>
|
|
|
+ );
|
|
|
+});
|
|
|
+
|
|
|
const HomePage: FC = () => {
|
|
|
const [loaded, setLoaded] = useState(false);
|
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
@@ -42,9 +62,14 @@ const HomePage: FC = () => {
|
|
|
setShowSearch(true);
|
|
|
};
|
|
|
|
|
|
- const handleDetail = () => {
|
|
|
+ const handleDetail = async () => {
|
|
|
swiperRef.current?.setIsRunning(false);
|
|
|
- setItem(SIGHT_LIST.find((i) => i.id === curSwiperItem));
|
|
|
+ const target = SIGHT_LIST.find((i) => i.id === curSwiperItem);
|
|
|
+ const data = await getSignListApi({
|
|
|
+ searchKey: target?.title,
|
|
|
+ type: "scene",
|
|
|
+ });
|
|
|
+ setItem(data[0] || target);
|
|
|
setShowSight(true);
|
|
|
};
|
|
|
|
|
@@ -73,112 +98,129 @@ const HomePage: FC = () => {
|
|
|
});
|
|
|
|
|
|
return (
|
|
|
- <View className="home-container">
|
|
|
- <View className={classNames("ld-page", { hide: loaded })}>
|
|
|
+ <>
|
|
|
+ <View className="home-container">
|
|
|
+ {/* <View className={classNames("ld-page", { hide: loaded })}>
|
|
|
<AtIcon
|
|
|
className="ld-page__icon"
|
|
|
value="loading"
|
|
|
color="#589498"
|
|
|
size={40}
|
|
|
/>
|
|
|
- </View>
|
|
|
+ </View> */}
|
|
|
|
|
|
- <View className="home">
|
|
|
- <View
|
|
|
- className="home__menu-btn"
|
|
|
- onClick={() => {
|
|
|
- setShowMenu(true);
|
|
|
- swiperRef.current?.setIsRunning(false);
|
|
|
- }}
|
|
|
- />
|
|
|
-
|
|
|
- {item && (
|
|
|
+ <View className="home">
|
|
|
<View
|
|
|
- className="home__point"
|
|
|
- style={{
|
|
|
- top: pxTransform(item.pos.y),
|
|
|
- left: pxTransform(item.pos.x),
|
|
|
+ className="home__menu-btn"
|
|
|
+ onClick={() => {
|
|
|
+ setShowMenu(true);
|
|
|
+ swiperRef.current?.setIsRunning(false);
|
|
|
}}
|
|
|
/>
|
|
|
- )}
|
|
|
|
|
|
- <Menu show={showMenu} onClose={closeMenu} openSearch={openSearch} />
|
|
|
+ {realItem && (
|
|
|
+ <View
|
|
|
+ className="home__point"
|
|
|
+ style={{
|
|
|
+ top: pxTransform(realItem.pos.y),
|
|
|
+ left: pxTransform(realItem.pos.x),
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+
|
|
|
+ <PointIcon />
|
|
|
|
|
|
- <View className="home-main">
|
|
|
- <Swiper
|
|
|
- ref={swiperRef}
|
|
|
- curSwiperItem={curSwiperItem}
|
|
|
- setCurSwiperItem={setCurSwiperItem}
|
|
|
- />
|
|
|
+ <Menu show={showMenu} onClose={closeMenu} openSearch={openSearch} />
|
|
|
|
|
|
- <View className="home-toggle">
|
|
|
- <Image
|
|
|
- className="home-toggle__icon"
|
|
|
- src={LeftIcon}
|
|
|
- onClick={() => swiperRef.current?.toPrev()}
|
|
|
+ <View className="home-main">
|
|
|
+ <Swiper
|
|
|
+ ref={swiperRef}
|
|
|
+ curSwiperItem={curSwiperItem}
|
|
|
+ setCurSwiperItem={setCurSwiperItem}
|
|
|
/>
|
|
|
|
|
|
- <View className="home-toggle-inner">
|
|
|
- <View className="home-toggle-label">
|
|
|
- <Text className="home-toggle-label__title limit-line">
|
|
|
- {realItem?.title}
|
|
|
- </Text>
|
|
|
- <Text>{realItem?.address}</Text>
|
|
|
+ <View className="home-toggle">
|
|
|
+ <Image
|
|
|
+ className="home-toggle__icon"
|
|
|
+ src={LeftIcon}
|
|
|
+ onClick={() => swiperRef.current?.toPrev()}
|
|
|
+ />
|
|
|
+
|
|
|
+ <View className="home-toggle-inner">
|
|
|
+ <View className="home-toggle-label">
|
|
|
+ <Text className="home-toggle-label__title limit-line">
|
|
|
+ {realItem?.title}
|
|
|
+ </Text>
|
|
|
+ <Text>{realItem?.address}</Text>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View className="home-toggle__detail" onClick={handleDetail}>
|
|
|
+ 遗存详情
|
|
|
+ </View>
|
|
|
</View>
|
|
|
|
|
|
- <View className="home-toggle__detail" onClick={handleDetail}>
|
|
|
- 遗存详情
|
|
|
- </View>
|
|
|
+ <Image
|
|
|
+ className="home-toggle__icon"
|
|
|
+ src={RightIcon}
|
|
|
+ onClick={() => swiperRef.current?.toNext()}
|
|
|
+ />
|
|
|
</View>
|
|
|
|
|
|
- <Image
|
|
|
- className="home-toggle__icon"
|
|
|
- src={RightIcon}
|
|
|
- onClick={() => swiperRef.current?.toNext()}
|
|
|
- />
|
|
|
+ <View className="home-main__btn">
|
|
|
+ <Image
|
|
|
+ mode="widthFix"
|
|
|
+ className="home-main__btn__btn"
|
|
|
+ src={ButtonImg}
|
|
|
+ onClick={() => {
|
|
|
+ Taro.navigateTo({
|
|
|
+ url:
|
|
|
+ "/subModule/pages/iframe/index?url=" +
|
|
|
+ encodeURIComponent(getSceneUrl()),
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
</View>
|
|
|
|
|
|
- <View className="home-main__btn">
|
|
|
- <Image
|
|
|
- mode="widthFix"
|
|
|
- className="home-main__btn__btn"
|
|
|
- src={ButtonImg}
|
|
|
- onClick={() => {
|
|
|
- Taro.navigateTo({
|
|
|
- url: "/subModule/pages/iframe/index?url=https://houseoss.4dkankan.com/project/wx-csbwg-public/web/index.html",
|
|
|
- });
|
|
|
- }}
|
|
|
- />
|
|
|
- </View>
|
|
|
+ <Image
|
|
|
+ className="home__bg"
|
|
|
+ src={BgImg}
|
|
|
+ mode="widthFix"
|
|
|
+ // onLoad={handleLoaded}
|
|
|
+ />
|
|
|
+ <Image className="home__btm-bg" src={BtmBgImg} mode="widthFix" />
|
|
|
</View>
|
|
|
|
|
|
- <Image
|
|
|
- className="home__bg"
|
|
|
- src={BgImg}
|
|
|
- mode="widthFix"
|
|
|
- onLoad={handleLoaded}
|
|
|
+ <SearchLayout
|
|
|
+ isOpened={showSearch}
|
|
|
+ onClose={() => setShowSearch(false)}
|
|
|
+ openDetail={(item) => {
|
|
|
+ swiperRef.current?.setIsRunning(false);
|
|
|
+ setItem(item);
|
|
|
+ setShowSight(true);
|
|
|
+ }}
|
|
|
/>
|
|
|
- <Image className="home__btm-bg" src={BtmBgImg} mode="widthFix" />
|
|
|
+
|
|
|
+ {item && (
|
|
|
+ <SightDetailLayout
|
|
|
+ item={item}
|
|
|
+ isOpened={showSight}
|
|
|
+ onClose={closeDetail}
|
|
|
+ />
|
|
|
+ )}
|
|
|
</View>
|
|
|
|
|
|
- <SearchLayout
|
|
|
- isOpened={showSearch}
|
|
|
- onClose={() => setShowSearch(false)}
|
|
|
- openDetail={(item) => {
|
|
|
- swiperRef.current?.setIsRunning(false);
|
|
|
- setItem(item);
|
|
|
- setShowSight(true);
|
|
|
- }}
|
|
|
+ <Video
|
|
|
+ className={classNames("home-loading", { hide: loaded })}
|
|
|
+ src="https://houseoss.4dkankan.com/project/wx-csbwg-public/videos/loading.mp4"
|
|
|
+ autoplay
|
|
|
+ muted
|
|
|
+ controls={false}
|
|
|
+ objectFit="cover"
|
|
|
+ onEnded={handleLoaded}
|
|
|
+ onError={handleLoaded}
|
|
|
/>
|
|
|
-
|
|
|
- {item && (
|
|
|
- <SightDetailLayout
|
|
|
- item={item}
|
|
|
- isOpened={showSight}
|
|
|
- onClose={closeDetail}
|
|
|
- />
|
|
|
- )}
|
|
|
- </View>
|
|
|
+ </>
|
|
|
);
|
|
|
};
|
|
|
|